Le fichier index.php de votre thème WordPress

Dans la première partie de ce dossier, nous avons donc vu le fichier header.phpLangage serveur qui permet de généré les pages de votre site à la volée selon les informations demandées par l’internaute. Fonctionne traditionnellement de concert avec un base de données, de type MySQL. Avec PHP, on parle de site dynamique.. 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 serveurOrdinateur distant sur le quel les fichiers de votre site sont hébergés. 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 htmlHtml : Langage courant des pages internet composé de balises qui permettent de structurer la page et son contenu. 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.

Une home page entièrement widgetisée

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.

Télécharger ce fichier d’exemple et renommez de exemple.txt en exemple.php afin d’avoir la coloration syntaxique avec votre éditeur.

Si vous êtes familier du couple CSSAcronyme de Cascade Style Sheet. Langage qui permet gère tout l’aspect visuel de votre site. On parle en français de feuille de style. / 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