slDesign

V – Affichage des pages

Comme vous le savez, WordPress vous permet de créer des pages statistiques. Avant de pouvoir les afficher, il nous faudra réaliser un menu permettant de naviguer entre ces pages.

1°) Création du menu

Nous allons réaliser un menu à l’aide de jQuery. Dans un premier temps, ouvrez votre fichier ‘header.php’ et placez votre curseur juste en dessous de votre balise ‘<div id=”header”>…

2 étapes :

1. Afficher le lien Home
2. Afficher la liste des pages

L’affichage du lien Home est réalisé manuellement, il n’y a pas de fonction spécifique. Concernant le listage des pages, nous utiliserons la fonction wp_list_pages();

<!-- Affiche la navigation par page -->
	<div id="sld-tabs">
	<ul>
	<?php
	//Gestion de la page Home
    if(is_home() && !is_paged()){ ?>
    	<li id="nav-homelink" class="current_page_item"><a href="<?php echo get_settings('home'); ?>" title="<?php _e('You are Home','sldesign'); ?>"><span><span><?php _e('Home','sldesign'); ?></span></span></a></li>
    <?php } else { ?>
    	<li id="nav-homelink"><a href="<?php echo get_option('home'); ?>" title="<?php _e('Click for Home','sldesign'); ?>"><span><span><?php _e('Home','sldesign'); ?></span></span></a></li>
    <?php
    }
    //Affiche la liste des pages en classant par ordre défini dans l'admin et en enlevant le header 'pages'
    wp_list_pages('sort_column=menu_order&title_li=');
    ?>
	</ul>
	</div>

Le résultat sans mise en forme est le suivant :

Il est important d’analyser le code généré, car nous aurons besoin de comprendre la structure pour sa mise ne forme :

Code HTML généré :

<div id="sld-tabs">
<ul>
<li id="nav-homelink" class="current_page_item"><a href="http://localhost/wp" title="You are Home"><span><span>Home</span></span></a></li>
<li class="page_item page-item-78"><a href="http://localhost/wp/services/" title="Services">Services</a>
<ul class='children'>
<li class="page_item page-item-80"><a href="http://localhost/wp/services/creation-de-sites-web/" title="Création de sites Web">Création de sites Web</a></li>
<li class="page_item page-item-82"><a href="http://localhost/wp/services/graphismes/" title="Graphismes">Graphismes</a></li>
</ul>
</li>
<li class="page_item page-item-2"><a href="http://localhost/wp/a-propos/" title="À propos">À propos</a></li>
<li class="page_item page-item-75"><a href="http://localhost/wp/contact/" title="Contact">Contact</a></li>
</ul>
</div>

Il ne reste plus qu’à mettre nos liens en forme…

Fonctions utiles :

wp_list_pages() : Permet de lister les pages

wp_enqueue_script : Chargement de script à la volée

2°) Création du template de page

Créer le template de page ‘page.php’. Encore une fois, si ce fichier existe, il est chargé par défaut, sinon, c’est le contenu de la page Index qui joue le role de conteneur.

Rien de bien compliqué, nous reprenons le même schéma que pour le chargement des articles.

Je laisse libre cours à votre imagination… vous pouvez ajouter des éléments graphiques ou tout autre contenu textuel.

Code de la page page.php

3°) Personnalisation de la page 404

Sur le même principe que la création de page, vous avez la possibilité de créer une page 404 et de la personnaliser. Dans l’exemple suivant, une page 404.php est créée, une mise en forme CSS est réalisée et nous ajoutons en bas de page le formulaire de recherche :

<?php
get_header();
?>
<div id="content_full_page" class="not-found">
<div class="bug_404"></div>
<h2>oOps !</h2>
<p>
<?php
_e('The page you are looking for doesnt exist :\'(','sldesign');
?>
</p>
<h3><?php _e('Try one off this links : ','sldesign');?></h3>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
<h3><?php _e('Search on ','sldesign');?><?php bloginfo('name');?> : </h3>
<?php get_search_form();?>
</div>
<?php
get_footer();
?>

Le résultat en image :

Nous allons nous arrêter là en ce qui concerne la personnalisation des pages mais sachez que vous pouvez personnaliser d’autres pages.

Liste des pages pouvant être personnalisées :

• archives.php : Pages regroupant les archives de votre blog
• searchform.php : Moteur de recherche
• search.php : Résultat de recherche
• author.php : Information (profil) d’un rédacteur / membre