Tutorial Child Theme II. Action Hook

hook

En el primer tutorial sobre Child Theme cambiamos el aspecto de nuestra plantilla con las hojas de estilo. En este tutorial también cambiaremos el aspecto, pero usando Action Hook.

¿Qué son Action Hook?

Los Action Hook son funciones que nos permiten insertar código personalizado sin modificar el código original de la plantilla. Hay dos tipos de Hook: Action Hook y Filter Hook. En este tutorial nos centraremos en los Action Hook y en próximos tutoriales veremos los Filter Hook.

Los Action Hook nos permiten insertar código personalizado sin modificar el código original de la plantilla.

Las ventajas de usar Action Hook:

  • El mantenimiento de nuestro código resulta más sencillo.
  • Si actualizamos la plantilla padre no perderemos nuestra personalización

¿Dónde se encuentran?

Los Action Hook pueden tener diferente origen, están los Hooks del core de wordpress y los de plantilla (no todas las plantillas tienen Hook). Para localizar los Hook de wordpress, repasamos la documentación de codex. Y para los Hook de plantilla debemos buscar en la documentación de la propia plantilla. En este tutorial vamos a usar como ejemplo la plantilla Orbit, y localizaremos los Hook en la documentación.

¿Cómo se utilizan?

Los Action Hook se pueden utilizar en el archivo functions.php de la plantilla, pero si queremos actualizar la plantilla sin perder nuestra personalización, mejor creamos un Child Theme o plantilla hija. En el tutorial anterior vimos cómo crear un Child Theme llamado childorbit.

Recordamos brevemente como crear un Child Theme:

  1. Creamos una carpeta llamada childorbit dentro de la carpeta themes de nuestro WordPress
  2. Dentro de la carpeta childorbit creamos un fichero style.css con el siguiente contenido
  3. /*
       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");
    
  4. Activamos childorbit como plantilla de nuestro WordPress

Ejemplo paso a paso

Ahora que tenemos creado nuestro Child Theme vamos con nuestra personalización. En este ejemplo queremos poner unos enlaces justo antes del pie de página. Queremos algo así:

tutorial-child-theme-hook

Visualizamos el código en el navegador (en el primer tutorial explicamos como ver el código). Vemos que nuestros enlaces personalizados deben estar situados antes de la etiqueta footer.

tutorial-child-theme-hook-html-code

En la documentación de orbit localizamos el Hook cerca del footer. Vemos que nos interesa el Hook bit_content_container_end.

Ahora vamos a insertar nuestro enlaces. Para ello debemos crear un fichero functions.php dentro de nuestro childorbit. Nuestra carpeta childorbit debe contener estos dos ficheros:

  • style.css
  • functions.php

Dentro de functions.php debemos crear una función que muestra nuestros enlaces. Por ejemplo:

function childorbit_add_my_links() {
?>

<ul class="mylinks">
	<li><a href="http://myurl.com">Servicios</a></li>
	<li><a href="http://myurl.com">Productos</a></li>
	<li><a href="http://myurl.com">Ofertas</a></li>
</ul>

<?php
}

Añadimos la siguiente linea para conectar la función childorbit_add_my_links con nuestro Hook bit_content_container_end

add_action( 'bit_content_container_end', 'childorbit_add_my_links' );

El fichero functions.php debe quedar así:

<?php 

function childorbit_add_my_links() {
?>

<ul class="mylinks">
	<li><a href="http://myurl.com">Servicios</a></li>
	<li><a href="http://myurl.com">Productos</a></li>
	<li><a href="http://myurl.com">Ofertas</a></li>
</ul>

<?php
}
add_action( 'bit_content_container_end', 'childorbit_add_my_links' );

?>

Esto hace que el Hook bit_content_container_end llame a la función childorbit_add_my_links que a su vez muestra nuestros enlaces personalizados.

Rematamos la faena con un poco de estilo para los enlaces. Para ello insertamos el siguiente código en style.css de nuestro chilorbit.

/*
   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");

.mylinks:before,
.mylinks:after {
	content:"";
	display:table;
}
.mylinks:after {
	clear:both;
}
.mylinks li {
	float: left;
	list-style: none;
	width: 30%;
	text-align: center;
	margin-bottom: 24px;
}
.mylinks li a {
	font: bold 20px Verdana, sans-serif;
	border: 1px solid #069;
	padding: 2px 20px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

Actualizamos el navegador para ver los cambios:

tutorial-child-theme-hook-final-result

Puedes bajar el código desde aquí

El uso de Action Hook tiene inconvenientes. No siempre vamos a encontrar Hooks donde más nos interesa, pero normalmente se sitúan al inicio y final de bloques, como cabeceras, pies de página, artículos, etc… Si la situación de los hook de la plantilla no nos viene bien, siempre podemos hablar con el programador de la plantilla, y pedirle que incluya nuevos hook en la siguiente versión. Si crees que la plantilla orbit necesita nuevos Hooks, puedes comentarlo en el foro de soporte.

Usar los Action Hook nos puede parecer un poco pesado. Pero es mucho mejor que insertar código directamente en las plantillas originales, mejoramos el mantenimiento de nuestro código y podremos actualizar nuestro WordPress y plantilla padre sin riesgo a perder los cambios.

En el siguiente tutorial veremos como cambiar el aspecto de nuestra plantilla con templates.

Deja un comentario

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