Según nuestra reciente Encuesta de temas de WordPress , el 85 % de nuestros clientes personaliza sus temas y solo el 35 % usa un tema secundario al hacerlo. Esto puede deberse a una falta de comprensión de lo que es un tema secundario oa la dificultad percibida de crear uno. En este tutorial, repasaremos cómo crear y usar temas secundarios y por qué es tan importante usarlos. (Una nota especial solo para clientes de Elegant Themes: si solo está buscando realizar cambios simples de CSS en su tema, puede agregar CSS adicional dentro del personalizador de temas y dentro del generador Divi, en lugar de crear un tema secundario. Para obtener más información en -cambios de profundidad que requieren editar archivos php, se debe usar un tema secundario).
Crear un tema secundario al realizar ajustes en el código de su tema puede ahorrarle muchos dolores de cabeza en el futuro. Los temas secundarios le permiten realizar cambios sin afectar el código del tema original, lo que facilita la actualización de su tema principal sin borrar los cambios. Al crear un tema secundario, crea un conjunto separado de archivos que puede usar para personalizar el tema sin afectar el tema original en absoluto. Esto no solo facilita la actualización, sino que también asegura que nunca arruinará su tema original, ya que nunca modificará los archivos. Siempre puedes desactivar el tema de tu hijo y volver al original.
Empezando
Suscríbete a nuestro canal de Youtube
En este ejemplo, crearemos un tema secundario para nuestro tema Divi. Lo primero es lo primero, necesitamos crear una nueva carpeta para el tema de su hijo. Nombrarlo algo así como /divi-child/ es convencional. Dentro de su nueva carpeta de temas, cree un archivo llamado style.css y complete la información como se describe a continuación. El nombre del tema, el URI , la descripción y el autor dependen totalmente de usted.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
/* Theme Name: Divi Child Theme Theme URI: https://www.elegantthemes.com/gallery/divi/ Description: Divi Child Theme Author: Elegant Themes Author URI: https://www.elegantthemes.com Template: Divi Version: 1.0.0*//* =Theme customization starts here------------------------------------------------------- */ |
Debe asegurarse de que el parámetro «Plantilla:» identifique correctamente el nombre de su tema principal. Si está utilizando un tema diferente, ajuste los valores en consecuencia.
Poner en cola las hojas de estilo de tema principal y secundario
El siguiente paso es poner en cola las hojas de estilo de los temas principal y secundario. En otras palabras, la hoja de estilo del tema secundario se utilizará para crear estilos además del tema principal (o sobre él). Para hacer esto, necesitaremos crear otro archivo dentro de la raíz de la carpeta del tema secundario. Nombre el archivo functions.php y luego agregue el siguiente código en el archivo.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<?phpfunction 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 siguiente parte es importante. Para evitar cargar innecesariamente una hoja de estilo dos veces (y ralentizar el tiempo de carga), deberá asegurarse de que la etiqueta ‘parent-style’ (o $handle) se reemplace con la misma etiqueta utilizada por su tema principal para su llamada wp_enqueue_style() .
Para encontrarlo, puede abrir el archivo functions.php de su tema principal (ubicado en la raíz de la carpeta del tema principal) y buscar la llamada wp_enqueue_style(). Si tiene varias llamadas, asegúrese de encontrar la que también tiene la llamada get_stylesheet_uri() después de la etiqueta.
Dado que en este ejemplo estamos creando un tema secundario para el tema Divi, deberá reemplazar la etiqueta ‘parent-style’ con ‘divi-style’ porque cuando busca la etiqueta utilizada en functions.php por Divi (la etiqueta principal tema), encontrará esto:
Entonces, el contenido del archivo functions.php de su tema secundario ahora debería ser este:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<?phpfunction my_theme_enqueue_styles() { $parent_style = 'divi-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' );?> |
Para otro ejemplo, si está creando un tema secundario para el tema Twentyseventeen, reemplazaría la etiqueta ‘parent-style’ con ‘twentyseventeen-style’ porque cuando busca la etiqueta utilizada por el tema principal, verá esto:
Cada tema será diferente, así que asegúrese de obtener el nombre correcto de esta etiqueta.
Activando el tema de su hijo
Después de haber creado la carpeta del tema secundario, el archivo style.css y el archivo functions.php, puede cargar y activar su nuevo tema secundario. Cargar y activar un tema secundario no es diferente a un tema normal, simplemente cárguelo a través de la página Apariencias > Temas en su Tablero de WordPress y actívelo. Antes de subirlo, primero debe comprimirlo. Tanto Mac como Windows tienen funcionalidad ZIP nativa. Asegúrate de que tu tema principal también esté cargado (en el caso de nuestro ejemplo, el tema Divi).
Sugerencia: para crear una miniatura para su tema secundario, puede crear una imagen (880 × 660) y agregarla a la raíz de la carpeta de su tema secundario. Asegúrese de nombrar su archivo de imagen screenshot.png para que wordpress sepa usar esa imagen específica.
Modificando el CSS de tu tema
Ahora hemos creado nuestro tema infantil Divi y lo hemos subido. Debido a que todo lo que hemos hecho es importar el CSS del tema original, el tema se verá exactamente como el original. Para modificar el CSS de su tema, puede agregar cualquier cambio al archivo CSS de su tema secundario después del encabezado de la hoja de estilo. Toda la información nueva de CSS se agrega después de cargar el CSS del tema original. Debido a que nuestro nuevo CSS se encuentra debajo del original en el archivo, todos los nuevos estilos CSS sobrescribirán el original. Por ejemplo, supongamos que queremos cambiar el peso de la fuente de la «etiqueta de precio» en la página de inicio de nuestro tema. Ahora mismo es audaz y gris, y nos gustaría hacerlo más delgado y verde. Podemos agregar el CSS relevante a nuestro archivo foxy-child/style.css de la siguiente manera:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
/* Theme Name: Divi Child Theme Theme URI: https://www.elegantthemes.com/gallery/divi/ Description: Divi Child Theme Author: Elegant Themes Author URI: https://www.elegantthemes.com Template: Divi Version: 1.0.0*//* =Theme customization starts here------------------------------------------------------- */.entry-title a {color: #f92c8b !important} |
Una vez que se agrega este cambio, el CSS en el archivo style.css del tema secundario sobrescribe el original. En este caso, obtenemos un bonito encabezado rosa para las publicaciones de nuestro blog, como se muestra aquí:
Edición del archivo Functions.php
Functions.php es donde normalmente se almacenan las funciones principales de un tema. Las funciones de un tema principal siempre se cargan con el tema secundario, pero si necesita agregar más funciones personalizadas a su tema, puede hacerlo creando un nuevo archivo functions.php dentro de la carpeta de su tema secundario. Las nuevas funciones se cargarán justo antes de las funciones del tema principal. El archivo functions.php de su tema hijo debe comenzar con una etiqueta de apertura de php y terminar con una etiqueta de cierre de php. En el medio, puede agregar el código php que desee.
|
01
02
03
04
05
|
<?php// Your php code goes here?> |
Pero dado que ya habrá agregado y editado functions.php para crear un tema secundario, puede agregar cualquier función nueva directamente después del código que ya existe y antes de la etiqueta de cierre de php.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
|
<?phpfunction 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' );// Additional php code goes here?> |
Edición de otros archivos de plantilla
<
Más allá de las modificaciones de funciones y CSS, también puede realizar cambios estructurales en su tema ajustando los archivos de plantilla php. Esto debe hacerse con cuidado, pero al editar los archivos PHP puede ajustar cualquier parte del tema. A diferencia de la edición de functions.php, donde las funciones del tema original se importan automáticamente, los archivos PHP se editan reemplazando el archivo por completo con uno nuevo. El archivo original del tema se ignora y se usa el nuevo en su lugar. Lo primero que debemos hacer es replicar el archivo anterior antes de comenzar a modificarlo. Para hacer esto, simplemente copie y pegue el archivo original del tema en la carpeta de su tema secundario, asegurándose de que el nombre y la ubicación del archivo sean exactamente iguales. Por ejemplo, si queremos modificar Divi /includes/navigation.php , entonces copiaremos y pegaremos este archivo endivi-child/includes/navigation.php .
WordPress sabe usar este archivo en lugar del anterior porque su nombre y ubicación son los mismos. A continuación, podemos abrir el archivo y realizar los cambios necesarios.
|
01
02
03
04
|
<div class="pagination clearfix"> <div class="alignleft"><?php next_posts_link(esc_html__('« Older Entries','Divi')); ?></div> <div class="alignright"><?php previous_posts_link(esc_html__('Next Entries »', 'Divi')); ?></div></div> |
Recursos adicionales de temas secundarios
1. El complemento de tema secundario de un clic : si tiene dificultades para comprender la creación de la carpeta de tema secundario, ¡ este complemento creará uno para usted con solo hacer clic en un botón!
2. El códice de WordPress : hay todo tipo de documentación excelente en el códice de WordPress . Si hay algo que necesita aclaración en esta publicación, entonces esta debería ser su primera parada.
3. Pros y contras de Child Theme : para obtener más información sobre los pros y los contras de usar Child Themes, tenemos un excelente artículo .