in

Cómo crear y personalizar un tema hijo de WordPress

La plataforma WordPress es un imán para aquellos que quieren tomar el asunto en sus propias manos, que quieren un control total sobre sus sitios web y quieren ser independientes al ejecutarlos. WordPress hace que sea muy fácil personalizar completamente un sitio web. Si tiene un poco de conocimiento de HTMl, CSS y / o PHP, no hay nada que no pueda cambiar.

La plataforma WordPress es un imán para aquellos que quieren atajar por completo el asunto en sus propias manos, que quieren un control total sobre sus sitios web y quieren ser independientes al ejecutarlos. WordPress hace que sea muy fácil personalizar completamente un sitio web. Si tienes un poco de conocimiento de HTMl, CSS y / o PHP, no hay nada que no puedas cambiar. Quiero decir, simplemente compara los temas predeterminados, Twenty Fifteen y Twenty Fourteen. Es difícil de creer que se estén ejecutando en la misma plataforma, ¿no? Por lo tanto, es natural que desees adaptar el aspecto de tu web para que se ajuste a tu idea. Dudo que haya muchos usuarios de WordPress que no piensen constantemente en qué implementar a continuación. Sin embargo, surge un problema.

Personalización de WordPress: es posible que lo estés haciendo mal  #

Al intentar realizar cambios en una web, un número asombroso de personas opta por editar tu tema directamente. Esto significa que están cambiando o agregando archivos en la carpeta de tu tema actual. Esto crea una serie de problemas. La mayor desventaja es que cualquier modificación realizada al tema de esta manera se perderá una vez que el desarrollador actualice el tema. Como consecuencia, los usuarios no podrán mantener tu tema actualizado (lo cual es malo para la seguridad) o encontrarán todas sus personalizaciones eliminadas cuando lo hagan. De cualquier manera, la situación está lejos de ser ideal. Una idea mucho mejor es utilizar un tema hijo (child theme). Esto le permite realizar cualquier cantidad de cambios en un sitio web sin tocar ninguno de los archivos de tema originales. ¿Suena bien? Genial, porque en este artículo veremos en detalle qué son los temas secundarios de WordPress, cómo crearlos y cómo usarlos para personalizar tu sitio web, de la manera correcta.

¿Qué son los temas hijo y por qué utilizarlos? #

Cuando hablamos de temas secundarios, primero tenemos que hablar de temas padres. Un tema solo se convierte en un tema principal cuando alguien crea un tema secundario para él. Hasta entonces, es solo un tema, como los que encuentras en el directorio de WordPress. Cada tema que incluye todos los archivos necesarios para que se considere completo puede ser un tema principal. Sin embargo, aunque cualquiera de estos temas puede ser un tema principal, algunos se adaptan mejor a este propósito que otros. Por ejemplo, los marcos como Genesis de StudioPress están diseñados específicamente para ser personalizados por temas secundarios. Entonces, ¿qué es un tema hijo (child theme)? Bueno, desde el back-end de WordPress, un tema hijo (child theme) no se comporta de manera diferente. Puede buscarlo y activarlo en «Apariencia» → «Temas», tal como lo harías con cualquier otro tema. La gran diferencia es que un tema hijo (child theme) depende completamente de tu padre para funcionar. Sin tu tema principal presente, no hará nada y ni siquiera se puede activar. Eso es porque un tema hijo (child theme) no es una entidad independiente, sino que modifica o agrega a los archivos de un tema existente. Utiliza todo lo presente en el tema principal y cambia solo aquellas partes que deseas que sean diferentes. Esto te permite modificar estilos, funciones, diseño, plantillas y más. De hecho, puedes personalizar el tema principal tanto que quede irreconocible. Sin embargo, sin que esté presente, nada funcionará.

Ventajas de los temas hijo  #

Existen numerosas ventajas al usar temas hijo:

  • En lugar de tener que crear un tema completo desde cero, puedes construir sobre algo que ya existe, acelerando así el tiempo de desarrollo.
  • Puedes aprovechar la funcionalidad de marcos sofisticados y temas principales, mientras personalizas el diseño según tus necesidades.
  • Puede actualizar el tema principal sin perder tus personalizaciones.
  • Si no estás satisfecho con tus personalizaciones, simplemente desactivas el tema hijo (child theme) y todo volverá a ser como antes.
  • Es una excelente manera de comenzar a aprender cómo funcionan los temas.

Un tema hijo (child theme) puede contener carpetas de imágenes, JavaScript, CSS, archivos de plantilla y muchas otras cosas. Sin embargo, lo hermoso es que no tienen que hacerlo. Puede incluir tanta personalización como desees. De hecho, un tema hijo (child theme) realmente solo necesita tres cosas: una carpeta, una hoja de estilo y un archivo functions.php. Eso es todo. Y los dos archivos pueden incluso estar prácticamente vacíos.

Cuándo usar un tema secundario  #

Entonces, ¿deberías siempre crear un tema hijo (child theme) cada vez que desee realizar cambios en un sitio web de WordPress? No, realmente depende. Si planeas hacer solo modificaciones menores, como cambios de color o una fuente diferente, entonces un complemento CSS personalizado puede ser todo lo que necesitas (otras opciones son Jetpack y SiteOrigin CSS). Hoy en día, muchos temas también ofrecen la opción de agregar código personalizado de forma nativa. Sin embargo, si planeas introducir cambios más grandes, como una revisión completa del diseño, múltiples cambios de plantilla o cualquier otra cosa de esa magnitud, entonces un tema hijo (child theme) es definitivamente el camino a seguir.

Configurar un tema secundario básico  #

Muy bien, ahora que sabemos lo increíbles que son los temas hijo y lo que pueden hacer por nosotros, repasemos cómo crearlos paso a paso. Para nuestro ejemplo, usaremos Twenty Fifteen, uno de los populares temas predeterminado que ha tenido WordPress. No te preocupes, es muy fácil y lo conseguirás en poco tiempo. Nota al margen: Los pasos a continuación se pueden realizar directamente en tu servidor a través de un cliente FTP. Sin embargo, te recomiendo que primero configures todo localmente, luego comprimas la carpeta del tema secundario y la instáles como un tema normal a través del menú «Tema». Esto hará que todo sea mucho más fácil.

Crear una carpeta en wp-content/themes #

Como ya hemos dicho, un tema hijo (child theme) necesita tres cosas: tu propia carpeta, una hoja de estilo y un archivo functions.php. Empezaremos por la carpeta. Como cualquier tema, los temas secundarios se encuentran wp-content/themesen tu instalación de WordPress. Entonces, navega hasta allí y crea una nueva carpeta para tu tema hijo (child theme). Una práctica recomendada es darle a la carpeta de tu tema el mismo nombre que el tema principal y agregarle -child. Debido a que estamos usando el tema Twenty Fifteen, llamaremos a nuestra carpeta twentyfifteen-child.

Creando una carpeta para nuestro tema hijo (child theme) de WordPress. (Ver versión grande)

Eres libre de usar el nombre que quieras; solo asegúrate de no incluir ningún espacio porque eso causará errores.

Crear una hoja de estilo  #

Ahora que tenemos nuestra carpeta, necesitaremos una hoja de estilo. En caso de que no lo sepas, una hoja de estilo contiene el código que determina el diseño de un sitio web. Los temas pueden tener varias hojas de estilo, pero por el momento nos conformaremos con una. Hacer una hoja de estilo es fácil: simplemente crea un nuevo archivo de texto y llámelo style.css. ¡Hecho! Sin embargo, para que realmente funcione, tendremos que pegar el siguiente código, el llamado «encabezado de la hoja de estilo», justo al principio del archivo (código cortesía del Codex de WordPress):

/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ description: >-   Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */ 

Esto es lo que significa cada línea:

  • Nombre del tema: Este es el nombre que aparecerá para tu tema en el back-end de WordPress.
  • URI del tema: Esto apunta al sitio web o página de demostración del tema en cuestión. Este o el URI del autor debe estar presente para que el tema sea aceptado en el directorio de WordPress.
  • Descripción: Esta descripción de tu tema se mostrará en el menú del tema cuando haga clic en «Detalles del tema».
  • Autor. Este es el nombre del autor, ese es usted, en este caso.
  • URI del autor: Puede poner la dirección de tu sitio web aquí si lo desea.
  • Plantilla: Esta parte es crucial. Aquí va el nombre del tema principal, es decir, el nombre de tu carpeta. Tenga en cuenta que distingue entre mayúsculas y minúsculas, y si no ingresa la información correcta, recibirá un mensaje de error, ¡así que vuelva a verificarlo!
  • Versión: Esto muestra la versión de tu tema hijo (child theme). Por lo general, comenzaría con 1.0.
  • Licencia: Esta es la licencia de tu tema hijo (child theme). Los temas de WordPress en el directorio generalmente se publican bajo una licencia GPL; debe seguir con la misma licencia que tu tema principal.
  • URI de licencia: Esta es la dirección donde se explica la licencia de tu tema. Una vez más, manténgase fiel a lo que dice el tema de sus padres.
  • Etiquetas: Las etiquetas ayudan a otros a encontrar tu tema en el directorio de WordPress. Por lo tanto, si incluye algunos, asegúrate de que sean relevantes.
  • Dominio de texto: Esta parte se utiliza para la internacionalización y para hacer que los temas sean traducibles. Esto debería ajustarse a la «babosa» (slug) de tu tema.

Si te sientes un poco abrumado (¿ya?), Te alegrará saber que no toda esta información es realmente necesaria. De hecho, todo lo que realmente necesitas es el nombre del theme y la plantilla. El resto es importante solo si planeas publicar tu tema, cosa que es poco probable. Por esta razón, el encabezado de mi tema hijo (child theme) se parece a lo que se muestra a continuación. Puedes libre de copiarlo sin problema y hacer tus propios ajustes.

/*  Theme Name:   Twenty Fifteen Child Theme  description: >-    A child theme of the Twenty Fifteen default WordPress theme  Author:       Nick Schäferhoff  Template:     twentyfifteen  Version:      1.0.0 */ 

Activar tema hijo (child theme)  #

Una vez que tu carpeta y hoja de estilo estén presentes, ve a «Apariencia» → «Temas» en el back-end de WordPress y busque tu tema hijo (child theme) allí. Cuando haga clic en «Detalles del tema» ahora, verás el contenido del encabezado de la hoja de estilo. Para eso es esa información.

El encabezado del tema hijo (child theme) de WordPress. (Ver versión grande)

Muy bien, ahora haz clic en el botón que dice «Activar». ¡Buen trabajo! Tu tema ahora está activado. Sin embargo, si miras tu sitio web, debería verse así:

Tema hijo de WordPress sin hoja de estilo. (Ver versión grande)

No te preocupes, todo está bien. No la has cagado. La razón por la que tu sitio web está vacío es porque aún no tiene ningún estilo. La ausencia de estilos significa que disfrutarás de una experiencia de texto completo. Solo quería mostrarte que, en teoría, tener una hoja de estilo y una carpeta es suficiente para crear un tema hijo (child theme). Y si funcionó para ti, ¡entonces ya lo ha hecho! Sin embargo, seré el primero en admitir que podría verse un poco mejor. Vamos a eso ahora.

Crear functions.php  #

El siguiente es el archivo functions.php. Probablemente hayas oído hablar de este archivo antes, pero repasemos rápidamente para qué sirve. El archivo functions.php te permite cambiar y agregar funcionalidad y características a un sitio web de WordPress. Puede contener tanto PHP como funciones nativas de WordPress. Además, puedes crear tus propias funciones. En resumen, functions.php contiene código que cambia fundamentalmente la apariencia y el comportamiento de un sitio web. ¿Comprendido? Genial, sabía que podía contar contigo. Crear el archivo es tan fácil como crear una hoja de estilo, si no más. Todo lo que necesitas es un archivo de texto con nombre functions.php y luego pegar el siguiente código:

<?php //* Code goes here 

En serio, eso es todo. Solo agrega esa etiqueta php de apertura y listo. Por supuesto, podrías ponerte elegante y escribir alguna información en el encabezado (no olvides comentarlo para que WordPress no intente ejecutarlo), pero esto servirá para nuestro propósito. Agrégslo también a la carpeta de tu tema. Ahora, déjame decirte esto: no necesitas functions.php. Si no planea usar PHP para modificar tu tema, entonces puede prescindir completamente de él. Una hoja de estilo y otros archivos pueden ser suficientes para ti. Sin embargo, quería incluir esta parte, primero, para que supieras acerca de este archivo importante y, en segundo lugar, para el siguiente paso.

Heredar estilos principales  #

Por lo tanto, probablemente sepas que tu sitio web sigue siendo principalmente texto. Es hora de cambiar eso. ¿Cómo? Te mostrare. Debido a que estás utilizando un tema principal, probablemente tengas una buena idea de cómo se supone que debe verse tu sitio web. Para nuestro ejemplo, Twenty Fifteen, queremos llegar a este punto:

El tema Twenty Fifteen predeterminado de WordPress. (Ver versión grande)

Para llegar aquí, necesitarás heredar la información en la hoja de estilo de tu tema principal. Hay dos maneras de hacer esto. Uno es a través de CSS y la regla @import. Al copiar el código a continuación en tu archivo style.css, le estás diciendo a tu tema hijo (child theme) que use la información contenida en la hoja de estilo de tu tema principal para presentar el contenido.

@import url("../twentyfifteen/style.css");

Sin embargo, ten en cuenta que esta es la forma antigua de heredar estilos principales y ya no se recomienda. La razón de eso es el rendimiento. Si necesitas importar varias hojas de estilo (lo cual no es desconocido), usar @import hará que se descarguen consecutivamente. Esto puede ralentizar el tiempo de carga de la página en varios segundos (lo cual, probablemente no tengo que decirte que no es algo bueno). La segunda forma recomendada de cargar la hoja de estilo del padre, y la razón por la que creamos antes elfunctions.php, es usar wp_enqueue_style(). Esta función de WordPress agrega de forma segura archivos de hojas de estilo a un tema de WordPress. En nuestro caso, el código correspondiente se parece un poco a esto:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );  function enqueue_parent_styles() {    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); }

Asegúrate de pegar esto al principio de tu archivo functions.php y guárdalo (recuerda cargar el archivo si estás usando una conexión FTP). Ahora revisa tu interfaz; Debe tener un aspecto como este:

El tema hijo (child theme) de WordPress se activó correctamente. (Ver versión grande)

Bonita, ¿verdad? ¡Felicidades, lo lograste! Has creado tu primer tema hijo (child theme) de WordPress. Si estuviera allí, te daría una palmadita en el hombro. Sin embargo, puedes objetar, con razón, que se ve exactamente como el tema principal. Entonces, ¿cuál es el punto de optar por un tema hijo? No te preocupes. A continuación, aprenderás a personalizar el tema hijo (child theme) para que se vea exactamente como lo deseas.

Puntos extra: Agregar imagen de tema  #

Si desea obtener un resultado más elegante, puedes agregar una imagen de tema. Esta imagen se mostrará en el menú de temas de WordPress. Todo lo que necesitas hacer es crear un archivo PNG, nombrarlo screenshot.png y colocarlo en la carpeta de tu tema (en nuestro caso, twentyfifteen-child). Asegúrate de ponerlo en el directorio de nivel superior y no en un subdirectorio como images. El tamaño recomendado es de 880 × 660 píxeles, aunque se mostrará como 387 × 290. Las dimensiones más grandes aseguran que la imagen se verá bien en pantallas de alta resolución. Otros formatos de imagen como JPEG y GIF también funcionarían, pero se recomienda PNG. Puedes hacer esto ahora o esperar hasta que hayas terminado de personalizar el tema, porque la imagen suele ser una captura de pantalla del diseño del tema.

Personalización de tu tema hijo (child theme) de WordPress  #

Si has hecho todo correctamente, entonces tu tema hijo (child theme) ahora debería estar activado y verse exactamente como el padre. Aquí es donde la comienza la diversión. Ahora podemos comenzar a personalizar nuestro tema y cambiar las cosas para obtener el resultado que estamos buscando. Las personalizaciones se pueden realizar de muchas formas diferentes, y repasaremos muchas de ellas.

Implementación de estilos personalizados  #

Una de las formas más fáciles de realizar cambios en tu tema es a través de CSS. Esto te permite personalizar colores, dimensiones, fuentes y otros elementos de diseño fundamentales. Si dominas el CSS, podrías cambiar todo el diseño de tu sitio web. Sin embargo, la introducción de cambios tan drásticos generalmente se hace de manera diferente. Llegaremos a eso. Pero por ahora, todo lo que necesitas saber es que, una vez implementado el style.css, puedes anular cualquier estilo en el tema principal agregando código a la hoja de estilo del tema secundario. Importante: si has llamado a los estilos del tema principal en tu archivo style.css, asegúrate de agregar cualquier estilo personalizado debajo de la declaración @import, como en el siguiente fragmento. (Aunque sabes que se supone que debes usar functions.php, ¿verdad?)

/*  Theme Name:   Twenty Fifteen Child Theme  description: >-    A child theme of the Twenty Fifteen default WordPress theme  Author:       Nick Schäferhoff  Template:     twentyfifteen  Version:      1.0.0 */  // Custom styles go here

Twenty Fifteen es un tema elegantemente diseñado. Me gusta mucho el generoso espacio en blanco, que deja respirar el contenido y es relajante para la vista.

Diseño de Twenty Fifteen. (Ver versión grande)

Sin embargo, digamos que no eres un fan de esto y quieres meter algunas palabras más en cada línea. No hay nada de malo en eso. En ese caso, usaría una herramienta como Firebug para averiguar qué estilos deben modificarse. tu búsqueda arrojaría lo siguiente:

.entry-header {    padding: 0 10%; }
.entry-title, .widecolumn h2 {    font-size: 3.9rem;    line-height: 1.2308;    margin-bottom: 1.2308em; }
.entry-content, .entry-summary {    padding: 0 10% 10%; }

Haríamos algunos ajustes para lograr lo que tenemos en mente y los copiaríamos al archivo style.css de nuestro tema hijo (child theme).

.entry-header {    padding: 0 5%; } .entry-title, .widecolumn h2 {    margin-bottom: 0.5em; } .entry-content, .entry-summary {    padding: 0 5% 10%; }

¡Voilá! Aquí está el resultado:

Tema hijo de WordPress con estilos personalizados. (Ver versión grande)

Si eso queda o no mejor que antes, es otra cuestión, pero ya tienes la idea: agregar estilos personalizados a un tema secundario anulará los estilos del tema principal.

Anulación de archivos de tema principal  #

No solo puede apuntar a declaraciones de estilo individuales a través de la hoja de estilo, sino también anular componentes completos del tema principal. Para cada archivo de tema presente en el directorio principal, WordPress verificará si el archivo correspondiente está presente en el tema secundario y, si es así, lo usará en su lugar. Esto significa que un archivo header.php en el tema secundario anulará tu equivalente en la carpeta principal. Entonces, si no te gusta algo sobre el diseño de una página, simplemente copia el archivo respectivo, implemente sus cambios y cárguelo en la carpeta del tema secundario. Las modificaciones aparecerán en el tema hijo (child theme), mientras que el archivo original permanecerá intacto. Por ejemplo, si tomamos content.php de la carpeta del tema Twenty Fifteen y lo abres con un editor, entre otras cosas, encontraras el siguiente código:

<?php    // Post thumbnail.    twentyfifteen_post_thumbnail(); ?>  <header class="entry-header">    <?php    if ( is_single() ) :       the_title( '<h1 class="entry-title">', '</h1>' );    else :       the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );    endif;    ?> </header><!-- .entry-header --> 

Veamos qué sucede cuando invertimos el orden de estos dos, así:

<header class="entry-header">    <?php       if ( is_single() ) :          the_title( '<h1 class="entry-title">', '</h1>' );       else :          the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );       endif;    ?> </header><!-- .entry-header -->  <?php    // Post thumbnail.    twentyfifteen_post_thumbnail(); ?> 

Como puedes ver a continuación, después de guardar y cargar el archivo en la carpeta del tema secundario, la imagen destacada de cada publicación del blog ahora aparecerá debajo del título de la publicación.

Reemplace los archivos del tema principal con el tema secundario. (Ver versión grande)

Por supuesto, te vendría bien un poco de estilo, pero lo que busco es que entiendas la idea. Puede utilizar este método para realizar todo tipo de cambios en tu sitio web. Solo recuerda darle al tema hijo (child theme) la misma estructura de árbol de carpetas que el padre. Por ejemplo, si un archivo que desea modificar se encuentra en una carpeta nombrada page-templatesen el tema principal, entonces deberías crear una carpeta con el mismo nombre en el directorio de tu tema secundario y colocar el archivo allí.

Trabajar con archivos de plantilla  #

Hemos aprendido que podemos sobrescribir cualquier archivo en el tema principal colocando una copia en la carpeta del tema secundario y personalizándolo. Sin embargo, también es posible utilizar archivos que solo existen en el tema hijo (child theme). Los archivos de plantilla son un buen ejemplo de esto. Digamos que queremos crear una plantilla de página de ancho completo para nuestro tema hijo (child theme). Seré el primero en admitir que el tema Twenty Fifteen no se presta a la presentación a pantalla completa, pero hagámoslo de todos modos con fines educativos. Para crear una página de ancho completo en Twenty Fifteen, debemos hacer cuatro cosas: crear una plantilla de página personalizada, un encabezado personalizado y un archivo de pie de página, y luego agregar algo de CSS personalizado. Comenzamos con la plantilla de página. Para nuestra plantilla de página personalizada, simplemente copiamos page.php del tema principal, le cambiamos el nombre custom-full-width.phpy lo colocamos en una carpeta con el nombre page-templatesde nuestro tema secundario. Ahora, introducimos un par de cambios en el código para que se vea así:

<?php /*  * Template Name: Custom Full Width  * description: >-   Page template without sidebar  */  get_header('custom'); ?>     <div id="primary" class="content-area">    <main id="main" class="site-main" role="main">     <?php    // Start the loop.    while ( have_posts() ) : the_post();     // Include the page content template.    get_template_part( 'content', 'page' );     // If comments are open or we have at least one comment, load up the comment template.    if ( comments_open() || get_comments_number() ) :       comments_template();    endif;     // End the loop.    endwhile;    ?>     </main><!-- .site-main -->    </div><!-- .content-area -->  <?php get_footer('custom'); ?>

Lo único que hemos hecho aquí es introducir un encabezado que le dice a WordPress que se trata de una plantilla de página, y hemos cambiado las llamadas get_headery get_footerpara que incluyan dos archivos llamados header-custom.phpy footer-custom.php. Vayamos a la página que queremos ver en ancho completo y, en “Atributos de página”, cambiamos la plantilla de página a nuestra plantilla de “Ancho completo personalizado” recién creada.

Cómo activar una plantilla de página de WordPress.

Ahora es el momento de crear nuestros archivos de tema de encabezado y pie de página personalizados. Primero, ve al tema principal, copiq ambos header.phpy footer.phpa la carpeta de nuestro tema secundario y cámbiales el nombre a header-custom.phpy footer-custom.php, respectivamente. Hasta ahora, nuestra página se ve igual que antes. Es hora de una personalización. Comenzamos con nuestro encabezado personalizado.

<?php /**  * The template for displaying the header  *  * Displays all of the head element and everything up until the "site-content" div.  *  * @package WordPress  * @subpackage Twenty_Fifteen  * @since Twenty Fifteen 1.0  */ ?><!DOCTYPE html> <html <?php language_attributes(); ?> class="no-js"> <head>    <meta charset="<?php bloginfo( 'charset' ); ?>">    <meta name="viewport" content="width=device-width">    <link rel="profile" href="http://gmpg.org/xfn/11">    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">    <!--[if lt IE 9]>    <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>    <![endif]-->    <?php wp_head(); ?> </head>  <body class="full-width-body" <?php body_class(); ?>> <div id="page" class="hfeed site">    <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>     <header id="masthead" class="site-header full-width" role="banner">    <div class="site-branding full-width">    <?php       if ( is_front_page() && is_home() ) : ?>          <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>          <?php else : ?>          <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>          <?php endif;        $description = get_bloginfo( 'description', 'display' );       if ( $description || is_customize_preview() ) : ?>          <p class="site-description"><?php echo $description; ?></p>       <?php endif;    ?>    <button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>    </div><!-- .site-branding -->    </header><!-- .site-header -->     <div id="content" class="site-content full-width"> 

Hemos hecho varias cosas aquí. Le hemos dado al elemento <body>una clase personalizada, llamada full-width-body. También hemos agregado una clsse full-width a site-header, site-brandingy site-content, para que podamos asignarles CSS personalizado. Como último paso, nos hemos deshecho de todos los elementos de la barra lateral (tanto el div sidebar como la llamada a get_sidebar), porque no los queremos en nuestra página de ancho completo. El único cambio que hemos realizado en footer-custom.phpes agregar la full-widthclase al elemento footer, así:

<footer id="colophon" class="site-footer full-width" role="contentinfo">

Todo lo que queda por hacer es meter el código en nuestra hoja de estilo:

.full-width-body::before {    display: none; }  .site-content.full-width {    float: none;    margin: 0 auto; }  .site-header.full-width {    background-color: #fff;    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);    margin: 0;    padding: 2% 0; }  .site-branding.full-width {    margin: 0 auto;    width: 58.8235%; }  .site-footer.full-width {    float: none;    margin: 0 auto; }

¡Ta-da! Y aquí está tu página de ancho completo:

Plantilla de página personalizada de ancho completo para el tema Twenty Fifteen. (Ver versión grande)

Podrías necesitar un poco de chapa y pintura, pero estamos satisfechos por el momento. Para obtener más resultados con plantillas de página, consulta mi artículo anterior en SnippetsBoard sobre: Cómo crear y personalizar un tema secundario de WordPress.

Usando functions.php  #

Hemos tocado functions.php. Utiliza este archivo para incluir PHP y funciones nativas de WordPress en tu tema. Esto te dará muchas opciones de personalización. Nota: El archivofunctions.php del tema secundario se carga además del archivo del mismo nombre en el tema principal. De hecho, se ejecuta justo antes del function.php del tema principal, a diferencia de style.css, que reemplaza el archivo original. En consecuencia, no copies el contenido completo del archivo functions.php de tu tema principal en el archivo de tu tema secundario. Más bien, utiliza este último para modificar funciones en el tema principal. Volvamos a personalizar nuestro tema hijo (child theme). En este ejemplo, quiero agregar un área de widgets al pie de página del sitio web. Para hacer esto, primero necesitamos registrar un widget en nuestro archivo functions.php.

<?php  register_sidebar( array(    'name'          => 'Footer Widget',    'id'            => 'footer-widget',    'before_widget' => '<div class="footer-widget">',    'after_widget'  => '</div>' ) );

Nota: La etiqueta<?phpde apertura es el comienzo del archivo functions.php. ¡No lo incluyas si ya hay una! Esto hará que el área de widgets recién creada se muestre en nuestro back-end. Sin embargo, para que se pueda utilizar en el sitio web, debemos agregar el siguiente código a footer.php:

<?php if ( is_active_sidebar( 'footer-widget' ) ) :       dynamic_sidebar( 'footer-widget' );    endif; ?>

Una vez más, copiaremos el footer.php del tema principal de Twenty Fifteen y lo pegaremos en nuestro tema secundario. Esta vez, sin embargo, dejaremos su nombre como está. Después de esto, necesitamos agregar la llamada a nuestro nuevo widget de pie de página para que se vea así:

<?php /**  * The template for displaying the footer  *  * Contains the closing of the "site-content" div and all content after.  *  * @package WordPress  * @subpackage Twenty_Fifteen  * @since Twenty Fifteen 1.0  */ ?>     </div><!-- .site-content -->     <footer id="colophon" class="site-footer" role="contentinfo">       <div class="site-info">       <?php if ( is_active_sidebar( 'footer-widget' ) ) :             dynamic_sidebar( 'footer-widget' );          endif;       ?>          <?php             /**              * Fires before the Twenty Fifteen footer text for footer customization.              *              * @since Twenty Fifteen 1.0              */             do_action( 'twentyfifteen_credits' );          ?>          <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?></a>       </div><!-- .site-info -->    </footer><!-- .site-footer -->  </div><!-- .site -->  <?php wp_footer(); ?>  </body> </html>

Se necesita un estilo mínimo en style.css:

.footer-widget {    margin: 2% 0; }

Ahora, cuando agreguemos un widget de búsqueda a nuestra nueva área de widgets, la página principal se verá así:

Widget de pie de página personalizado del tema Twenty Fifteen. (Ver versión grande)

No es tan difícil, ¿verdad?

Uso de enlaces temáticos  #

Una mejor manera de modificar un tema hijo (child theme) a través de functions.phpes usar ganchos. Si nunca antes ha oído hablar de los ganchos de temas, piensa en ellos como pequeños anclajes en los archivos de un tema que te permiten agregar contenido, funciones y otras cosas allí mismo, sin tener que editar los archivos principales. Hay dos tipos de ganchos: ganchos de acción y ganchos de filtro. Los ganchos de acción te permiten agregar funcionalidad personalizada a funciones existentes. Los ganchos de filtro son una forma de modificar las funciones presentes en la ubicación del gancho. Repasemos un ejemplo para aclararlo. Usaremos un gancho de acción. Volvemos a nuestro último ejemplo, donde agregamos un área de widgets al pie de página de nuestro tema. En lugar de modificar el archivo footer.php en nuestro tema hijo (child theme), podemos lograr lo mismo usando un gancho de acción. Escribamos una pequeña función:

function custom_footer_widget() {    if ( is_active_sidebar( 'footer-widget' ) ) :       dynamic_sidebar( 'footer-widget' );    endif; }

Notarás que este es esencialmente el mismo código que pegamos footer.php anteriormente, solo que esta vez envuelto en una función (y sin las etiquetas php de apertura y cierre a su alrededor, ya que lo estamos pegando en functions.php). La ventaja de esto es que ahora podemos agregar la función completa a un enlace en los archivos principales de nuestro tema principal, sin tener que editar el archivo en sí. En este caso, apuntamos al archivo twentyfifteen_credits del tema principal. Que es el responsable de los créditos de pie de página («Powered by WordPress») en el tema Twenty Fifteen, y aparece en el footer.php así:

do_action( 'twentyfifteen_credits' ); 

Todo lo que se necesitas para agregar la nueva función para el área de widgets a este gancho es una línea más en el functions.php del tema hijo:

add_action( 'twentyfifteen_credits', 'custom_footer_widget' ); 

Ahora, el área del widget se mostrará exactamente en el mismo lugar donde lo teníamos antes, sin que tengamos que copiar o agregar ningún código al archivo de pie de página del tema. Limpio, ¿eh? Nota: Si estás siguiendo el método a través del functions.php, no olvides eliminar el archivo footer.phpmodificado de tu tema hijo (child theme); de lo contrario, el área de widgets se mostrará dos veces. Se puede hacer mucho más con ganchos en temas secundarios. Algunos frameworks de temas proporcionan un montón de ganchos para que puedas modificar cualquier cosa directamente desde el functions.php. Sin embargo, ese tema está más allá del alcance de este artículo. Si estás interesado en obtener más información, puedes encontrar algunos recursos excelentes en línea. Un buen punto de partida es la Guía rápida y detallada de los Hooks de WordPress de Daniel Pataki.

Resumiendo  #

Como es de esperar que hayas visto, crear un tema hijo (child theme) en WordPress no es muy complicado. Todo lo que necesitas es una carpeta más dos archivos. Sin embargo, a pesar de la simplicidad, un tema hijo (child theme) es bastante potente. Nos permite personalizar un sitio web de forma completa y segura sin editar ningún archivo principal. Los beneficios de esto son numerosos: puede construir sobre un tema o marco existente sin tener que escribir un tema desde cero; los cambios están a salvo de las actualizaciones de temas; y, si las cosas salen mal, siempre tendrás un tema funcional al que recurrir. Además, estás obteniendo una educación de primer nivel en la creación de temas de WordPress. No está tan mal, ¿verdad? Por esta razón, aprender sobre temas secundarios es un paso importante en la carrera de cualquier diseñador o desarrollador de WordPress y para aquellos que desean tener más control sobre sus sitios web de WordPress. Espero que este artículo te ayude a empezar. ¿Cuál es tu experiencia con la creación de temas secundarios para WordPress? ¿Tienes algo que añadir? ¿Algo que harías de manera diferente? Compártelo en los comentarios.

¿Qué opinas?

Escrito por Wombat

Deja una respuesta

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

Como crear una página web de forma gratuita con Google Apps Script

Como crear una página web de forma gratuita con Google Apps Script

Desarrollo local de WordPress para principiantes: desde la configuración hasta la implementación