Si quieres ampliar tus opciones de personalización de tu página web te interesa seguir leyendo este post. En el te explicamos cómo insertar shortcodes en los hooks de WordPress.
Antes en de entrar en lo que es el tutorial, vamos a explicar que son los shortcodes y los hooks de WordPress.
Índice de contenidos
Qué son los shortcodes de WordPress
Un shortcodes es un código abreviado o etiqueta que mediante la inserción en el contenido de la web añade funcionalidades en el contenido y justo en la posición que lo ponemos.
Un shortcodes tiene un aspecto similar a esto: [nombre_del_shortcodes id=‘10’]
Lo más habitual es insertarlo en el contenido que estamos creando, es decir, en el contenido de una página o una entrada. Pero en este post te vamos a explicar a como insertarlos en partes de la estructura de la plantilla.
Existen infinidad de plugin que trabajan con sus propios shortcodes, pero también hay otros que te permiten crear tus propios shortcodes. A continuación te dejo una lista de ellos:
Qué son los hooks de WordPress
A grandes rasgos y de forma muy simplificada los hooks o ganchos de WordPress son contenedores o zonas que están repartidas por toda la estructura del core de WordPress y que nos dan la opción a insertar contenido adicional.
Pero el uso de hooks no es una función exclusiva de WordPress. Existen plantillas que integran sus propios hooks y que sin hacer uso de ninguna línea de código nos permite hacer uso de ellos. Un ejemplo de ello es la plantilla Astra pro, de la que ya hemos hablado en la web, por eso si quieres ampliar tu información y la compresión de los hooks te invitamos a visitarla.
Creando nuestro child theme
Este paso es esencial. Si no queremos perder nuestra personalización en la próxima actualización de la plantilla debemos trabajar con un child theme. Si no sabes como crear uno te invitamos a leer nuestro post CÓMO CREAR UN CHILD THEME EN 3 MINUTOS.
Una vez creado puedes borrar el plugin. Recuerda activar el child theme para trabajar en el.
editando el archivo functions.php
Para nuestro ejemplo lo que vamos a realizar es insertar unos botones para compartir las publicaciones de nuestro blog en todas las entradas de la web. Y los insertaremos en el hook que hay en el recuadro rojo de la imagen.
Desde nuestro administrador de WordPress nos vamos a apariencia/editor de temas y seleccionamos el archivo functions.php. Lo primero que haremos será crear una función en la que decimos que shortcodes vamos a trabajar. Para ello pegamos el siguiente código y modificamos el nombre de la función y el shortcodes con el que vayamos a trabajar:
function nombre_de_la_funcion(){
echo do_shortcode('[Nombre_del_shortcodes id="1396"]');
}
add_action ('nombre_del_hook','nombre_de_la_funcion_que_hemos_definido_anteriormente');
Averiguando el nombre del hook
Para averiguar el nombre del hook con el que vamos a trabajar utilizaremos el plugin Show Hooks.
Una vez instalado y activado nos vamos a nuestro frontend y en la barra superior activamos la opción Show all add action y se nos mostraran todos los Hooks.
Buscamos el hook que no interese dentro de la estructura y lo copiamos. En nuestro caso el hook que nos interesa es : get_template_part_template-parts/header/entry
function redes_sociales(){ echo do_shortcode(''); } add_action ('get_template_part_template-parts/header/entry','redes_sociales');Guardamos los cambios del archivo functions.php y si comprobamos todas las entradas de nuestro blog podremos comprobar que en todas nos aparecen nuestros botones para compartir en redes sociales.
Yo, en mi ejemplo he trabajado con shortcodes creados con Elementor, pero como he comentado antes, puedes trabajar con cualquier plugin que te permita crear shortcodes.
Puedes revisar todos los pasos del tutorial en en siguiente vídeo.
Pues bien, hasta aquí este tutorial en el que te hemos explicado cómo insertar shortcodes en los hooks de WordPress. Si tienes cualquier duda o pregunta te invitamos a que la dejes en los comentarios del post.