Ce tutoriel est le huitiè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.
Hier, on a fait la présentation du Loop WordPress et insérer le titres des articles au blog. Aujourd’hui, nous allons intégrer le contenu de ces articles. Rien de bien compliqué en soi. On placera également les différentes balises CSS autour des différents blocs d’un article pour pouvoir modifier chaque partie indépendamment plus tard, au moment de la création du style de notre thème.
Pour voir apparaître le contenu de nos articles, on va ajouter une ligne de code directement après les titres des articles et avant les balises de fermeture “endwhile” et “endif”:
1 | <?php the_content(); ?> |
Sauvegardez votre fichier, rafraîchissez le navigateur et le contenu de vos articles apparaît désormais.
Maintenant, on va prendre le temps de bien “baliser” le contenu de notre blog. Hier, on a créé une DIV “content” qui enveloppe toute notre colonne avec nos articles. Dès qu’on voudra modifier l’ensemble de cette colonne dans les CSS, on utilisera la commande “content”. Maintenant, on va créer les balises qui vont nous permettre de modifier différents aspects des articles: on va pouvoir modifier l’article dans son entier, ou alors, juste son contenu. Pour cela, on va placer les DIV qu’il faut au bon endroit.
Ce qu’il va falloir bien comprendre ici, c’est qu’on va utiliser l’attribut “class” pour la DIV et non plus “id”. Pourquoi? En fait, une “id” est unique. On ne peut l’utiliser qu’une fois. C’est le cas pour les div “header”, “content” ou “footer” par exemple. Mais pour pour le contenu des articles puisqu’on va avoir plusieurs articles. C’est pour cela qu’on va utiliser l’attribut “class”, qui lui, n’est pas unique. On va donc entourer chaque article, chaque titre et chaque contenu pour qu’il ait son “enveloppe” personnelle:
1 2 3 4 | <div class= "post"> <div class= "post_content"> </div> </div> |
Une fois ces balises bien placées, on obtient les lignes de code suivantes pour la DIV “content”:
1 2 3 4 5 6 7 8 9 10 11 | <div id="content"> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <div class="post"> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2> <div class="post_content"> <?php the_content(); ?> </div> </div> <?php endwhile; ?> <?php endif; ?> </div> |
En ce qui concerne le titre de l’article, on pourra faire les modifications dans la feuille de style grâce à la balise “content” jumelée aux balises h2 qui l’entourent, comme l’a souligné si justement Cyril dans un commentaire ci-dessous (hop! un petit backlink en passant!).
Pour terminer pour aujourd’hui, on va ajouter une fonction de intéressante aux articles. On va ajouter un peu de PHP dans la DIV “post” pour donner une ID individuelle à chaque article. Le fait de pouvoir donner une identification unique à chaque article ici vous permettra plus tard, dans la feuille de style, de donner le look que vous souhaitez à chacun de vos articles. Selon l’utilisation que vous ferez de votre blog, ça peut, éventuellement, être utile. Vous allez donc modifier la DIV “post” pour qu’elle devienne ça:
1 | <div class="post" id="post-<?php the_ID(); ?>"> |
Ce qu’on a fait ici c’est ajouter l’attribut ID à la DIV et l’identification que l’on va donner à chaque article sera son ID dans la base de données. C’est ce que va faire cette commande PHP, c’est-à-dire aller chercher l’ID de l’article dans la base.
Sauvegardez votre fichier, rafraîchissez votre navigateur et allez voir un peu le code source de la page. Au niveau de la DIV “post”, vous allez retrouver l’identication unique de chaque article:
1 | <div class="post" id="post-3"> |
Voilà ! C’est tout pour aujourd’hui. Demain, on ajoute les postmetadata. A demain !
Tutoriel n°9: “le loop WordPress, dernière partie”
Fran6
![[]](http://m3.moostik.net/img/?pseudo=fran6art&option=invisible)
Encore bravo pour ces articles que je suis au jour le jour.
Sinon juste un détail : pourquoi entourer le titre du billet (post_title) par un DIV ?
Car pour accéder à la mise en forme du titre (ici un h2) en CSS on aurait pu faire çà :
#content h2{
…
}
puis pour la mise en forme du lien
#content h2 a{
…
}
Ce serait plus “sémantique”, mais il y a peut être une raison que je n’ai pas saisi.
A+
Cyril
Effectivement, c’est une erreur. En fait, ce que j’ai fait, c’est que j’ai voulu séparer le titre de l’article des postmetada en terme de DIV, et je les ai séparé en 2 sans trop réfléchir…snif… Je vais modifier tout ça ! Merci beaucoup ! Heureusement qu’y en a qui suivent !!! Toutes mes excuses !
T’inquiète ça suit, ça suit ! Y a pas à t’exuser !
Nous sommes dans un lieu d’échange, non ?
Bien sûr ! Au contraire même je dirais ! Si chacun pouvait apporter sa part à l’édifice pour créer le meilleur thème possible, ce serait le pied !
Toujours pour améliorer la compréhension de ton superbe tuto (pour une noob comme moi !), pourrais-tu rappeler
Dans le fichier index.php “pour voir apparaître le contenu de nos articles, on va ajouter une ligne de code directement après les titres des articles [...]“?
” title=”">
je suis perdue… les
on les met où ?
est-ce que ça donne ça :
” title=”">
ou
” title=”">
ou autre chose encore ?
(ma logique serait le deuxième mais…)
Salut Innocente. J’ai comme l’impression que tu as inséré du code dans le commentaire non ?? renvoie ton commentaire en mettant la balise code (
) avant ton code et en la refermant à la fin de ton code. OK ?pour commencer bravo pour ce tuto que je suis pas à pas sans trop de souci malgrè mon niveau de débutante … pourtant là je coince … tout va bien jusqu’à ce que je balise le contenu du blog avec “class” , quand j’actualise mon blog j’obtiens ce message
Parse error: syntax error, unexpected $end in /www/sites/1/ifrance.com/a/n/mamz/site/wordpressfr/wp-content/themes/archac/index.php on line 13
il y a surement quelque chose que j’ai oublié ou mal compris …
merci d’avance
Salut mamz,
Malheureusement je ne peux pas trop t’aider sans connaître le contenu du fichier. Il y a une erreur de saisie dans ton index. Tu peux me l’envoyer via le formulaire de contact si tu veux, je regarderai ça !!
ce problème est finalement résolu (un oubli de balise) … par contre un autre problème apparait (je pense qu’il est lié au fichier index)
lorsque j’attaque la customisation via mon fichier css, seul le 1er billet est à sa place, les suivants n’ont pas la customisation voulue et ne sont plus alignés avec le reste
http://www.hiboox.com/lang-fr/.....t20iny.jpg
et voilà le code de mon index
http://www.hiboox.com/lang-fr/.....t20iny.jpg
Salut mamz,
Pour ce qui est des CSS, va faire un tour dans les tutos 19, 20 et 21, tu trouveras peut-être la solution dans les commentaires. Plusieurs personnes ont mal fermé leurs balises et j’ai mis le lien vers le fichier index pour vérifier leurs erreurs.
hello
j’ai remplacé mon fichier index par le tien et tous mes problèmes sont résolus … un grand merci!!!!
il me reste plus qu’à comparer tout ça pour trouver et comprendre mes erreurs
Salut Fran6, j’ai la même erreur que mamz avait décrite précédemment dans le commentaire, a savoir :
“arse error: syntax error, unexpected $end in /mnt/129/sdb/1/7/manu36back/blog/wp-content/themes/manu36back/index.php on line 14″ …
Je sais bien coder xHTML & CSS, je comprends le PHP et je suis pas complètement con u_u pourtant après plusieurs repassage de mon code rien a faire je trouve pas l’erreur, je sais qu’elle se situe au niveau de la balise [/html] (je met la balise en BBcode mais elle est en sur mon code hein
).
J’ai cherché mais je n’ai pas trouvé ton fichier index.php, donc je te remet mon code qui doit poser problème :
" title="">
Merci de répondre et bravo pour tes tutos
@manu36back ->Un oubli de fermeture de balise ?
Manu36back > Comme le dit Cyril c’est sûrement un problème de fermeture de balise. Ce n’est peut-être pas uniquement le fait que tu en es oublié une mais je dirais peut-être pas fermée au bon endroit… Le fichier index est dans les commentaires du tuto 19 !
Tout d’abord merci a vous deux Francis et Cyril de me répondre… J’ai vérifié les fermetures de balises dans les fichiers index.php et header.php, j’ai rien trouvé, d’autre part ton fichier index.php n’est pas disponible sur ton serveur, il y a marqué erreur 404 (enfin pas tout a fait mais c’est le type d’erreur) …
C’est un deadlink : http://www.fran6art.com/documents/index.txt .
, j’aimerais bien faire un blog avec autant d’activité que le tien …
Merci d’avoir quand même répondu aussi vite, on se croirait sur un forum
Tain’ ça daille j’arrive pas a enlever cette erreur -_-’
Pas de lien mort chez moi.
Ben moi oui : http://img407.imageshack.us/im.....eadiu3.jpg
C’est une capture.
Salut Manu36back, Chez moi non plus pas de dead link. C’est sûrement une interprétation à la noix de IE… Sérieux, si tu veux prendre ton pied, changes de navigateur !!!
Je rigole, mais c’est un peu vrai quand même…;-) Je t’enverrai le fichier pendant le week-end ok ?
PS: et merci pour les compliments concernant le blog. C’est vrai que j’aime beaucoup l’intéractivité qu’on y trouve. Je pense éventuellement à installer un forum mais j’ai peur de perdre un peu cette convivialité sur le blog….a voir….
T_T je sais que IE7 c’est de la merde, mais bon vu que j’aime bien faire du webdesign, ben faut toujours coder en premier lieu pour IE (parce que c’est le plus utilisé malheureusement).
Et effectivement l’erreur vient du navigateur, ça marche nickel sous Firefox, encore désolé d’avoir fait chi** le monde …
Sinon pour ton idée d’installer un froum, tu risquerais de perdre en partie la convivialité et un des points forts de ton blog, parce que une telle entraide et convivialité sur un blog je peux t’assurer que j’ai jamais vu ça, tandis que sur forum le but c’est la convivialité (qui peut facilement se retrouver sur d’autres forums)…
Enfin ce que je veux dire (c dur a expliquer -_-) c’est qu’en faisant un forum tu risquerais (selon moi hein) de “tomber” dans la masse des forums conviviaux et des blogs totalement délaissés des opinions de leurs lecteurs .
Voila selon moi ce serait pas une très bonne idée, mais ce n’est que la mienne libre a toi de décider
.
@
D’ailleurs en continuant test tutos j’ai réussi a me faire un design de blog (par contre pour les CSS c’est 100% de moi) un petit aperçu ici : http://manu36back.free.fr/blog/
Qu’en pensez vous ?
PS: mon blog est encore en construction, enfin faut surtout que je le lance …
Salut Manu36back,
Juste pour te dire que ton blog est très sympa ! Penses juste à mieux centrer ta sidebar qui part vers la droite avec Firefox. Concernant développer sous IE, c’est encore là, un grand débat… Moi je suis plutôt contre, mais c’est un peu par principe !! Disons que ton code ne sera pas forcément bon si tu développes pour IE alors qu’il le sera si tu développes sous Firefox… Pas facile ce genre de situation….
Bonne semaine !!
Encore un boulet de plus désolé ^_^
J’ai ce message d’erreur “Parse error: parse error in c:\program files\easyphp1-8\www\wordpressfr\wp-content\themes\perso01\index.php on line 16″
Et evidemment je trouve pas la solution.
Les liens ici et dans le tuto 19 pour le fichier index.txt sont morts.
Help !!! (merci
Le lien vers index.txt n’est mort qu’avec Internet Explorer.
Essaye de le télécharger avec un autre navigateur tel que Firefox.
Ok merci Cyril j’vais essayer ça.
Bonsoir
D’abord Merci à toi Francis pour ce travail énorme qu’à du représenter la mise en oeuvre d’un tel tuto. C’est vraiment très intéressant et j’apprends beaucoup de choses.
Si je viens ici mettre un commentaire c’est parce que moi aussi je me suis fait avoir avec le fameux parse error.
Je crois avoir trouvé d’où ça vient. En fait dans le tuto précédent soit le N° 7 lors de la création de la div#content celle-ci comprend 2 lignes de code php endwhile et endif tout à la fin. Mais voilà que dans le tuto N° 8 la div#content ne contient plus ces deux lignes.
Comme beaucoup, j’ai effectué des copier/coller et n’ai pas vu qu’il manquait ces 2 lignes de code php. Une fois rajoutées, tout rentre dans l’ordre.
a+
Merci Kriss, je vais penser à modifier tout ça !!
Bonsoir Francis,
Tout d’abord, merci pour ton boulot, çà và m’aider sûrement pour mon futur!
Je pense qu’il doit-y avoir une erreur dans cette ligne ci du tuto 8:
“>
Corrige moi si je me trompe, mais il doit à mon avis manquer ceci: (
Dommage qu’il y a des problèmes d’affichage des commets!!
donc le prob c la ligne
“>
de la leçon 8
il ne manque pas (
XStaZ > Désolé s’il y a des ralentissements de serveur ces derniers temps !!
J’ai pas compris quelle était l’erreur… snif…
Salut !
Excellent article, comme les autres d’ailleurs ! Très clair et très détaillé, c’est du haut niveau !
Par contre j’ai découvert une petite coquille :
“Mais pour pour le contenu des articles puisqu’on va avoir plusieurs articles.”
Tu voulais plutôt dire :
“Mais pas pour le contenu des articles puisqu’on va avoir plusieurs articles.”
Bonjour
Suis je sur la bonne vioie
J’ai créer 3 pages voila…
pages 1
pages 2
pages 3
Voila le résultat :
Les trois pages apparaissent sur la page (index.php)
Est ce normal…
merce
Bonsoir,
Merci pour ce tutoriel que je suis entrain de suivre. Je dois faire un thème pour un restaurant chinois, plutôt que plonger à la recherche du thème parfait je me suis dit que se serait mieux de le faire moi-même du coup votre tutoriel m’apporte beaucoup.
J’ai noté un oubli pour cette partie (<div class=”post” id=”post-”>)
Vous avez mis plus haut (<div class=”post_content”)
Donc il manque le content après post. Je m’en suis aperçu en allant sur la leçon suivante pour l’insertiion du code que je ne retrouvais pas comme il se doit.
Bonne soirée.
Autant pour moi !! Je viens de comprendre mon erreur, il y a deux post, un sans le contente en haut qui donc annonce le contenu de l’article et un autre avec donc post_content qui je dirais termine l’article !!! Moralité c’est entre les deux que je mets le postmetadata !
O_O Whaouhhh !! J’ai capté. … Il était temps ! ^_^
bonjour et merci pour cette super séries d’tuto
vraiment je vois pas l’utilité de donner un id a chaque article
pourriez vous me donner un ex concret
Merci : )
Bonjour,
comment faire pour faire apparaitre les articles cote a cote? au lieu de l’un au dessus de l’autre?
Pour moi il faut que tu utilise le: “float: right;” ou “float: left;”
et déclarer une largeur pour les articles qui soi de moins de la moitié si tu désire en aligner deux cote à cote…
oulala, je sais que j’arrive avec 3 ans de retard sur le post, mais en tout cas 3 ans après le tuto est toujours aussi utile pour les petits novices comme moi! Pour la première fois j’ai l’impression que la création de templates, n’est pas (que) du chinois! congrats!
Cependant une question (si il n’est pas trop tard!), j’ai tout bien suivi, mais sur ma page principal, seul 1 article des 27 s’affichent. Par contre si je vais sur les articles eux mêmes et que je clique sur aller sur la page, ils apparaissent. Mystère et boules de gomme…
Pourquoi ne va t’on pas chercher les billets simplement avec un select from?
Mais pour pour le contenu des articles puisqu’on va avoir plusieurs articles.
Juste faute de frappe ( Mais pas pour… )
Merci pr le tuto
Une petite coquille :
“Mais pour pour le contenu ” au 6eme paragraphe
Vraiment un bon travail cette série d’article franchement bravo
hahahaha et c’est ainsi que l’on découvre le code affreux généré par wordpress, exemple :
Ceci est votre premier article. Modifiez-le ou supprimez-le, puis lancez-vous !
..pas foutu de terminer par la balise qu’il a ouvert..ça promet pour la suite
..j’avais oublié que les balises html seraient supprimées dans le message, en gros en balise d’ouverture on a “H2″ et en fermeture on “p”…magnifique !
C’est donc comme cela qu’on rajoute l’id d’un article : <div class="post" id="post-”>
Intéressant!