Su guía definitiva para trabajar con temas secundarios de WordPress

Publicado: 2016-01-05

Si desea personalizar los temas que nos compra en HeroThemes, tal vez si está creando sitios web para usted o sus clientes utilizando un diseño a medida, entonces necesitará aprovechar el poder de los temas secundarios de WordPress.

En su forma más básica, el uso de temas secundarios lo hará más eficiente: mantener el código que usa para cada proyecto en su propio tema principal, o usar un tema principal estándar como uno de los nuestros, significará que se está adhiriendo a Principios DRY (Do Not Repeat Yourself).

Pero yendo más allá, puede usar temas secundarios y principales para crear redes de sitios con una base de código central, puede crear temas personalizados basados ​​en marcos de temas de terceros, o incluso puede crear su propio tema principal avanzado para usarlo como un marco de tema . En este artículo, daré una descripción general rápida de los elementos esenciales de los temas secundarios y luego le mostraré algunas técnicas más avanzadas. Aprenderás:

  • cómo usar un tema secundario para adaptar un tema principal de terceros o un marco de tema a las necesidades de su proyecto
  • cómo WordPress prioriza los archivos de plantilla en cada uno de los temas principales y secundarios
  • cómo anular las funciones del tema principal en el archivo de funciones del tema secundario.

Comprender los temas de padres e hijos

En teoría, cualquier tema puede actuar como tema principal, aunque algunos están mejor diseñados para esta función (¡incluido el nuestro!). Si está usando uno de nuestros temas y quiere modificarlo para su propio proyecto, es mucho mejor usar un tema secundario para hacer esto que piratear el tema principal, lo que significa que perderá todos sus cambios cuando actualice el tema a futuras versiones. Para crear un tema secundario, simplemente cree un nuevo tema y agregue lo siguiente al comienzo de su hoja de estilo. Mi ejemplo a continuación usa el tema HelpGuru de HeroThemes como principal, pero podría usar cualquier tema, incluido otro producto de HeroTheme como KnowAll.

¡Comience a construir su base de conocimiento hoy!

Nuestro tema KnowAll incluye un tema secundario para ayudarlo a personalizar su sitio de base de conocimiento

Obtener el tema
/*
Theme Name: My child theme
Theme URI: URL of the theme or site it's used for
Description: Description of what the theme is for and its main features.
Author: Your name
Template: helpguru
Version: 1.0
*/
@import url("../helpguru/css/style.css");

Las líneas importantes son estas dos:

Template: helpguru
@import url("../helpguru/css/style.css");

La primera sección especifica la plantilla, que le dice a WordPress que se trata de un tema secundario y que su tema principal es el tema HelpGuru. Tenga en cuenta que aquí usa el nombre de la carpeta del tema principal y no el nombre del tema (así que arriba he usado 'helpguru', no 'HelpGuru').

HelpGuru se puede transformar usando un tema hijo
HelpGuru se puede transformar usando un tema hijo

La segunda sección importa la hoja de estilo del tema principal, lo que significa que todo el estilo del tema principal se activará en su tema secundario. Luego agrega su propio estilo debajo de esta declaración @import , lo que significa que se usará el estilo de ambos temas, pero cuando exista una declaración en ambas hojas de estilo para el mismo elemento, el CSS del tema secundario prevalecerá debido a la cascada (como el de su tema secundario). el estilo viene después del estilo del tema principal).

Un tema secundario puede consistir en una hoja de estilo y nada más si lo desea, en cuyo caso todo lo que usará es anular parte del estilo del tema principal. Alternativamente, puede agregar archivos de plantilla adicionales y/o un archivo de funciones, en cuyo caso deberá comprender cómo WordPress accede a los archivos de plantilla de sus temas principales y secundarios.

Archivos de plantilla de tema principal y secundario

La forma en que WordPress usa archivos de plantilla en temas principales y secundarios es bastante simple. Cuando se muestra una página determinada (o publicación, o cualquier otro tipo de contenido), WordPress utilizará el archivo de plantilla más relevante del tema principal o secundario de acuerdo con la jerarquía de la plantilla. Si encuentra dos versiones del mismo archivo de plantilla, utilizará la del tema secundario. Esto significa que los archivos de plantilla de su tema secundario anularán los archivos de plantilla del tema principal en dos escenarios:

  • si su tema secundario contiene un archivo de plantilla que está más arriba en la jerarquía que los del tema principal;
  • o si su tema principal y secundario contienen una versión del archivo de plantilla requerido.

Decidir sobre archivos de plantilla de tema principal o secundario

WordPress usará la jerarquía de plantillas para determinar qué archivo de plantilla usar, pero esto interactúa con los archivos que tiene en cada uno de sus temas principales y secundarios. En pocas palabras, WordPress pasa por tres pasos:

  1. Identifica el tipo de contenido que se muestra.
  2. Funciona a través de la jerarquía de plantillas hasta que encuentra un archivo para mostrar ese contenido, ya sea en el tema principal o secundario.
  3. Si el archivo está presente tanto en el tema principal como en el secundario, usa el del tema secundario.

Ilustremos esto con un ejemplo. La siguiente tabla muestra el conjunto de archivos de plantilla en dos temas hipotéticos, uno de los cuales es hijo del otro. Los archivos que he resaltado tienen prioridad.

Cómo selecciona WordPress las plantillas a utilizar
Cómo selecciona WordPress las plantillas a utilizar

Entonces, en el ejemplo anterior, veamos qué archivos de plantilla se usarían para mostrar ciertos tipos de contenido:

  • Las publicaciones individuales para el tipo de publicación personalizada 'producto' se mostrarían usando single-product.php del tema secundario.
  • Las publicaciones individuales para otros tipos de publicaciones (incluidas las publicaciones normales) se mostrarían usando single.php del tema secundario.
  • Las páginas estáticas se mostrarían usando page.php del tema principal.
  • Los listados para la categoría de widgets se mostrarían usando category-widgets.php del tema secundario.
  • Otras listas de categorías se mostrarían usando category.php del tema principal.
  • Otros listados de archivos se mostrarían usando archive.php del tema principal.
  • Los resultados de la búsqueda se mostrarían usando search.php del tema principal.
  • Las páginas 404 se mostrarían usando 404.php del tema principal.
  • Otras páginas sin un archivo de plantilla específico se mostrarían usando index.php del tema secundario.

Llevándolo más lejos: anulación de la funcionalidad del tema principal

Además de anular o complementar el CSS y/o los archivos de plantilla en un tema principal, puede usar un tema secundario para anular la funcionalidad en el tema principal o para agregar una funcionalidad adicional.

¡Advertencia! Si todo lo que está utilizando su tema secundario es para agregar funcionalidad adicional, es mejor que escriba un complemento. Desafortunadamente, los archivos de funciones en los temas principal y secundario no interactúan de la misma manera que las hojas de estilo, de hecho, funcionan de manera opuesta (confuso, lo sé). WordPress llama a las funciones de su tema principal después de las de su tema secundario, lo que significa que pueden anular las funciones del tema secundario. Sé que esto suena un poco molesto: creaste un tema infantil porque eso es lo que quieres en tu sitio, ¿verdad? Bueno, afortunadamente hay maneras de superar esto. El primer método es uno que usa en su tema hijo, y es para establecer la prioridad al adjuntar sus funciones a la acción relevante o ganchos de filtro. El segundo se realiza en el tema principal, y eso es para que sus funciones sean conectables. Llegaré a eso en un momento, pero primero veamos el método en su tema hijo.

Uso de la prioridad para anular la funcionalidad del tema principal

Para activar cada función que agregue en su tema secundario, deberá adjuntarla a un enlace de acción o enlace de filtro usando add_action() o add_filter() . Las add_action() y add_filter() tienen tres parámetros:

  • $tag : el identificador único para la acción o el gancho de filtro
  • $function_to_add – el nombre de su función
  • $priority : la prioridad con la que desea vincular su función (más de lo cual muy pronto)

Con add_filter() puede usar un cuarto parámetro opcional, $arguments , pero eso no es particularmente relevante para los temas secundarios. En la mayoría de los casos, solo se usan los dos primeros parámetros (ambos son obligatorios), pero puede usar el parámetro opcional $priority para anular una función en el tema principal con la función en su tema secundario. Cuanto mayor sea la prioridad, más tarde se cargará: el valor predeterminado es 10 , por lo que si el tema principal no especifica una prioridad, simplemente establezca la prioridad en su tema secundario en un número superior a 10. Veamos cómo funciona esto. obras. Imagine que está trabajando con un elemento secundario del tema HelpGuru y desea anular la funcionalidad del menú y agregar la suya propia. Este tema incluye la función ht_theme_setup() para configurar el tema (incluido el registro de menús, la adición de compatibilidad con imágenes destacadas y más), que se adjunta al gancho de acción after_setup_theme . El código en el archivo de funciones de HelpGuru es el siguiente:

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}
add_action( 'after_setup_theme', 'ht_theme_setup' );

Para anular elementos de la función ht_theme_setup() (pero no todo: lo abordaremos en breve) en su tema secundario, debe escribir una función que reemplace los elementos de la funcionalidad proporcionada por HelpGuru y adjuntarla a la acción after_setup_theme gancho, especificando una prioridad superior a 10:

function my_theme_setup() {
// contents of function
}
add_action( 'after_setup_theme', 'my_theme_setup', 15 );

Cuando WordPress encuentra estas funciones adjuntas al mismo enlace, activará primero la de menor prioridad, es decir, la del tema principal. Luego activará la función de mayor prioridad de su tema secundario, lo que significa que puede anular la función del tema principal. Como mencioné anteriormente, hay otro método, que es una buena práctica escribir en sus temas para que puedan usarse más fácilmente como temas principales, y eso es hacer que sus funciones sean conectables.

Uso de funciones conectables para permitir la anulación de un tema secundario

Como WordPress pasa la función en el tema principal después de las de su tema secundario, puede codificar las funciones de su tema principal para que busquen una función con el mismo nombre en el tema secundario y, si existe, la función del tema principal no es aprobado. Haces esto con una declaración condicional, como la que vimos arriba en HelpGuru:

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}

Si ya no se ha pasado ninguna función con el mismo nombre (por ejemplo, en el tema secundario), se pasará la función del tema principal. Pero si WordPress ya ha encontrado una función con este nombre, ignorará la función conectable (es decir, la del tema principal). Para que esto funcione, simplemente cree funciones en su tema secundario con el mismo nombre que las funciones en su tema principal que desea anular. Entonces, para anular la función ht_theme_setup() en su totalidad, usaría esto en su tema secundario:

function ht_theme_setup() {
// contents of function
}

¡Eso es! Simplemente escriba otra función con el mismo nombre y anulará la del tema principal. Nota: esta técnica solo funcionará si está creando su propio tema principal; no se sienta tentado a editar el archivo de funciones en un tema principal de terceros para que se puedan conectar. Después de todo, ¡el objetivo de crear un tema hijo es que no toques al padre!

Resumen

Como espero haber demostrado, trabajar con temas secundarios puede aumentar su eficiencia y eficacia como desarrollador de WordPress, especialmente si desarrolla sitios personalizados para clientes o para usted mismo. Como mínimo, el uso de un tema secundario de un tema existente, como uno de nuestros HeroThemes, puede hacer que su flujo de trabajo de desarrollo sea más rápido y eficiente, ya que le ahorra tener que hacer el mismo trabajo una y otra vez.

Puede llevar esto más allá utilizando los archivos de plantilla y el archivo de funciones del tema secundario para anular o complementar la funcionalidad del tema principal. Y si realmente desea llevar los temas secundarios al máximo, puede crear su propio tema principal, lo que le brinda un punto de partida rápido para todos los proyectos nuevos y le permite agregar mucho más a sus temas secundarios con menos esfuerzo que comenzar desde cero. .