Cómo crear un tema secundario de WordPress en 4 sencillos pasos

Publicado: 2015-11-25
Tema hijo de WordPress
Siga @Cloudways

Los temas secundarios, como su nombre indica, es un tema que deriva funcionalidades de un tema principal. En algunos casos, no se recomienda editar su tema de WordPress directamente, como cuando el tema podría actualizarse. Si se aplica una nueva actualización de un tema, es posible que pierda la personalización que ha realizado.

Para mantener las personalizaciones y también seguir recibiendo las actualizaciones de los temas, se recomienda crear un tema secundario de WordPress del tema principal que desea utilizar. La creación de un tema hijo tiene otra ventaja, es decir, su tema padre permanece intacto y libre de cualquier edición.

Los temas secundarios existen en una carpeta diferente a la del tema principal, y el tema secundario depende de las funcionalidades del tema principal, a menos que se modifique. Si está utilizando un tema hijo en su sitio web, el núcleo de WordPress comprobará primero los archivos del tema hijo. Si no se modifica, WordPress ejecutará los archivos del tema principal.

Para comprender completamente el concepto de temas secundarios en WordPress, crearemos un tema secundario del tema predeterminado de WordPress de Twenty Fifteen y realizaremos ciertas modificaciones para obtener la idea detrás de los Temas secundarios.

Para crear un tema hijo de WordPress, seguiremos estos pasos:

  • Cree una carpeta y asígnele el nombre veinticinco hijos. Anexar -child se considera una buena práctica.
  • Cree style.css con la información del tema secundario y el archivo functions.php
  • Importe la plantilla Twenty Fifteen en style.css
  • Poner en cola las hojas de estilo a través de un archivo functions.php
  • Edite archivos de plantilla como single.php

Paso 1: cree una carpeta de temas secundarios y agregue style.css

El primer paso es crear una nueva carpeta para nuestro tema hijo. Llámelo veinticinco niños para recordar fácilmente dónde reside nuestro tema infantil.

Para hacer esto, conéctese a su servidor usando un cliente FTP como FileZilla y navegue a / public_html / wp_content / themes y cree una nueva carpeta llamada twentyfifteen-child

En este nuevo directorio, cree un archivo style.css y pegue la siguiente información en él.

 / *
Nombre del tema: Twenty Fifteen Child
URI del tema: https://wordpress.org/themes/twentyfifteen/
Autor: el equipo de WordPress
URI del autor: https://wordpress.org/
Plantilla: veinticinco
Descripción: Tema infantil de TwentyFifteen
Versión: 1.3
Licencia: Licencia pública general GNU v2 o posterior
URI de licencia: http://www.gnu.org/licenses/gpl-2.0.html
Etiquetas: negro, azul, gris, rosa, morado, blanco, amarillo, oscuro, claro, dos columnas, barra lateral izquierda, diseño fijo, diseño receptivo, listo para accesibilidad, fondo personalizado, colores personalizados, personalizado encabezado, menú personalizado, estilo editor, imágenes destacadas, microformatos, formatos de publicación, soporte de idioma rtl, publicación adhesiva, comentarios enhebrados, listo para traducción
Dominio de texto: veinticinco hijos
Este tema, como WordPress, tiene licencia GPL.
Úselo para hacer algo genial, divertirse y compartir lo que ha aprendido con los demás.
* /

Las líneas más importantes que debe editar son el "Nombre del tema" , "Dominio de texto" y "Plantilla" . Dado que el nombre del tema no puede ser el mismo que Twenty Fifteen, y en la plantilla, le decimos a WordPress que este tema es el tema hijo de Twenty Fifteen, deberíamos llamar a los archivos de las carpetas Twenty Fifteen si no existen en la carpeta veinticinco hijos. carpeta. Además, el dominio de texto debe ser diferente y único de cada tema que tenga con su instalación de WordPress.

Ahora, si navegamos a nuestro Panel de administración de WordPress → Apariencia → Tema , veremos que ha aparecido Twenty Fifteen Child. Podemos aplicar ese tema en nuestro sitio.

Como style.css está presente en el directorio de temas secundarios. WordPress cargará ese style.css y no el style.css del tema principal. Todos los demás archivos como index.php , page.php , functions.php se cargarán desde el tema principal.

Como no tenemos ningún estilo definido en style.css del tema hijo, tendremos que importar los estilos. La mejor práctica que se recomienda en el códice de WordPress es poner en cola las hojas de estilo utilizando el archivo functions.php.

Paso 2: Poner en cola las hojas de estilo usando functions.php

A diferencia de otros archivos, la teoría detrás del archivo functions.php en los temas secundarios de WordPress es: WordPress primero carga functions.php del tema secundario e inicializa las funciones en él, luego también ejecutará functions.php del tema principal.

Como mencioné antes, la mejor manera de importar hojas de estilo es ponerlas en cola a través del archivo functions.php .

Cree el archivo functions.php en el directorio de su tema secundario y agregue el siguiente código.

 <? php
add_action ('wp_enqueue_scripts', 'enqueue_parent_styles');
function enqueue_parent_styles () {
wp_enqueue_style ('estilo padre', get_template_directory_uri (). '/ style.css');
}

Esto llamará a la hoja de estilo " style.css " del archivo de temas principal. Si desea editar algo en las hojas de estilo, puede agregar esas reglas en el style.css del tema hijo.

Paso 3: Edite el archivo style.css del tema secundario

En los temas secundarios de WordPress, puede editar fácilmente las hojas de estilo definiendo reglas en style.css en la carpeta del tema secundario. Por ejemplo, si queremos cambiar el color del ancla, todo lo que tenemos que hacer es agregar el siguiente código en el style.css de nuestro tema hijo.

 a {
color: # D54E21;
decoración de texto: ninguna;
}

Lo que sucede aquí es que la regla style.css del tema hijo para "a" anula el style.css del tema padre, el resto permanece intacto.

Paso 4: Edite un archivo de plantilla de single.php

Podemos editar fácilmente archivos de plantilla individuales en los temas secundarios. Por ejemplo, si queremos editar single.php, entonces debemos copiar ese archivo de la carpeta del tema principal y pegarlo en la carpeta del tema secundario.

Digamos que queremos eliminar la sección de comentarios de las páginas de publicaciones individuales. Después de copiar el archivo en nuestra carpeta de temas secundarios, podemos editarlo y eliminar la siguiente sección de comentarios.

 // Si los comentarios están abiertos o tenemos al menos un comentario, cargue la plantilla de comentarios.
if (comentarios_open () || get_comments_number ()):
comments_template ();
terminara si;

Lo que sucede aquí es que WordPress verifica la carpeta del tema secundario para single.php , si existe en el directorio, lo cargará desde allí, de lo contrario, volverá a la carpeta del tema principal.

Así, podemos editar cualquier archivo de plantilla individual en nuestros temas. Este enfoque es generalmente bueno porque mantiene nuestro tema principal intacto y actualiza el tema principal sin perder nuestra personalización.