BuddyPress, WordPress y bbPress

Blog

Creando un Child Theme para BuddyPress

Nota: Esta guía es para crear temas para BuddyPress 1.2 beta y superior.

¿Quieres crear tu propio diseño único o tema? Desde luego, no hay mucha genteque le gustará usar el tema por defecto indefinidamente, así que aquí tenéis una guía, paso a paso, de cómo personalizar o crear vuestro tema.

El tema para BuddyPress incluye más plantillas que las estándar para WordPress. Tiene muchas partes que necesitan de su propia plantilla. Estas plantillas, siguen exactamente la misma estructura que un tema de WordPress. Así que si sabes crear temas para WordPress, no deberías tener problemas en crear un tema para BuddyPress.

Child Themes (temas infantiles o hijos)

Antes de comenzar, es importante saber que la creación de un child es el más fácil y la es la forma de asegurarnos la compatibilidad con las futuras versiones de BuddyPress. Es más sencillo que crear un tema desde. De esta forma, simplemente, ampliáis las funcionalidades de un tema existente.

En el caso de BuddyPress deberéis ampliar lo que le falta a vuestro tema. De esta forma, el tema heredará todas las plantillas, incluido JS, AYAX y todo lo que deseéis del CSS. Lo más importante, cuando el tema de BuddyPress sea actualizado, automáticamente, tu tema será actualizado a la última versión de BuddyPress, así de fácil.

Incluso aunque tu plantilla herede todo del tema Default, puedes anular lo que desees. Puedes anular cualquier plantilla, simplemente copiándolo de tema Default al subdirectorio de tu tema creado. También puede añadir tu propio CSS, JS y rasgos de AYAX. En el child theme puedes anular cualquier cosa si quieres personalizar el tema defaut.

A Comenzar a Construir

El tema de BuddyPress, no está localizado en el típico sitio que están los demás temas (wp-content/themes/) Está en el subdirectorio plugins. Esto es correcto, lo importante es que mediante el plugin, WordPress debe saber dónde está el tema. Puedes poner tu tema dentro de la carpeta themes, funcionará correctamente.

La falta BuddyPress el tema no es localizada en el lugar habitual para temas. En realidad es almacenado en la carpeta BuddyPress de enchufe entonces puede ser puesto al día con el de enchufe. Esto es bien aunque, desde WordPress sepa donde es incluso si su propio tema está en/wp-content/themes/.

El primer paso debe crear una nueva carpeta de tema en /wp-content/themes/y darle un nombre único. Para este ejemplo, a nuestro tema le llamaremos “crepusculo”. En esta nueva carpeta, creamos un archivo y lo llaman “style.css”, este será el stylesheet de tu child theme.

Abrimos el archivo “Style.css” y añadimos el código siguiente, substituyendo los detalles necesarios con nuestros propios datos.

/*
Theme Name: BuddyPress crepusculo
Theme URI: http://ejemplo.org/themes/crepusculo/
Description: Tema crepusculo para BuddyPress.
Version: 1.0
Author: Jose Conti
Author URI: http://ejemplo.org/
Template: bp-default
Tags: buddypress, two-column, grey, dark
*/

Atención a la línea “Template: bp-default“ Esto le dice a WordPress que queremos usar el tema Default de BuddyPress (bp-default) como el tema parent y heredar todas las plantillas de este. También fíjate en la línea “Tags:” que incluye “buddypress” Esto dirá a BuddyPress que es un tema para BuddyPress y no te advertirá en la administración que estas usando un tema no compatible.

Guarda el archivo, y en este punto, activa el nuevo tema. Ves a Aspecto y allí lo encontrarás. Deberías ver el tema, si no es así, seguramente estás usando WPMU, así que deberás permitir su uso.

Cuando te dirijas de nuevo a la página inicial de sitio, notarás que no hay ningún diseño en absoluto. Esto es, solamente el texto en una página blanca, posiblemente con una imagen mal colocada. Perfecto, es exactamente lo que queremos. Esto quiere decir que tu nuevo child theme funciona correctamente y hereda todos los archivos de la plantilla. Si te mueves por el sitio verás que funciona, solamente que sin el diseño.

Heredar el CSS

En este punto, hay que tomar una decisión importante, Puedes comenzar a escribir tu propio CSS desde el principio, o puedes heredar el CSS del tema default y trabajar desde ahí. Si vas a hacer un nuevo diseño de tema, podrías querer comenzar con una estructura limpia. Sin embargo, si simplemente, quiere cambiar la combinación de colores, y quizás cambiar la disposición un poco, yo recomendaría heredar el CSS.

Si decides heredar el CSS, tendrás que añadir la línea siguiente a tu archivo "style.css" (bajo las líneas del encabezado):

@import url( ../../plugins/buddypress/bp-themes/bp-default/style.css );

Una vez que has añadido esta línea, trata de recargar tu página inicial otra vez. Deberías ver que el tema tiene diseño. Perfecto, ahora puede comenzar a hacer ajustes de diseño en tu propio tema, añadiendo tu propio estilo CSS bajo los comentarios del encabezado. Si has decidido no heredar el CSS, entonces solamente comienza a añadir tu propio estilo directamente debajo del encabezado.

Anulación y Adición de Archivos de Plantilla

Por omisión, tu child theme heredará todos los archivos de plantilla que le faltan al tema. La mayoría de cambios, pueden ser realizados mediante CSS, pero si realmente tienes la necesidad de cambiar la estructura, entonces deberás anular los archivos de la plantilla parent.

Por ejemplo, queremos anular la plantilla header.php. El primer paso es dirigirse a la carpeta BuddyPress del tema default (por lo general/wp-content/plugins/buddypress/) y luego a la carpeta bp-themes/bp-default. En esta carpeta verás el archivo header.php, copia este archivo y lo pegar directamente en la carpeta de tu child theme (en el mismo lugar que tu archivo style.css). Ahora puedes realizar cualquier revisión HTML que desees y estos se reflejarán en tu child theme. El archivo header.php en tu child theme sustituirán al archivo header del tema parent (bp-default).

Puedes realizar esta acción con cualquier archivo de plantilla en del tema parent. Sin embargo, si quieres anular un archivo de plantilla que está en una subcarpeta, deberás crear esa subcarpeta en tu child theme para que sea reconocido.

Esto es todo lo que debes saber para crear un child theme para BuddyPress. Espero que hayas encontrado esta guía útil, y recordar que si construyes tu temas de este modo, vas a facilitarte las actualizaciones futuras de BuddyPress.

traducción del tutorial de buddypress.org

Share

10 Comentarios

Comentarios

01
Bitacoras.com
1 February, 2010

Información Bitacoras.com…

Valora en Bitacoras.com: Nota: Esta guía es para crear temas para BuddyPress 1.2 beta y superior. ¿Quieres crear tu propio diseño único o tema? Desde luego, no hay mucha genteque le gustará usar el tema por defecto indefinidamente, así que aquí tenéi…..

 
02

[...] vas a instalar BuddyPress por primera vez, el Theme que uses en tu blog, no te servirá. Debes acomodarlo al funcionamiento de [...]

 
03
Fliberty
26 November, 2011

Todo bien en realizar el child theme, sin embargo, cuando hago una llamada con la función require_once(TEMPLATEPATH WP busca dentro de la carpeta de themes de buddypress y no del theme que utilizo, como puedo modificar la función.

 
04
José Conti
26 November, 2011

Hola @Fliberty,

En los Childtheme, es mejor utilizar: locate_template…

Toda la info aquí:

http://codex.wordpress.org/Function_Reference/locate_template

Saludos

 
05
Fliberty
26 November, 2011

Si estaba viendo esa función pero me sale como no definida, gracias por la documentación. Si falta algo te aviso José, y muchas gracias…

 
06
Fliberty
26 November, 2011

Solucionado lo de la carga de archivos. con locate_template, voy a seguir con el diseño.

 
07
Fliberty
26 November, 2011

Ahora el problema será modificar la hoja de estilos… ya que está tomando la hoja de estilos del theme de bp y no del theme child.

 
08
Fliberty
26 November, 2011

José, tengo problemas en la carga de scripts, no encuentro solución… Normalmente cargo los scripts con bloginfo(‘template_directory’) y ruta de script, sin embargo con BP carga el script de la ruta del theme de bp, donde lógicamente el script no se encuentra, espero que me puedas ayudar. Muchas gracias.

 
09
Fliberty
26 November, 2011

No me ha quedado de otra que utilizar la llamada como bloginfo(‘url’) y la ruta completa al script.

 
10
Fliberty
26 November, 2011

José, disculpa que te moleste, estoy adaptanto mi theme para que funcione con BP, el theme que estoy haciendo utiliza ajax para cargar las entradas y otras páginas y tiene definido como contenedor principal el post-container, sin embargo BP tiene como contenedor “content”, he modificado los archivos de la plantilla de BP, cambiando los contedores y todo eso, sin embargo no se visualizan los cambios. Donde debo modificar.

 

Dejar un comentario