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

Beware: This post was published 8 years ago and its content may be outdated.

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:

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');

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í:

define('AUTH_KEY', 'auth');
define('SECURE_AUTH_KEY', 'secure_auth');
define('LOGGED_IN_KEY', 'logged');
define('NONCE_KEY', 'nonce');

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)*[email protected]@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:

<ul id="mainmenu">

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

<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>

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

<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>

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:

$colors = array (
1 => 'black',
2 => 'blue',
3 => 'orange',
4 => 'brown',
5 => 'red',
6 => 'purple',
7 => 'green'
);

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:

$colors = array (
6 => 'black',
7 => 'blue',
1 => 'orange',
2 => 'brown',
3 => 'red',
4 => 'purple',
5 => 'green'
);

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.