Este va a ser el primero de una serie de articulos en los que trataremos en profundidad el theme de WordPress Astra.
Para iniciar esta serie de artículos vamos a empezar con una de las características que nos va a ahorrar mucho tiempo, especialmente a la hora de trabajar en partes comunes en toda la web. Hoy os explicaremos como utilizar los hooks de la plantilla Astra de WordPress.
Índice de contenidos
Qué son los hooks de astra
A grandes rasgos y de una forma un poco simplificada podríamos decir que los hooks son unos «contenedores» o «ubicaciones» que están repartidos por toda la plantilla y que nos permiten crear un contenido adicional ya sea en forma de código, texto plano, shortcodes o con editores visuales tales como Elementor o Beaver Builder.
A continuación os dejamos una imagen del mapa de hooks de la plantilla.
Creamos nuestro primer hook en astra pro
Una vez instalado el plugin que añade las opciones de pago a nuestra versión gratuita de Astra seguiremos la ruta Apariencia / opciones de Astra y activaremos el módulo diseños personalizados (recuadro rojo de la imagen).
Podremos observar que debajo de opciones de Astra nos aparece una nueva opción, diseños personalizados (recuadro azul de la imagen). Clicamos y seguimos a la siguiente pantalla.
Para añadir nuestro diseño personalizado bastará con clicar en el botón añadir. Ahora simplemente tendremos que crear y personalizar el contenido de nuestro hook:
- Añadimos el titulo del diseño personalizado.
- En el caso de que vayamos a general en contenido a través de código clicaremos el botón de activar código. Un ejemplo claro de para qué podriamos utilizar esta opción es para insertar el código de seguimiento de Google Analitycs. Al agregar el código, debes tener en cuenta incluir declaraciones de apertura del código que pegues, es decir, definir si es php, css o javascript.
- Este botón nos ayudará a crear el contenido desde un editor visual. Puede variar dependiendo de que editor utilicemos. Si no tenemos ninguno instalado esta opción no estará disponible, obligandonos a crear el contenido en el punto de la imagen marcado con el numero 4.
- Para crear el contenido con el editor clásico de WordPress.
- En este desplegable definiremos que tipo de diseño vamos ha crear. Astra pro nos permite personalizar las secciones de cabecera, pie de página y la página de error 404 que son temas que tocaremos en posteriores artículos. Nosotros seleccionaremos hooks.
- En el aparatado acción definiremos en que hook queremos que se aplique nuestra personalización. Para saber que hook nos interesa consultaremos el mapa de hooks que os dejamos unas lineas mas arriba. Puntualizar que en dicha imagen solo aparecen los hooks estandar, dependiendo de que plugins tengamos instalados en este selector nos aparecerán más. Un ejemplo claro de este es si tenemos Woocomerce.
- Pongamos el caso de que queremos personalizar 2 secciones y que dichas secciones se deben insertar en el mismo hook. La sección prioridad es para definir cual se ejecutará antes. A prioridad más baja se ejecutará antes.
- La sección espaciado es para definir margenes en el hook.
- En mostrar en definiremos donde queremos que se aplique nuestro hook añadiendo una regla de visualización o donde no queremos que se vea agregando una regla de exclusión.
- En perfiles de usuarios definiremos que rol de usuario podrán ver la personalización del hook.
Pongamos un par de ejemplos que es quizás como mejor se entiende como funcionan los hooks:
Ejemplo 1: Añadir botones para compartir en redes sociales en el pie del contenido de todas las páginas de nuestra web excluyendo la página de contacto y para todos los usuarios.
Ejemplo 2: Añadir botones para compartir en redes sociales y artículos relacionados en el pie de las entradas del blog después de los comentarios y para todos los usuarios.
Alternativa gratuita a astra pro
Trabajar con los hooks de Astra Pro ofrece una gran versatilidad en cuanto a opciones de diseño y personalización, es muy intuitiva y fácil de usar.
Bien, pues hasta aquí el primero de un número de artículos en los que entraremos en profundidad a explicar las múltiples opciones que tiene este fantástico theme. Recuerda que si tienes alguna duda respecto al tema de este post puedes hacerlo dejando un comentario. Saludos
