Theme WordPress, le fichier index.php

Dans la première partie de ce dossier, nous avons donc vu le fichier header.php. Attanquons nous désormais à la page d’accueil du site avec le fichier index.php.

Ce fichier sera donc, par défaut, la page d’accueil de notre site. Nous allons continuer à travailler autour de thème réalisé pour 4h18.com.

Un accueil 100% widgetisé

Comme vous le savez peut-être si vous êtes de fidèles lecteurs (ce dont je ne doute pas un seul instant), j’ai décidé de totalement widgétiser ma page d’accueil.

J’ai donc définis plusieurs zones ou bloc dans les quels je viens placer les divers contenus de la page d’accueil de 4h18. Cette façon de fonctionner me donne énormément de souplesse dans la gestion du contenu de l’accueil du site. Grace à cela, à tout moment, je peux donc modifier la façon dont la page se présente en utilisant la flexibilité des widgets.

C’est très pratique et m’évite de devoir systématiquement replonger dans le code source de la page. En terme de performances pures il n’est pas certains que j’y gagne, mais il n’est pas dit que j’y perde. Dans un cas comme dans l’autre, les appels à la base de données restent assez nombreux.

Les puristes objecterons (à raison) qu’un plugin c’est toujours des lignes codes supplémentaires embarquées là où il n’y en a paas forcément besoin. Soit. Dans le cas de 4h18, je pense que le serveur est suffisamment armé pour encaisser ce léger embonpoint.

La maquette

Pour bien commencer, et conserver un fil conducteur, il nous faut donc passer une maquette de notre page d’accueil. Voici un aperçu de ce que j’avais dans la tête pour 4h18.

Pour créer votre maquette : cacoo.com, un outil en ligne, gratuit.

Je ne souhaite ni un site type magazine stricto-senso, ni un blog avec un affichage anté-chronologique classique. Je ne souhaite pas non plus afficher un slider, trop commun, trop attendu, et pas vraiment efficace.

Du fait d’un fort contenu texte, 4h18 serait plus proche d’un site d’information traditionnel, j’ai donc besoin de valoriser ce dernier. Ma cible étant plutôt des débutants, il faut qu’ils puissent trouver, dès la page d’accueil des liens vers les informations essentielles sur la prise en main de WordPress.

Je ne souhaite pas non plus me couper des visiteurs qui cherchent des informations plus orientés vers les habitués de WordPress, ou encore celles et ceux qui cherchent des astuces ou conseils sur le blogging. Le choix d’une home widgétisée s’impose donc pour moi comme un choix naturel.

Je pense donc une maquette, ce qui me permet de dégrossir le travail et d’avoir une ligne de conduite à suivre pour mon code html. Cela m’évitera de perdre du temps à bouger sans cesse mes blocs sur toute ma page. Cette visualisation me permet donc de gagner du temps sur la suite des travaux.

La visualisation des Widget sur l'accueil de 4h18

Comme vous le constatez, nous avons donc trois niveaux horizontaux. La zone de widget apparaissent en rouge sur la maquette. Vous noterez que seule la partie contenue dans le rectangle gris sera contenue dans notre fichier index.php.

La partie supérieure, le header du site est contenu dans le fichier header.php. Nous verrons la partie inférieure ultérieurement qui est, elle, contenue dans le fichier footer.php

Premier niveau

Le premier niveau reçoit 3 widgets. Je peux ainsi afficher soit un contenu texte, soit des liens vers des articles du site sous forme de liste. Le choix étant fait d’avoir des listes pour faire « entrer » rapidement le visiteur dans le site.

Second niveau

Pour cet emplacement, j’ai choisi d’utiliser un seul bloc. Je vais utiliser le widget Category Post pour afficher 3 articles. Le bloc contenant l’extrait sera un bloc en float:left.

Bien entendu je peux afficher plusieurs « lignes » d’articles avec cette méthode, et mettre ainsi plusieurs catégories à la Une du site.

Troisième niveau

Je reviens sur 3 blocs de widgets afin d’avoir la possibilité d’afficher divers contenus : Articles populaires, Open Blog Roll, Commentaires ou autres.

J’ai donc mon découpage visuel et je sais désormais comment je vais mettre mon index.php en œuvre.

Le code source du fichier index.php

Dans ce fichier, j’utilise la dynamic_sidebar de WordPress pour gérer les appels à mes widgets. Rien d’autre. Pas de loop, pas de wp_query, rien. Ce qui me permet d’avoir un code très propre et bien lisible.

Je vous recommande de copier / coller ce code dans un éditeur de texte pour une meilleure lecture de celui-ci.

<?php get_header(); ?> <!-- On appel le fichier header du site #OBLIGATOIRE  -->

 <div id="main">
 <div>
 <h1>Tout pour votre site WordPress, tout pour bloger</h1>  <!-- Le slogan du site  -->

 <!-- Premier bloc de Widgets  -->
 <div>
 <div>
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("home-top-gauche") ) : ?>
 <?php endif; ?>
 </div>
 <div>
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("home-top-centre") ) : ?>
 <?php endif; ?>
 </div>
 <div>
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("home-top-droite") ) : ?>
 <?php endif; ?>
 </div>
 <div></div>
 </div>

 <!--  Second Bloc de Widgets -->
 <div>
 <div id="m4small">
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("home-n1") ) : ?>
 <?php endif; ?>
 </div>

 <div></div>
 </div>

 <!-- Troisième bloc de Widgets  -->
 <div>
 <div>
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("home-n2-gauche") ) : ?>
 <?php endif; ?>
 </div>
 <div>
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("home-n2-centre") ) : ?>
 <?php endif; ?>
 </div>
 <div>
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("home-n2-droite") ) : ?>
 <?php endif; ?>
 </div>
 <div></div>
 </div>

 </div><!-- fermeture du bloc container -->
 </div><!-- fermeture du bloc main -->
<?php get_footer(); ?> <!-- On appel le FOOTER du SITE #OBLIGATOIRE  -->

Si vous êtes familier du couple CSS / HTML, vous voyez que ce code ne comporte rien de bien extraordinaire en lui même. Je m’appuie plus sur le CSS pour mettre en valeur le contenu du site que sur des effets de manchettes qui, avec le temps, finissent par lasser.

Dans le prochain article, nous verrons le fichier footer.php

URL courte : http://4h18.com/indexphp