Interadictos Blog Programación y sistemas WordPress 3.x para desarrolladores: Temas y plantillas, sidebar.php y sidebar-footer.php
Programación y sistemas

WordPress 3.x para desarrolladores: Temas y plantillas, sidebar.php y sidebar-footer.php

Cron Job WordPress

Ya hemos creado casi todas las partes importantes que necesita la página principal, pero aun nos quedan algunas cosas más por crear.

 

SIDEBAR.PHP

Como expliqué en el post anterior, nuestro tema hace dos llamadas a get_sidebar(). La primera se realiza en index.php, y la segunda en footer.php pero pasando a la función un argumento, en este caso ‘footer‘. Este argumento permite a WordPress buscar una plantilla diferente para sidebar que no sea sidebar.php, en nuestro caso necesitará sidebar-footer.php. Si WordPress no encontrase esta plantilla, cargaría la plantilla principal para el sidebar: sidebar.php.

Creamos el archivo sidebar.php y añadimos el siguiente código:

[codesyntax lang=»php»]

		<div id="secondary" class="widget-area" role="complementary">
			<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

				<aside id="archives" class="widget">
					<h3 class="widget-title"><?php _e( 'Archives', 'newtheme' ); ?></h3>
					<ul>
						<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
					</ul>
				</aside>

				<aside id="meta" class="widget">
					<h3 class="widget-title"><?php _e( 'Meta', 'newtheme' ); ?></h3>
					<ul>
						<?php wp_register(); ?>
						<li><?php wp_loginout(); ?></li>
						<?php wp_meta(); ?>
					</ul>
				</aside>

			<?php endif; // end sidebar widget area ?>
		</div><!-- #secondary .widget-area -->

[/codesyntax]

El código es bastante sencillo, abrimos una nueva capa que contendrá los widgets que no sean de la sidebar sidebar-1. Como puedes ver hay un condicional que hace esto mismo, utilizando la función dynamic_sidebar( ‘sidebar-1’ ). Esta función comprueba si hay widgets o no en la sidebar que le indiquemos. Según el código, si no hay widgets añadimos dos a la columna. El primero está dentro de la etiqueta aside. Esta etiqueta pertenece a HTML5 y se utiliza para crear bloques de contenido tangencial, dicho de otra forma, sirve para crear bloques con contenido que tengan alguna relación con el contenido de la página (una cita del texto, publicidad, una imagen, etc.). Seguimos.

Dentro del bloque aside encontramos el título del bloque, en este caso «Archives» y una lista que se genera con la función wp_get_archives(). Esta función crea un listado de links, en nuestro caso mostrará los meses y el año en los que haya algún post publicado. Para más información sobre este método, lo mejor es que acudas a la fuente http://codex.wordpress.org/Function_Reference/wp_get_archives, ahí te explican todas las opciones que tienes para generar ese listado.

El segundo bloque aside nos muestra una serie de vínculos para registrarnos (siempre que el registro de usuarios esté activo) y/o identificarnos. Por último tenemos la función wp_meta() que permitirá a otros plugins añadir más vínculos a la lista.

 

SIDEBAR-FOOTER.PHP

Ahora vamos a crear los sidebars del pie de la página, para ello creamos el archivo sidebar-footer.php

WordPress nos permite crear plantillas para partes concretas del tema, como por ejemplo estos sidebar que vamos a crear, para ello existe una jerarquía que WordPress siempre respeta, de tal manera que si la plantilla que se le pide no existe busca la siguiente en esa jerarquía.

Aquí teneis un esquema con la jerarquía que sigue WordPress para el contenido: http://codex.wordpress.org/images/1/18/Template_Hierarchy.png

Dicho esto, vamos a crear la plantilla. Creamos el archivo sidebar-footer.php y añadimos el siguiente código:

[codesyntax lang=»php»]

<?php
	/* The footer widget area is triggered if any of the areas
	 * have widgets. So let's check that first.
	 *
	 * If none of the sidebars have widgets, then let's bail early.
	 */
	if (   ! is_active_sidebar( 'sidebar-3'  )
		&& ! is_active_sidebar( 'sidebar-4' )
		&& ! is_active_sidebar( 'sidebar-5'  )
	)
		return;
	// If we get this far, we have widgets. Let do this.
?>
<div id="supplementary" <?php newtheme_footer_sidebar_class(); ?>>
	<?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
	<div id="first" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'sidebar-3' ); ?>
	</div><!-- #first .widget-area -->
	<?php endif; ?>

	<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
	<div id="second" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'sidebar-4' ); ?>
	</div><!-- #second .widget-area -->
	<?php endif; ?>

	<?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
	<div id="third" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'sidebar-5' ); ?>
	</div><!-- #third .widget-area -->
	<?php endif; ?>
</div><!-- #supplementary -->

[/codesyntax]

En primer lugar se comprueba si alguno de los tres sidebars está activo, sino se devuelve un return para dar por finalizado el script y que no se genere código html.

En el caso de que alguno, varios o todos los sidebars estén activos se crean sus respectivos bloques, primero comprobando que el sidebar correspondiente está activo, y después cargando los widgets del sidebar con la función dynamic_sidebar( ‘nombre-del-sidebar’ ).

En la capa que alberga los diferentes sidebars se hace una llamada a newtheme_footer_sidebar_class(), esta función la crearemos más adelante en el archivo functions.php, y principalmente lo que hace es crear el atributo class de la capa y su correspondiente valor.

Ahora que ya empezamos a ver algo de contenido, vamos a añadir los estilos. Aquí te dejo a tu elección que hacer, si crearlos tu a mano desde cero o copiar los estilos del tema Twenty Eleven, ya que serían los que se utilizarían para el tema que estamos creando. En cualquier caso solo necesitas, de momento, los estilos del archivo style.css, el resto los iremos añadiendo con posterioridad.

Salir de la versión móvil