Cómo crear un tema hijo en WordPress (paso a paso)

¿Alguna vez actualizó su tema de WordPress solo para descubrir que todos los cambios personalizados que había realizado en el tema en sí se habían perdido? Un tema de WordPress Child es la solución para evitar este problema y en este artículo le mostraremos exactamente cómo crear uno.

¡Vámonos!

¿Qué es un tema infantil de WordPress?

Un tema hijo de WordPress no se considera un tema completo como los que se pueden encontrar en el directorio de temas de WordPress. En cambio, depende completamente de otro tema (llamado Tema principal) para poder activarse y funcionar correctamente.

Cuando se activa, hereda toda la funcionalidad, las características y el código de su tema principal sin realizar ningún cambio en los archivos del tema principal.

WordPress servirá el código del tema principal, excepto las partes anuladas por el tema secundario, que se servirán desde la carpeta del tema secundario. El resultado de esto significa que cuando se actualiza el tema principal, no se pierden las modificaciones, adiciones, etc. realizadas en el tema secundario.

Creación de un tema secundario (paso a paso)

Antes de continuar, asegúrese de:

• Tiene acceso a los archivos de su sitio web a través de un cliente FTP (como WinSCP o Filezilla)
• Tiene un editor de texto disponible (como el bloc de notas ++).

Para comenzar, activaremos un tema predeterminado que también se denomina Tema principal. En este ejemplo, ese será el tema Twenty Twenty. Si nos dirigimos a la parte frontal de nuestro sitio web, veremos algo como esto:

Ahora vamos a crear y activar un tema secundario 'Twenty Twenty'.

Agregar el directorio

Primero, tenemos que crear un nuevo directorio 'twentytwenty-child' dentro de /wp-content/themes. Tenga en cuenta que la carpeta secundaria puede tener el nombre que desee siempre que no use espacios ni puntuación.

Agregue el archivo style.css

A continuación, debemos crear un archivo style.css y agregar los encabezados de tema apropiados. Antes de continuar, echemos un vistazo al archivo style.css del tema principal.

Veamos dónde se refleja esta información en el área de administración.

Primero, abra los detalles del tema en Apariencia > Temas y mire más de cerca la columna de la derecha.

Si comparamos esto con la hoja de estilo, veremos de dónde se extraen varios elementos de esta información.

Necesitamos comenzar a agregar parte de esta información a nuestra hoja de estilo de tema hijo. La información mínima requerida que debe insertarse como encabezados es el 'Nombre del tema' y la 'Plantilla'.

 /* Theme Name: Twenty Twenty - Child Template: twentytwenty */

• Nombre del tema: el nombre deseado de su tema secundario que se mostrará en el back-end de WordPress.
• Plantilla: debe ser idéntico al nombre del directorio del tema principal. Es el encabezado más importante para el tema secundario, ya que en realidad le dice a WordPress qué tema es el principal y, por lo tanto, define la dependencia. Sin él, su tema hijo no funcionará.

Una vez que se activa el tema hijo, lo que verá en el backend es esto:

Además, puede introducir la siguiente información opcional:

• Versión (versión del tema)
• Requiere al menos (versión mínima requerida de WP para que el tema funcione correctamente)
• Requiere PHP (versión mínima de WP PHP para que el tema funcione correctamente)
• Descripción (detalles relacionados con el tema)
• Etiquetas (etiquetas del tema)
• Autor (nombre del desarrollador del tema)
• etc.

En este punto, si abre el front-end de su sitio web, es posible que esté roto y se vea así:

Esto es completamente normal ya que la hoja de estilo (style.css) a la que ahora hace referencia WordPress ahora es del tema secundario y esta hoja de estilo está vacía, salvo la información que ingresó anteriormente. Puede comenzar su propio estilo desde cero o cargar el estilo del tema principal y comenzar allí. Si desea importar la hoja de estilo del tema principal, puede hacerlo de dos maneras.

Opción uno: Importe la hoja de estilo principal de forma clásica

Todo lo que tiene que hacer es simplemente agregar esta línea al archivo style.css de su tema secundario:

 @import url('../twentytwenty/style.css');

Este comando le dice a WordPress dónde buscar para recuperar el archivo CSS original. Ahora, si actualiza su página de inicio, parece que vuelve a la normalidad. Lo que agregue ahora en el archivo style.css anulará el estilo principal importado. Intente, por ejemplo, agregar un tamaño de fuente diferente para el título h2 "¡Hola mundo!".

Actualice la página y mire el inspector de elementos de las pestañas del desarrollador.

Notará que el valor agregado se cuenta y el valor predeterminado (estilo principal) "tamaño de fuente: 6.4 rem;" ha sido anulado.

Sin embargo, lo que debe tener en cuenta es que el uso de este método tiene una influencia negativa en la velocidad de su sitio, ya que los archivos se cargan uno tras otro y no en paralelo. Más específicamente, el navegador tiene que descargar, analizar y ejecutar el primer archivo antes de ser "informado" de que necesita descargar el segundo archivo.

Por este motivo, ya no se recomienda importar el archivo principal style.css de esta manera.

Opción dos: importar la hoja de estilo principal de la manera correcta

Para importar el archivo principal style.css 'de la manera correcta', primero debemos agregar un archivo functions.php vacío dentro de la carpeta de su tema secundario.

Una vez que haya hecho esto, ábralo con su editor y agregue una etiqueta PHP de apertura (<?php), después de lo cual puede agregar el siguiente código PHP:

 function twentytwenty_scripts() { wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css'); } add_action('wp_enqueue_scripts', twentytwenty_scripts);

Si revisa las herramientas de desarrollo de su navegador ahora, notará que los resultados son los mismos que con la forma 'tradicional' descrita en la opción uno anterior, excepto que ahora es mucho más rápido.

Algunas notas adicionales sobre el código PHP:

• El 'parent-theme-style' es el nombre del identificador y debe ser único
• get_template_directory_uri() . '/style.css' get_template_directory_uri() . '/style.css' le dice a WordPress la ubicación de origen de la ubicación principal de style.css
• get_template_directory_uri() recupera el URI del directorio de plantillas para nuestro tema principal. En nuestro caso, genera 'http://mywebsite.onpressidium.com/wp-content/themes/twentytwenty'

Agregue funcionalidad a su tema hijo

Ahora que ha creado un Child Theme, puede comenzar a agregar algunas funciones adicionales. Primero veamos cómo haría para editar el archivo functions.php en su tema hijo y cómo funciona esto en la práctica.

Child Theme functions.php

A diferencia del archivo style.css , cuando colocas functions.php en el tema secundario, el código functions.php del tema principal seguirá ejecutándose. Cualquier cosa que agregues en functions.php del niño se ejecutará además del contenido de functions.php del padre.

Por ejemplo, veamos cómo podemos cambiar el texto "Leer más" para la vista de publicaciones:

Paso uno: cree una categoría de publicación de prueba:

Paso dos: cree dos nuevas publicaciones en esta categoría. Agreguemos un contenido de ejemplo. En este punto, si visita la página de categoría, verá esto:

En este ejemplo, queremos cambiar el texto 'Continuar leyendo' que se muestra en el botón que carga la publicación completa.

Retrocedamos un momento para comprender cómo se muestra este texto. En WordPress, para modificar una determinada función, usamos filtros.

En este ejemplo, para obtener lo que queremos, tenemos que personalizar el filtro 'the_content_more_link' que se introdujo inicialmente en el archivo central wp-includes/post-template.php en la línea 369 de esta manera:

 $output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink( $_post ) . "#more-{$_post->ID}\" class=\"more-link\">$more_link_text</a>", $more_link_text );

Actualmente, esto está anulado por el tema padre twentytwenty en su archivo function.php (línea 571) por este fragmento de código:

 function twentytwenty_read_more_tag( $html ) { return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<div class="read-more-button-wrap"><a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a></div>', get_the_title( get_the_ID() ) ), $html ); } add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );

Entonces, si desea cambiar el texto 'Continuar leyendo' en el botón, esto puede anularse en functions.php de su tema secundario si agrega esta pieza de código:

 function modify_read_more_link() { return '<a class="more-link" href="' . get_permalink() . '">My Custom Read More text</a>'; } add_filter( 'the_content_more_link', 'modify_read_more_link' );

El gancho ''the_content_more_link'' es común entre esos archivos, en cuyo caso siempre prevalece el gancho del niño.

Luego actualice la página y listo:

Cómo personalizar plantillas PHP

La captura de pantalla anterior muestra el contenido de la plantilla del tema twentytwenty para la vista de categoría de publicación. Entonces, ¿cómo podemos cambiar su diseño o agregar/eliminar información usando el tema hijo?

Así es como puedes hacer esto:

1. Encuentre el archivo php relacionado
2. Copie el archivo apropiado en la carpeta del tema secundario y edítelo.
3. Personalízalo como mejor te parezca

El primer y más común problema aquí es que tenemos que encontrar qué archivo php contiene el resultado que queremos editar. Algo que definitivamente lo ayudará a orientarse en esto es la jerarquía de plantillas de WordPress.

En pocas palabras, los únicos archivos que realmente requiere un tema de WordPress son los archivos index.php y style.css. Los archivos y carpetas adicionales son en realidad archivos llamados desde dentro de index.php . Son los fragmentos de lo que eventualmente verá como una salida del archivo index.php .

Con respecto al tema Twenty Twenty, si vemos su archivo index.php , podemos ver en la línea 79 que, cuando el contenido es una o más publicaciones, se utilizan los archivos php en el directorio template-parts/.

 if ( have_posts() ) { $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

En nuestro caso tendremos que copiar el archivo content.ph p desde dentro de la subcarpeta del tema template-parts.

Además, asegúrese de copiar solo los archivos PHP que planea personalizar. No copie todos los archivos PHP en el tema principal.

NOTA: La estructura de carpetas debe ser la misma en el tema secundario para que los cambios se reflejen en la interfaz.

Entonces, primero creamos la subcarpeta 'template-parts' y colocamos una copia de content.php en ella.

Ahora puede abrir el archivo en su editor y personalizarlo.

Intente cambiar algo trivial al principio para asegurarse de que todo funcione bien, por ejemplo, cambie una clase div y actualice su interfaz para verificar los resultados.

Personalizar la plantilla de categoría de publicación

Ya tenemos dos publicaciones en la categoría 'categoría de prueba'. Ahora puede crear un menú de elementos "'Categoría de publicación"' y vincularlo a la 'categoría de prueba'. Si hace clic en el nuevo elemento del menú, debería ver la página de vista de categoría de publicación.

Ahora puede modificar aún más el archivo content.php y cambiar la vista de categoría de publicación a su propio estilo. Como sugerencia, busque las referencias de los archivos adicionales incluidos como en la línea 23:

 get_template_part( 'template-parts/featured-image' );

Esto significa que el archivo que genera la imagen destacada es template-parts/featured-image.php

Por lo tanto, puede copiar el archivo en el directorio de temas de su hijo y editarlo. ¡Fantástico!

Conclusión

Un tema secundario permite a los usuarios modificar el diseño, el estilo y la funcionalidad del tema principal sin perder la capacidad de actualizar el tema principal. Con frecuencia, los diseñadores web son reacios a actualizar el tema de su sitio web porque saben que, si lo hacen, perderán los cambios realizados directamente en el tema principal. Este es un problema grave, ya que es tan importante mantener su tema actualizado como lo son sus complementos y el núcleo de WordPress. Trabajar con un tema secundario desde el principio elimina este problema y le permite actualizar el tema principal según sea necesario sin temor a sobrescribir todas las ediciones que haya realizado en el tema en su conjunto.