Francis Chouquet Graphiste Lettering

Création Thème WordPress | Tutorial #15: Création des « sous-templates »

0

Ce tutoriel est le quinzième d’une série d’articles sur la création d’un thème pour WordPress de A à Z. Si vous prenez le train en cours et si vous souhaitez créer votre propre thème de A à Z, je vous conseille fortement de commencer par le premier tutoriel de la série.

Aujourd’hui, nous allons créer ce que j’appelle les « sous-templates ». Ces templates vont vous permettre d’afficher correctement les archives, les résultats des recherche, les pages d’article ou les pages de votre blog. C’est aussi dans ces templates que vous pourrez « styliser » différemments certaines pages de la page d’accueil. Ces templates ne sont pas obligatoires pour faire tourner le blog mais sont fortement recommandés ! Commençons par la page d’archives.

1. Création du template archive.php

Ici, on va créer un template pour les archives qui va nous permettre de donner uniquement les premières lignes des articles. Pourquoi faire ça ? Pour deux raisons: la première est que lorsqu’un visiteur va vouloir naviguer sur votre blog, il voudra trouver rapidement ce qu’il cherche. Afficher les premières lignes des articles lui donnera déjà un aperçu et lui permettra de passer plus rapidement d’un article à un autre. La deuxième raison est une histoire de référencement. Google n’aime pas les doublons, donc dès lors qu’il trouve trop de choses identiques sur différentes pages du blog, il voudra les blacklister ou les mettre au bac à sable. C’est pas très bon pour votre référencement. Mettre uniquement les premières lignes des articles vous évitera ce désagrément. On fera d’ailleurs de même pour les résultats de recherche, dans le template search.php que l’on va créer par la suite, ainsi que pour les pages de catégories.

Alors, qu’est-ce qu’on va bien pouvoir mettre dans ce template ? Et bien, on va tout simplement copier le contenu de l’index (index.php) dans un nouveau template que l’on va nommer archive.php. Le contenu affiché par ce template sera le même que l’index. Mais il va y avoir une petite modification pour nous permettre de n’avoir que les premières lignes du billet. A la ligne:

1 
<?php the_content(); ?>

Remplacez « content » par « excerpt »:

1 
<?php the_excerpt(); ?>

Enregistrez votre template « archive », rafraîchissez votre navigateur. Maintenant, vous n’avez que les premières lignes de l’article.

Alors, je suis sûr que vous vous demandez comment tout ça fonctionne. On n’a rien modifié dans les autres templates, on en a juste créé un nouveau et WordPress comprend qu’il faut aller directement sur lui. Vous vous rappelez de la hiérarchie des templates dans ce tutoriel et notamment sur ce schéma ? WordPress va aller chercher en premier le template archive.php. Et ce n’est que s’il ne le trouve pas qu’il utilisera le template index.php. Et c’est la même chose pour les autres templates que l’on va créer. N’hésitez pas à retourner consulter ce tutoriel si les choses sont confuses.

Si vous regardez bien ce schéma de hiérarchie des templates, vous voyez que le template archive.php est en aval de category.php. Ca veut donc dire que jusqu’à présent, les pages des catégories étaient affichées selon le même résultat que l’index. Maintenant que l’on a créé un nouveau template en amont, c’est archive.php qui va prendre la main et les pages des catégories seront affichées avec uniquement les premières lignes des articles. Vérifiez sur votre navigateur ! Vous pouvez très bien créer un template category.php si vous voulez customiser de manière indépendante les pages des catégories. Il vous faudra pour cela copier le contenu de l’index dans votre template et faire les modification souhaitées. Ici, on ne va pas le faire. Je veux juste que mes articles ne soient pas affichés en entier pour faciliter la navigation et pour éviter des soucis de référencement.

2. Création du template search.php

Ici, on prend les mêmes et on recommence ! Créez votre template search.php et copiez le contenu d’archive.php. Enregistrez le tout et rafraîchissez votre navigateur. Les résultat des recherches apparaissent maintenant avec les premières lignes des articles. Au niveau de la hiérarchie des templates, pas de modification au niveau d’autres requêtes.

3. Création du template page.php

Ce template est celui qui vous permet d’ajouter d’autres pages à votre blog. Si on applique l’index à ces pages, on va avoir les postmétadata, comme la date, les catégories et les commentaires. C’est le cas actuellement avec notre thème, si vous regardez bien ! Mais bien souvent, quand on crée une autre page, c’est souvent pour se présenter ou pour tout autre chose d’ailleurs. Donc ces informations ne sont souvent pas utiles et peuvent déguiser ces pages. Ici, on va donc créer un template qui va nous permettre d’afficher le contenu des pages sans ces postmétadata.

Créez votre template page.php et copiez-y le contenu de l’index. Ensuite, enlevez les postmétadata:

1 2 3 4 5 6 7 
<p class="postmetadata">   <?php the_time('j F Y') ?> par <?php the_author() ?> | Cat&eacute;gorie: <?php the_category(', ') ?> | <?php comments_popup_link('Pas de commentaires', '1 Commentaire', '% Commentaires'); ?> <?php edit_post_link('Editer', ' &#124; ', ''); ?>   </p>

Enfin, sous le « php endwhile », et avant le « php endif », insérez le code suivant:

1 
<?php edit_post_link('Modifier cette page', '<p>', '</p>'); ?>

Ce code va insérer une ligne, sous l’article, qui vous permettra d’aller modifier son contenu directement, comme la fonction « edit », au niveau de chaque article.

Enregistrez le fichier, rafraîchissez le navigateur. Maintenant les autres pages de votre blog apparaissent sans les postmétadata.

4. Création du template single.php

Ce template est celui qui va permettre d’afficher un article. Avec votre page d’accueil, ce sont les pages les plus visitées du blog. Ici, on va reprendre le contenu de l’index et y faire quelques petites modifications pour afficher ou supprimer quelques informations.

Commencez donc par créer votre template single.php et copiez-y le contenu de l’index.php. Si vous allez sur votre navigateur, vous verrez que rien n’a changé ou presque… Tiens, les commentaires ont disparu dans les postmétadata !! … Effectivement, ceux-ci ne fonctionnent pas ici… Vous pouvez donc retirer la commande des commentaires ainsi que la barre verticale qui la précède:

1 
<?php comments_popup_link('Pas de commentaires', '1 Commentaire', '% Commentaires'); ?> <?php edit_post_link('Editer', ' &#124; ', ''); ?>

Disons que ça ne sert à rien de la laisser et puis, question « éthique développement », c’est plus sérieux ! 😉

Voilà, c’est tout pour aujourd’hui !!! La prochaine fois, on va apporter quelques petits trucs à différentes pages, comme la navigation d’article en article et de page en page. On va aussi insérer les commentaires. Enfin, on validera le thème avant d’attaquer les feuilles de style !

Tutoriel n°16: « Insertion des commentaires »

Et si ça vous intéresse, avec des amis, on a créé notre boutique de ventes de thèmes WordPress, Peaxl. Venez jetez un oeil ! 😉

Fran6

Comments are now closed for this article

43 Commentaires

  • Vivement la fin de la série que je puisse commencer mon thème !
    Merci encore pour ce tutu !

  • Re Francis,
    Merci encore pour tout, grâçe à ça j’ai pu me lancer dans mon thème : http://www.dumasderauly.com
    Je suis toujours en train de le fignoler (notamment en train de refaire un schéma de mes locaux pour remplacer le générique.
    J’ai juste une petite question, j’essaye d’insérer dans le header à la place d’une image top.jpg, un top.swf, j’ai cherché partour sur les forums mais rien n’y fait, au mieux tout se cale bien mais j’obtiens un bandeau blanc (je suis sous firexfox, osx 10.4, worpress 2.2, hébergé chez haisoft).
    As-tu une idée ?

    PS : je me suis permis de te rajouter dans ma liste de liens, dis moi si ça te va ? (et puis si ça ne te dérange pas de faire de même 🙂

    Merci pour tout et encore bravo pour la série de tutes !

  • Salut Ricain, ravi de voir que les tutos te servent !! 😉 Merci pour le lien. Concernant un lien en retour, il faudra attendre un peu. Je suis en train de revoir le thème et donc les liens seront affichés sur la version prochaine !

  • Pas de soucis 😉
    Et bonne continuation 😉

  • Fly06

    Bonjour Francis,
    Merci pour ton tuto très didactique.
    Je cherche à créer une page d’accueil de présentation du site différente de l’index.php classique (loop WP).
    Ca le fait avec le fichier home.php, par contre comment faire pour retrouver la page standard du blog via un menu ?
    Merci de ton aide.
    -Fly06

  • Salut Fly06,

    Question très intéressante ! Je vais voir si je peux pas faire un article là-dessus dans l’après-midi…Je mettrai le lien ici au cas où…a tout’ 😉

  • edenlys

    Bonjour, j’ai suivi ce tutoriel à la lettre (un grand merci au passage car il est vraiment bien fait) mais je ne comprends pas comment se servir de page.php pour ajouter une page au blog. Pouvez-vous m’aider svp?

  • edenlys > Quand vous allez créer une autre page pour votre blog, c’est le format de page.php que WordPress utilisera !

  • madoxer

    petite astuce pour la personnalisation du message obtenu suite a une mauvaise recherche.

    dans le fichier search.php en dessous du :
    vous devriez avoir cette ligne:
    la page que vous recherchez nexiste pas ou nexiste plus…

    remplacer la pour incorporer la variable $_GET ce qui nous donneras ceci :
    Le terme  »  » n’a abouti a aucun résultat, merci de reformulez votre recherche.

    😉

  • madoxer > il ne faut pas utiliser de variable $_GET, ca peut poser des problèmes de sécurité… il faut utiliser la fonction dédié à cela:

  • Et WordPress a mangé la fin de mon message..
    je parle de la fonction: the_search_query()

  • madoxer

    ok merci beaucoup amaury je n’étais pas au courant du problème de sécurité merci encore 🙂

  • bonjour Francis,
    Dans ce tuto, tu explique que l’on peut aussi créer un template category.php pour customiser de manière indépendante les pages des catégories (copier le contenu de l??index dans votre template et faire les modification souhaitées). Oui, mais lesquelles ???
    Pour les archives, on remplace ??content? par ??excerpt? et pour les caégories jtp ?
    Parce que je l’avoue, je suis tes leçons et j’en suis fortement dépendant, même si j’ai fais de gros progrès 🙂

    Au fait, nicquel ton nouveau design !

  • Florent > En fait, tu remplaces par ce que tu veux ! Je te conseille d’utiliser les excerpts également. Mais tu n’es pas obligé de créer un nouveau template pour tes catégories. Tu peux réutiliser celui des archives ou de l’index si tu veux.

  • seb

    Salut,

    Y a un truc que j’arrive pas à comprendre… j’ai bien pigé le pourquoi du archive.php avec « excerpt() » tu l’expliques tres bien.
    Mais si on suit le schéma des templates « archives.php » est sollicité si ne sont pas demandés category-6.php,ou author.php, ou date.php,et justement on en a créé aucune des 3,de plus je crois que dans 99,99999% des cas l’adresse principale par laquelle on accede à un blog c’est son URL de base soit http://www.nom.com,et si on suit le schéma ce qui sera d’abord utilisé c’est home.php (qu’on a pas créé non plus) puis index.php si home n’existe pas.
    Donc avec notre thème obtenu en suivant tous tes tutos (forts excellents 😉 je comprends toujours pas à quel moment archive.php et surtout excerpt() vont servir,d’ailleurs justement j’ai toujours mes articles qui apparaissent en entier sur ma page principale.

    Ou alors c’est dans index.php qu’il faut mettre excerpt() ou alors je suis completement à la rue… ce qui ne serait pas etonant lol (mais je pense pas dire trop de betises ;o)

  • Seb > Tout d’abord, on n’a pas créé tous les templates d’un blog parce qu’ici on regarde surtout comment faire un thème standard. A toi de voir quels templates tu veux utiliser. Effectivement, on arrive directement sur le template archives.php vu que les autres ne sont pas créés. Les archives vont être accessibles via les moteurs de recherche, si tu acceptes qu’ils y passent, et à ce moment-là, mieux vaut qu’ils soient en excerpt et non complets pour éviter les contenu dupliqués. Et puis, les archives sont accessibles pour le visiteur via un onglet « Archives ».

    Ce n’est pas vrai que l’on accède à plus de 99% sur la page d’accueil. Une bonne partie des URL d’entrée sont les permaliens des articles.

    Pour ce qui est des excerpt qui ne fonctionnent pas, revérifie l’ensemble, ça devrait fonctionner facilement. Peut-être as-tu oublié de retirer quelque chose… Mais ne va pas changer quoi que ce soit sur l’index, c’est un fichier différent. Mais d’ailleurs, peut-être que c’est ton fichier Archives qui a un problème et que ce que tu vois est peut-être l’index… Désolé mais faut mettre les mains dans le cambouis !!! 😀

  • Effectivement, il regarde la page Index, par contre j’avais compris moi aussi que la page INDEX afficherai les articles en EXPERPT …

    Soit on a mal lu, soit la facon dont tu l’explique peut porter a confusion (sans vouloir te critiquer … ou dumoin en bien)

  • Fran6, mais que fais ton anti-SPAM ? Il est au chômage ? 😀

  • Mariette

    Bonjour,

    Je trouve que ces tutoriaux sont vraiment bien faits mais je commence à bloquer à celui là… Quand je pointe sur le lien archive ça m’amène par défaut à ma page index.html (je fais ça directement sur mon hébergeur), pour les single pareil, je n’arrive pas à afficher mon article. Etant totalement néophyte il se peut que je sois passée à côté de quelque chose mais je ne vois pas quoi, j’ai bien tout copié… Par contre les commandes « éditer » et « admin du site » fonctionnent bien. Que faut il faire?
    Merci

  • Bonjour Mariette,

    As-tu regardé si tes templates single.php et archive.php existaient bien ?

  • Mariette

    Ben je les ai crées et téléchargés et à priori ils sont bien chez mon hébergeur …

  • Mariette

    En fait je crois que j’ai trouvé l’erreur, quand je clique sur le lien il va chercher: http://www.monsite.fr/?m=200709 et non http://www.monsite.fr/index.php?m=200709, ai je oublié de taper quelque chose dans mon index??? (j’ai le même problème pour tout les sous templates)
    Merci d’avance pour la réponse!

  • Mariette > Passez par le menu d’administration pour voir si vos articles existent bien et s’ils ont une URL. Pointez vers cette URL et voyez ce que ça donne. Si ça vous redirige encore vers l’index c’est qu’il y a un souci avec la hiérarchie des templates.

    Vous dites « a priori ils sont bien chez mon hébergeur ». Vous avez vérifié qu’ils y étaient ou vous pensez qu’ils y sont ?

  • Mariette > Vous pouvez vérifier le format de vos URL et me le donner ??
    « Options > Permaliens »

  • Mariette

    Ah merci!!! Le problème venait de là! J’avais la valeur par défaut de cocher et je viens de cocher la valeur numérique et ça fonctionne!!! Encore merci, je suis totalement néophyte et je trouve que ces tutoriaux sont vraiment excellents, j’apprend beaucoup de choses et j’arrive même à adapter certains trucs (alors que je pars franchement de zéro).

  • C’est super tout ça Mariette ! Ravi de pouvoir vous aider ! 😉

  • Spam reperer ??

  • So

    Bonjour et d’abord merci pour le tuto que j’au suivi a la lettre avec une grande facilité.
    Maintenant que tout est fait j’ai remplacé mon titre par une image de ma creation que j’ai redimensionnée, seulement voila : ma sidebar ne se trouve plus a droite mais en bas :/
    Comment puis-je faire pour tétablir ca ?
    Par ailleurs, puis je mettre votre adresse dans ma blogoliste ?

    Merci d’avance et bonne contination

  • Bonjour So,

    Regardez-bien vos marges et paddings, peut-être que les dimension ne sont plus les mêmes… Et puis, concernant le fait d’insérer mon blog dans votre blogosliste, pas de problèmes !! 😉 Merci bien !

  • So

    Bon bin au risque de parraitre ridicule (j’apprends de mes erreurs) je reviens vers vous pour le même problemet concernant ma sidebar.
    La vilaine veut pas reprendre sa place j’ai pourtant l’impression d’avoir verrifier mes marges et padding correctement …
    C’est gentillement en train de m’enerver :/

    Please help 🙂

  • So

    Finalement fausse alerte !
    Il suffisait que je reprenne ma feuille de style pas a pas pour recalculer …
    Fastidieux mais efficace en plus je commence a acquerir la technique LA CLASSE ^^

    PS : Ca y est vous etes dans ma blogoliste et encore merci

  • GT –

    Bonjour,
    J’ai deux gros problème …
    Depuis que j’ai voulu « widgetiser » mon theme mes lettre se transforme en ?§ etc … même sur l’interface wordpress .

    et mon deuxième problème : mon fichier archive.php ne change strictement rien ni sur index ni quand j’affiche archive.php …

    En tout cas merci bcp pour tes tutos …