Guía rápida para crear y personalizar un tema secundario de WordPress

Si bien el desarrollo de temas puede parecer abrumador, los temas secundarios son sencillos de configurar y es una alternativa mucho más rápida que desarrollar un tema desde cero.

En esta publicación, compartiré más detalles sobre los temas secundarios de WordPress y cómo crear y personalizar uno de manera eficiente.

¿Qué es un tema infantil de WordPress?

Antes de definir qué es un tema secundario de WordPress, es importante comprender primero qué es un tema de WordPress y de dónde extrae WordPress la información para mostrar el diseño de un sitio web.

Según el Codex de WordPress, “Un tema es una colección de archivos que funcionan juntos para producir una interfaz gráfica con un diseño unificador subyacente para un weblog. Un tema modifica la forma en que se muestran los datos sin alterar el software subyacente”.

Si su sitio de WordPress tiene un solo tema activo con todas las plantillas y activos necesarios, no hay distinción entre el tema principal o el secundario.

Sin embargo, si decide que realmente le gusta un tema que encontró, pero desea realizar algunos cambios sin crear un tema desde cero, puede crear un tema secundario de WordPress para este propósito.

Un tema hijo hereda la estructura del tema original y solo incluye las personalizaciones que le haces. En lugar de reemplazar un tema por completo, el tema secundario modifica o agrega archivos al tema existente.

De esa manera, cuando su sitio se carga para un visitante, se carga el diseño del tema original, pero con los cambios que le hizo.

Los niños en la vida real, y no en el mundo en línea, dependen de al menos una figura paterna para vivir. Del mismo modo, un tema secundario depende del tema original para funcionar.

Es por eso que cuando usa un tema secundario, el tema original se denomina tema principal.

A diferencia de un bebé humano, un tema infantil no es un tema completo en sí mismo. Eso significa que el tema principal debe instalarse antes de poder activar su tema secundario correspondiente.

El tema del niño perfecto y cuándo usarlo

Cualquier tema puede ser un tema principal, aunque algunos se adaptan mejor a él.

Elija un tema que le guste que podría usar algunas pequeñas personalizaciones estructurales para satisfacer sus necesidades, pero que no viene con las opciones para hacer las personalizaciones que desea de inmediato.

Por ejemplo, el tema Perfect Magazine se usó como tema principal para crear el tema secundario Newsliner no solo para cambiar algunos colores en el diseño, sino también para eliminar un banner publicitario y agregar un carrusel de publicaciones de blog en la parte superior de la página.

Este tipo de personalizaciones no son posibles en las opciones de Perfect Magazine, pero no son lo suficientemente grandes en escala como para garantizar la creación de un tema completamente nuevo desde cero.

¿Por qué crear un tema hijo?

Los temas de WordPress Child son importantes para guardar y preservar todo el trabajo que ha realizado en un sitio. Si modifica un tema directamente y luego lo actualiza con una nueva versión de software, se perderán todas las modificaciones y personalizaciones.

Es por eso que muchos propietarios de sitios web optan por no actualizar su tema principal en absoluto. Sin embargo, es un grave problema de seguridad, ya que el 54 % de los sitios de WordPress pirateados tenían un software desactualizado, que los piratas informáticos y el malware a menudo ejecutan escaneos para encontrar.

Además, las actualizaciones a menudo contienen correcciones de vulnerabilidades, por lo que ignorar una actualización significa dejar su sitio completamente abierto a ataques.

Alternativamente, puede crear un tema secundario para evitar estas trampas.

Como se mencionó anteriormente, el uso de un tema secundario de WordPress también puede acelerar el desarrollo.

Con los sistemas de archivos y los elementos esenciales de un sitio ya configurados, no tiene que empezar desde cero. Puede construir sobre un tema preexistente y aprovechar la funcionalidad mientras personaliza su diseño.

Primeros pasos con un tema hijo de WordPress

Hay algunos elementos clave que necesita para crear un tema hijo:

1. Una carpeta de directorio de temas
2. Un archivo estilo.css
3. Un archivo functions.php

Si bien el único archivo requerido en un tema secundario es style.css , el archivo functions.php es necesario para poner en cola la hoja de estilo del tema principal correctamente.

Por lo tanto, se recomienda encarecidamente que cree un archivo functions.php en su tema secundario para evitar errores.

Crear un tema hijo de WordPress

Al crear su tema secundario de WordPress, hay cuatro pasos, que se describen en detalle a continuación: crear una carpeta de directorio, hacer una hoja de estilo, poner en cola las hojas de estilo nuevas y principales, y activar el tema.

Creación de una carpeta de directorio

Todos los temas se encuentran en la carpeta /wp-content/themes/ de su instalación de WordPress.

Navegue a ese directorio y cree una nueva carpeta que servirá como la carpeta del tema secundario.

Por lo general, el tema se vuelve a titular usando el nombre del tema principal, pero agregando -child al final.

Por ejemplo, las dos rutas de archivo serán /wp-content/themes/yourtheme/ y /wp-content/themes/yourtheme-child/ .

Tampoco debería haber espacios en el nombre del tema secundario.

Si bien estas no son reglas estrictas y rápidas para nombrar su carpeta, especialmente si no está distribuyendo el tema para uso público, es una práctica común de desarrollo de WordPress, ya que ayuda con la organización.

Creación de una hoja de estilo

Los temas secundarios de WordPress a menudo se usan para ediciones de diseño bastante extensas, por lo que es necesario un archivo style.css por separado.

El archivo contendrá todas las reglas y declaraciones CSS que afectan el aspecto de su tema.

Cree un archivo style.css en la raíz de su nueva carpeta de tema secundario. Luego, ingrese este encabezado en la parte superior de la página:

 /*
 Nombre del tema: Veinte diecisiete niños
 URI del tema: http://example.com/twenty-seventeen-child/
 Descripción: Veinte diecisiete tema infantil
 Autor: Jane Doe
 Autor URI: http://example.com
 Plantilla: veintisiete
 Versión: 1.0.0
 Licencia: GNU General Public License v2 o posterior
 URI de licencia: http://www.gnu.org/licenses/gpl-2.0.html
 Etiquetas: claro, oscuro, dos columnas, barra lateral derecha, diseño receptivo, listo para accesibilidad
 Dominio de texto: veinte y diecisiete niños
*/

El encabezado es una parte vital del archivo, ya que le dice a WordPress detalles básicos sobre el tema. También indica que es un tema secundario con un elemento principal en particular, como lo indica la parte de la Plantilla .

Los únicos requisitos para el encabezado son el Nombre del tema y la Plantilla . Pero, es una buena práctica completar el resto.

Asegúrese de cambiar también todos los detalles requeridos para que sean precisos. Por ejemplo, el autor y el URI del autor, así como las referencias a Twenty Seventeen si el tema principal que está utilizando es diferente.

La sección Etiquetas se relaciona con el Directorio de temas de WordPress. Si desea cargar su tema allí, asegúrese de elegir etiquetas que pertenezcan a su tema.

Poner en cola las hojas de estilo de tema padre e hijo

A continuación, es importante asegurarse de que la hoja de estilo de cada tema se cargue correctamente en un proceso llamado puesta en cola.

Poner en cola significa agregar un elemento o una lista de elementos a una cola para el procesamiento de datos. En este caso, la cola son los archivos que su sitio web necesita cargar cuando un navegador los solicita.

Si tuviera que omitir la puesta en cola, su sitio solo se extraería de la hoja de estilo de su tema secundario y no usaría ninguno de los estilos que proporciona el tema principal.

También puede ser importante tener en cuenta que es posible poner en cola el archivo principal style.css utilizando el método @import . Sin embargo, esto ya no se recomienda debido a problemas de rendimiento.

Para poner en cola las hojas de estilo, debe crear un archivo functions.php si aún no lo ha hecho.

Esto se puede hacer creando un nuevo archivo y nombrándolo functions.php . Luego. coloque este código en la parte superior:

 <?php

Asegúrese de no incluir ningún espacio antes de la línea anterior o se producirá un error.

En el archivo functions.php , agrega el siguiente código para asegurarte de que tu sitio esté cargando correctamente tanto el archivo principal style.css como el estilo del tema secundario en el orden correcto:

 add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

function my_theme_enqueue_styles() {

    $padre_; // Este es el estilo 'twentyseventeen' para el tema Twenty Seventeen.

    wp_enqueue_style ($parent_style, get_template_directory_uri() . '/style.css');
    wp_enqueue_style( 'estilo hijo',
        get_stylesheet_directory_uri() . '/estilo.css',
        matriz ($ estilo_padre),
        wp_get_theme()->get('Versión')
    );
}
?>

Asegúrese de cambiar el estilo principal que se almacena en la variable $parent-style para incluir el nombre de su tema.

Según lo recomendado por el Codex de WordPress, este código se asegurará de que el archivo principal style.css se cargue como una dependencia, lo que significa que es necesario para que se cargue el archivo style.css del tema secundario.

Activando el tema hijo

Una vez que haya guardado todos sus archivos, vaya a Apariencia > Temas para encontrar su tema secundario, luego haga clic en el botón Activar.

No necesitará activar también su tema principal. Aunque, aún debe estar instalado y permanecer en la carpeta /wp-content/themes/ .

El texto del encabezado en el archivo style.css de su tema secundario conectará los dos y aclarará la relación para su instalación de WordPress.

Una vez que haya activado su tema secundario, es posible que deba volver a guardar su menú en Apariencia > Menús , así como algún otro contenido en Opciones de tema del Personalizador si experimenta problemas con su diseño.

Consejos rápidos de personalización

Antes de comenzar con el proceso de desarrollo, a continuación se incluyen algunos consejos para personalizar su tema secundario de WordPress.

Imagen del tema

En la página Apariencia > Temas , debe incluir su propia imagen para el tema.

Si desea insertar algo en lugar de reemplazar la casilla de verificación, puede cargar un archivo de imagen PNG de 880 x 660 llamado captura de pantalla.png .

Coloque la imagen en la raíz de la carpeta del tema de su hijo. De esa manera, la instalación de WordPress sabrá usarlo como imagen para su tema.

Anulación de archivos de temas principales

Si desea insertar nuevos archivos en su tema secundario de WordPress para anular los componentes antiguos, copie el archivo principal en el tema secundario, que luego puede personalizar.

Al cargar el sitio, WordPress verificará si el tema secundario tiene algún archivo que corresponda al tema principal. Si se encuentra alguno, anulará el archivo del tema principal original.

No se necesita un pueblo

La creación de temas secundarios de WordPress no tiene por qué ser tan complicada como puede parecer. Siga los pasos anteriores y tenga la seguridad de que sus ediciones permanecerán intactas. También ayudará a que su sitio sea un poco más seguro.

¿Qué tipo de tema infantil quieres hacer? ¿Pudiste crearlo con éxito? ¿Tuviste problemas en el proceso? Siéntase libre de compartir su experiencia en los comentarios a continuación.