Cómo crear un tema hijo de WordPress

Por lo general, es casi imposible encontrar el tema perfecto; siempre hay algunas modificaciones que deben hacerse. Entonces, ¿por qué no simplemente tomar un buen tema predeterminado de WordPress, como Twenty Fifteen, y personalizarlo para que se vea y funcione de la manera que desea? Crear un tema hijo te ahorrará mucho tiempo y dolores de cabeza en el futuro (confía en mí).

Puedo hablar por experiencia de primera mano. “Heredé” un sitio de WordPress en el que el desarrollador acababa de desarmar el tema principal, y todavía recuerdo lo frustrante que fue no poder actualizar el tema por temor a que anulara las personalizaciones que le daban al sitio su funcionalidad. No sabía qué era el código original y qué era personalizado, así que ahí estaba, sin posibilidad de actualizaciones.

Sin embargo, la historia tiene un final feliz. Era más nuevo en WordPress en ese momento, por lo que me enseñó desde el principio que alterar un tema principal no era una buena idea. Cuando finalmente se rediseñó el sitio, el primer elemento del negocio fue tomar las personalizaciones y ponerlas en un tema secundario.

Un tema secundario le permite trabajar en un lugar separado sin que su trabajo sea sobrescrito por una futura actualización del tema principal. Técnicamente hablando, cuando crea un tema secundario, crea un conjunto separado de archivos que puede usar para personalizar el tema sin afectar el tema principal original. Si realiza cambios en los archivos de un tema principal, esos cambios se sobrescribirán la próxima vez que actualice el tema. Este es un gran problema porque las actualizaciones pueden incluir modificaciones de funciones, correcciones de errores e importantes medidas de seguridad. Es crucial mantener actualizado el tema principal y usar un tema secundario para cualquier personalización.

Conceptos básicos del tema hijo

Los temas secundarios son temas separados que usted crea y que se basan en un tema principal para su funcionalidad básica. Cuando usa un tema secundario, WordPress sabe cómo hacer referencia a él y buscar cualquier funcionalidad que esté incluida. Esto es excelente porque le permite modificar solo las partes del tema principal que necesita cambiar, lo que lo convierte en una forma muy eficiente de agregar personalizaciones a su sitio de WordPress.

Para profundizar un poco más, así es como funcionan los temas secundarios a nivel de archivo. WordPress verifica si un archivo necesario está incluido en el tema secundario. Si está incluido, se carga ese archivo de tema secundario. Si no hay uno en el tema secundario, se carga el archivo en el tema principal. La única excepción a esto es el archivo functions.php, en el que se cargan las versiones principal y secundaria. Por lo general, hay información crucial en el archivo functions.php. Si WordPress solo cargara la versión del tema secundario (a menos que haya copiado todo), el sitio no funcionaría correctamente. Afortunadamente, WordPress carga ambos archivos, así que no tienes que preocuparte por copiar todo el archivo functions.php en tu tema hijo.

Recuerde, siempre puede desactivar el tema de su hijo y recurrir al original si es necesario. Sin embargo, es una calle de sentido único; no puede desactivar el tema principal y confiar en el tema secundario.

Si está agregando personalizaciones a un tema de WordPress, es mejor usar un tema secundario. ¿Listo para crear el tuyo propio? Ahora repasaremos el proceso, paso a paso.

Crear un tema hijo

Crear uno no es tan complejo como podría parecer. De hecho, técnicamente todo lo que necesita son solo dos archivos: un style.css y functions.php . La mayoría de los child themes tienen más que eso, pero técnicamente hablando, esos son los únicos dos requeridos.

Para crear un tema secundario, debe tener instalado WordPress junto con un tema principal que le gustaría usar.

Crear un directorio de temas

Primero, vaya a su directorio de temas y cree una carpeta para su nuevo tema. Dale un nombre reconocible. Para este ejemplo, nombraré a mi tema child-example para que sea fácil de encontrar.

Hacer la hoja de estilo del tema hijo

El siguiente paso, muy crucial, es crear la hoja de estilo del tema hijo. Cree un archivo style.css . Tenga en cuenta que debe llamarse style.css para que todo funcione correctamente.

A continuación, deberá incluir alguna información sobre su tema.

Copie y pegue esto en el style.css file :

/*
 Theme Name:   Child Example
 Theme URI:    http://example.com/child-exxample/
 Description:  Child Example Twenty Fifteen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain:  twenty-fifteen-child
*/

Esto puede parecer mucho, pero en realidad solo hay dos que son necesarios, que son Theme Name y Template . El Theme Name le dice a WordPress el nombre del tema secundario. La Template le dice a WordPress qué tema debe considerar como tema principal, lo cual es muy importante.

La mayoría de los demás se explican por sí mismos, pero hay un par que podría necesitar un poco más de aclaración. El Text Domain y las Tags pueden ser un poco confusos. El Text Domain se utiliza para traducir cadenas con fines de internacionalización. Esto es único para su tema y debe usarse cada vez que use funciones de traducción. Hay mucha más información en el Codex y se puede encontrar en el tema de I18n para desarrolladores de WordPress. La sección Tags es una lista de etiquetas que son específicas del tema de WordPress. Para este ejemplo, miré el estilo principal de Twenty style.css , tomé las etiquetas de allí y las puse en el tema secundario.

Utilizar estilos principales

¿Recuerdas cómo WordPress busca primero los archivos de temas secundarios? En este momento, el tema secundario funciona, pero no se ve muy pulido porque aún no ha hecho ningún estilo. Si lo activa y recarga la página, se verá un poco desordenada. Probablemente se verá algo como esto:

Arreglemos esto para que vuelva al tema principal y se aplique al menos algo de estilo. Todavía usará su tema secundario para su estilo personalizado, pero primero, hagamos que se muestre el estilo principal.

Para asegurarnos de cargar la hoja de estilo del archivo principal, debemos ponerlo en cola en el tema secundario. Necesitará un archivo functions.php en el tema secundario para colocar el siguiente fragmento.

<?php

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

Hacer una personalización de CSS

Ahora que se muestran los estilos principales, cambiemos algunos de los CSS para la personalización de su tema secundario. Para este ejemplo, diseñar un elemento de fondo para el contenido de la página es una buena manera de ver el tema secundario en acción. Se ha diseñado en blanco en el CSS del tema principal, pero cambiémoslo a azul en el tema secundario. Recuerde, los estilos principales se cargan primero y sus personalizaciones se cargarán después, por lo que eso será lo que veremos.

Si eres un usuario de Chrome, las herramientas para desarrolladores son muy útiles para ver estilos y experimentar en el navegador. Vaya a Ver > Desarrollador > Ver código fuente y seleccione los elementos de la página. Los estilos se mostrarán a la derecha. Inspeccioné el artículo que tenía una clase .hentry con un fondo blanco. Pegué un valor hexadecimal para probarlo primero en el navegador.

Para realizar este cambio, abra el archivo CSS en el tema secundario y agregue la información CSS.

Como puede ver, los cambios de estilo se pueden realizar fácilmente en el tema secundario.

Modificar la funcionalidad de su tema hijo

Ajustar el estilo es bastante fácil, pero ¿qué pasa con otras cosas como el encabezado, el pie de página, la barra lateral, etc.? Digamos que hay algunas modificaciones que hacer en el pie de página. Copie y pegue el pie de página del tema principal en el tema secundario. El archivo footer.php puede abrirse en el editor de texto de su elección y modificarse. Decidí eliminar la línea "Proudly powered by WordPress", así que eliminé esto del archivo en mi tema secundario. Este es ahora el archivo que WordPress cargará primero, por lo que esa línea de texto no se mostrará.

Crear un tema hijo es un buen hábito al momento de crear temas de WordPress. Con solo unos simples pasos, son fáciles de crear y mantener. Mantener las personalizaciones separadas de los temas principales es bueno tanto para fines de organización como para mantener todo actualizado, lo que ahorrará muchos dolores de cabeza en el futuro.