Un tema de WordPress cambia el aspecto de su sitio web.
Al crear o seleccionar un tema, tiene muchas opciones para elegir. Por ejemplo, su tema puede tener un diseño de una o dos columnas. Puede determinar qué dispositivos o acciones del usuario hacen que el contenido sea visible. Puede tener tipografía personalizada y elementos de diseño. Puede mostrar contenido, incluidas imágenes y videos, en cualquier lugar.
Pero los temas de WordPress no se tratan solo de diseño y tipografía. Los mejores temas se ven hermosos y hacen que su contenido sea más atractivo para sus visitantes.
Para asegurarse de que está diseñando para la experiencia del usuario, es posible que deba crear un tema secundario. El tema hijo le permite modificar la apariencia de su sitio de WordPress sin editar los archivos del tema directamente.
Para comprender por qué esto es valioso, es importante comprender primero la relación entre los motivos de padres e hijos.
¿Qué es un tema principal en WordPress?
El tema padre es el tema completo. Esto significa que contiene los archivos de plantilla de WordPress y los recursos necesarios para que se ejecute el tema.
Index.php y style.css (la plantilla principal y los archivos de estilo respectivamente) son los únicos archivos de plantilla necesarios. Sin embargo, la mayoría de los temas también incluyen archivos PHP, archivos de localización, gráficos, JavaScript y/o archivos de texto.
Todos los temas se consideran temas principales, excepto los temas secundarios. Echemos un vistazo más de cerca a qué es un tema secundario y qué beneficios ofrece a los propietarios de sitios de WordPress a continuación.
¿Qué es un tema hijo de WordPress?
Un tema secundario es un tema secundario que hereda el aspecto, la sensación y la funcionalidad del tema principal. Las modificaciones del tema secundario se mantienen separadas de los archivos del tema principal.
Beneficios de crear un tema hijo
En primer lugar, la creación de un tema secundario le permite actualizar el tema principal sin perder ninguna personalización. Sin un tema secundario, tendría que editar los archivos del tema directamente y cada vez que actualice el tema, se perderán sus personalizaciones. Como resultado, se enfrentará a una elección imposible: o no actualice su tema, lo cual es un gran riesgo de seguridad, o perderá sus personalizaciones y el tiempo invertido en crearlas.
Los otros dos beneficios de crear y personalizar un tema hijo están relacionados con el primero. Mantener estas modificaciones en una carpeta separada del tema facilita replicarlas o moverlas de un sitio a otro.
También le permite comenzar a aprender y trabajar en la creación de temas en un entorno de bajo riesgo. Si comienza a personalizar el tema secundario y algo sale mal o no está satisfecho, puede deshabilitar el tema secundario. Esto restaurará el tema principal y el sitio tal como están.
Sin embargo, crear un tema hijo no siempre es la mejor opción. Si está agregando principalmente CSS personalizado, crear un tema secundario es perfecto. Pero si está realizando una gran personalización de las características del tema, podría ser mejor crear un tema principal o elegir la opción que tiene un tema secundario existente que puede editar de inmediato.
Ahora que comprendemos las ventajas y los casos de uso ideales para crear y personalizar un tema secundario, exploremos el proceso a continuación.
Cómo crear un tema hijo en WordPress, paso a paso
Solo se necesitan unos pocos pasos para crear un tema secundario en WordPress. A continuación, repasaremos cada uno de ellos en detalle para que los siga. Esta demostración utilizará el tema predeterminado de WordPress veinte veintiuno por ejemplo.
Paso 1: crea una carpeta de subtemas.
Primero, cree una carpeta donde pueda colocar todos los archivos de plantilla y recursos de subtemas. Para crear esta carpeta, utilizará Administrador de archivos en el panel de control de tu proveedor de alojamiento de WordPress.
Con el Administrador de archivos abierto, haga clic en la carpeta public_html. Luego haga clic en la carpeta wp-content.
Busque la carpeta con la etiqueta «Temas». Luego haga clic + Carpeta desde la barra de herramientas en la parte superior de la pantalla.
Asigne un nombre a esta carpeta con el nombre del tema principal y agregue «-child» al final. Entonces, si está creando un tema secundario Veinte Veintiuno, llamaría a la carpeta «veinte-veintiún-niño».
Esta carpeta será el directorio del subtema.
Paso 2: Cree una hoja de estilo para el tema hijo.
A continuación, debe crear un archivo de hoja de estilo que contendrá todas las reglas y declaraciones de CSS para el tema secundario. Para hacer esto, cree un nuevo archivo de texto y asígnele el nombre «style.css».
Deberá agregar el comentario de encabezado requerido en la parte superior del archivo para que la hoja de estilo realmente funcione. Este comentario proporciona información básica sobre un tema secundario, incluido que es un tema secundario con un tema principal específico.
Realmente solo necesitas dos cosas: el nombre del tema y la plantilla (es decir, el nombre del tema principal). Puede incluir otra información, incluida la descripción, el nombre del autor, la versión y las etiquetas. Esta información adicional es importante si tiene la intención de publicar o vender un tema infantil.
Este es un ejemplo de un comentario de encabezado completo para el tema secundario Twenty Twenty One:
/*Theme Name: Twenty Twenty-One
Theme URI: https://example.com/twenty-twenty-one-child/
Description: Twenty Twenty-One Child Theme
Author: Anna Fitzgerald
Author URI: https://example.com
Template: twentytwentyone
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-column, responsive-layout
Text Domain: twentytwentyonechild
*/
Preste atención a las barras y asteriscos. Esto significa que este código será «comentado» en CSS, por lo que WordPress no intentará ejecutarlo.
Puede agregar su código CSS personalizado más adelante cuando esté listo para comenzar a personalizar su tema secundario. Por ahora, haga clic en Guardar para guardar esta hoja de estilo en su directorio de temas secundarios.
Paso 3: ponga en cola las hojas de estilo de los temas principal y secundario.
Ahora es el momento de colocar los temas principal y secundario en la cola de hojas de estilo. Esto hará dos cosas: primero, el tema secundario heredará el estilo del tema principal, por lo que cuando active el tema secundario, no solo verá un puñado de texto sin estilo.
En segundo lugar, la hoja de estilo del tema secundario se carga antes que la hoja del tema principal, sin anularla. Por lo tanto, cuando agrega CSS personalizado y modifica el tema secundario, estas modificaciones ampliarán o reemplazarán algunos estilos y características del tema principal.
Para hacer esto, cree otro archivo en el directorio del tema secundario. Nómbrelo «functions.php» y agregue el siguiente código:
<?phpadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>
Paso 4: Instala y activa el tema hijo.
El tema secundario se instala de la misma manera que se instala cualquier tema. Tiene dos opciones: puede copiar la carpeta al sitio a través de FTP o crear y cargar un archivo zip desde la carpeta del subtema.
Para cargar un archivo, vaya a su panel de control de WordPress y haga clic en Apariencia > Temas > Subir. Luego seleccione el directorio del tema hijo
Después de cargar, haga clic en Activar.
Buenas noticias: ¡Tu tema hijo ya está disponible! El único problema es que se ve exactamente como el tema principal. Hora de adaptarse.
Paso 5: Personaliza el tema hijo.
Para personalizar un tema secundario, probablemente comenzará agregando CSS al archivo style.css en el directorio de temas secundarios. Esta es una de las formas más fáciles de realizar cambios en un tema. Ya sea que desee personalizar el esquema de color, el relleno, la tipografía u otros elementos de diseño básicos del tema principal, simplemente agregue el código a la hoja de estilo del tema secundario debajo del comentario del encabezado. Este código reemplazará el código en la hoja de estilo del tema principal.
Por otro lado, para modificar la funcionalidad del tema principal, debe agregar funciones al archivo functions.php en el directorio del tema secundario.
Por ejemplo, si desea permitir que los autores y otros usuarios formateen sus publicaciones de varias maneras, puede usar la función add_theme_support (). Para permitirles formatear sus publicaciones como notas, enlaces, galería de imágenes, citas, imagen única o video, agregue lo siguiente a su archivo functions.php en el directorio del tema secundario:
add_theme_support( 'post-formats', array ( 'aside', 'gallery', 'quote', 'image', 'video' ) );
Puede poner tantas funciones como desee entre las etiquetas PHP de apertura y cierre del archivo.
¡Acabado! Tu tema hijo está bien. Pruebe su sitio en el entorno de prueba de WordPress, luego haga efectivos los cambios.
El tema hijo de WordPress no funciona
¿El tema de su hijo no funciona? Aquí hay algunas cosas para comprobar.
1. Revise cuidadosamente el archivo functions.php.
Asegúrese de poner en cola la hoja de estilo del tema secundario en su archivo functions.php. Si no está en cola, el tema secundario no se cargará. Su sitio permanecerá en el tema principal, por lo que se verá bien; el problema es que los cambios realizados en el tema secundario no aparecerán en la interfaz de usuario. Consulte el paso 3 anterior para agregar código de cola a su archivo PHP.
2. Asegúrese de nombrar la hoja «style.css».
Verifique que el nombre CSS sea «style.css» y no «stylesheet.css». Debido a que «style.css» es la convención de nomenclatura estándar de WordPress, usar este nombre de archivo permitirá que su archivo functions.php reconozca automáticamente que esta es su hoja de estilo. Si nombra su hoja de estilo de manera diferente, su archivo functions.php no podrá descargarse ni renderizarse para el usuario final.
3. Borre el caché.
Intente borrar su caché de WordPress; es posible que su navegador muestre una versión anterior de su sitio web. O bien, puede abrir su sitio en una ventana de incógnito para ver los cambios publicados. Si instaló un complemento de caché para mejorar la velocidad de su sitio web, desactívelo mientras trabaja en un tema secundario.
4. ¡Agrega! Importante a tu código CSS.
Si el tema principal aún anula el CSS del tema secundario, ¡agregue! Importante a los elementos que cambió. Esto lo obligará a sobrescribir cualquier cosa escrita en el CSS del tema principal. ¡Añadirías! Importante justo antes del punto y coma, así:
p { background-color: gray !important; }La regla importante se puede usar para ID, clases CSS y elementos HTML estándar, como párrafos, tablas, encabezados y más.
Para obtener más información sobre esta propiedad, consulte Cómo usar Propiedad importante en CSS.
5. Póngase en contacto con el soporte de su tema o consulte el foro de temas.
Si ha seguido todos estos pasos y su CSS aún no se carga, es hora de comunicarse con el equipo de soporte de su tema o consultar el foro de su tema en WordPress.org. Si bien este debería ser su último recurso, tiene la ventaja de proporcionar respuestas relacionadas con su tema. Es posible que el desarrollador de su tema de WordPress haya usado un código personalizado o implementado un sistema de nombres diferente para sus archivos de tema.
Crea tu propio tema de WordPress
Instalar un tema de WordPress es un excelente primer paso para crear su sitio de WordPress. Para personalizarlo, puede usar el editor de Gutenberg incorporado o el creador de temas (si está equipado). Pero para ir aún más lejos y personalizar no solo el diseño sino también la funcionalidad, querrá crear un tema secundario.
Nota del editor: esta publicación se publicó originalmente en octubre de 2020 y se actualizó para que sea completa.
