Ulzurrun de Asanza i Sàez

Tutorial: Crear un portal con WordPress y bbPress – Parte II

WordPress con Portal Colorido

Bien, ayer dejamos el tutorial después de tener instalado, configurado y ajustado WordPress y Portal Colorido, que debería tener un aspecto como el de la imagen de arriba, así que ahora vamos a comenzar a instalar, configurar y ajustar bbPress y Foro Colorido.

Instalar bbPress

Instalar bbPress
Instalar bbPress

Lo primero que haremos será ir a la URL de bbPress, que debería ser: URL a WordPress / foro. En mi caso es http://localhost:8888/demo_portal_con_foro/foro/. Esta página nos redirigirá al instalador de bbPress. El primer paso del instalador comprueba que no existe el archivo bb-config.php y nos propone ir al paso 1 de la instalación. Para continuar hacemos clic en Go to step 1.

Instalar bbPress - Paso 1
Instalar bbPress - Paso 1

En el primer paso nos pedirá los datos de la base de datos. ¿Os acordáis de los que ayer pusimos en WordPress? Pues bien, aquí serán los mismos. Una vez rellenados, tenemos que marcar la opción Show advanced settings, que nos mostrará otros datos, como el prefijo de las tablas. Este prefijo no tiene que coincidir con el de WordPress, deben ser distintos. Puedes dejar bb_, aunque yo he obtado por poner foro_. Una vez hayamos acabado, hacemos clic en Save database configuration file.

Instalar bbPress - Paso 2
Instalar bbPress - Paso 2

Ahora llegamos al punto más complicado de la instalación: la integración de los usuarios y las sesiones. En la página que veremos tendremos que marcar Add integration settings, y una vez marcado, Add cookie integration settings y Add user database integration settings.

Explicaré primero el punto de las cookies.

El primer dato que nos pide es la URL de WordPress. Este dato lo sabemos, al igual que el siguiente, que es la URL al blog, que coincide con la de WordPress. A partir de aquí ya vienen los puntos complicados.

WordPress “auth” cookie key es un valor que está en el archivo wp-config.php, en la raíz de WordPress. Durante este paso modificaremos un par de veces el archivo, así que no lo cerréis antes de acabar.

Nos situaremos en las líneas 45-48, y veremos el siguiente código:

[php]
define(‘AUTH_KEY’, ‘put your unique phrase here’);
define(‘SECURE_AUTH_KEY’, ‘put your unique phrase here’);
define(‘LOGGED_IN_KEY’, ‘put your unique phrase here’);
define(‘NONCE_KEY’, ‘put your unique phrase here’);
[/php]

Bien, estas 4 líneas definen los valores de AUTH_KEY, SECURE_AUTH_KEY, LOGGED_IN_KEY y NONCE_KEY. Yo los voy a modificar sólo para que podáis distinguirlos, pero es muy recomendable cambiarlos por otros. Poned lo que queráis, números al azar, una frase, etc. Mi código al final quedaría así:

[php]
define(‘AUTH_KEY’, ‘auth’);
define(‘SECURE_AUTH_KEY’, ‘secure_auth’);
define(‘LOGGED_IN_KEY’, ‘logged’);
define(‘NONCE_KEY’, ‘nonce’);
[/php]

De momento ya hemos acabado con wp-config.php, pero aún nos quedan unos pocos valores por colocar.

Ahora tenemos que ir a URL a WordPress/wp-admin/options.php. Allí tendremos que buscar en la columna de la izquierda unos nombres y sacar los valores que hay a su derecha.

El primero será auth_salt, que se corresponde con el valor de WordPress “auth” cookie salt. En mi caso es K%p*az)*k!jkKnEOyzqLGX$I@pYrBKF7YkUahn@BV6hRvXk6m$ObQis!nvr#*v(D.

El segundo será logged_in_salt, que se corresponde con el valor de WordPress “logged in” cookie salt. En mi caso es Hi9pyrf6lj(OkMPklgY(rTzHgPwTqBTIG0vMm6Z5jrlBAKq1L4T!hkiXxz*95!OK.

El campo de WordPress “secure auth” cookie salt estará en blanco, no os preocupéis, no pasa nada, bbPress tratará de detectarlo automáticamente.

Instalar bbPress - Integración de Cookies

Instalar bbPress - Integración de usuarios
Instalar bbPress - Integración de usuarios

Bien, ya tenemos la parte de las cookies, ahora toca la integración de usuarios. Este paso es más fácil. Veremos dos campos, el primero tendrá de valor wp_ y el segundo estará en blanco. El primer campo correponde con el prefijo de las tablas de WordPress, en mi caso es portal_.  El segundo es para integración con WordPress MU, pero como usamos WordPress no necesitamos poner nada.

Por último le damos a Save WordPress integration settings. Si todo ha ido bien veremos una página que nos confirma que todo está correcto. En esa página le daremos a Go to step 3.

El último paso nos pedirá un nombre para el foro (yo suelo usar NOMBRE DE WORDPRESS – FORO), la URL del foro (que se rellena automáticamente), el usuario que será el administrador del foro (debes seleccionar tu usuario, aunque seguramente no habrá nadie registrado en WordPress, así que no podás equivocarte) y por último un nombre para el primer foro (puedes poner lo que quieras, ya que se puede cambiar más adelante).

Instalar bbPress - Paso 3

Cuando hayamos acabado le damos a Save site settings. A continuación nos mostrará una página que nos confirmará que todo está correcto. Tendremos que darle a Complete the installation.

Finalmente bbPress nos mostrará una página con la URL a nuestro foro, el usuario que usaremos para administrar el foro y su contraseña.

Instalar bbPress - Completado

Ajustar bbPress

Ya hemos completado la instalación. Ahora es el momento de ajustar el diseño. Vamos a URL de bbPress /bb-admin. Allí vamos a Appearance y activamos el tema Foro Colorido.

Ahora tenemos que modificar el tema Foro Colorido para que tenga el mismo menú que el del portal. Abrimos el archivo header.php que se encuentra en raíz de bbPress/bb-templates/foro-colorido.

Por otro lado, vamos a la URL de WordPress, y miramos el código fuente de la página (en Firefox se hace con: Botón Derecho -> Ver código fuente de la página.

Buscamos una línea que comienza con:

[html]<ul id="mainmenu">[/html]

En esa línea está el menú principal. Cada enlace del menú principal tiene la siguiente estructura:

[html]
<li class="color-COLOR"><a href="URL"><span class="tab-left"><span class="tab-right"><span class="tab-center">NOMBRE</span></span></span></a></li>
[/html]

Tenemos que copiar todos los enlaces que hay hasta llegar al del foro. Por ejemplo, en mi caso tendría que copiar:

[html]
<li class="color-black"><a href="http://localhost:8888/demo_portal_con_foro"><span class="tab-left"><span class="tab-right"><span class="tab-center">Inicio</span></span></span></a></li><li class="color-blue"><a href="http://localhost:8888/demo_portal_con_foro/about/"><span class="tab-left"><span class="tab-right"><span class="tab-center">About</span></span></span></a></li>
[/html]

En vuestros casos debería ser igual a excepción de los enlaces.

Ahora volvemos al archivo header.php, y pegamos este código en la línea 106.

De momento tenemos el mismo menú, sólo que ahora hay un par de enlaces más y el color no es el correcto. Corrijamos esto.

Nos situamos en las lineas 7-15 de header.php, y veremos la siguiente matriz:

[php]
$colors = array (
1 => ‘black’,
2 => ‘blue’,
3 => ‘orange’,
4 => ‘brown’,
5 => ‘red’,
6 => ‘purple’,
7 => ‘green’
);
[/php]

La matriz está ordenada de la siguiente forma: negro – azul – naranja – marrón  – rojo – morado – verde. Al unir los menús, el color del menú que crea Foro Colorido comienzan desde el negro, cuando es más que probable que en el portal el link hacia el foro sea de color naranja. Lo que tenemos que hacer es reordenar los colores.

Por ejemplo, en mi caso el link hacia el foro es naranja, pues tendré que ir moviendo los índices (los números) de la matriz de forma que quede el 1 en el naranja (orange), el 2 en el marrón (brown), etc.

A mí me quedaría así la matriz:

[php]
$colors = array (
6 => ‘black’,
7 => ‘blue’,
1 => ‘orange’,
2 => ‘brown’,
3 => ‘red’,
4 => ‘purple’,
5 => ‘green’
);
[/php]

Y finalmente, el foro quedaría así:

Foro al final

Y… ¡voilá! Ya tenemos listo el foro y el portal, unificados en estilo y usuarios gracias a WordPress, Portal Colorido, bbPress y Foro Colorido.


13 replies on “Tutorial: Crear un portal con WordPress y bbPress – Parte II

  1. Buenas, me gustaría saber como puedo cambiar el color de las pestañas del portal colorido, se cambiar el orden pero o llego a encontrar el metodo para cambiar el color de las pestañas.

    Muchas gracias

    Por cierto me encanta su pagina

  2. Para cambiar el color tienes que modificar el CSS y las imágenes del tema. Actualmente sólo soporta los 7 colores que aparecen en la matriz.

    Puede que en futuras versiones mejore este punto, pero de momento no tengo planeada una nueva versión, a no ser que sea para corregir errores.

    Si tienes más dudas pregunta en el foro de Portal Colorido.

  3. ;-) Excelente tutorial, no lo hubiese conseguido sin tu ayuda, me guardo el blog en mis Feeds para futuras referencias, un saludo (Y) (Y)

  4. Me alegro que te sirviera el tutorial. Realmente no es muy complicado de llevar a cabo, pero hay algunos puntos en los que te puedes atascar y no viene mal leer un tutorial para resolver dudas :-) .

  5. una pequenna pregunta al cambiar el permalink logre que me redireccione al foro pero ahora cuando deseo crear una nueva pagina en wordpress no me redirecciona a esa pagina es decir me pone el menu de la pagina pero el contenido ummm no al igual en la primera pagina que por defecto bien "" about "" pues ahora me le cambio el nombre a ""index"" y ni manera entiendo como regresarlo……

    alguna ayudita profe….??!!

  6. @robert: No acabo de entender el problema. ¿No puedes cambiar los permalinks o los nombres de las páginas? ¿O es que al intentar acceder a una página ver el contenido de otra diferente? Si es este último caso, prueba a cambiar el theme por el Default, ya que es posible que sea un fallo del theme y no de WordPress.

  7. Hola mira sabes llego a este paso:

    Ahora tenemos que ir a URL a WordPress/wp-admin/options.php. Allí tendremos que buscar en la columna de la izquierda unos nombres y sacar los valores que hay a su derecha.

    El primero será auth_salt, que se corresponde con el valor de WordPress “auth” cookie salt. En mi caso es K%p*az)*k!jkKnEOyzqLGX$I@pYrBKF7YkUahn@BV6hRvXk6m$ObQis!nvr#*v(D.

    El segundo será logged_in_salt, que se corresponde con el valor de WordPress “logged in” cookie salt. En mi caso es Hi9pyrf6lj(OkMPklgY(rTzHgPwTqBTIG0vMm6Z5jrlBAKq1L4T!hkiXxz*95!OK.

    ————————

    Lamentablemente no encuentro esos valores en el archivo :S

  8. Deben de estar en la página, en algún lado, pero estar tienen que estar, sin ellos no se puede integrar bien del todo WordPress y bbPress.

  9. tengo un problema, al tratar de instalar el foro (/foro/bb-admin/install.php) me aparecen varios errores que son los siguientes..
    —————————————————————
    Deprecated: Assigning the return value of new by reference is deprecated in C:xampphtdocsforob-adminincludesclass.bb-install.php on line 1280

    Deprecated: Assigning the return value of new by reference is deprecated in C:xampphtdocsforob-includesfunctions.bb-l10n.php on line 484

    Warning: Cannot modify header information – headers already sent by (output started at C:xampphtdocsforob-adminincludesclass.bb-install.php:1280) in C:xampphtdocsforob-adminincludesclass.bb-install.php on line 390

    Deprecated: Assigning the return value of new by reference is deprecated in C:xampphtdocsforob-includesackpresspomomo.php on line 171

    Warning: Cannot modify header information – headers already sent by (output started at C:xampphtdocsforob-adminincludesclass.bb-install.php:1280) in C:xampphtdocsforob-includesfunctions.bb-core.php on line 1101
    —————————————————————
    esto sin siquiera mover nada, abajo de esto me aparece la opcion de instalar, pero al seguir todos los pasos, no es posible entrar al foro, espero puedan ayudarme :-(

  10. ¿Has modificado algún archivo de bbPress? Si has modificado algún archivo puede que ese sea el problema, aunque viendo lo que dicen los mensajes, yo tiraría más a que estás usando una versión de PHP distinta a la que requiere bbPress.

  11. No, no eh modificado ningun archivo, apenas eh descomprimido y me ah aparecido ese error, bien intentare instalarlo con otro servidor local. Gracias por la respuesta! ;-)

  12. Buen día

    Solo una pregunta, en bbpress tambien tiene la opción de modificar el URL del foro y dejalo en otro URL de los archivos?..

    Asi con wordpress, que puede tener en diferentes URL del archivo y el blog..

    Saludos! :D

    1. No recuerdo ahora mismo si esa opción existe, aunque la rama 2.x de bbPress es un plugin de WordPress, así que no creo que tenga esa opción (al menos la rama 2.x).

Leave a Reply to Miguel Ramíre Cancel reply

Your email address will not be published.

Required fields are marked *

Your avatar