Setup Menus in Admin Panel

Crear tema hijo ( child theme ) en WordPress

WordPress es el gestor de contenidos más popular que existe hoy en dia, no en vano alcanza la cifra del 33,6% del total del mercado y si lo analizamos solo con datos de otras plataformas de CMS alcanza casi el 70%

Una de las ventajas que hacen que este CMS sea tan popular es que nos permite poder realizar todas las modificaciones que necesitemos añadiendo nuevas funcionalidades, modificando el diseño, etc..

Esto esta bien pero tiene un inconveniente si realizamos las modificaciones en los archivos originales, al actualizar, todas las modificaciones que habíamos realizado se perderían al sobre escribir los archivos por los de la actualización. Para solucionar esto WordPress nos permite crear un tema hijo o Child Theme.

¿ Que es un tema hijo ?

Segun codex de WordPress ” Un “tema hijo” en WordPress es un tema que hereda la funcionalidad de otro tema, llamado “tema padre”

En otras palabras, un tema hijo nos permite agregar personalización avanzada a nuestro tema sin tener que preocuparnos por perder las modificaciones cada vez que actualicemos. El tema hijo hereda la funcionalidad del tema padre, lo que nos permite modificar los archivos sin perder los cambios cuando se actualiza el tema padre.

Beneficios de un tema hijo

Una norma que tenemos que tener muy presente cuando estemos desarrollando nuestro proyecto es que nunca debemos modificar directamente los archivos de WordPress .

Esto significa que en ningún momento tenemos que editar directamente archivos del core de WordPress ni el de los plugins o plantilla.

Actualizaciones fáciles

El mayor problema con todo tipo de modificaciones es que desaparecen al actualizar WordPress (en caso de modificaciones al núcleo de WordPress) o el tema (en caso de modificaciones directas de la Plantilla ).

Conservar las modificaciones para que funcionen después de una actualización es casi imposible si se modifica el archivo original directamente.

El mecanismo de actualización en WordPress es bastante simple, los archivos nuevos se copian en lugar de los archivos antiguos, es decir se sobreescriben.

Sin embargo, si utilizamos un tema secundario o hijo, no tenemos que preocuparnos por ninguna actualización. Siempre que se actualice WordPress o el tema que estamos utilizando, sólo se actualizará el tema principal. El tema hijo y todo lo que modificamos/añadimos permanece intacto.

Sabemos lo que hemos modificado

Los temas de WordPress consisten en decenas de archivos diferentes. Hay archivos PHP, HTML, JavaScript, CSS, imágenes, jQuery, y más.

Y eso está bien, pero el problema surge cuando se modifica un par de cosas aquí y allá, si no respetamos una estructura, cuando necesitemos buscar algo tendremos dificultades para encontrar los cambios.

Esto es aún peor si no somos nosotros quien ha hecho los cambios, imaginaros que la web la realizó un diseñador que añadió sus propias funciones o modificaciones y queremos variar su comportamiento, en tal caso, el seguimiento de los cambios es casi imposible.

Sin embargo, si utilizamos un tema secundario, no hay tal problema. Cada modificación se puede encontrar en la carpeta del tema hijo.

Fácil de restaurar

Trabajar con el código fuente puede ser impredecible.

Ante un error lo primero que pensamos es en las últimas modificaciones que hemos realizado. Casi seguro que encontremos la causa de los problemas entre esas últimas líneas de código que hemos añadido, pero no siempre es así. A veces, un cambio realizado en otro lugar interfiere con otras funciones.

Si nos encontramos en una situación así, eliminar todas las modificaciones puede llevar mucho tiempo. Tendríamos que revisar cada archivo y recuperar su implementación anterior.

Con un tema hijo no ocurre esto. Simplemente eliminamos los archivos que causan problemas del tema hijo y todo volverá a la normalidad.

Y ahora si vamos a divertirnos un poco 😉

Crear y utilizar un tema hijo

En este tutorial vamos a crear un tema secundario para la plantilla por defecto de WordPress ” Twenty Seventeen

Un tema secundario solo necesita tres cosas para empezar a trabajar. una carpeta de temas, un archivo CSS y el archivo functions.php .

Crear un directorio para el tema hijo

Cada tema de WordPress necesita su propia carpeta asi que lo primero que tenemos que realizas es crear la carpeta para nuestro tema hijo.

Para crear la carpeta accedemos a nuestra cuenta de hosting “administrador de archivos ” o desde tu cuenta FTP.

La carpeta de nuestro tema hijo la creamos dentro themes que se encuentra en la carpeta wp-content.

A la carpeta le pondremos como nombre twentyseventeen_child, podemos llamarla como queramos pero siempre es una buena práctica poner el mismo nombre de la carpeta padre añadiendo ” _child ” para diferenciarla.

Crear el archivo de estilos ” style.css

Como hemos comentado antes, para que el tema hijo sea reconocido nos hace falta el archivo style.css.

Este archivo es el que contendrá la cabecera y le indicará a WordPress que cargue primero el tema hijo y después el tema padre. El archivo tenemos que crearlo dentro de la carpeta ” twentyseventeen_childque creamos anteriormente.

Tenemos que asegurarnos que el archivo esté en el nivel raíz de la carpeta del temas secundario ” twentyseventeen_child y no dentro de una subcarpeta.

Crear archivo style.css Child Teme WordPress

Para que el WordPress pueda relacionar el tema Padre con el tema hijo necesitamos añadir la cabecera con el marcador Template:, y el valor tiene que ser el nombre de la carpeta del tema padre, en nuestro caso sería ” twentyseventeen “, un encabezado de ejemplo podría ser el siguiente:

/*
Theme Name: Twenty Seventeen child
Template: twentyseventeen
*/

Como veis solo necesitamos dos datos, en el valor ” Theme Name ” le indicamos el nombre que tendrá nuestro tema hijo, podemos poner el nombre que queramos pero una buena práctica es añadir el nombre del tema padre con la palabra child ( hijo ) para poder distinguirlos. Si no se añade nada en ese valor, tomará el nombre de la carpeta que hemos creado para el tema hijo.

El segundo valor Template: es el más importante ya que le indicamos el nombre de la carpeta del tema principal . Si este dato no es correcto, el tema secundario no funcionará.

Solo con estos dos datos ya podremos ver nuestro tema hijo en la administración de WordPress dentro de apariencia -> Temas

Administrador Child Theme

Pero podemos añadir más valores al encabezado como puede ser autor, descripción o versión, incluso podríamos copiar el encabezado del archivo style.css original añadiendo el campo Template. Para este ejemplo vamos a utilizar el siguiente encabezado.

/*
Theme Name: Twenty Seventeen child
Template: twentyseventeen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Mi Child theme
Version: 1.0
*/
  • Theme Name: El nombre del tema. Este es el nombre que aparece en el Panel de WordPress en Apariencia -> Temas.
  • Template: ¡ Muy importante! Este es el nombre de la carpeta del tema principal . Si esta variable no es correcta, el tema secundario no funcionará.
  • Author: el autor del tema infantil, que puede ser el nombre de una persona o el nombre de una empresa.
  • Author URI: la URL del autor del tema infantil.
  • Description: Una breve descripción del tema. Este dato es el que se mostrará en el Panel de WordPress en Apariencia -> Temas, una vez que el tema esté activado.
  • Versión: La versión del tema infantil.

Todas estas variables son opcionales, con la excepción de  Template: . Si esta línea no está presente o contiene errores tipográficos, el tema secundario no funcionará.

Crear archivo style.css cabecera child theme
El Archivo functions.php

Pero esto no es suficiente, para que nuestro tema hijo funcione, tenemos que crear las llamadas para las hojas de estilo de los temas principal y secundario, para ello creamos el archivo functions.php

El archivo functions.php tiene un comportamiento distinto al style.css ya que este archivo no anula al padre y es necesario partir de un archivo vacío y no copiar el archivo functions.php del padre, cosa que podríamos realizar con el archivo style.css

Utilizaremos el mismo método que en el archivo style.css para crear nuestro archivo functions.php

El archivo tenemos que crearlo en la raíz de la carpeta de la plantilla hijo ” twentyseventeen_child “, en el mismo nivel que se encuentra el archivo style.css

Crear archivo Fuctions.php

La llamada la realizamos con la función WP_enqueue_style, si queréis saber un poco más sobre esta función la teneis documentada en codex de WordPress wp_enqueue_style()

Editamos el archivo functions.php y añadimos el siguiente código:

<?php
function mychildtheme_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 )
    );
}
add_action( 'wp_enqueue_scripts', 'mychildtheme_enqueue_styles' );

Con esto ya tendríamos el tema hijo listo para ser utilizado

Solo nos quedaría acceder a la administración de WordPress Apariencia -> Temas y veremos nuestro tema hijo como una plantilla más para poder activarse.

Al pasar el ratón por la plantilla veremos que muestra el botón ” Activar “, si lo pulsamos activaremos nuestro tema secundario y éste pasará a ser el tema principal.

Una vez activado, el tema hijo pasa a la izquierda como tema principal.

De momento no notaremos ningún cambio en la web ya que no hemos realizado ninguna modificación y mostrará el mismo contenido que teníamos en la plantilla padre.

Archivo screenshot.png

Como habrás visto nuestro tema hijo no tiene ninguna imagen que lo identifique, si accedemos apariencia -> temas vemos que todas las plantilla tienen una imagen que las identifica, en cambio nuestro tema hijo es transparente.

Esto lo solucionamos subiendo una imagen a la carpeta de nuestro tema hijo ” twentyseventeen_child ” o descargando una copia de la imagen del tema padre y subiendo el archivo a la carpeta del tema hijo.

Si decidimos crear una imagen personalizada, hay que respetar unos parámetros. El nombre del archivo tiene que ser screenshot con la extensión .png y un tamaño de 1200×900

Como comentamos antes tenemos la opción de descargar la imagen del tema padre como ejemplo y trabajar con las medidas de esa imagen.

Una vez subido el archivo de la imagen a la raíz de la carpeta “ twentyseventeen_child ” si accedemos Apariencia -> Temas veremos que nuestro child theme muestra una imagen identificativa como las demás plantillas.

Ahora si que lo tenemos todo, a partir de ahora si necesitamos realizar alguna modificación tanto de diseño como añadir nuevas funciones podemos realizarlo en los archivos style.css o functions.php, dependiendo de lo que necesitemos realizar.

Ejemplos

Vamos a poner en práctica lo realizado, en este caso queremos modificar el color del texto de los títulos de las entradas, para ello necesitamos ver que clase es la que le indica el color de la fuente para los títulos.

Lo más fácil es utilizar el inspector del navegador para ver qué clases son las que se están utilizando. por ejemplo en Chrome lo tenemos en Más herramientas -> Herramientas para desarrolladores.

Accedemos a la web y con el botón derecho del ratón seleccionamos el título , en el menú pulsamos en ” inspeccionar “. Esto abrirá el panel Herramientas de desarrollo en Chrome con el elemento seleccionado.

De todas las opciones de la consola la que nos interesa es el panel Elementos que nos permite inspeccionar elementos y modificar el HTML y CSS de nuestra aplicación

En la captura vemos seleccionado el título de la entrada y en el inspector vemos la interfaz con tres bloques, El primer bloque ( DOM ) muestra el código HTML y resaltado podemos ver el código del elemento seleccionado.

El segundo elemento del panel Elementos es el bloque CSS que nos permite agregar y modificar el CSS de la página. En nuestro caso lo utilizaremos para ver qué clase es la que maneja el estilo del título que queremos modificar.

Si vemos el código, nos dice que la clase utilizada por el título es ” .entry-title a ” la letra a nos dice que es un enlace. Seguimos inspeccionado el bloque de ese código y vemos la etiqueta ” color “ que nos muestra código del color del título.

Con esos datos ya podemos modificar el color del titulo: Vamos a cambiar el color negro que tiene ahora por un color rojo. El codigo quedaria como el siguiente:

.entry-title a {
    color: red;
}

En el siguiente enlace tenéis una tabla de colores que podéis utilizar en CSS ” Tabla de colores

Ya tenemos el código que necesitamos para cambiar el color del título. Con esos datos editamos el archivo style.css del tema hijo y después de la cabecera del archivo añadimos el código.

Sencillo Verdad ? pues lo mismo lo podríamos realizar con otros archivos por ejemplo supongamos que queremos añadir una nueva función que muestre las migas de pan ( (breadcrumbs) o ruta donde nos encontramos.

Este ejemplo nos viene bien ya que para implementarlo necesitaremos trabajar con tres archivo, function.php, single.php y style.css

Lo primero que tenemos que realizar es añadir la función que se encargará de crear las migas de pan o breadcrumbs, para ello editamos el archivo functions.php de nuestro tema hijo y añadimos la siguiente función:

//* Añadir migas de pan  (breadcrumbs)

function get_breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">Home</a>';
    if (is_category() || is_single()) {
        echo "  »  ";
        the_category(' • ');
            if (is_single()) {
                echo "   »   ";
                the_title();
            }
    } elseif (is_page()) {
        echo "  »  ";
        echo the_title();
    } elseif (is_search()) {
        echo "  »  Buscar Resultados para... ";
        echo '"<em>';
        echo the_search_query();
        echo '</em>"';
    }
}

El siguiente paso será realizar la llamada de la función que acabamos de crear, en este caso solo queremos que se muestre el los articulo por lo utilizaramso el archivo single.php para añadir la llamada a nuestra función.

Lo primero será copiar el archivo single.php que tenemos en carpeta del tema padre twentyseventeen a la carpeta de nuestro tema hijo ” twentyseventeen_child

Editamos el archivo single.php de nuestro tema hijo y añadimos la llamada en la posición donde queramos se que muestre. Lo más lógico es mostrarlo debajo del menú y antes del título.

<div class="breadcrumb"><?php get_breadcrumb(); ?></div>

Para finalizar le damos un poco de estilo añadiendo lo siguiente al archivo style.css de nuestro tema hijo.

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.breadcrumb a {
    color: #428bca;
    text-decoration: none;
}

Esto mismo lo podríamos realizar para los demas archivo, es decir supongamos que queremos modificar el archivo header.php porque tenemos que añadir alguna API o como el ejemplo que vamos a realizar, añadir la fecha en la cabecera de nuestra web..

Como en en el anterior ejemplo copiamos el archivo header.php del tema padre a la carpeta del tema hijo.

Editamos el archivo header.php del tema hijo y como queremos que aparezca en la cabecera de la web, añadiremos el siguiente código justo debajo de la etiqueta </head>

<!-- añadir fecha -->
<?php
setlocale(LC_ALL,"es_ES");
echo date_i18n( get_option( 'date_format' ), strtotime( '11/15-1976' ) ); 
?>

El resultado sería el siguiente:

Conclusión

Leyendo esta entrada puede parecer que esto de los tema hijos ( Child Theme ) es un poco complicado pero como siempre suele pasar, mucho texto para lo sencillo que resulta.

Tener un tema hijo es la forma más sencilla y segura de poder crear nuestros propios temas o darle un nuevo diseño a nuestra web añadiendo funciones y cambiando su vista, sin tener que preocuparnos por si actualizamos el tema principal, al igual que eliminamos el riesgo de romper algo si modificamos el tema principal y lo más importante, mantenemos organizado todo nuestro código.

7 julio, 2019

0 responses on "Crear tema hijo ( child theme ) en WordPress"

Leave a Message

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

© 2021 WordPress
WordPress Image Lightbox Plugin
Ir a la barra de herramientas