Capçalera

Obriu l'editor i creeu un nou fitxer anomenat header.php. Seguidament, obriu el fitxer index.html i seleccioneu des del principi del document fins a l'etiqueta de tancament de la regió capcalera i copieu aquest fragment de l'estructura al nou fitxer header.php.

header.php

A continuació realitzareu una sèrie de canvis perquè la capçalera sigui completament operativa com a tema de Wordpress. En realitat, el que fareu serà reemplaçar els elements estàtics del document HTML per funcions pròpies del Wordpress i, per tant, de caràcter dinàmic.

Afegiu al principi de l'arxiu header.php la següent expressió: 

<?php
/**
 * @package WordPress
 * @subpackage D227
 */
?>

No deixeu cap espai buït o línia en blanc al principi del document. En cas contrari l'arxiu serà inoperatiu per a l'intèrpret de PHP.

Remplaçeu l'atribut lang="ca" per la funció bloginfo('language'). Veieu el resultat del canvi: 

<html xmlns="http://www.w3.org/1999/xhtml"  lang="<?php bloginfo('language'); ?>" >

Modificacions dins de l'etiqueta head

Reemplaceu el contingut del títol per la funció bloginfo('name'): 

<title><?php bloginfo('name'); ?></title>

La funció bloginfo() és una funció recurrent per a la realització del tema visual de Wordpress. Aquesta funció mostra, en funció del paràmetre que li passeu, tota aquella informació que heu inclòs a les opcions generals del panell d'administració del Wordpress. Per a més informació: http://codex.wordpress.org/Template_Tags/bloginfo

Modifiqueu el valor de l'enllaç de l'etiqueta link dels fulls d'estils: 

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/reset.css" type="text/css" media="screen, projection"/>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection"/>

  • El paràmatre stylesheet_directory obliga a la funció bloginfo a retornar l'adreça o URL del directori on s'ubica el tema visual. Per exemple: 
    http://example/home/wp/wp-content/themes/d227
  • El paràmetre stylesheet_url obliga a la funció bloginfo a retornar l'adreça o URL del directori on s'ubica el full d'estil style.css. Per exemple 
    http://example/home/wp/wp-content/themes/d227/style.css

Per finalitzar, afegiu la funció wp_head() abans del tancament de l'element head. 

<?php wp_head(); ?>

És important que inclogueu la funció wp_head() ja que, d'altra manera, algunes de les funcionalitats de Wordpress no treballarien correctament.

Modificacions dins de la secció capçalera

La capçalera sofreix un parell de modificacions. En primer lloc, recuperem l'etiqueta img per al logotip, ja que el mètode de reemplaçament d'imatges FIR no permet incloure un enllaça a la pàgina d'inici. Aprofiteu també per incorporar les funcions pròpies de Wordpress. 

<a href="<?php echo bloginfo('url'); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/logotip.png" alt="Logotip de la pàgina"/></a>

  • El paràmatre url obliga a la funció bloginfo a retornar l'adreça del bloc, per exemple:
    http://example/home
  • El paràmatre template_directory obliga a la funció bloginfo a retornar l'adreça o URL del directori on s'ubica el tema visual. Per exemple: 
    http://example/home/wp/wp-content/themes/d227

Reemplaçeu del menú principal la llista d'enllaços per la funció wp_list_pages: 

    <ul id="menu_principal">
	<?php wp_list_pages('title_li='); ?>
    </ul>

La funció wp_list_pages mostra la llista de pàgines de Wordpress. S'acostuma a fer ús d'aquesta funció per personalitzar el menú de navegació de la capçalera o de la columna lateral. EL paràmetre 'title_li=' mostrarà la llista de pàgines dins de les etiquetes li.

Finalment, del menú secundari, incorporeu la següent modificació: 

    <ul id="menu_secundari">
  	<li><a href="<?php echo bloginfo('url'); ?>/about">About</a></li>
	<li><?php wp_loginout(); ?></li>
    </ul>

La funció wp_loginout mostra un enllaç d'autentificació o, en cas contrari, de sortida de la sessió.

Millores del full d'estil

Al recuperar l'etiqueta img, incorporeu l'estil apropiat per al selector #capcalera a img: 

#capcalera a img{  
     position: absolute;
     top: 36.5px; 
 }

Proporcioneu als enllaços de la navegació principal un color diferent quan el punter passi per sobre. 

#menu_principal li a:hover {
	color: #efefef;
}

Milloreu la visibilitat del menú secundari donant-li més farciment a la caixa #menu_secundari. 

#menu_secundari {
	position: absolute;
	right: 0px;
	top: 0px;
	background-color: #8f8d86;
	padding-left: 15px; 
	padding-right: 15px;
	padding-top: 4px;
	padding-bottom: 8px;
} 
 
#menu_secundari  li {
	display: inline;
}
 
 
#menu_secundari  li a {
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 13px;
	padding-right: 5px;	
}

Descarregueu el fitxer header.php.zip i verifiqueu si heu realitzat correctament els canvis.