Crear un tema WordPress desde cero – Creación de zonas para Widgets

Name: Crear un tema WordPress desde cero – Creación de zonas para Widgets
Brand: Jose Aguilar
SKU: joseaguilarblog-6521
Availability: InStock
Rating: 5 (3 reviews)

En informática, un widget es una pequeña aplicación o programa, usualmente presentado en archivos o ficheros pequeños que son ejecutados por un motor de widgets o Widget Engine. Entre sus objetivos están dar fácil acceso a funciones frecuentemente usadas y proveer de información visual. Aunque no es condición indispensable, los widgets suelen ser utilizados para ser «empotrados» en otra página web, copiando el código que el mismo widget pone a disposición del usuario. Dado que son pequeñas aplicaciones, los widgets pueden hacer todo lo que la imaginación desee e interactuar con servicios e información distribuida en Internet; pueden ser vistosos relojes en pantalla, notas, calculadoras, calendarios, agendas, juegos, ventanas con información del tiempo en su ciudad, incluso sistemas de tiendas de comercio, etc.

En la administración de WordPress tenemos un apartado de Widgets donde comúnmente prácticamente todas las plantillas al menos tienen un Widget Sidebar para añadir plugins a la columna derecha o izquierda de la plantilla.

Nuestra plantilla va a disponer de varios Widgets. Empezaremos con las 2 columnas, tendremos que registrar 2 Widgets para las sidebars.

En el archivo functions.php incluiremos el siguiente archivo:

Source code

include(TEMPLATEPATH . '/includes/widgets.php');

En este archivo añadiremos el registro de nuestras sidebars con la función register_sidebar(array) que dispone WordPress:

Source code

register_sidebar(array(
 'name' => 'Sidebar Left',
 'before_widget' => '<div class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));
 
register_sidebar(array(
 'name' => 'Sidebar Right',
 'before_widget' => '<div class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));

Como puedes observar, para registrar una sidebar, tenemos que asignarle un nombre y definir los tags html que lo van a componer.

Ahora si accedemos a Apariencia – Widgets veremos 2 zonas nuevas para añadir plugins.

Ahora solo falta añadir el siguiente código en las plantillas. Lo añadiremos en todos los archivos que vamos a utilizar, es decir: index.php, archive.php, single.php, etc.

El archivo index.php ya lo habíamos editado en el tema 3 – Construyendo la base de nuestra plantilla donde añadimos la maquetación previa. Ahora en este archivo añadiremos las sidebars quedando de la siguiente forma:

Source code

<?php get_header(); ?>
<div id="sidebar_left" class="col-xs-12 col-sm-3 col-md-3 col-lg-3 hidden-xs hidden-sm">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Left') ) : endif; ?>
</div>
<div id="content" class="col-xs-12 col-sm-8 col-md-6 col-lg-6">
    <div class="home col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h1>Your Home</h1>
    </div>
</div>
<div id="sidebar_right" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Right') ) : endif; ?>
</div>
<?php get_footer(); ?>

Como podrás observar estamos utilizando la función dynamic_sidebar($name) para capturar todos los plugins asociados a la sidebar $name.

Añadimos un poco de maquetación a los tags html de los widgets para las sidebars y obtendremos algo más vistoso nuestro front office. En la demostración no nos vamos a matar mucho en la maquetación porque es irrelevante ya que cada uno quedrá maquetarlo a su gusto o necesidad.

Bien, ya hemos conseguimos disponer de los widgets para las sidebars o columnas pero ahora también queremos definir otras posiciones para añadir otro tipo de plugins.

En la cabecera queremos incorporar un buscador a la derecha. Crearemos otro Widget para la cabecera.

En nuestro archivo mytheme/includes/widgets.php o en el functions.php añadiremos lo siguiente:

Source code

add_action('widgets_init','header_widgets_init');
 
function header_widgets_init(){
    $args = array(
    'name'          => 'Header Widget Zone',
    'id'            => 'header-widget',
    'description'   => '',
    'before_widget' => '<div class="header-widget col-sm-3">',
    'after_widget'  => '</div>',
    'before_title'  => '<h2>',
    'after_title'   => '</h2>' );
    register_sidebar($args);
}

Si te fijas, estamos utilizando la misma función que para registrar las sidebars: register_sidebar($args) pero dentro de una función para añadir esta última como acción.

Ahora en el apartado de Widgets de la administración dispondremos de otra posición para añadir plugins con el nombre de Header Widget Zone.

Ahora solo falta acceder al archivo header.php que es donde queremos incorporar este nuevo hook o posición y añadir lo siguiente:

Source code

<?php if (!dynamic_sidebar('header-widget')) {} ?>

En este momento aparecerá cualquier plugin o widget que hayas añadido a tu nueva zona para widgets de la cabecera. Nosotros queremos añadir el buscador.

Consiguiendo el siguiente resultado:

En el pie de página queremos añadir 4 columnas.

En nuestro archivo mytheme/includes/widgets.php o en el functions.php añadiremos lo siguiente:

Source code

add_action('widgets_init','footer1_widgets_init');
 
function footer1_widgets_init(){
    $args = array(
    'name'          => 'Footer Widget Zone 1',
    'id'            => 'footer-widget1',
    'description'   => '',
    'before_widget' => '<div class="footer-widget col-sm-3">',
    'after_widget'  => '</div>',
    'before_title'  => '<h2>',
    'after_title'   => '</h2>' );
    register_sidebar($args);
}
 
add_action('widgets_init','footer2_widgets_init');
 
function footer2_widgets_init(){
    $args = array(
    'name'          => 'Footer Widget Zone 2',
    'id'            => 'footer-widget2',
    'description'   => '',
    'before_widget' => '<div class="footer-widget col-sm-3">',
    'after_widget'  => '</div>',
    'before_title'  => '<h2>',
    'after_title'   => '</h2>' );
    register_sidebar($args);
}
 
add_action('widgets_init','footer3_widgets_init');
 
function footer3_widgets_init(){
    $args = array(
    'name'          => 'Footer Widget Zone 3',
    'id'            => 'footer-widget3',
    'description'   => '',
    'before_widget' => '<div class="footer-widget col-sm-3">',
    'after_widget'  => '</div>',
    'before_title'  => '<h2>',
    'after_title'   => '</h2>' );
    register_sidebar($args);
}
 
add_action('widgets_init','footer4_widgets_init');
 
function footer4_widgets_init(){
    $args = array(
    'name'          => 'Footer Widget Zone 4',
    'id'            => 'footer-widget4',
    'description'   => '',
    'before_widget' => '<div class="footer-widget col-sm-3">',
    'after_widget'  => '</div>',
    'before_title'  => '<h2>',
    'after_title'   => '</h2>' );
    register_sidebar($args);
}

Acabamos de añadir 4 zonas nuevas para añadir Widgets. Ahora solo nos falta editar el archivo footer.php de nuestra plantilla habilitando las nuevas zonas. Nuestro footer.php quedará así:

Source code

</div>
<div id="footer" class="row">   
    <div id="footer-wrapper" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <?php if (!dynamic_sidebar('footer-widget1')) {} ?>
        <?php if (!dynamic_sidebar('footer-widget2')) {} ?>
        <?php if (!dynamic_sidebar('footer-widget3')) {} ?>
        <?php if (!dynamic_sidebar('footer-widget4')) {} ?>
    </div>
</div>
<?php wp_footer(); ?>
</body>
</html>

A partir de este momento si arrastramos Widgets a nuestras nuevas zonas creadas aparecerán en el pie de página. Solo falta darle un toque de maquetación.

Además también queremos añadir una posición para Widgets en la página principal. Aplicaremos la misma idea.

En nuestro archivo mytheme/includes/widgets.php o en el functions.php añadiremos lo siguiente:

Source code

add_action('widgets_init','home_widgets_init');
 
function home_widgets_init(){
    $args = array(
    'name'          => 'Homepage Widget Zone',
    'id'            => 'home-widget',
    'description'   => '',
    'before_widget' => '<div class="col-sm-12">',
    'after_widget'  => '</div>',
    'before_title'  => '<h2>',
    'after_title'   => '</h2>' );
    register_sidebar($args);
}

Seguidamente editar el archivo index.php de nuestra plantilla añadiendo donde queramos lo siguiente:

Source code

<?php if (!dynamic_sidebar('home')) {} ?>

Ahora en la administración tendremos otra nueva zona Homepage Zone Widget donde inicialmente vamos a poner un widget de texto de bienvenida.

Ya tenemos todos nuestros hooks (8 posiciones). Como podrás observar, de esta manera podrás añadir tantos hooks o posiciones como quieras por toda la plantilla.

Otra opción muy interesante para la creación de la página principal es la posibilidad de crear una página de WordPress que represente la homepage y luego en Ajustes – Lectura indicar que quieres que la página principal sea una página estática de las que has creado. En una página puedes hacer infinidad de opciones utilizando los shortcodes de los que hablaremos en el último capítulo.