BuddyPress-ES

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

2 Comentarios

Comentarios

01
Bitacoras.com
1 Febrero, 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 [...]