Desarrollo de temas desde cero: widgets y áreas de widgets
La personalización es uno de los aspectos más importantes del desarrollo de temas de WordPress. Una forma eficaz de habilitar esta personalización es mediante el uso de widgets y áreas de widgets. En este capítulo, exploraremos cómo puede crear su propio tema desde cero, prestando especial atención a la integración de widgets y áreas de widgets para brindar una experiencia rica y adaptable a los usuarios finales de su tema.
¿Qué son los widgets?
Los widgets en WordPress son bloques de contenido que se pueden agregar, eliminar y reorganizar en las áreas de widgets de su sitio web. Son una parte esencial de la personalización de WordPress, ya que permiten a los usuarios agregar funcionalidad y contenido sin necesidad de código. Los widgets pueden incluir funciones como calendarios, listas de publicaciones recientes, menús de navegación y más.
¿Qué son las áreas de widgets?
Las áreas de widgets, también conocidas como barras laterales, son secciones definidas en un tema de WordPress que permiten a los usuarios arrastrar y soltar widgets en ellas. Estas áreas pueden ubicarse en diferentes partes del diseño de su tema, como la barra lateral, el pie de página o el encabezado. La creación de múltiples áreas de widgets permite a los usuarios de temas tener flexibilidad para personalizar el diseño y el contenido de su sitio web.
Desarrollar áreas de widgets
Para crear áreas de widgets en su tema de WordPress, debe registrar estas áreas en el archivo functions.php
de su tema. Esto se hace usando la función register_sidebar()
de WordPress.
barra_lateral_registro(matriz(
'nombre' => __('Barra lateral', 'mitema'),
'identificación' => 'barra lateral-1',
'descripción' => __('Agregue widgets aquí para que aparezcan en su barra lateral', 'mytheme'),
'before_widget' => '<sección id="%1$s" class="widget %2$s">',
'after_widget' => '</sección>',
'antes_título' => '<h2 class="widget-title">',
'después_título' => '</h2>',
) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );
?>
En este código, está definiendo un área de widget con un nombre, ID y descripción. Además, está especificando el HTML que se usará antes y después de cada widget y título, lo cual es útil para diseñar sus widgets y títulos de manera consistente.
Mostrar áreas de widgets
Después de registrar sus áreas de widgets, debe indicarle a WordPress dónde mostrarlas en su tema. Esto se hace editando los archivos de plantilla de su tema y usando la función dynamic_sidebar()
. Por ejemplo, para mostrar la barra lateral que registró, agregaría el siguiente código al archivo apropiado (generalmente sidebar.php
o directamente a index.php
, página .php
, etc.):
<aparte id="secundario" clase="área-widget">
<?phpdynamic_sidebar('barra lateral-1'); ?>
</aparte>
<?php endif; ?>
Este código comprueba si hay widgets activos en el área 'barra lateral-1'. Si lo hay, muestra el área del widget dentro de una etiqueta <aside>
.
Creación de widgets personalizados
Además de utilizar los widgets predeterminados de WordPress, puede crear widgets personalizados para agregar funcionalidades específicas a su tema. Para crear un widget personalizado, debe extender la clase WP_Widget
de WordPress e implementar los métodos __construct()
, widget()
, . ()
y actualizar()
.
// generador de widgets
función pública __construct() {
padre::__construcción(
'my_custom_widget', // ID base
'Mi widget personalizado', // Nombre
array( 'descripción' => __( 'Un widget personalizado para su sitio.', 'mytheme' ), ) // Args
);
}
// Visualización frontal del widget
widget de función pública( $args, $instancia ) {
echo $args['before_widget'];
if ( ! vacío( $instancia['título'] ) ) {
echo $args['before_title'] . apply_filters('widget_title', $instancia['título']). $args['después_título'];
}
// El contenido del widget personalizado va aquí
eco $args['after_widget'];
}
// Formulario de widget de backend
formulario de función pública ($instancia) {
// Los campos del formulario van aquí
}
// Desinfecta los valores del formulario del widget a medida que se guardan
actualización de función pública ($nueva_instancia, $antigua_instancia) {
// Las opciones para guardar van aquí
}
}
// Registrar mi widget personalizado
función registrar_my_custom_widget() {
registrar_widget('Mi_Widget_personalizado');
}
add_action( 'widgets_init', 'register_my_custom_widget' );
Este código define una clase para su widget personalizado y registra ese widget para que pueda usarse dentro de las áreas de widgets de su tema. El método widget()
es donde defines lo que se mostrará en la interfaz del sitio cuando se utilice el widget. El método form()
se utiliza para crear el formulario en el backend que permitirá a los usuarios configurar el widget, y el método update()
es responsable de guardar y validar el opciones de widgets.
Conclusión
Los widgets y las áreas de widgets son herramientas poderosas que permiten a los desarrolladores de temas de WordPress crear temas altamente personalizables y fáciles de usar. Al comprender cómo registrar, mostrar y crear widgets personalizados, puede mejorar significativamente la funcionalidad y flexibilidad de su tema. Con la práctica, creará temas complejos y ricos en funciones que satisfarán las necesidades específicas de sus usuarios.