Créer son site web avec WordPress de A à Z… avec le Codex

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Créer son site web avec WordPress de A à Z… avec le Codex

La saga Créer son site web avec WordPress de A à Z… avec le Codex — et quelques ressources supplémentaires, ne boudons pas notre plaisir –, débutera avec «A, comme : Allons-y !» et se terminera avec «Z, comme Z’ai fini !». Cet article est un prologue, un galop d’essai, qui me permets de présenter rapidement les ressources essentielles concernant WordPress. Lors de la création d’un site (ou d’un blog, soyons fou !) avec WordPress, il m’arrive souvent de chercher des informations en dehors du Codex. Or, sept fois sur dix, le Codex propose la même chose, souvent en mieux. C’est une véritable mine d’information qu’il est profitable de consulter en première intention avant d’aller voir ailleurs si le code est plus vert. A ce propos, de nombreuses ressources ne font que reprendre le Codex avec plus ou moins de bonheur, alors autant puiser la connaissance directement à la source.

Le bonheur est dans le Codex ?

Les exemples de codes disponibles dans le Codex répondent généralement à une majorité de besoins et il suffit souvent de les copier-coller pour obtenir un résultat satisfaisant. Pour aller plus loin, il suffira de vous rendre sur les forums de WordPress pour poser vos questions. Les réponses y sont généralement très pointues si vous prenez la peine de bien poser vos questions ;-)

Les liens contenus dans ce billet pointent vers la version anglaise du Codex. Il existe néanmoins une version française, plus ou moins complète et à jour (ce qui explique ma préférence pour la version originale). J’imagine aussi que la majorité des intégrateurs et des développeurs WordPress ont les compétences nécessaires dans la langue de Richard Stallman William Shakespeare pour se débrouiller ;-)

N’hésitez pas à vous rendre sur WordPress-fr, la communauté francophone du CMS WordPress. Ne ratez pas le blog qui présente les dernières actualités autour de WordPress et faites le tour de la planète WordPress avec une sélection des articles publiés par des blogueurs amoureux de WordPress.

Qu’est-ce qu’un thème WordPress ?

Faire un site avec WordPress revient à faire un thème WordPress. On peut faire un thème totalement fonctionnel avec deux fichiers seulement : index.php et style.css.

→ Using Themes explique rapidement ce qu’est un thème WordPress.

style.css

Le moteur de WordPress attend que votre feuille de style comporte deux ou trois lignes précisant quelques informations. Elles permettront de retrouver votre thème dans les options du panneau d’administration de votre site. Les tags permettent par ailleurs de qualifier votre thème dans le moteur de recherche de thème en donnant des renseignements sur la couleur, le nombre de colonnes, etc., ainsi que sur les fonctionnalités intégrées :

Voici le code permettant à votre CSS style.css d’être reconnue :

/*
Theme Name: WTF
Theme URI: http://css.4design.tl/wtf/
Description: WordPress Theme Framework
Author: Bibi
Author URI: http://css.4design.tl/a-propos/
Version: 0.1
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post
*/
En dehors de l’administration du site pour le choix du thème, il est possible de récupérer ces informations d’en-tête de fichiers. Pour afficher le nom de l’intégrateur et son site web, on peut utiliser la fonction get_theme_data() :
<?php
$theme_data = get_theme_data(ABSPATH . 'wp-content/themes/default/style.css');
echo $theme_data['Title'];
echo $theme_data['Author'];
?>

index.php

Ce fichier contient les appels de fonction du moteur de WordPress et les boucles PHP permettant d’afficher les contenus. Ce seul fichier peut gérer tout les contextes d’affichage (archives, recherche, page d’erreur, etc.).  Dans la terminologie de WordPress, ces appels de fonctions s’appellent des Template tags, autrement dit, des marqueurs de modèles. Rien de très compliqué, il suffit de se laisser guider par le Codex.

Par exemple, pour afficher le nom du site et sa description, on fera appel à la fonction bloginfo() :

<a href="<?php bloginfo('url'); ?>">
    <?php bloginfo('name'); ?>
</a>

Comprendre la hiérarchie des templates

Si le fichier index.php vu plus haut peut afficher tous les contextes d’affichage (accueil, pages, article seul, catégories, tags, etc.), il est possible de créer autant de fichiers que de contexte pour personnaliser vos templates. Ainsi, si une page.php existe, elle sera utilisée à la place de index.php, c’est la même chose pour tag.php, search.php, category.php, etc.

Ce diagramme montre quel modèle de fichier est appelé pour générer une page en fonction de la hiérarchie des différents modèles.

La hiérarchie des templates dans WordPress. Cliquez pour agrandir l'image.

A Chaque fichier PHP correspond une fonction permettant de tester si l’on se trouve dans un contexte d’affichage ou non. Par exemple, en utilisant uniquement le fichier index.php, on peut mettre un marquage HTML différent pour le contexte des catégories avec is_category() ; des pages avec is_page(), dans une page affichant l’article complet avec is_single(), etc.

→ Lire la page consacrée aux tag conditionnels.

The Loop (1)

Le coeur de WordPress est consitué par la boucle (The Loop). Il s’agit d’un ensemble de fonction qui collecte les variables nécessaires à l’affichage des informations comme le titre de l’article, la date de publication, l’auteur, le contenu du billet lui-même et tout un tas d’autres choses dont l’énumération serait bien fastidieuse.

Exemple minimal de boucle :

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <!-- do stuff ... -->
    <?php endwhile; ?>
<?php endif; ?>
→ Lire The Loop.

(1) Les titres auxquels vous avez échappé jusque là : Danse avec les loopsShe got the loopLoop, y es tu ? T’en loop pas une… ;-)

Les marqueurs de modèle (Template Tags)

Il s’agit des variables ramenées par la boucle. Leur utilisation est très simple : il suffit par exemple d’appeller &lt;?php the_title(); ?&gt; pour afficher le titre du billet. De nombreux marqueurs comme the_title() doivent être utilisés à l’intérieur de la boucle tandis que d’autres sont plus génériques et peuvent servir à afficher la barre latérale de votre site, comme get_sidebar() si le coeur vous en dit.

→ Lire Template Tags.

WordPress & Webdesign

J’en profite également pour attirer votre attention sur mon petit blog WordPress & Webdesign (WP 4 Design) où vous trouverez des nouvelles de WordPress sur le même principe que Javascript et Webdesign (JS 4 Design) : des articles brefs mais courts.

Voici en avant-première une ébauche de logo pour l’en-tête de WP 4 Design. N’hésitez pas à me dire ce que vous en pensez. OK, c’est un peu plus qu’une ébauche, mais rien de définitif, surtout en ce qui concerne les couleurs.

Ebauche de logo pour WordPress & Webdesign

Comme d’habitude, j’ai commencé par le commencement, c’est-à-dire le contenu avant de réfléchir à son organisation. En attendant d’avoir pris un rythme de croisière pour mettre en place un design digne de ce nom, j’ai installé Toolbox. C’est un thème minimaliste HTML5 créé par Auttomatic croisé avec HTML5 boilerplate.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



28 commentaires pour “Créer son site web avec WordPress de A à Z… avec le Codex”

  1. T’avais pas déjà commencé une fois une série d’articles du même style de A à Z, avec un article par lettre ? Il me semble bien non ? Je vais suivre ça avec intérêt en tout cas ! ;-)

  2. Elodie Savary dit :

    Bon début ;) j’attends la suite ;)

  3. William dit :

    Une excellente mise en bouche. Mais bon maintenant j’attends la suite…C’est malin !

    +1 pour le Codex ! Lisez le b….l :x

    Pour le logo : c’est pas un peu tristoune ? Bon je suis pas graphiste mais j’ai l’impression d’assister aux obsèques de WordPress :/

  4. Anonyme dit :

    A chaque fois que je dois me plonger dans le fameux Codex WordPress j’ai tendance à rapidement perdre le fil de ma recherche.

    Je vais donc suivre avec attention tes tutos, histoire d’avoir une vision plus structurée.

    • truffo dit :

      Je te rejoins le codex n’est pas super bien organiser, c’est le point le plus complexe dans WordPress. Mais RTFM reste la base.

  5. [...] CSS4Design débute un tutoriel sur la manière de créer son site WordPress à partir de rien jusqu’à sa mise en place… le tout en profitant majoritairement des ressources mises à disposition dans le CODEX. [...]

  6. Christophe dit :

    Il existe aussi des thèmes de base pour construire son propre thème : startertheme par exemple

  7. Greglemaire dit :

    j’aime bien ! deux liens pour completer l’article : http://gregoirelemaire.fr/wordpress/2011/01/wordpress-decortique-anatomie-dun-theme-wordpress/top en français, et celui ci en anglais : http://yoast.com/wordpress-theme-anatomy/

  8. [...] sur la création d’un site internet avec WordPress que j’ai commencé avec Créer son site web avec WordPress de A à Z… avec le Codex. Il existe plusieurs approches pour mettre en place un site WordPress : modifier un thème existant [...]

  9. Bobby dit :

    B comme Ben c’est quand la suite ^^

  10. Visiteur dit :

    On attend la suite….

  11. [...] WordPress de A à Z… avec le Codex [...]

  12. [...] de site WordPress de A à Z — B comme Basics Je comptais terminer la série WordPress de A à Z avec la livraison d’un thème de base, mais il m’a semblé que livrer un thème [...]

  13. [...] WordPress de A à Z… avec le Codex [...]

  14. serge web54 dit :

    aie, un blog no follow ;) !! Treve de plaisanterie : Je trouve cet article particulièrement bien fait pour comprendre la structure de WP. J’avoue ne me servir de WP qu’occasionnelement, et là je vais me plonger dans le code en te mettant dans mes favoris a+

  15. [...] Créer son site web avec WordPress de A à Z… avec le Codex Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? [...]

  16. [...] Créer son site web avec WordPress de A à Z… avec le Codex Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? [...]

  17. Créer un site web est la vitrine d’une activité, bien connaître le fonctionne d’internet sera donc un plus. Cet plateforme vous offre la possibilité de créer votre site internet gratuitement, facilement et directement en ligne. Voir notre site sur 1-creer-un-site(point)fr

  18. [...] comptais terminer la série WordPress de A à Z avec la livraison d’un thème de base, mais il m’a semblé que livrer un thème [...]

  19. 2Hilarious dit :

    Très bon article. C’est bien expliqué le Codex et très utile en web développement.

  20. Tony dit :

    Bonjour, merci pour votre article qui est très simple et concis pour apprendre les bases du code avec WordPress. Par contre il a du y avoir un petit soucis entre la publication et aujourd’hui car les images ne s’affichent plus. En espérant que ça peut aider. Cordialement,

  21. pour dessiner dit :

    Les liens contenus dans ce billet pointent nike blazer pas cher vers la version anglaise du Codex

  22. Cet article est dit :

    l’intérieur de la boucle tandis que d’autres sont plus génériques et nike requin pas cher peuvent servir à afficher la barre latérale de votre site

  23. plombier dit :

    Il me semble bien non ? Je vais suivre ça avec intérêt en tout cas http://www.plombier-chauffagiste-besancon.fr et là je vais me plonger dans le code en te mettant dans mes favoris a+

  24. Il existe aussi des thèmes de base pour construire son propre thème http://www.charlottebaudoin.fr et là je vais me plonger dans le code en te mettant dans mes favoris a+

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site