Como hacer el sidebar del theme para Wordpress – sidebar.php

Seguimos con el tutorial para hacer themes en Wordpress.

En este post vamos a ver como hacer el sidebar de nuestro theme.

El sidebar se almacena en el fichero sidebar.php, y en el mostraremos las categorías, un formulario de busqueda, los archivos de la página por meses y el blogroll, es decir, los enlaces.

Todo esto será lo que se muestre por defecto en nuestro theme, pero lo programaremos para que nuestro Wordpress muestre los widgets en lugar de este contenido en caso de que este preparado para widgets .

Crea el fichero sidebar.php en la carpeta de tu theme e introduce el siguiente codigo :

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

     <div id="sidebar1">
 
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_right') ) : ?>
 
    <h2>Archivos</h2>
    <ul>
    <?php wp_get_archives('type=monthly'); ?>
    </ul>
 
    <?php
    if (wp_version()=='20') {
 
        echo '<h2>Enlaces</h2>';
        get_links(' 1 ' ,' <li> ' , ' </li> ',' ',false,'name',false);
    }else {
         wp_list_bookmarks(array('title_before' => '<h2>', 'title_after' => '</h2>', 'category_before' => ", 'category_after' => "));
    }
 
    ?>
 
    <h2>Categorías</h2>
 
    <ul>
 
    <?php wp_list_cats('&title_li='); ?>
 
    </ul>
 
    <div class="search">
 
    <form method="get" id="searchform" action="<?php bloginfo('url'); ?>" />
 
    <fieldset>
 
    <input class="searchinput" type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="search_query"></input>
    <input class="searchbutton" type="submit" value="Buscar"></input>
    </fieldset>
    </form>
    </div>
    <?php endif; ?>
    </div>­

Imagen con el Código

El div tiene de identificador sidebar1 , que mediante las reglas Css que hemos puesto en el fichero style.css será flotado a la derecha.

En la primera linea de php :

1

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_right') )

comprobamos si nuestro Wordpress esta preparado para widgets y si además hay algun widget en el sidebar_right, en caso de haberlo, se cargaran los widgets, pero si no hay widgets, se cargará el contenido estático que vamos a poner a continuación.

La función wp_get_archives hace un listado de el archivo de la base de datos, y como le hemos especificado como parámetro monthly, listara dentro de elementos <li> enlaces a los meses que lleva de vida nuestro blog.

Es importante crear el elemento <ul> y cerrarlo antes y después de llamar a la función wp_get_archives, ya que la función muestra los meses dentro de elementos li.

Acto seguido, creamos otro elemento ul y lo cerramos.Para listar los enlaces del blogroll,dentro de este ul usamos la funcion get_links en caso de que sea una version de Wordpress antigua o la funcion wp_list_bookmarks de lo contrario.

El metodo es el mismo, se crearan elementos li por cada enace del blogroll.

Después creamos un h2 para las categorías, y usamos el mismo metodo para listar las categorías pero esta vez con la funcion wp_list_cats.

Por último creamos un formulario simple que se envia a la dirección del blog usando la funcion bloginfo(‘url’) en el action del formulario . Para que Wordpress sepa que se trata de una busqueda, el textbox del formulario ha de tener de nombre “s”.

Por ultimo cerramos el if que comprueba se hay widgets en el sidebar y derramos el div sidebar1.

Ya tenemos el sidebar, pero ahora tenemos que crear el fichero functions.php, donde definiremos la funcion wp_version() , que se usa en header.php y registraremos el sidebar derecho para que pueda usar widgets.

Crea el fichero functions.php e introduce el siguiente código :

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

<?php
if ( function_exists('register_sidebar') ) {
    register_sidebar( array('name' => 'sidebar_left', 'before_widget' => '', 'after_widget' => '', 'before_title' => '
<h2>', 'after_title' => '</h2>
 
') );
    register_sidebar( array('name' => 'sidebar_right', 'before_widget' => '', 'after_widget' => '', 'before_title' => '
<h2>', 'after_title' => '</h2>
 
') );
}
 
function wp_version() {
	global $wp_db_version;
 
	if ( $wp_db_version < 3582 ) {
		return '20';
	} else {
		return '21';
	}
}
?>

Lo primero que hacemos es definir los sidebar derecho e izquierdo si la funcion register_sidebar existe, de esta forma nos apareceran dos sidebars en la parte de administración (Presentación -> Widgets) sobre los que poner widgets…

Después definimos la función wp_version que hemos usado antes.

Con esto ya tenemos nuestro sidebar preparado para widgets.

Si no introducimos ningun widget en el sidebar derecho en Presentación -> Widgets, apareceran los archivos, el blogroll, las categorías y un formulario de busqueda, por este orden, de lo contrario, apareran los widgets .

Ya tenemos nuestros ficheros functions.php y sidebar.php, ademas de los ficheros style.css y header.php que hicimos anteriormente, en el siguiente post crearemos el fichero index.php, que es el punto de entrada de la portada del blog, y el fichero single.php, que es el punto de entrada de un post en concreto.