Ce tutoriel est le neuvième d’une série articles sur la création d’un thème pour Wordpress de A à Z. Si vous prenez le train en cours, je vous conseille fortement de commencer par le premier tutoriel de la série.
Après avoir inséré le contenu des articles hier, aujourd’hui, on va s’occuper des postmetadata. Les postmetadata sont ces informations que l’on donne souvent sous le titre de l’article, comme ici, ou à la fin de ceux-ci et qui nous en disent plus sur qui a écrit l’article, quand, dans quelles catégories, s’il y a des commentaires, et j’en passe.
L’insertion de ces informations est très simple. Maintenant, reste à savoir où les placer: sous le titre ou après le contenu ? Personnellement, mon choix est vite fait: ce sera sous le titre. Quand on lit un article, on aime bien savoir quand il a été rédigé, par qui (si le blog a plusieurs auteurs) et puis on peut savoir si ce billet a déjà du succès par le nombre de commentaires. On va donc insérer plusieurs lignes de code entre le titre et le contenu pour pouvoir intégrer ces informations:
<p class="postmetadata">
<?php the_time('j F Y') ?> par <?php the_author() ?> |
Catégorie: <?php the_category(', ') ?> |
<?php comments_popup_link('Pas de commentaires', '1 Commentaire', '% Commentaires'); ?> <?php edit_post_link('Editer', ' | ', ''); ?>
</p>Attention à bien garder la ligne des commentaires en une seule ligne. Elle est ici sur 2 lignes mais dans votre éditeur, il ne doit y en avoir qu’une seule. Vous avez bien inséré le code entre le titre et le contenu ? Plus précisément entre le titre et la DIV “post_content” ? Maintenant, on va prendre un peu le temps d’expliquer tout ça…
Tout d’abord, on a créé une enveloppe pour ces informations. On l’a appelé “postmetadata”. On utilise ici le tag P et non plus DIV pour bien séparer le contenu des postmetadata.
Ensuite, la commande “php the_time” va permettre l’affichage de la date. Pour le moment, on va rester simple. On voit souvent des customisations de la date, pour en faire des jolis petites boîtes très design. Pour le moment, on ne s’en occupe pas mais on en parlera sûrement plus tard, dans la customisation du thème. Donc, ensuite, on a php_the author qui va appeler l’auteur du billet, idem pour la ou les catégories. Ensuite, on arrive à la commande qui va appeler les commentaires si ceux-ci sont activés. Les 3 options afficheront des messages différents selon que vous avez 1, plusieurs ou que vous n’avez pas de commentaires.
Enfin, la commande edit_post_link va vous permettre d’aller éditer directement l’article de votre page web. Elle possède 3 paramètres. le premier va insérer un mot si vous ne souhaitez pas celui par défaut qui est “Edit this”. Le deuxième va insérer ce que vous voulez AVANT le lien d’édition. Ici, on mets une barre verticale qui a pour valeur |. Enfin, le troisième paramètre correspond à ce que vous souhaitez mettre APRES le lien d’édition, ici rien.
Vous pouvez très bien ajouté d’autres informations si vous le souhaitez. Vous pouvez aussi en mettre au début et à la fin de l’article. Mais le but ici était de vous montrer simplement ce que sont les postmetadata et comment on les intègre.
Voilà ! On en a fini avec le loop pour le moment. Ce qu’on a vu ici, ce sont les bases. Dans le prochain article, on va “attaquer” la sidebar, et puis il nous restera le footer, avant d’aborder la feuille de style !
Bon week-end
Tutoriel n°10: “La sidebar et son formulaire de contact”
Fran6
![[]](http://m3.moostik.net/img/?pseudo=fran6art&option=invisible)
Vraiment interessant. ça me paraissait vraiment inaccessible de faire un thème, mais c’est vraimant bien expliqué, pédagogique, et au fur et a mesure on imagine toutes les possibilitées auquel on a accès pour aller plus loin par la suite… pour quand est prévu la prochaine étape ?
Bon WE, en espérant voir plein de nouvelles chose d’ici lundi
Prochaine étape la semaine prochaine, mais je ne sais pas encore quand !
Bon je vient de tester en ligne, j’obtient une erreur :
Parse error: syntax error, unexpected T_STRING in /mnt/152/sda/1/8/bhibon/blog/wp-content/themes/Perso/index.php on line 9
Et voila mon code, je ne comprend pas ce qui cloche :
“>
” title=”">
par |
Catégorie: |
Je comprend pas….
Dsl mais le code passe pas en commentaire… forcement….
Trouve un solution pour nous faire parvenir ton code, on pourra mieux t’aider
(fichier texte, serveur, page)
A+
Cyril
Bon, je recommence : jâ??obtient une erreur :
Parse error: syntax error, unexpected T_STRING in /mnt/152/sda/1/8/bhibon/blog/wp-content/themes/Perso/index.php on line 9
Et voila mon code, je ne comprend pas ce qui cloche : http://bhibon.free.fr/docs/page_index.txt
Merci pour l’aide que vous pourrez m’apporter (désolé d’avoir un pourri les commentaires avec mes messages foireux)
Salut
Y a moyen que le souci vienne de wordpress. Dans ton code, tu as des : ` (touche 7 du clavier) ou lieu des simples quotes : ‘ (touche 4 du clavier)
Remplace par des simples quotes dans les fonctions : the_category (c’est de là ou venait la première erreur), comments_popup_link() et edit_post_link()
c’est à dire : remplace the_category(’,`) par the_category(’ , ‘)
Je confirme que le souci vient de wordpress, meme dans mon commentaire il m’a remplacé les simples quotes.
Bon tu as compris le principe. Ne copie colle pas. Mais remplace par des simples quotes dans les fonctions
Cyril, j’ai fait les modifs que tu m’a exposées mais malheureusement le pb persiste.
Ensuite j’ai tout supprimé sauf le get_header, le fichier n’a donc qu’une seul ligne de code et pourtant j’ai une erreur ligne 5 !!
Ah les joies du code…
..l’erreur 5 est sur le fichier header !! Bon ba je crois que tout mes fichiers sont pourris
Avant que le blog de Fran6 ne devienne une hotline,
pourrais nous filer la totalité du code. Index + header…
J’ai corrigé le header…
pour l’index, je continue à chercher… merci de ton aide mais je vais essayer de trouver par moi meme parce que c’est vrai que ça me gene de surcharger les commentaire avec tout ça. Encore merci
Désolé les amis d’arriver si tard !! Je regarde le code et te tiens au courant mais si Cyril n’a rien trouvé…
Les histoires d’accent sont également valables pour la ligne des commentaires !!! Sinon, donnes également ton header pour que je regarde ce qui ne va pas. Mets le en ligne pour que d’autres comme Cyril puisse le voir. Si ça ne marche toujours pas, je t’enverrai mes fichiers par email et on verra bien si le problème provient de là . Mais si tu n’as pas eu de problèmes avant, je pense que c’est un problème de syntaxe dans ton code. Tu avais fait un essai après l’affichage du titre ? du contenu ? C’est important de bien comprendre comment tu as fait pour pouvoir résoudre ton problème.
A très vite et pas de souci pour les histoires de hotline, quelqu’un pourrait avoir un jour une nouvelle fois le problème et il pourra trouver la solution ici !
Ca doit être une fonction de l’editeur wordpress qui remplace les simples quotes non fran6 ?
Clairement ! Et c’est la même chose pour tous les tutoriels….la doune…Mais je ne sais pas trop comment réparer le problème…Certains sont bien mis et d’autres non, et dans le même ensemble de lignes en plus… Je vais regarder ça de plus près ce soir…Encore merci Cyril pour ton aide !
Avec plaisir, le copier-coller de certains lecteurs a du être désastreux.
Je regarderai, mais je pense que ca se situe dans les fonctions de l’éditeur. Je sais par exemple qu’il supprime les . Un str_replace doit être caché par là ?
Arf je voulais dire les “br” ou sauts de ligne
bon et bien voila, mes fichiers sont à cette adresse : http://bhibon.free.fr/docs/
Le header est bon, la page index toujours pas.
Alors voila les erreurs que j’ai pu relever
bloginfo(’description’) –> dans le header, pas de simples quotes
endif; –> dans le header sans point virgule
php endwhile; –> pas de fin de while de loop sur have_post()
php endif; –> pas de fin de if juste après
J’ai collé le head et l’index en un seul fichier chez moi pour + de facilité et ca donne ca :
http://www.libratoi.net/benji.txt
Je ne pense plus qu’il y ai d’erreurs de syntaxe, mais peut etre de logique dans le sens ou je n’ai pas éxécuté le fichier sur un serveur.
En espérant que ca t’auras aidé.
Tiens nous au jus.
Bon, pas évident à résoudre ce problème… Pour résumer et reprendre un peu le tout, le souci est un souci de syntaxe. Les ” et les ‘ sont interprétés différemment selon la bonne volonté de l’éditeur Wordpress. On retrouve le même souci dans ton fichier Cyril, les ” sont très souvent inclinés, alors que pour être valides, ils doivent être droits. Pour que ça fonctionne, les ” et les ‘ doivent être droits, comme ici je pense, et non inclinés comme dans les différents fichiers que l’on s’est envoyé ou dans l’article. Benji, je peux t’envoyer par email le header.php et l’index.php si tu veux ! Par contre, ce qui m’inquiète un peu plus c’est comment réparer les différents articles, parce que j’ai remarqué que c’est comme ça depuis le début….:-( Je vais me renseigner, voire trouver une solution pour résoudre le problème.
Je vous tiens au courant !
Dans le fichier que j’ai envoyé les quotes ne sont pas bonnes ???? Pourtant je viens de vérifier mon fichier txt…
Tiens ?
Mais ce n’était malheuresement le seul souci dans les fichiers de Benji. cf. plus haut.
Je regarderais dans les fonctions de wordpress, c’est assez handicapant quand meme.
Avec la bonne volonté de tous, on va pouvoir y arriver quand meme !
C’est bon, le problème concernant les quotes est résolu !! ouf… Parce que comme tu dis Cyril, c’est assez pénible…
En fait, le problème est connu de Wordpress est la seule solution qu’ils ont c’est d’utiliser la balise PRE. Mais celle-ci ne respecte pas les règles de mise en page, même si tu crées un style pour elle. Donc, j’ai regardé les docs Wordpress et j’ai trouvé CA. Encore de la balise PRE mais ils proposent une série de plugins. J’ai donc installé Preserve Code Formatting+ Quickcode. et j’ai dû modifier ensuite toutes les lignes de code insérées dans les articles puisque je les avais saisis avec le “code caractère” et que le plugin modifie tout… En fait pour ces tutoriels, j’utilise Ecto qui transforme tout en code caractère… Bref, j’ai tout resaisi dans les articles et maintenant les quotes sont, enfin j’espère, tous bons.
Concernant, Benji, on va résoudre le problème en t’envoyant les fichiers php index et header. Je fais ça de suite !
Désolé pour le désagrément. J’ai trouvé pas mal d’articles parlant de ce souci du code avec l’éditeur Wordpress. Ce plugin est une solution valable mais j’aurais préféré trouver une meilleure solution… Mais bon…
Merci et bravo fran6 !
Ce plugin a un bon rendu visuel quand même. C’est cool.
franc6art, avec les fichiers que tu m’a envoyés ça marche très bien, merci beaucoup pour le temps que vous aurez tous les deux consacré à mon problème, vous avez assuré ;-), en éspérant que ça puisse aider d’autres personnes !
Pas de soucis les amis ! Ravi que les fichiers fonctionnent Benji !!
Merci !
Il me manquait un truc pour traduire un thème, j’avais un souci avec la numérotation des commentaires avec des “Commentaires (9s)” étranges…
Pourrait-on avoir à la fin de cet article, une vue de l’ensemble du fichier index.php à ce stade ? (Pour être bien sûr notamment de la place du code postmetadata).
Dans le 3e paragraphe avant la fin de l’article, oops pas de s à met “Ici, on mets une barre verticale qui a pour valeur |.”
Merci !
Tout d’abord félicitations pour vos tutoriels. C’est si bien expliqué.
J’ai un souci que je n’arrive pas à résoudre dans la personnalisation de mon thème.
Lorsque je liste une catégorie : url du genre : monsite.org/?cat=4
WordPress affiche à la queue-leu-leu les titres des articles avec leur contenu, de la catégorie choisie.
Je ne voudrais faire afficher que les titres, sans le contenu ni d’extrait de l’article, rien que le titre sous forme de lien cliquable.
Dans quel fichier dois-je aller?
Merci d’avance pour votre aide.
C’est Patrick ou Patrice ??
En fait, faut reprendre la hiérarchie des templates. Si vous n’avez pas de template category.php, alors WP va chercher archive.php puis index.php. Donc, normalement, il faudrait modifier l’index. Mais ça va tout modifier. Idem pour archive. Si vous ne souhaitez avoir les titres que dans TOUTES les catégories, créez un fichier category,php, copiez le contenu de l’index et faîtes-y vos modifications. Normalement, ça devrait fonctionner. Si ce n’est que pour UNE seule catégorie, créez un fichier category-4.php pour la catégorie 4. Modifier page.php ne vous amène pas dans les catégories. Gardez bien en tête la hiérarchie des templates, elle est importante !
Génial, ca marche !
Merci !
De nada !!
Salut, J’essaille actuellement de modifier un peu les differents fichiers et je rencontre quelques difficultes. La partie copier/coller etait plus facile.
Sur ces ‘pages ac des listings d’articles’ (index.php, archives.php …) : j’ai bien ts mes arcticles qui apparaissent les uns aps les autres grace aux boucles. Dc c’est cool.
Sur ces pages j’ai choisis d’ecrire: afin d’afficher seulement le debut des articles.
Ce que je ne trouve pas c’est ce qui fait que les images n’apparaissent jamais dans les ‘pages ac des listings d’articles’.
Dc, sais tu comment je peux faire pour afficher ces images. J’ai essaye de touve ca dans toutes les pages de codes… Bcp d’heures passes pour aucun resultat…
Merci bcp
Hello
y’a qqun? Peut etre que j’ai pas bien explique… Sauriez vous comment faire apparaitre les images dans les resumes d’articles par exemple dans la page index.php ? Merci
C’est plutôt compliqué ça kouikou… Il faut jouer avec les champs personnalisés, les css et pas mal d’autres choses… Je ferai un tuto prochainement là -dessus !
Cool! Tu rock Francis
En fait je pensais que c’etait un truc facile du style un filtre qqpart a supprimer. Mais ca a pas l’air d’etre le cas.
Si ca interesse d’autres personnes, pour faire apparaitre les images ds l’index:
- Ouvrir le fichier ‘formatting.php’ dans ‘wp-includes’
- supprimer ds la ‘function wp_trim_excerpt($text)’ les lignes:
// $text = apply_filters(’the_content’, $text);
// $text = str_replace(’]]>’, ‘]]>’, $text);
// $text = strip_tags($text);
kouikou: Oulala !!! Ne jamais faire ce genre de manip !! Tu peux mettre tout ton blog HS en faisant ça !! Il ne faut jamais aller modifier un fichier qui n’est pas dans le répertoire de ton thème !
Salut Francis,
A vrai dire je suis urprise de ta reponse.
As tu reussis a faire ton blog rien qu’en jouant avec le contenu du repertoire theme?
Oui ca n’est pas trop conseille mais c’est difficle de faire qqchose sans y toucher un peu, n’est ca pas?
J’ai trouve ca plutot bien de changer certaines balises pour simplifier mes css… ainsi que pour modifier la postion des boutons ’suivant/precedent’. Des petits trucs qu’il me semble impossible autrement. Ce que je pense etre domage dans ce que je fais: c’est que s’il y a des mises a jours de wordpress je ne pourrais pas simplement glisse depose mon theme deds pr les utiliser…
Tu dois avoir de bonnes raisons - moi je suis un peu une bricolleuse du dimanche
Les raisons sont simples: tu peux tout modifier avec ton thème, et surtout dans tes templates. Le reste c’est le coeur de Wordpress, et ça on n’y touche pas. Dans tes templates, tu peux modifier tout ce que tu veux. Il n’y a absolument aucune raison d’aller dans les fichiers de base du système. Tout ce que tu dis ce fait dans les templates, sans aucun souci !
Je suis un peu inquiète, car bien que n’ayant rencontré aucun problème majeur (message d’erreur ou autre), je me rends compte que mon blog n’affiche qu’un seul des trois messages que j’ai pris soin de mettre sur mon blog pour voir ce que ça donne…
On est bien censés voir tous les messages les uns en dessous des autres ?
Je ne vois pas où est l’erreur : mes lignes de codes sont pourtant bonnes…
J’ai également - mais ça ce doit etre normal je suppose puisque personne n’en a parlé - une sorte de texte lié au code qui apparait en haut de mon blog :
{\rtf1\mac\ansicpg10000\cocoartf102 {\fonttbl\f0\fswiss\fcharset77 Helvetica;} {\colortbl;\red255\green255\blue255;} \paperw11904\paperh16835\margl1440\margr1440\vieww15840\viewh9200\viewkind0 \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\ql\qnatural \f0\fs24 \cf0 {\rtf1\mac\ansicpg10000\cocoartf102 {\fonttbl\f0\fswiss\fcharset77 Helvetica;} {\colortbl;\red255\green255\blue255;} \paperw11904\paperh16835\margl1440\margr1440\vieww14320\viewh10400\viewkind0 \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\ql\qnatural \f0\fs24 \cf0 \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \
\
\
…Ainsi que tout un tas de slash insérés entre les différents balises.
- Est-ce normal ?
- Y a t’il quelque chose à faire pour que tous les messages s’affichent, et pas seulement le ernier en date ?
Merci d’avance pour vos réponses, et merci encore pour le tutoriel !
Non Balika, tout ça n’est pas normal !
Difficile de te dire comme ça ce qui ne va pas dans ton thème. Essaies avec un autre thème, genre celui par défaut pour voir si tes articles apparaissent bien. Ensuite, je crois qu’il y a des soucis de code dans tes templates… Passes la validation W3C qui est un peu plus loin dans les tutos pour vérifier tout de suite ton code. Tu devrais y voir plus clair ! 
Pour l’affichage de tous les messages, c’était une bête erreur de code que j’ai rapidement rectifié… ^_^’
En revanche, toujours de gros problèmes d’affichage, la page est loin d’être propre (alors qu’en fait elle devrait l’être)…
J’ai donc fait le test W3C comme tu me le conseillais, et là patatra, c’est l’horreur !!!
J’ai récolté plus de 30 erreurs, je sais même plus par où commencer ! o_o
Je vais devoir tout reprendre depuis le début je crois… -_-
Merci de m’avoir répondu avant que je continue mes bêtises !
Balika > Tu peux retrouver tes erreurs directement à partir de la validation W3C en ajoutant la case pour avoir le code source et là tes erreurs seront surlignées… Bon courage !
Je sais bien, mais mon problème c’est qu’il corrige le code source, pas le code php contenu dans mes templates : les erreurs du code source n’apparaissent pas dans mes templates…
Je suppose qu’on ne peut pas corriger directement le code source de la page (ce serait trop beau) ?
Pourrais-je récupérer quelque part les fichiers de base, ceux qu’on est censé obtenir à la fin du traitement xhtml, juste avant d’attaquer le style CSS ?
Ca me permettrait de comparer les codes, ou au pire de partir de ces fichiers pour construire et personnaliser mon thème…
Balika > Je vais mettre le thème de base à télécharger dans la semaine si tout va bien !
Ces tutos sont extras…. Je vais enfin sortir du bricolage de thèmes existants. Ok, les thèmes que l’on trouve sur le net sont bien mais souvent complexes… à adapter. Ces tutos vont me permettre de refaire tout mon blog. chouette.
Formidable, enfin réussi.
En fait je mettais pas ça exactement ou il fallait.
C’est formidable tes tutos !
A ton service Quiche !! J’étais persuadé que ce serait tout de suite plus simple si tu venais directement par ici !!
A bientôt !
Franchement il est génial ce tuto! Je suis en plein dedans, je voulais juste poster en vitesse pour extérioriser ma joie
Ca fait aussi du bien de voir que tu ne fais pas de fautes d’orthographe ou de grammaire. J’en ai juste vue une pour l’instant, 2ème paragraphe: “après avoir insérer” roooh je suis sûr que c’est une faute d’inattention.
Je suis content de le découvrir maintenant seulement car je n’ai pas à attendre le prochain post à chaque fois hehe. Bonne continuation
JeFF > Je n’aime pas non plus les fautes d’orthographe, mais on ne fait toujours attention à tout !!
Je vais modifier la faute de ce pas !! Merci !! 
Tu veux dire “je vais modifieR”
(tu peux deleter ce commentaire lol, il ne sert à rien, c’est juste à titre informatif)
Bonjour francis,
je suis en train de m’atteler a creer mon theme et donc a me plonger dans tes tutos, qui sont tres bien expliqués.
Une chose m’echappe dans celui ci, je ne sait pas a quelle moment on a ajouté une balise php qui affiche les commentaires. car dans mon billet commentaire il y a, ainsi que le nombre mais il n’est pas affiché…
Ais je fait une erreur quelque part ?
Pour info j’ai scindé en 2 les post metadata pour une mise en forme perso des infos. je t’ai envoyé le fichier index.php, si tu pouvait vite fait y jeter un coup d’oeil… merci
Bon francis oublie, j’avais la tete en l’air, car je ne pensait pas qu’on y viendrait dans un des tutoriels….
Je pensait vraiment avoir fait une erreur, mais apparement ce n’est pas le cas…