| Suscribir mediante RSS

Creando themes en bbPress, lo básico

15 noviembre 2011 Diseño web

Foro bbPressLa plataforma de Foros bbPress, desarrollada por los creadores de WordPress, ha dejado de ser un software independiente a partir de su versión 2.0 para convertirse en un plugin. Esto tiene algunas ventajas, instalación como plugin, integración en el mismo theme, compartir usuarios entre el blog y el foro, gestión desde el mismo escritorio, control de SPAM, etc.

Aunque también tiene algunos inconvenientes sobre todo a la hora de personalizar el aspecto del foro. Puesto que bbPress es un plugin, el concepto de theme para bbPress no existe, sólo hay un theme para el blog al que añadimos los archivos de bbPress para integrar el foro.

Pero esto no significa que no podamos aplicar nuestros estilos para que el foro se asemeje lo mejor posible a nuestro Blog. También podemos retocar la información que se muestra en el foro aunque eso requiera un conocimiento mayor del código de bbPress.

Vamos por partes, para que bbPress pueda ser personalizado tanto en diseño como en contenido los archivos del foro deben estar situados en el directorio del theme.

La opción más recomendable es crear un Child Theme o tema hijo y poner los archivos dentro. De esta manera no perderás el trabajo realizado al actualizar el theme. Si el theme lo has creado tú mismo también podría ser interesante y más cómodo instalar los archivos del foro en la carpeta de un tema hijo así no te "llenas" con tantos archivos.

En este ejemplo vamos a crear un Child Theme o tema hijo para el foro.

Se hace de la siguiente manera:

1 - Crea un directorio en el directorio themes con el nombre que desees, podría ser algo como forodetutheme.
2 - Copia todos los archivos (menos functions.php y style.css) del directorio /plugins/bbpress/bbp-themes/bbp-twentyten al directorio del Child Theme creado, en este ejemplo forodetutheme. No se trata de copiar el directorio bbp-twentyten sino los archivos y directorios que hay dentro.

Es decir, los archivos necesarios son todos los que empiezan por archive, page, single y taxonomy, más los directorios bbpress, css y js, y los archivos en ellos. El archivo screenshot.png lo puedes modificar por una imagen adecuada que identifique tu foro.

3 - La hoja de estilos bbpress.css del foro se encuentra en la carpeta css de tu Child theme, copiada en el punto anterior. Puedes añadir todo el contenido de este archivo al archivo style.css de tu Child theme o importar bbpress.css mediante @import url("./css/bbpress.css");

Lo haremos de la segunda forma. Creamos un archivo style.css en el directorio del teme hijo. El contenido de style.css es el siguiente:

/*  
Theme Name: Foro de tutheme
Theme URI: http://www.loquequieras.com
Description: Alguna descripción si lo deseas
Version: 1.0
Author: Tu nombre
Template: tuthemepadre
*/

@import url("../tuthemepadre/style.css"); 
@import url("./css/bbpress.css"); 

4 - Crea un archivo functions.php en tu theme (el Child Theme) y añade la siguiente línea:
<?php add_theme_support( 'bbpress' ); ?>
Con esto le dices a WordPress que tu theme tiene soporte para bbPress o lo que es lo mismo que tu theme usará su propia plantilla para el foro.

Si activas el Child Theme que has creado para el foro observarás que ya no "integra" tan bien como antes cuando usabamos el plugin con su propio "theme". Muchos elementos quedan fuera de su sitio o han perdido los estilos. De eso se encargaba una parte del código que viene con el plugin.

Por tanto, ahora queda personalizar el diseño del foro modificando la hoja de estilos para adaptarlo al aspecto del theme y los archivos PHP según lo que quieras mostrar.

¿Por qué hay que modificar la hoja de estilos? Pues además de lo dicho anteriormente porque el plugin bbPress viene con un Child Theme para el theme Twenty Ten y los estilos corresponden a este theme. Por ejemplo, los contenedores del foro se llaman como los del blog #container y #content, si coinciden con los de tu theme pues no tendrás que hacer gran trabajo.

Normalmente estos estilos se adaptan muy bien a la mayoría de themes pero es posible que tengamos que modificarlos por los que correspondan. Algunos themes llaman a #container como #wrapper o #main todo esto debes tenerlo en cuenta.

Una idea sería crear un Child Theme del theme Twenty Ten siguiendo los pasos anteriores y después modificas el foro como creas oportuno trabajando con los archivos php. De esta forma no tendrías que preocuparte por los estilos CSS. Posteriormente ya podrías crear tu hoja de estilos para que el foro se adapte mejor a otros themes.

En un próximo artículo veremos con más detalle cómo realizar algunos cambios.

Otros artículos de Diseño web

Quién es el responsable de la seguridad de tu WordPress
WordPress en español
Cómo aprender Joomla
Imágenes en WordPress, lo básico
Perfil de usuarios y Opciones personales