Añadir Widgets

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Los widgets en WordPress permiten añadir contenido dinámico a las áreas específicas de un tema, como barras laterales (sidebars) o el pie de página (footer). En esta lección, aprenderás a registrar nuevos widgets y mostrarlos en tu tema de WordPress.

🔹 1. Registrar áreas de widgets en functions.php

Para que WordPress reconozca nuevas áreas de widgets, debemos registrarlas en el archivo functions.php de nuestro tema.

📌 Código para registrar widgets:

functions.php

if (function_exists('register_sidebar')) {
    register_sidebar(array(
            'name' => 'Footer Left',
            'id'   => 'top-widgets',
            'description'   => 'Widget Area',
            'before_widget' => '<div class="two">',
            'after_widget'  => '</div>',
            'before_title'  => '<h2>',
            'after_title'   => '</h2>'
    ));     
    register_sidebar(array(
            'name' => 'Sidebar Widgets',
            'id'   => 'sidebar-widgets',
            'description'   => 'Widget Area',
            'before_widget' => '<div class="one">',
            'after_widget'  => '</div>',
            'before_title'  => '<h2>',
            'after_title'   => '</h2>'
     ));
}

✅ Explicación del código:

• register_sidebar() se usa para definir nuevas áreas de widgets.
• Cada área tiene un nombre (name), un ID (id) y una descripción.
• Se definen etiquetas HTML para envolver los widgets (before_widget, after_widget) y sus títulos (before_title, after_title).
• En este ejemplo, se han creado dos áreas de widgets:
  1. «Footer Left» (top-widgets) para el pie de página.
  2. «Sidebar Widgets» (sidebar-widgets) para la barra lateral.

🔹 2. Mostrar los widgets en el tema

Después de registrar las áreas de widgets, debemos insertarlas en los archivos del tema, como footer.php o sidebar.php.

📌 Código para mostrar un widget en el footer:

footer.php (o dónde sea)

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Left') ) : ?>
<?php endif; ?>

✅ Explicación del código:

• dynamic_sidebar('Footer Left') muestra el widget si está disponible.
• La condición if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Left')) evita errores si la función no está definida o si no hay widgets activos.

🛠 Dónde colocar este código:

• En el pie de página (footer.php) para mostrar widgets en la parte inferior del sitio.
• En la barra lateral (sidebar.php) si es un widget de sidebar.