Cómo realizar personalizaciones con un tema secundario
Este tutorial no es para todos.
No necesita ser un desarrollador experimentado para seguir, pero sí necesita un interés genuino en aprender más sobre WordPress y cómo funcionan los temas.
Si no tiene miedo de trabajar con un poco de código y ensuciarse las manos con algunos archivos de tema, ¡bienvenido a bordo!
En esta guía, aprenderá cómo personalizar su sitio de WordPress al contenido de su corazón utilizando un tema infantil, pero primero …
Cubramos exactamente por qué debería usar esta cosa extraña llamada "tema hijo".
¿Por qué utilizar un tema hijo?
Repite después de mi:
Juro solemnemente que nunca editaré un archivo de tema.
Los nuevos usuarios de WordPress que están interesados en realizar personalizaciones con código a menudo editan directamente los archivos en su tema. Este es un gran no-no.
¿Por qué?
Una razón: cuando actualice su tema, WordPress anulará su tema existente con la nueva versión del tema.
Entonces, ¿por qué importa eso?
Imagina que estás usando la versión 1.04 del tema Challenger. Movió el menú en el archivo header.php y agregó algo de CSS nuevo a style.css. Luego sale la versión 1.05 y ve la notificación en su tablero.
Cuando actualice a v1.05, los archivos header.php y style.css serán reemplazados por los de la v1.05 de Challenger. No contendrán las mismas ediciones que realizó, por lo que su trabajo se perderá y no habrá forma de recuperarlo. Esto puede ser bastante desalentador si dedica horas a sus personalizaciones.
Sin embargo, si coloca sus personalizaciones en un tema secundario de Challenger, puede actualizar de manera segura a la versión 1.05 sin perder ninguna de sus personalizaciones porque están almacenadas de manera segura en el tema secundario.
Esto se volverá un poco más claro a medida que pasemos a un ejemplo real, así que sigamos adelante y creemos un tema hijo ahora.
Cómo crear un tema hijo
Si bien no voy a explicar en detalle cómo funciona todo el código aquí, estas son las ideas básicas y los fragmentos que necesita para comenzar.
Configuración básica
Comience creando una carpeta vacía en su escritorio. Puede nombrarlo como desee, pero la convención de nomenclatura estándar es usar el nombre del tema en minúsculas seguido de "hijo" y reemplazando los espacios con guiones.
Por ejemplo, un tema hijo para el tema Challenger tendría un nombre de carpeta "Challenger-child". Esta carpeta contendrá todos los archivos del tema hijo.
Solo necesita un archivo para crear un tema hijo técnicamente válido, style.css.
Crea el archivo style.css
Con el editor de código de su elección, cree un nuevo archivo dentro de la carpeta del tema secundario y asígnele el nombre style.css.
El archivo style.css es, por supuesto, donde agregará todo su CSS para personalizar su sitio. Para que WordPress reconozca su tema hijo como un tema válido, debe agregar un encabezado de hoja de estilo como este en la parte superior de style.css:
/*
Theme Name: Challenger Child
Template: challenger
Author: Compete Themes
Version: 1.0
Author URI: https://www.competethemes.com
Description: This is a child theme used to customize the Challenger WordPress theme.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/Puede copiar este encabezado exacto y usarlo para sus propios temas secundarios. Simplemente cambie el nombre del tema con cualquier tema que esté personalizando.
La parte más importante es el valor de "Plantilla", que debe establecerse en el nombre del tema principal. En particular, el nombre utilizado para la carpeta que contiene el tema principal.
Con esto en su lugar, ya puede activar el tema hijo a través del menú Apariencia y usarlo. Sin embargo, ¡su sitio estará completamente sin estilo!
Cuando se activa un tema secundario, WordPress ya no cargará el archivo style.css del tema principal y, en cambio, dependerá de su tema secundario para hacerlo.
Así es como puede cargar ambas hojas de estilo …
Crea el archivo functions.php
En su editor de código, cree un segundo archivo en el tema hijo y asígnele el nombre functions.php.
A continuación, agregue el siguiente código al archivo:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '/style.css', array( $parent_style ), wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );Esta función le dice a WordPress que cargue el archivo style.css del tema principal y luego cargue el archivo style.css del tema secundario. Cargar la hoja de estilo del tema secundario después hace que sea más fácil anular los selectores CSS del tema principal.
Como mencioné anteriormente, no voy a cubrir este código línea por línea, pero puede encontrar una explicación más detallada de este fragmento en el Codex de WordPress.
Personalización con su nuevo tema hijo
¡Eso es todo lo que necesita hacer para crear un tema hijo funcional!
Con la configuración del tema hijo, hay tres formas de personalizar su sitio con él.
Agregar y anular estilos
Puede agregar tanto CSS nuevo como desee en el archivo style.css del tema secundario.
Cuando busque selectores para usar en su CSS, no verifique el archivo style.css del tema principal. Todos nuestros temas usan un “preprocesador CSS", ¡así que ni siquiera miramos ese archivo! En su lugar, siga este proceso más inteligente para encontrar selectores de CSS, y creo que tendrá mucho más éxito personalizando su sitio.
Funciones de anulación
Con un tema principal bien codificado, puede anular cualquiera de las funciones que se encuentran en su archivo functions.php.
Por ejemplo, todas las funciones de Mission News están envueltas con un [function_exists()](https://php.net/manual/en/function.function-exists.php)cheque. Esto significa que puede copiar la función en el archivo functions.php de su tema hijo. Luego, puede realizar las ediciones que desee en la función allí.
Anular plantillas
Una personalización común que requiere un tema hijo es la reordenación de elementos. Por ejemplo, es posible que desee mover el título de la publicación después de la Imagen destacada en lugar de antes.
Puede tomar cualquiera de los archivos de plantilla que se encuentran en el tema principal y colocar una copia en su tema secundario. En su lugar, se cargará la versión del tema hijo. Esto le permite agregar, reordenar y eliminar cualquier elemento que desee en cualquier parte del sitio.
Instalación del tema hijo
Una vez que esté satisfecho con sus ediciones, puede instalar el tema hijo en su sitio.
Los temas secundarios se pueden cargar como los temas normales de WordPress, por lo que solo se necesitan uno o dos minutos para activarlos en su sitio. Siga este tutorial para instalar el tema de su hijo:
Cómo instalar un tema hijo de WordPress
Si eres totalmente nuevo en todo esto, aquí tienes un par de herramientas gratuitas para ayudarte.
Primero, si no tiene un editor de código, consulte Visual Studio Code. Es simple pero flexible. También es totalmente gratuito y se crea una gran cantidad de software profesional con él. Es lo que uso para crear temas aquí en Compete Themes.
En segundo lugar, crear un sitio de WordPress local (sin conexión) es una excelente manera de probar el código sin afectar su sitio web real en vivo. Si bien he usado y recomendado MAMP en el pasado, Local by Flywheel es tan fácil y simple de usar que me encanta. Es lo que uso para el desarrollo de temas y también es gratis.
Tus actualizaciones están seguras
Volviendo al ejemplo anterior …
Al actualizar el tema Challenger (o cualquier tema), se reemplaza todo el directorio "Challenger", lo que no afectará al tema secundario porque ahora tiene su propio directorio en la carpeta "Challenger-child".
Con su tema secundario en su lugar, puede realizar de forma segura las personalizaciones que desee y mantener actualizado su tema principal.
Si es nuevo en CSS y PHP, puede que le lleve algún tiempo obtener sus personalizaciones de la manera que desee, pero con un tema hijo, tiene una base excelente para trabajar. Recuerde seguir estos pasos para encontrar selectores de CSS para usar, y cualquier personalización de estilo que realice será bastante simple.