Capçalera i menús

Capçalera

Ja varem parlar de la informació que tenia que haver-hi al header, però aprofitant que ja sabem utilitzar el condicional, a aquesta classe modificarem el codi que tenim al header.php.

Totes les pàgines necessiten tenir un títol i nosaltres ho farem aprofitant la funció bloginfo(). Aquesta és una funció molt utilitzada a WordPress i els paràmetres més utilitzats són:

  • bloginfo(‘name’) = Retorna el nom del blog que hem introduït a Opcions > General.
  • bloginfo(‘description’) = Retorna la descripció del blog que hem introduït a Opcions > General.
  • bloginfo(‘site_url’) = Retorna el directori a on està instal.lat WordPress.
  • bloginfo(‘stylesheet_url’) = Retorna la ruta de la fulla d’estils.
  • bloginfo(‘template_url’) = Retorna la ruta del directori del tema.

Saben tot això anem a veure com poder fer que el títol de la nostra web canviï depenent de la secció en la que ens trobem. Obrim l’arxiu header.php i busquem el següent codi:


<title><?php wp_title(); ?></title>

Que ens descriu com es mostra el títol de la secció a la que estem. Com ho tenim ara sempre mostrarà el títol de la secció. Si substituïm aquest codi per:


<title><?php if (is_home()) { echo bloginfo('name'); echo ' | '; echo bloginfo('description'); } else { echo wp_title('');echo ' | '; echo bloginfo('name'); } ?></title>

El que aconseguirem es que quan estiguem al home al títol ens mostri el nom del bloc bloginfo(‘name’) seguit de la descripció bloginfo(‘description’);. I quan estiguem a un altre tipus de secció (entrades, pàgines, categories…) ens mostrarà el títol de la secció seguit del nom del blog. Això es pot variar tant com es vulgui depenent de les necessitats de cada un.

Com ha exercici es pot provar de mostrar informació diferent al títol segons la secció. Per exemple, podrien fer que al entrar a una categoria, al títol es mostrés només el nom de la categoria. Al entrar a una pàgina o entrada el nom de la pàgina o entrada seguit de la descripció de la web i per la resta (com per exemple entrades d’un autor concret) mostrar el títol del bloc.

Com que tenim el header.php obert aprofitarem per canviar la manera en que carreguem el logo de la web. Buscarem aquest codi:


<div id="logo" class="clear">
      <img src="http://www.galiescu.com/wp-content/themes/temapropi/images/logo.jpg" />
</div><!-- end of logo -->

I canviarem la ruta de la imatge per:


<img src="<?php bloginfo('template_url'); ?>/images/logo.png" />

Com ha exercici podem fer el mateix amb les imatges del div “social” i “lang”.

Si també volem que el logo sigui un enllaç al home haurem d’afegir un href amb en següent codi:

<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" /></a>

Una altre manera per fer el mateix seria:

<a href="<?php echo get_option('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" /></a>

On echo get_option(‘home’) ens crea un enllaç al inici de la nostra web.

Una altre possiblitat de fer el mateix seria:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" /></a>

En aquesta segona opció utilitzem dues funcions esc url que ens depura la url i home url que recupera la url principal del nostre lloc.

Crear Menús

Per activar la funció de menús a l’apartat Aparença haurem de modificar l’arxiu functions.php com ho hem fet per activar les imatges destacades o els sidebars. Les funcions de WordPress que serveixen per això són register_nav_menu (per registrar un únic menú) o register_nav_menus (per múltiples menús).

Com que nosaltres només tenim un sol menú farem servir la funció register_nav_menu. Obrin l’arxiu functions.php i posem aquest codi:


register_nav_menu( 'menu', 'Menu Superior' );

Aquesta funció té aquesta estructura:

register_nav_menu( $location, $description );

La primera variable defineix la posició i la segona és una descripció.

Si tinguéssim 2 menús, per exemple un a la part superior i un a la part inferior llavors el codi que aniria al fuctions.php seria alguna cosa així:


register_nav_menus( array(
'menu' => 'Menu superior',
'menu-footer' => 'Menu inferior'
));

Ara ja podem entrar a Aparença => Menús i veurem això:

wordpress_menus

Un cop definits els menús al functions ja els podem afegir al nostre tema utilitzant la funció wp_nav_menu(). Per fer això, obrirem header.php i buscarem els menús creats amb html:


<nav id="menu">
	<ul id="menu-top">
		<li><a href="#">Inici</a></li>
		<li><a href="#">Pàgina estàtica</a></li>
		<li><a href="#">Categoria</a></li>
		<li><a href="#">Contacte</a></li>
	</ul>
</nav> <!-- end of nav -->

I els substituirem pel següent codi:

<?php wp_nav_menu(
 	array(
 	'container' => 'nav',
	'container_id' => 'menu',
 	'items_wrap' => '<ul id="menu-cap">%3$s</ul>',
 	'theme_location' => 'menu'
 )); ?>

wp_nav_menu() té moltes opcions que podeu consultar al codex però ara comentarem les que hem fet servir:

  • ‘container’ defineix el recipient que conté el menú. Pot ser ‘div’, ‘nav’ o false en el cas de no voler definir cap recipient.
  • ‘container_id’ defineix l’id del container. Si fos una classe seria ‘container_class’
  • ‘items_wrap’ defineix l’estructura del ul. Per defecte
     <ul id="%1$s" class="%2$s">%3$s</ul> 
  • ‘theme_location’ enllaça el menu definit al functions.

Si afegim un fill al menú veurem que no ho fa correctament. Per que ens funcioni bé haurem de afegir codi jQuery. Obrim el functions.php i afegim:

/* JQUERY */
function my_init_method() {
 if (!is_admin()) {
 wp_deregister_script( 'jquery' );
 wp_register_script( 'jquery', '/wp-content/themes/temapropi/scripts/jquery-1.10.2.min.js');
 wp_enqueue_script( 'jquery' );
 }
}
add_action('init', 'my_init_method');

Si us fixeu my_init_method comença amb un condicional on s’especifica que si no estem en l’àrea d’administrador, llavors càrrega nostre jQuery. Això es deu al fet que WordPress ja porta la llibreria i l’utilitza per a l’escriptori. Si nosaltres linquem la llibreria des del header.php del tema sense cap mirament ni condicionals, possiblement algunes seccions de l’Escriptori deixin de funcionar amb normalitat, ja que carregaria dues versions de jQuery i això produiria errors.

Podeu veure més info sobre el tema aquí.

Seguidament modifiquem l’arxiu header i dins de l’etiquetaposem el següent codi:

<script type='text/javascript'>
	$(document).ready(function() {
	 $("#menu-cap ul").css({display: "none"}); //opera fix
	 $("#menu-cap li").hover(function(){
	 $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(300);
	 },function(){
	 $(this).find('ul:first').css({visibility: "hidden"});
	 });
	});
	</script>

$("#menu-cap ul").css({display: "none"}); //opera fix

Aquesta és una petita solució per a Opera , que no amaga els menús bastant ràpid , quan passem el ratolí per sobre d’ells i així crea un efecte de parpelleig.


$("#menu-cap li").hover(function(){ // Efecte al posar el ratoli a sobre
                  },function(){ // efecte al treure el ratoli
                               });

La primera funció li permet definir el que passa quan es passa sobre un element específic ( en el nostre cas un element de la llista ) , segona funció s’utilitza per a l’esdeveniment del ratolí fora.

podeu consultar més info aqui. També hi ha una pàgina interessant on podeu descarregar diferents menús amb efectes aquí.

Després de posar d’afegir el jQuery canviarem els estils del tema relacionats amb el menú per aquests:


/* Menu desplegable */

#menu{
display:block;
text-align:center;
}
#menu-cap {
float:left;
width: 960px;
margin: 0;
padding:5px 0px;
border-top: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1;
height:35px;
position:relative;
z-index:300;
list-style-type:none;
margin-bottom: 20px;
}
#menu-cap ul {
list-style-type:none;
}
#menu-cap a {
float:left;
display:block;
font-size: 14px;
text-decoration:none;
color: #757575;
font-weight:bold;
padding: 10px 25px 10px 10px;
}
#menu-cap a:hover {
color: #363636;
background-color: #e4e4e4;

}
#menu-cap li {
position:relative;
display:inline-block;
}
#menu-cap ul {
position:absolute;
display:none;
width:160px;
top: 35px;
left: -10px;
}
#menu-cap ul a {
float:left;
background: #e4e4e4;;
border: 1px solid white;
border-top:none;
}
#menu-cap li ul{
border-top: 1px solid white;
}
#menu-cap li ul a {
width:150px;
height:auto;
}
#menu-cap ul ul {
top:auto;
}
#menu-cap li ul ul {
margin:0px 0 0 10px;
}
#menu-cap li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul {
display:none;
}
#menu-cap li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul {
display:block;
}

Exercici: Crear un menú al peu d’un sol nivell utilitzant la funció “register_nav_menus”.

Podeu descarregar els arxius de la classe aquí:

[download id=”684″]