Tutorial de widgets de WordPress

 

Los widgets de WordPress son una piedra angular del desarrollo de temas de WordPress y en este tutorial los exploraremos en profundidad. Entonces, ¿qué es un widget de WordPress? Un widget en WordPress es una forma de agrupar una parte del contenido que es específico para un propósito dado y luego se muestra en el sitio web. Si visita Apariencia y luego Widgets en el panel de WordPress, verá muchos tipos de widgets disponibles para usar. Los widgets comunes que puede ver en un sitio web incluyen un widget de archivos, un widget de calendario, un widget de publicaciones de blog más recientes, un widget de comentarios más recientes y muchos más. Echemos un vistazo más de cerca a los widgets ahora y cómo podemos incorporarlos al tema personalizado que hemos estado construyendo juntos.

---

Hacer espacio para los widgets

Antes de poder agregar widgets a su tema, debe dejar algo de espacio disponible para ellos. Por ejemplo, es posible que desee utilizar un widget en el área de la barra lateral, o en el área del encabezado, o quizás en el área del pie de página de su tema. Primero, veremos cómo hacer uso de elementos div y css para crear un tema de dos columnas desde cero para que podamos comenzar a agregar widgets. Vamos a necesitar un div que flotamos a la izquierda para nuestro contenido principal, y un div que flotamos a la derecha para el área de nuestra barra lateral donde colocaremos un widget. Podemos comenzar modificando nuestro archivo index.php y agregando algunos CSS personalizados a nuestro style.css para que el diseño funcione.

index.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<?php   get_header(); ?>       <div class="main-content clearfix"><!-- main-content -->         <div class="main-column"><!-- main-column --> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'theposts', get_post_format() ); } } else { echo '<p>There are no posts!</p>'; } ?>         </div><!-- main-column -->         <div class="sidebar-column"><!-- sidebar-column -->             <p>Content in the sidebar</p>         </div><!-- sidebar-column -->     </div><!-- main-content --> <?php   get_footer();   ?>

style.css

1 2 3 4 5 6 7 8 9 10 11 12 13

.main-column {     width: 70%;     float: left; }   .sidebar-column {     width: 30%;     float: right; }   .main-content {     overflow: auto; }

Ok, hablemos de esto por un momento. Lo primero que notaremos es que en los archivos de temas de WordPress habrá mucha mezcla de código PHP en el marcado de diseño HTML. Esto es una fuente de frustración para algunos, y probablemente lo será para usted en ocasiones, pero así es como se hacen las cosas en WordPress y, lamentablemente, no siempre tendremos una separación de preocupaciones del 100%. Habrá ocasiones en las que tendrá que salir de PHP y luego volver a abrir PHP utilizando una etiqueta de cierre como?> Y luego una etiqueta PHP de reapertura como <? Php. Entre las etiquetas PHP de cierre y apertura, puede escribir un marcado HTML antiguo. Puede que ya esté bastante familiarizado con esto, pero de todos modos es algo de lo que debe estar consciente. Ahora, otra cosa que notará es que usamos comentarios HTML en el archivo index.php. Esto es para ayudarnos a realizar un seguimiento de la apertura y cierre de elementos div. Sin comentarios, probablemente terminará con situaciones en las que no sabe qué div de cierre corresponde a qué div de apertura. Usamos comentarios de <! - main-content ->, <! - main-column -> y <! - sidebar-column -> para ayudarnos en este sentido.

Ahora el marcado real contiene 3 divs. El div más externo es una especie de envoltorio y nos da una forma de administrar las dos columnas que contiene. Dentro de ese div padre hay dos divs hijo. Uno flota hacia la izquierda con un ancho del 70% y el otro hacia la derecha con un ancho del 30%. Tenga en cuenta que el div padre necesita la propiedad css de overflow: auto para que todo esto funcione correctamente. De lo contrario, el div principal no se expandirá ni aumentará su altura automáticamente para contener los dos divs secundarios. ¿No te encanta el CSS?

Visitemos el sitio web para ver cómo van las cosas. Nuestro diseño de dos columnas ahora está en su lugar.

---

Agregar una ubicación de widget dinámico

Cada vez que desee habilitar una función o registrar algo para que se active en WordPress, es probable que agregue algo o refactorice algo en el archivo functions.php de su tema de WordPress y no es diferente al activar los widgets dinámicos en su tema de WordPress. Así que sigamos adelante y abramos ese archivo functions.php ahora y agreguemos algunas ubicaciones de widgets.

Antes de 'activar' los widgets en nuestro tema de WordPress, demostremos a nosotros mismos que aún no están disponibles. Si navegamos hasta el Panel de control y pasamos el cursor sobre la apariencia, podemos ver que todavía no hay un submenú de Widgets. ¡Podemos cambiar eso ahora!

Preste atención al código resaltado al final donde activamos la compatibilidad con widgets en nuestro tema de WordPress. Tenga en cuenta que es la función register_sidebar () la que está haciendo el trabajo pesado por nosotros aquí.
functions.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

<?php   function custom_theme_assets() { wp_enqueue_style( 'style', get_stylesheet_uri() ); }   add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );   register_nav_menus( [ 'primary' => __( 'Primary Menu' ) ] );   function get_the_top_ancestor_id() { global $post; if ( $post->post_parent ) { $ancestors = array_reverse( get_post_ancestors( $post->ID ) ); return $ancestors[0]; } else { return $post->ID; } }   /* sets the excerpt length */ function customize_the_excerpt_length() { return 30; }   add_filter( 'excerpt_length', 'customize_the_excerpt_length' );   /* Add Featured Image Support To Your WordPress Theme */ function add_featured_image_support_to_your_wordpress_theme() { add_theme_support( 'post-thumbnails' ); add_image_size( 'small-thumbnail', 100, 100, true ); add_image_size( 'single-post-image', 960, 250, true ); add_theme_support( 'post-formats', [ 'aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat', 'standard' ] ); }   add_action( 'after_setup_theme', 'add_featured_image_support_to_your_wordpress_theme' );   function initialize_widgets() { register_sidebar( [ 'name' => 'Right Sidebar', 'id'   => 'rightsidebar' ] ); }   add_action( 'widgets_init', 'initialize_widgets' );

Con esto en su lugar, volvamos a visitar ese panel de administración. ¡Echale un vistazo!

Repasemos cómo funciona esto. Lo que hicimos fue crear nuestra propia función llamada initialize_widgets (). Dentro de esta función, hacemos una llamada a la función register_sidebar () ofrecida por WordPress. Ahora, es una función con un nombre un poco extraño porque en realidad es bastante flexible. Lo que realmente estamos haciendo aquí es registrar la ubicación de un widget. Podría estar en la barra lateral, el encabezado, el pie de página o en cualquier otro lugar que nos guste. Ahora, en términos de lo que pasamos como argumento a la función register_sidebar (), notará que estamos pasando en una matriz asociativa que contiene dos pares de clave y valor. La primera clave es la de 'nombre' que tiene un valor de 'Barra lateral derecha'. Esto se refiere a la pantalla legible por humanos que aparece en el área de Widgets de WordPress. La segunda clave es 'id' con un valor de 'rightsidebar'. Este valor nunca será visto por el usuario ni en el área del panel de WordPress. Está ahí para que WordPress identifique de forma única un área de widget frente a otra.

Cuando visitamos http://wordpresstutorial.dev/wp-admin/widgets.php en el panel de WordPress, podemos ver muy claramente que nuestra nueva ubicación de widgets ha sido habilitada. ¡Muy agradable!

---

Cómo usar dynamic_sidebar () en tu tema

Ahora estamos en el punto en el que hemos utilizado HTML y CSS para configurar un diseño de dos columnas, y hemos activado las ubicaciones de los widgets a través de nuestro archivo functions.php. Es posible que tenga la tentación de arrastrar uno de esos widgets desde el panel de WordPress directamente a la 'Barra lateral derecha' que hemos creado. Podrías hacer eso, pero aún no funcionaría. Todavía necesitamos la ayuda de la función dynamic_sidebar () para que esto funcione. Ahora, recuerde que cuando hicimos uso de register_sidebar (), había un 'id' asociado con una ubicación particular de la barra lateral. Necesitaremos pasar el valor de esa identificación a nuestra función dynamic_sidebar () para activar el widget. Veamos cómo hacer esto aquí.

index.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<?php   get_header(); ?>       <div class="main-content clearfix"><!-- main-content -->         <div class="main-column"><!-- main-column --> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'theposts', get_post_format() ); } } else { echo '<p>There are no posts!</p>'; } ?>         </div><!-- main-column -->         <div class="sidebar-column"><!-- sidebar-column --> <?php dynamic_sidebar( 'rightsidebar' ) ?>         </div><!-- sidebar-column -->     </div><!-- main-content --> <?php   get_footer();   ?>

Con esta parte del código en su lugar, sigamos adelante y arrastremos un widget al área de la barra lateral derecha en el panel de WordPress.

Visitemos ahora el sitio web principal y observemos que nuestra barra lateral tiene la lista de categorías con enlaces. ¡Entonces este widget está funcionando!

Ahora podemos agregar cualquiera de los siguientes widgets a nuestra barra lateral si lo deseamos.

• Archivos
  Un archivo mensual de las publicaciones de su sitio.
• Audio
  Muestra un reproductor de audio.
• Calendario
  Un calendario de las publicaciones de su sitio.
• Categorías
  Una lista o menú desplegable de categorías.
• Menú personalizado
  Agrega un menú personalizado a tu barra lateral.
• Imagen
  Muestra una imagen.
• 
  Enlaces de Meta Login, RSS y WordPress.org.
• Páginas
  Una lista de las páginas de su sitio.
• Comentarios recientes Los comentarios
  más recientes de su sitio.
• Publicaciones recientes Publicaciones
  más recientes de su sitio.
• 
  Entradas RSS de cualquier fuente RSS o Atom.
• Buscar
  Un formulario de búsqueda para su sitio.
• Nube de etiquetas
  Una nube de sus etiquetas más utilizadas.
• Texto Texto
  arbitrario o HTML.
• Video
  Muestra un video de la biblioteca de medios o de YouTube, Vimeo u otro proveedor.

---

Cómo agregar un widget al pie de página de WordPress

Puede colocar ubicaciones de widgets donde quiera en sus temas. Solo para mostrar cómo funciona esto, sigamos adelante y agreguemos un widget al área de pie de página de nuestro sitio web. ¿Entonces como hacemos esto? Primero registramos nuevamente la ubicación de un widget en functions.php, luego agregamos el código a footer.php que generará un widget dinámico, y por último, por supuesto, arrastramos uno de los widgets disponibles a la ubicación de nuestro widget recién creado. ¡Probémoslo!

Previamente habíamos configurado la función initialize_widgets () en nuestro archivo functions.php. Dentro de esa función, hicimos una llamada a register_sidebar () para configurar una ubicación de widget. Bueno, queremos agregar otra ubicación de widget, esta vez en el pie de página, por lo que necesitamos hacer otra llamada a register_sidebar () pero esta vez, observe que pasamos un valor diferente para 'nombre' y también un valor diferente para 'id' . El nombre de 'Pie de página' es lo que verá el usuario en el área del widget del panel de WordPress, mientras que la identificación de 'pie de página' es lo que pasaremos a la función dynamic_sidebar () en nuestro archivo footer.php. Tiene sentido, ¿verdad?

1 2 3 4 5 6 7 8 9 10 11 12 13

function initialize_widgets() { register_sidebar( [ 'name' => 'Right Sidebar', 'id'   => 'rightsidebar' ] ); register_sidebar( [ 'name' => 'Footer', 'id'   => 'footer' ] ); }   add_action( 'widgets_init', 'initialize_widgets' );

Ahora podemos arrastrar otro widget a la ubicación del pie de página en el panel como vemos aquí. Esta vez, seleccionaremos el widget Páginas para mostrar en el pie de página.

Actualicemos ese archivo footer.php para que veamos la salida de nuestro nuevo widget.
footer.php

1 2 3 4 5 6 7 8 9 10 11

<footer class="site-footer">     <div class="footer-widget"><!-- footer-widget --> <?php dynamic_sidebar( 'footer' ) ?>     </div><!-- footer-widget -->     <p><?php bloginfo( 'name' ) ?></p> </footer> </div> <!-- closes <div class=container"> -->   <?php wp_footer() ?> </body> </html>

Ahora tenemos un widget activo en el pie de página de nuestro sitio y nos está dando una buena visualización de las páginas de nuestro sitio web en un bonito formato de lista. Todavía no hemos hecho ningún estilo, por lo que nuestros widgets se ven un poco insípidos, pero los hicimos funcionar y esa es la parte divertida.

---

Comprobación de widgets activos con is_active_sidebar ()

Ahora agregaremos un poco de lógica de mejores prácticas a nuestro código. Cuando generamos el marcado de widget con dynamic_sidebar (), y también cualquier div de envoltura que esté preestablecido, primero debemos verificar si una ubicación de widget en particular está activa. Podemos hacer esto con la función is_active_sidebar (). Lo que hace esta función es verificar si el usuario ha configurado un widget para un área de widget específica. Solo si el widget se ha configurado y configurado en el panel de WordPress, deberíamos generarlo en el html de la página. Necesita pasar la identificación del widget que está verificando cuando llama a la función is_active_sidebar (). Veamos cómo agregar esta lógica a nuestras dos ubicaciones de widgets.

Usando is_active_sidebar () en index.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<?php   get_header(); ?>       <div class="main-content clearfix"><!-- main-content -->         <div class="main-column"><!-- main-column --> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'theposts', get_post_format() ); } } else { echo '<p>There are no posts!</p>'; } ?>         </div><!-- main-column --> <?php if ( is_active_sidebar( 'rightsidebar' ) ) { ?>             <div class="sidebar-column"><!-- sidebar-column --> <?php dynamic_sidebar( 'rightsidebar' ) ?>             </div><!-- sidebar-column --> <?php } ?>     </div><!-- main-content --> <?php   get_footer();   ?>

Usando is_active_sidebar () en footer.php

1 2 3 4 5 6 7 8 9 10 11 12 13

<footer class="site-footer"> <?php if ( is_active_sidebar( 'footer' ) ) { ?>         <div class="footer-widget"><!-- footer-widget --> <?php dynamic_sidebar( 'footer' ) ?>         </div><!-- footer-widget --> <?php } ?>     <p><?php bloginfo( 'name' ) ?></p> </footer> </div> <!-- closes <div class=container"> -->   <?php wp_footer() ?> </body> </html>

---

Cómo cambiar el exterior

etiqueta en un widget de WordPress

Es posible que haya notado algo un poco extraño en la salida de los widgets en nuestro sitio web. El título del widget tiene una viñeta como si fuera parte de una lista, pero realmente eso no es lo ideal. Primero, veamos el marcado real que genera WordPress cuando crea html para que el navegador lo procese. Aquí está el html que se creó para nuestro widget de barra lateral:

1 2 3 4 5 6 7 8

<li id="categories-3" class="widget widget_categories"><h2 class="widgettitle">Categories</h2>     <ul>         <li class="cat-item cat-item-4"><a href="http://wordpresstutorial.dev/category/javascript/">JavaScript</a></li>         <li class="cat-item cat-item-3"><a href="http://wordpresstutorial.dev/category/php/">PHP</a></li>         <li class="cat-item cat-item-1"><a href="http://wordpresstutorial.dev/category/tutorial/">Tutorial</a></li>         <li class="cat-item cat-item-2"><a href="http://wordpresstutorial.dev/category/wordpress/">WordPress</a></li>     </ul> </li>

Debido a que el <ul> completo está encerrado en una etiqueta <li>, se ve un poco divertido en la página. Podemos arreglar esto pasando algunos argumentos adicionales a la función register_sidebar () en nuestro archivo functions.php. Específicamente, queremos especificar las opciones 'before_widget' y 'after_widget'. Así es como podemos hacer eso para personalizar la salida del html para los widgets de WordPress. Podemos actualizar la función initialize_widgets () a este código aquí:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function initialize_widgets() { register_sidebar( [ 'name'          => 'Right Sidebar', 'id'            => 'rightsidebar', 'before_widget' => '<div class="widget-item">', 'after_widget'  => '</div>' ] ); register_sidebar( [ 'name'          => 'Footer', 'id'            => 'footer', 'before_widget' => '<div class="widget-item">', 'after_widget'  => '</div>' ] ); }   add_action( 'widgets_init', 'initialize_widgets' );

Cuando vemos nuestros widgets en el sitio, ahora no tienen esa viñeta junto al título del widget. Esto se ve mucho mejor.

Widget de barra lateral Widget de

pie de página

Inspeccionar el marcado real en la página nos muestra que el widget ya no usa una etiqueta li envolvente, sino una etiqueta div.

1 2 3 4 5 6 7 8

<div class="widget-item"><h2 class="widgettitle">Categories</h2>     <ul>         <li class="cat-item cat-item-4"><a href="http://wordpresstutorial.dev/category/javascript/">JavaScript</a></li>         <li class="cat-item cat-item-3"><a href="http://wordpresstutorial.dev/category/php/">PHP</a></li>         <li class="cat-item cat-item-1"><a href="http://wordpresstutorial.dev/category/tutorial/">Tutorial</a></li>         <li class="cat-item cat-item-2"><a href="http://wordpresstutorial.dev/category/wordpress/">WordPress</a></li>     </ul> </div>

Lo mismo ocurre con la salida html del widget en el pie de página.

1 2 3 4 5 6 7 8 9 10 11 12

<div class="widget-item"><h2 class="widgettitle">Our Pages</h2>     <ul>         <li class="page_item page-item-47"><a href="http://wordpresstutorial.dev/about-us/">About Us</a></li>         <li class="page_item page-item-51 page_item_has_children"><a href="http://wordpresstutorial.dev/services/">Services</a>             <ul class='children'>                 <li class="page_item page-item-53"><a href="http://wordpresstutorial.dev/services/consulting/">Consulting</a></li>                 <li class="page_item page-item-55"><a href="http://wordpresstutorial.dev/services/technical-support/">Technical Support</a></li>             </ul>         </li>         <li class="page_item page-item-2"><a href="http://wordpresstutorial.dev/wordpress-example-page/">WordPress Example Page</a></li>     </ul> </div>

---

Resumen del tutorial de widgets de WordPress

En este tutorial, aprendimos todo sobre lo que se entiende por widgets en WordPress. Aprendimos que son un bloque de contenido autónomo que se agrega dinámicamente a un sitio web de WordPress en ubicaciones de widgets elegidas por el desarrollador del tema. Vimos que es bastante sencillo agregar soporte para widgets a un tema personalizado de WordPress. Aprendimos que para usar widgets en WordPress, primero debemos usar la función register_sidebar () una o más veces en functions.php para configurar las ubicaciones de los widgets. Luego, necesitamos hacer uso de las funciones is_active_sidebar () y dynamic_sidebar () en nuestros archivos de tema para generar el marcado del widget en el navegador. Por último, por supuesto, debe arrastrar y soltar los widgets que desea activar en el panel de WordPress y configurar los ajustes a su gusto. ¡Ahora tiene todas las herramientas que necesita para hacer un uso increíble de los widgets en su propio sitio web con WordPress!