13. Las plantillas "sidebar" (barra lateral) y "footer" (pie de página) del Tema de WordPress

(El artículo original y en inglés, fue publicado el 8 de noviembre de 2012)

ThemeShaper es el sitio del Equipo de Temas de Automattic, que, en junio de 2009, publicó una muy popular serie de 11 artículos de Ian Stewart, bajo el título: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial (Como crear un Tema de WordPress: el tutorial definitivo).
El año pasado, reflotó y actualizó ese tutorial. Esta vez con 16 artículos a cargo de Michelle Langston:  The ThemeShaper WordPress Theme Tutorial: 2nd Edition (Tutorial de Temas de WordPress de ThemeShaper. Segunda edición).
Me propongo traducir libremente esas 16 entradas (además de la introducción) e ir publicándolas a medida que las tenga listas.
Al final de cada entrada va el listado con todas las entradas de este tutorial.

Vamos a redondear la construcción de nuestro Tema con las plantillas para la barra lateral (sidebar) y el pie de página (footer).

Registro de los Sidebars

Comencemos con los sidebars. En WordPress, el término “sidebar” hace referencia a la parte del Tema que contiene los widgets.

Nuestro Tema va a tener dos áreas para widgets. De esta forma, podremos reutilizar este código para Temas de 2 columnas o de 3 columnas (en un Tema de 2 columnas los sidebars están apilados, uno sobre el otro).

Esto es bastante sencillo. En nuestro archivo functions.php vamos a registrar nuestra área de widget. Básicamente, le estamos diciendo a WordPress: hey, crea estas dos áreas nuevas, hacia ellas, la gente podrá arrastrar los widgets desde Apariencia → Widgets en el Escritorio de WordPress.

Pegue el siguiente código en functions.php. Si así lo prefiere, puede pegarlo al final del archivo. Yo siempre prefiero pegarlo enseguida después de add_action( 'after_setup_theme', 'shape_setup' );, pero, haga como quiera.

/**
 * Register widgetized area and update sidebar with default widgets
 *
 * @since Shape 1.0
 */
function shape_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Primary Widget Area', 'shape' ),
        'id' => 'sidebar-1',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h1 class="widget-title">',
        'after_title' => '</h1>',
    ) );
 
    register_sidebar( array(
        'name' => __( 'Secondary Widget Area', 'shape' ),
        'id' => 'sidebar-2',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h1 class="widget-title">',
        'after_title' => '</h1>',
    ) );
}
add_action( 'widgets_init', 'shape_widgets_init' );

Ahora tenemos dos áreas de widgets: Primary Widget Area (‘sidebar-1′) y Secondary Widget Area (‘sidebar-2′). No hay razón para nombrarlas como Primary Sidebar o Secondary Sidebar, ya que en algunos diseños podrían ni siquiera ser barras laterales (sidebars) — pero siempre serán áreas de widgets. Preste atención en el código a los valores de ‘id’ (sidebar-1 y sidebar-2), porque los utilizaremos más tarde para llamar a esas áreas de widgets desde nuestra plantilla sidebar.

Además de los valores ‘id’, la función register_sidebar() nos permite especificar otras informaciones sobre las áreas de widget:

name => __( 'Secondary Widget Area', 'shape' )

Este es el nombre que específicamente tendrá esta área de widget en la página de administración de widgets ( Aparinecia → Widgets).

'before_widget' => '<aside id="%1$s" class="widget %2$s">'

Este es el elemento html de apertura que alojará al contenido del widget. Aquí, estamos envolviendo cada widget individual dentro de un elemento article. Es importante dejar en su lugar a los marcadores de posición “%1$s” y “%2$s” en los atributos ID y class, respectivamente, porque WordPress los sustituye con  IDs únicos y clases específicas para widgets. Esto es útil para estilizar con css widgets específicos o grupos de widgets.

'after_widget' => '</aside>'

Esto cierra el elemento article que envuelve cada widget individual.

'before_title' => '<h1 class="widget-title">'

Aquí, especificamos que el título de cada widget deberá estar envuelto dentro de un elemento h1 con el nombre de clase “widget-title”.

'after_title' => '</h1>'

Aquí, cerramos el elemento h1 después que el título del widget termina.

Si está interesado, el Codex de WordPress tiene más información sobre register_sidebar().

El código de la plantilla Sidebar

Muy bien, WordPress ya sabe que nuestra área de widget existe, y cómo debería ser formateada. Ahora solo nos queda hacer que se muestren en nuestro Tema. Aquí es donde la plantilla sidebar.php aparece. Siga adelante y ábra ese archivo.

Para la “Primary Widget Area”, vamos a incrustar directamente algunos widgets predefinidos: los widgets "Search", "Archives", y "Meta". Si el usuario no ha arrastrado ningún widgets dentro de la “Primary Widget Area” en su Escritorio, verá esos widgets predefinidos.

La “Secondary Widget Area” no contendrá nigún widget predefinido. De hecho, la Secondary Widget Area solo aparecerá si contiene algún widget activo.

Vamos a definir la plantilla sidebar, y primero crearemos la Primary Widget Area. En sidebar.php, pegue lo siguiente.

<?php
/**
* The Sidebar containing the main widget areas.
*
* @package Shape
* @since Shape 1.0
*/
?>
<div id="secondary" class="widget-area" role="complementary">
    <?php do_action( 'before_sidebar' ); ?>
    <?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>
 
        <aside id="search" class="widget widget_search">
            <?php get_search_form(); ?>
        </aside>
 
        <aside id="archives" class="widget">
            <h1 class="widget-title"><?php _e( 'Archives', 'shape' ); ?></h1>
            <ul>
                <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
            </ul>
        </aside>
 
        <aside id="meta" class="widget">
            <h1 class="widget-title"><?php _e( 'Meta', 'shape' ); ?></h1>
            <ul>
                <?php wp_register(); ?>
                <li><?php wp_loginout(); ?></li>
                <?php wp_meta(); ?>
            </ul>
        </aside>
 
    <?php endif; // end sidebar widget area ?>
</div><!-- #secondary .widget-area -->

Nuestra Primary Widget Area está envuelta dentro del div #secondary. En español, el código dice, “SI (if) ‘sidebar-1′ (“Primary Widget Area”) no contiene widgets activos, muestra estos widgets predefinidos. De no ser así, muestra los widgets activos que fueron agregados a través de Apariencia → Widgets.

Ahora, vamos a crear el código para la "Secondary Widget Area". Pegue el siguiente código justo después de <!-- #secondary .widget-area -->

<div id="tertiary" class="widget-area" role="supplementary">
     <?php dynamic_sidebar( 'sidebar-2' ); ?>
</div><!-- #tertiary .widget-area -->

Muy sencillo. Toda el área sidebar está envuelta en una declaración condicional que muestra el código de este sidebar SOLO si el mismo contiene widgets. Si va a la página de administración de widgets y quita todos esos widgets de la “Secondary Widget Area”, la sentencia condicional que aloja este código fallará. Buenas noticias. Y para nuestro beneficio: no hay widgets = no hay código. Súper simple.

Tal el modo que nos gustan las cosas por aquí.

La plantilla Footer

Finalmente, vamos a construir nuestra plantilla footer. Es muy sencilla. Contendrá lo siguiente:

• El cierre del div #main content que envuelve todo el contenido del sitio.
• Una sección al pie que muestra el nombre del Tema y la línea “Powered by WordPress”.
• wp_footer(), el importante "gancho" (hook) que muchos plugins utilizan.
• Las etiquetas de cierre del div envolvente, del body y del html.

Aquí está como se ve (pegue todo esto en footer.php):

<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the id=main div and all content after
*
* @package Shape
* @since Shape 1.0
*/
?>
 
</div><!-- #main .site-main -->
 
<footer id="colophon" class="site-footer" role="contentinfo">
    <div class="site-info">
        <?php do_action( 'shape_credits' ); ?>
        <a href="http://wordpress.org/" title="<?php esc_attr_e( 'A Semantic Personal Publishing Platform', 'shape' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'shape' ), 'WordPress' ); ?></a>
        <span class="sep"> | </span>
        <?php printf( __( 'Theme: %1$s by %2$s.', 'shape' ), 'Shape', '<a href="http://themeshaper.com/" rel="designer">ThemeShaper</a>' ); ?>
    </div><!-- .site-info -->
</footer><!-- #colophon .site-footer -->
</div><!-- #page .hfeed .site -->
 
<?php wp_footer(); ?>
 
</body>
</html>

Complete los detalles de los créditos según corresponda.
Y está listo. Con nuestras plantillas construidas, manténganse sintonizados para aprender como colorearlos un poquito.

Sumario de entradas

0. Introducción.
1. El desarrollo de su "sentido temático".
2. Herramientas para el desarrollo de Temas de WordPress.
3. Creación de una estructura html para su Tema de Wordpress.
4. Plantillas y estructura de directorios de un Tema de WordPress.
5. Configuración de las funciones de su Tema.
6. Asegure su Tema de WordPress.
7. La plantilla cabecera del tema de WordPress: header.php.
8. La plantilla Index de su Tema de WordPress.
9. Las plantillas Entrada Individual, Entrada de Adjuntos y error 404 del Tema de WordPress.
10. La plantilla de comentarios de un Tema de WordPress.
11. La plantilla de búsqueda (search) y la plantilla página (page) del Tema de WordPress.
12. La plantilla Archivo.
13. Las plantillas "sidebar" (barra lateral) y "footer" (pie de página) del Tema de WordPress.
14. Como resetear y reconstruir los CSS de su Tema de WordPress y definir su diseño.
15. Fondo y cabecera personalizados.
16. Distribuir su Tema de WordPress.