Tutorial Child Theme III. Templates

En este tutorial vamos a personalizar nuestra plantilla usando Child Theme y ficheros template.

Child Theme Plantillas

Para entender los ficheros template primero debemos explicar como se construyen la páginas de WordPress. Las páginas de WordPress se construyen mediante llamadas a diferentes ficheros php.

Ficheros Template

Cuando WordPress muestra la página con el listado de las entradas del blog, utiliza el fichero index.php.

Esta página está separada en varios bloques: la cabecera, contenido, barra lateral y el pie de página (Esto es sólo un ejemplo, index.php puede contener muchos bloques y ser muy complejo)

Llamadas a ficheros template en WordPress
  • La cabecera suele tener el título del blog y el menú de navegación
  • El bloque de contenido tiene el listado de las entradas del blog
  • La barra lateral contiene elementos añadidos como formularios, otros menús, etc…
  • El pie de página contiene los créditos y otros enlaces.

Normalmene la cabecera, la barra lateral y el pie de página se muestran en muchas páginas del blog, así que para no repetir código, estos bloques se separan en ficheros independientes: header.php sidebar.php y footer.php. Así el fichero index.php llama a todos estos ficheros.

index.php, sidebar.php, header.php y footer.php son ficheros template. WordPress genera las páginas como si fuese un puzzle y sus piezas son los ficheros template.

Estos ficheros están en las plantillas o temas de WordPress. Las plantillas de WordPress deben tener unos ficheros template obligatorios, pero nosotros podemos crear nuevos templates. Puedes ampliar información en la documentación de codex.

Cómo usar los ficheros template

Para realizar nuestra personalización podemos cambiar el código directamente en estos ficheros, pero si actualizamos la plantilla, perdemos nuestros cambios.

La forma elegante de personalizar estos ficheros es mediante un Child Theme.

Buscamos en la plantilla los ficheros template que queremos modificar. Creamos un Child Theme y copiamos estos ficheros dentro del Child Theme. En esas copias haremos todas nuestras modificaciones. Cuando WordPress vaya a construir la página llamará primero al fichero del Child Theme y se olvidará del fichero de la plantilla padre. Los ficheros del Child Theme siempre tienen prefencia respecto a los del padre.

Los ficheros del Child Theme siempre tienen prefencia respecto a los del padre

Personalizar la plantilla paso a paso

La plantilla que vamos a personalizar es Orbit. No nos gusta el pie de página y queremos cambiarlo. Queremos algo parecido a esto:

Pie de página personalizado

Como en tutoriales anteriores, creamos un Child Theme cuya plantilla padre sea Orbit. Lo llamamos childorbit y lo activamos como plantilla de nuestro blog.

Como tenemos que modificar el pie de página, nuestro fichero template a modificar es footer.php. Copiamos el fichero footer.php de la plantilla Orbit en nuestro Child Theme. La estructura de ficheros de nuestro Child Theme queda así:

    childorbit
        - style.css
        - footer.php

Si nos fijamos en la estructura de etiquetas de la plantilla padre, debemos asegurarnos de cerrar las etiquetas div con los id llamados content-container y main-container, que son los contenedores principales de la página. Vamos a nuestra copia del fichero footer.php y borramos todo el código menos las etiquetas señaladas. Obtenemos un footer “limpio” como el siguiente:

<?php
/**
 * Custom footer in child Theme
 */
?>
	</div>	<!-- end content-container -->



	 </div> <!-- end main-container -->

	<?php wp_footer(); ?>
</body>
</html>
Es necesario mantener la linea: <?php wp_footer(); ?>. Esto es un Hook utilizado por el core de WordPress para añadir funcionalidades.

Actualizamos el navegador y vemos que el footer a desaparecido, hasta aquí todo correcto. Ahora añadimos nuestro código. Lo hacemos justo después </div> <!-- end content-container --> y antes de </div> <!-- end main-container -->

<?php
/**
 * Custom footer in child Theme
 */
?>
	</div>	<!-- end content-container -->

	<div class="new-footer">

		<div class="blockmap">

			<iframe width="400" height="155" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps?q=40.432318,-3.686525&amp;num=1&amp;t=h&amp;hl=es&amp;ie=UTF8&amp;z=14&amp;ll=40.432429,-3.686208&amp;output=embed"></iframe></small>

		</div> <!-- end blockmap -->

		<div class="blockaddress">

			<h2>Dirección y Contacto</h2>
			<p>Calle Serrano, 90 28006 Madrid</p>
			<p><strong>Email</strong>: info@serranomadrid.com</p>
			<p><strong>Tlf</strong>: 666 888 999</p>

		</div> <!-- end blockaddress -->

	</div> <!-- end new-footer -->

	</div> <!-- end main-container -->

	<?php wp_footer(); ?>
</body>
</html>

A partir de ahora WordPress llamará al footer.php de nuestro Child Theme y se olvidará del footer.php de la plantilla padre.

Añadimos el estilo en el fichero style.css de nuestro Child Theme

/*
   Theme Name: childorbit
   Theme URI: bitado.com/childorbit
   Description: Child Theme. Parent Theme Orbit
   Author: Pinto
   Author URI: bitado.com
   Template: orbit
   Version: 0.1
*/
@import url("../orbit/style.css");

.new-footer {
  display: inline;
  float: left;
  width: 97.91666666666666%;
  margin: 0 1.0416666666666665%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #555;
  padding: 24px;
  color: #eee;
  margin-bottom: 24px;
}
.new-footer:before,
.new-footer:after {
  content: "";
  display: table;
}
.new-footer:after {
  clear: both;
}
.new-footer h2 {
  color: #eee;
  border-bottom: 1px solid #eee;
  margin-bottom: 16px;
}
.new-footer p {
  margin-bottom: 12px;
}
.blockmap,
.blockaddress {
  display: inline;
  float: left;
  width: 47.91666666666667%;
  margin: 0 1.0416666666666665%;
}
.blockmap iframe,
.blockaddress iframe {
  border: 1px solid #eee;
}

Así queda nuestra personalización.

Plantilla Orbit con pie personalizado

Esta forma de modificar una plantilla WordPress lo podemos hacer con cualquier fichero template. Aquí tenemos un gráfico con la jerarquía de llamada de todos los ficheros de WordPress.

Con esta serie de tutoriales sobre Child Themes hemos visto cambios de estilo, Action Hooks y ficheros template. Para profundizar en mayores cambios también veremos como añadir opciones de plantilla, widgets areas, menús y Filter Hooks. Podemos decir que conocer estas técnicas nos permiten hacer practicamente cualquier personalización con las plantillas de WordPress.

Puedes bajar el código desde aquí

Comentarios

  1. Hola;;

    Necesito ayuda con un footer de una pagina, Me pone dentro que no se puede modificar, el problema es que ya tengo echa la pagina y no puedo cambiar el template. Alguie me puede ayudar¿?

    Gracias

    1. Me imagino que estás cambiando directamente el fichero footer de la plantilla. Si no te deja probablemente es un problema de permisos. Mira este link.

      Si pruebas a hacer un Child Theme y crear un footer.php como indica este tutorial no tendrás ese problema de permisos.

  2. Hola Pedro,

    Enhorabuena por el post 🙂

    Tengo una duda al respecto. ¿Cómo podemos modificar un archivo .php desde un teme hijo que no sea fichero template? En mi caso es un archivo alojado en el tema padre en: mi-tema/shortcodes/archivo.php.

    En este caso no me sobrescribe el archivo del tema padre si creo un archivo con el mismo nombre y alojado en la misma carpeta en el tema hijo.

    ¡Mil gracias de antemano!

    1. Hola Raúl

      Sólo se sobrescriben los ficheros template, los que muestran el código html. Pero se pueden sobrescribir funciones si están escritas de esta forma:

      if ( ! function_exists( 'lo_que_sea') ) {
      function lo_que_sea() {
      ....
      }
      }

      En ese caso puedes crear la función lo_que_sea en functions.php de tu child theme y WordPress llamará a tu función.
      En tu caso, por lo que puedo ver quizás quieras cambiar un shortcode del archivo.php. Para hacer eso lo más fácil es borrar ese shortcode desde functions.php de tu child theme con la función remove_shortcode() y volver a creer el mismo shortcode con tus modificaciones. add_shortcode()(todo desde functions.php de tu child theme).

      Espero haberte ayudado
      Un saludo

      1. ¡Muchísimas gracias Pedro!

        Como me decías, he borrado el shortcode del tema padre y he creado uno nuevo en el tema hijo modificando el primero y ¡funcionó! 🙂

        Lo he hecho usando el Action Hook after_setup_theme:


        add_action( 'after_setup_theme', 'remove_add_shortcode' );

        function remove_add_shortcode() {
        remove_shortcode( 'shortcode' );
        add_shortcode( 'shortcode', 'child_shortcode' );
        }

        function child_shortcode()
        {
        .
        .
        .
        }

        Eso sí, como veo las funciones del shortcode del tema padre no pueden reutilizarse en el shortcode que he creado en el tema hijo, y he tenido que crear nuevas.

        Mi duda es si es posible modificar solamente una de las funciones que construye el shortcode del tema padre, puesto que con ello me bastaría, aunque supongo que es necesario crear el shortcode por completo 😉

        De nuevo, ¡mil gracias!

        Por cierto, después he leído tus posts relacionados (sobre los Action y Filter Hooks) y después de tanto leer en inglés se agradece mucho poder leer sobre el tema en español, jeje.

        ¡Saludos!

        1. Si el shortcode está utilizando funciones auxiliares, me temo que vas a tener que crearlas de nuevo en el tema hijo con otro nombre… Como bien dices tendrás que crear el shortcode por completo.

          Un saludo.

Responder a dany Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *