WordPress: desarrollo de temas modernos con ganchos de acción
Desarrollar excelentes temas de WordPress es un verdadero desafío. Pero incluso el ajuste aparentemente fácil de los temas existentes puede volverse bastante difícil con bastante rapidez.
Cada vez más desarrolladores utilizan ganchos de acción en sus archivos de plantilla, ya que ayudan a mantener una visión general clara de los archivos individuales, así como de las funciones utilizadas. Como hay muy poca información sobre cómo trabajar con ganchos de acción, tanto los usuarios principiantes como los avanzados tienden a quedarse sin ideas rápidamente.
Ganchos de acción de WordPress: una introducción
Para evitar que eso le suceda, hoy analizaremos los ganchos de acción y sus ventajas, para evitarle estas frustraciones.
Si quieres abrir un WooCommerce tienda, puede considerar ajustar el popular Tema de escaparate a sus necesidades. Después de abrir el archivo de plantilla para mostrar la página de inicio, verá esto:
Bienvenido al nuevo y claro mundo de la temática.
Como puede ver, no hay bucles en este archivo. Otros archivos de temas de Storefront también están diseñados así. Sin embargo, estos archivos podrían limpiarse aún más:
Tematización con ganchos de acción llevados a ebullición. Un archivo de tema no necesita contener más que esto.
Aquí, un único gancho de acción se encarga de mostrar el contenido de la página estrella.
<?php do_action( 'homepage' ); ?>El principio de los ganchos de acción de WordPress
El principio detrás de esto es bastante simple y ya lo sabe. WordPress ya ofrece un par de ganchos predefinidos, que se usan comúnmente. Éstas incluyen:
<?php
//Well Known Action Hooks:
wp_head();
wp_footer();
the_content();
the_excerpt();
?>El principio permanece: las funciones se “enlazan” y se ejecutan o se muestran. Sus propios ganchos de acción personalizados funcionan de la misma manera. Pero, ¿cuál es exactamente el beneficio de este tipo de desarrollo?
La gran ventaja de este tipo de desarrollo de temas
Ahora, probablemente se preguntará cuál es el beneficio de este tipo de desarrollo. La respuesta es obvia. Aparte de la claridad de las plantillas individuales, existe otro beneficio inmejorable:
Para editar individualmente y agregar nuevas funciones a un tema existente no es necesario tocar un solo archivo de tema. La mayor fuente de errores en los archivos de temas personalizados desaparece por completo.
Se pueden agregar modificaciones y funciones personalizadas a las plantillas sin tener que cambiar estos archivos, utilizando ganchos de acción. Pueden aparecer “mágicamente” justo donde usted quiere. Permítame resumir:
- Estructuras claras
- Claridad absoluta
- Todas las funciones en un solo lugar
- No se requiere ajuste de archivos de un solo tema
Cómo trabajar con los ganchos de acción de WordPress
Una vez que lo domines, trabajar con ganchos de acción es bastante simple. Usted define su propio gancho, programa su función y engancha. Crear un gancho propio es fácil, la función necesaria se llama do_action() Sin embargo, antes de lidiar con eso, hay algunas cosas a tener en cuenta.
Paso 1: A qué debe prestar atención
La claridad es el aspecto más importante. Debe recopilar todas las funciones de la plantilla en un archivo. El functions.php, sin embargo, no es el archivo adecuado para este trabajo. Cree un archivo propio para este trabajo, donde recopila todas las funciones que trabajan en la exhibición del tema.
El tema Storefront sirve como un buen ejemplo aquí, ya que encontrará todas las funciones de la plantilla en la carpeta /C ª en el archivo storefront-template-functions.php. Recomiendo configurar un archivo como ese también. Una carpeta /C ª es el lugar adecuado para este archivo.
Sin embargo, aún debe informar a WordPress sobre la existencia del archivo. Una línea de código en el functions.php se asegura de que su archivo esté cargado:
<?php require_once( get_stylesheet_directory(). '/inc/template-functions.php' ); ?>Documente correctamente su código
Una documentación adecuada de su código es crucial. Suponga que otras personas también tendrán que entender su código. Incluso si ese no es el caso, después de un año, tendrá problemas para encontrar su propio tema.
Una documentación adecuada proporciona una visión general perfecta en todo momento. He resuelto este requisito así:
Así es como debería verse una documentación adecuada. Incluso se mencionan la carpeta respectiva y los archivos.
Schritt 2: Definición de un gancho de acción de WordPress
Defina su gancho dentro de los corchetes. Por ejemplo, podría llamarse así:
<?php do_action( 'startpage' ); ?>Si necesita dividir palabras, use guiones bajos en lugar de guiones.
<?php do_action( 'startpage_loop' ); ?>Ahora, coloque este gancho en el archivo de tema, donde quiera que esté la función. No está restringido aquí y puede usar sus ganchos de acción en casi cualquier lugar. Antes o después del contenido, antes o después del encabezado, o de los comentarios, por ejemplo. Un ejemplo es Storefront’s single.php:
El single.php de Storefront Theme es una buena muestra de las posibilidades del Hook.
Paso 3: Trabajar con los ganchos de acción de WordPress
Usemos la página de inicio del tema Storefront como ejemplo una vez más. Rápidamente se dará cuenta de que trabajar con los ganchos es bastante fácil de entender. Aquí está el gancho de la página de inicio una vez más:
<?php do_action( 'homepage' ); ?>Ahora, escriba sus funciones en el archivo que configuró para eso.
<?php
if ( ! function_exists( 'storefront_homepage_content' ) ) {
/**
* Display homepage content
* Hooked into the `homepage` action in the homepage template
*
* @since 1.0.0
* @return void
*/
function storefront_homepage_content() {
while ( have_posts() ) {
the_post();
get_template_part( 'content', 'homepage' );
} // end of the loop.
}
}Luego, su función se engancha y se mueve al lugar respectivo:
<?php
add_action( 'homepage', 'storefront_homepage_content', 10 );Su función ahora aparecerá en la página de inicio. Primero, escriba el gancho de acción, luego ingrese el nombre de la función en el add_action() etiqueta. Es así de simple.
Paso 4: un gancho, muchas funciones
Pero, ¿cómo se colocan muchas funciones con un solo gancho? El secreto está en las prioridades. Cuanto menor sea el número de prioridad, más alta aparecerá la función. Echemos un vistazo de cerca a la plantilla:
El archivo de la página de inicio del tema de Storefront.
Siete funciones comparten un gancho de acción. Esto es posible gracias a las prioridades que aparecen detrás de cada función enganchada. Aquí en el ejemplo, esto va desde la prioridad 10 hasta la prioridad 70.
Estos números determinan el orden de las funciones ejecutadas. El diez aparece en la parte superior, el 70 en la parte inferior. Distribuimos las prioridades con el add_action() etiqueta:
<?php
// The 10 is the priority
add_action( 'homepage', 'storefront_homepage_content', 10 );Funciones intermedias simplemente deslizantes
Controlar la visualización de su archivo es así de simple y, en el caso de nuestro ejemplo, incluso puede deslizar funciones en el archivo donde quiera. Simplemente ingrese una «prioridad intermedia» para su función.
<?php
add_action( 'homepage', 'your-own-function', 15 );Ahora, debido a la prioridad, su función personalizada se muestra entre el contenido de la página de inicio de Storefront y las categorías de productos.
WooCommerce: agregar botones para compartir sin modificaciones en la plantilla
Cada propietario de una tienda WooCommerce quiere agregar los botones de compartir importantes en la pantalla de un producto individual. Gracias a los ganchos de acción, esto se puede hacer en unos minutos. El archivo respectivo en el que conectamos nuestros botones para compartir es share.php.
El share.php con el gancho de acción, en el que enganchamos nuestros botones de compartir.
Además de la integración automática de los botones para compartir en el tema, muchos complementos de botones para compartir le ofrecen la opción de colocarlos manualmente. En su mayor parte, esto se hace usando un shortcode. El código abreviado para la integración manual en el archivo de tema se ve así:
<?php echo do_shortcode('[your-button-plugin]'); ?>La función requerida para la integración en la vista de un solo producto se vería así:
<?php
/**
* Implementing Share Buttons on the Page of an Individual Product
*/
function share_for_woocommerce() {
echo do_shortcode('[dein-button-plugin]');
}
add_action( 'woocommerce_share', 'share_for_woocommerce' );Como solo se enlaza una función, no es necesario definir prioridades.
El resultado:
Comparta botones en el lugar correcto sin haber tocado el archivo de plantilla. ¡Perfecto!
Conclusión
Los ganchos de acción de WordPress son una excelente manera de mantener los archivos de un tema claros y estructurados. Una buena documentación de código con una estructura de plantillas y carpetas bien pensada ofrece enormes ventajas, ya que permite a otros desarrolladores orientarse rápidamente.
Además, esta temática moderna es muy fácil de usar, ya que no es necesario modificar archivos para ajustar un tema.
#WordPress #desarrollo #temas #modernos #con #ganchos #acción
