Sidebars i Widgets

La majoria de temes de WordPress inclouen una barra lateral que no té per què aparèixer en totes les pàgines del tema. Aquesta barra normalment està habilitada per posar widgets (ginys), per tant, haurem de preparar aquesta barra per aquesta funció. Per fer-ho, haurem de declarar els sidebars que necessitem a l’arxiu functions.php afegint aquest codi:

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

La funció que ens permet declarar una zona de widgets és register_sidebar(). Després trobem un array (col.lecció) de parametres que podem modificar. El primer paràmetre, name, assigna un nom al nostre giny que figurarà després al nostre escriptori sota de “Ginys” per poder identiticarlo. before_widget i after_widget afegeixen etiquetes a l’inici i al final del mateix, en el nostre cas obrim un div amb class widget i el tanquem. Finalment repetim la mateixa operació però pel títol amb before_title i after_title.

Guardem l’arxiu functions.php i mirem si apareix la nova àrea de ginys a Aparença > Widgets.

Per afegir la zona de widgets al nostre tema obrirem l’arxiu sidebar.php i afegirem el següent codi:


<div id="sidebar">
    <?php dynamic_sidebar('Sidebar');?>
</div>

Amb això ja podem afegir un widget desde l’area de ginys i veure com queda al home, a una entrada o a una pàgina. Com que la posició del giny no és molt estètica podem moure el giny canviant la posicició de get_sidebar() per exemple a dins del div id=”recent-posts”. Quedan així el codi:

<a href="#" class="readmore"><span>Mes info</span></a>

			<?php get_sidebar(); ?>

		</div><!-- end of recent-posts -->       

    </div><!-- end of fila --> 

</div><!-- end of contingut -->

<?php get_footer(); ?>

I aquests estils:


#sidebar {
float: right;
width: 280px;
padding: 40px 0 20px 54px;
}

Per poder continuar amb aquest tema necessitem explicar com funciona el condicional en php:

<?php
 if (condició) {
 Códi a executar si la condició és verdadera
 }
 elseif (una altre condició) {
 Codi a executar si l'altre condició és verdadera
 else {
 Códi a executar si las altres condiciones no són verdaderes
 }
?>

Vist això anem a veure els condicional tags de WordPress que són etiquetes que ens ajuden a construir condicionals depenent de la secció a la que ens trobem. Veiem alguns exemples:

  • is_home(): Quan es mostra la pàgina principal del bloc
  • is_page(): Quan es mostra una pàgina
  • is_single(): Quan es mostra un sol missatge o post
  • is_single(‘7’): Quan es mostra el missatge amb id=’7′ sol
  • is_category(): Quan es mostra una categoria
  • is_archive(): Quan mostra qualsevol tipus de pàgina d’arxiu. Pàgines basades categoria, etiqueta, autor i data són tots els tipus d’arxius

Retornem al tema dels sidebars per mirar com ho hauriem de fer per mostrar un sidebar o no depenen de la secció a la que ens trobem de WordPress.

Com ha exemple si volem que el sidebar que creat només es mostri al home al nostre arxiu sidebar.php posariem:


if (is_home()) {
 dynamic_sidebar('Sidebar');
 }

Exercici: provar de mostrar el sidebar només a una pagina o només a una entrada.

Si el que volem és mostrar dos sidebars diferents depenent de la posició a la web (home, entrada, pàgina…) el que haurem de fer primer és crear un altre sidebar. Obrim el functions.php i al final, abans de tancar el php, afegim aquest codi:

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

Amb aquest codi hem creat una altre sidebar anomenat “Sidebar archive”. Després de guardar l’arxiu veurem que ens apareix una nova zona a Aparença > ginys. Ara crearem el condicional per mostrar un o altre sidebar depenent de la secció:


<?php
 if (is_home()) {
 dynamic_sidebar('Sidebar');
 } elseif (is_archive() || is_single()) {
 dynamic_sidebar('Sidebar Archive');
 }
 ?>

Aquest codi el posarem l’arxiu sidebar substituïm tot el codi de dins del div id=”sidebar”.

Sidebars al Footer

Ara substituirem les 4 seccions que tenim al footer per 4 sidebars. Obrirem el functions.php i declararem el nou sidebar anomenat Footer1 afegin el següent codi al final de l’arxiu abans de tancar el php:

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

Creem un arxiu que es digui sidebar-footer1.php i a dins posarem aquest codi:

<?php
dynamic_sidebar('Sidebar Footer1');
 ?>

Per cridar el no sidebar des del footer buscarem aquest codi del primer div class=”footer-widget”:

<div class="footer-widget">
    	<h3>titol</h3>
     	<p>Sed tempor lectus in risus. Nullam vestibulum, odio ac pulvinar condimentum, urna neque aliquet ipsum, in blandit...</p>
</div>

i ho substituirem per :

<?php get_sidebar('footer1') ?>

Per comprovar que funciona podem afegir un widget de html al sidebar footer1 i posar la mateixa informació que teniem. Al títol posem “títol” i al contingut el mateix que tenim les altres seccions del footer.

footer1

Com ha exercici podem crear 2 zones mes de widgets al footer cambiat el nom per footer2 i footer3.

Per crear el darrer witget del footer em de fer el mateix que en els altres però tenim en compte que el codi que anirà a fuctions.php serà un pel diferent, ja que canvia el div:

 register_sidebar(array(
 'name' => 'Sidebar Footer1',
 'before_widget' => '<div class="footer-widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));
  register_sidebar(array(
 'name' => 'Sidebar Footer2',
 'before_widget' => '<div class="footer-widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));
 register_sidebar(array(
 'name' => 'Sidebar Footer3',
 'before_widget' => '<div class="footer-widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));
  register_sidebar(array(
 'name' => 'Sidebar Footer4',
 'before_widget' => '<div class="footer-widget last">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));

Per que tot estigui bé haurem de tenir l’anterior codi al functions.php, els 4 get_sidebar() al footer i 4 arxius amb el nom sidebar-footer1.php, sidebar-footer2.php, sidebar-footer3.php i sidebar-footer4.php amb el codi corresponent a dins.

Exercici: crear un sidebar específic per les pàgines.

A la propera classe parlarem de la capçalera i els menús.

Podeu descarregar els arxius de la classe aquí:

[download id=”641″]