slDesign

Depuis quelques temps maintenant que je travaille sur WordPress comme base de mes développements Web, j’ai appris à utiliser ce moteur de blog, installer des extension et même en développer.

WordPress est certes un outil puissant utilisable comme moteur de Blog mais également comme base à la réalisation de sites Web Dynamiques ou de sites vitrines. Tous les blog WordPress sont réalisés sur la même base et pourtant, ils sont presque tous différents.

Je vous propose de partager avec moi une étape primordial qui fera de votre Blog un Blog unique, la création d’un thème personnalisé.

Infos :

Version du document : 0.1

Sommaire :

• Page 1 – Introduction
• Page 2 – Préparation
• Page 3 – Création d’un thème
• Page 4 – Edition avancée
• Page 5 – Affichage des pages
• Page 6 – Sidebar
• Page 7 – Administration du thème
• Page 8 – Personnalisation du thème
• Page 9 – Intégration de Widget
• Page 10 – Conclusion

I – Introduction

1°) Objet du tutoriel

Cet article à pour objectif de vous apprendre à développer un thème complet pour WordPress. A la fin de ce didacticiel, vous serez (normalement) en mesure de réaliser un Template 100% personnalisable.

Cet article est amené à évolué, il sera mis à jour en fonction des commentaires et améliorations apportées à ce dernier.

Ce tutoriel est une introduction à la création de thème WordPress.

Ce que n’est pas ce didacticiel :

Ce didacticiel n’a pas pour vocation de vous apprendre à développer en CSS, HTML, PHP. Ces langages sont utilisés et vous devez donc les maîtriser.

Ce n’est pas une introduction à WordPress. Vous devez connaitre ce moteur de Blog, savoir l’installer et installer des extensions.

Cet article n’abordera pas en détail l’intégration graphique au sein de WordPress.

2°) Pré-requis

• PHP : Bonnes connaissances requises
• CSS : Très bonne connaissance
• JavaScript : Très bonne connaissances
• WordPress : Bonne connaissance

3°) Editeur de code et outils de programmation

Editeur de Code HTML / PHP / JavaScript / CSS

Certes, il vous est possible de suivre ce tutoriel avec un simple éditeur de texte… mais je vous conseille d’utiliser un puissant éditeur de code pouvant supporter les langages suivants :

• PHP
• HTML
• CSS
• JavaScript / jQuery

Pour ma part, j’utilise Aptana Studio disponible à l’adresse suivante http://www.aptana.com/ et qui intègre un ensemble d’outils vous permettant de développer des sites Web dynamiques HTML / PHP / JAVASCRIPT.

Un éditeur vous permettra d’accéder à différentes fonctions qui me semblent indispensables :

• Coloration syntaxique
• Indentation
• Numérotation de lignes
• Recherche de documentation

Firefox et extensions pour développeurs

Firefox est bien plus qu’un navigateur Web… il permet également d’accéder à de nombreux outils utiles aux développeurs.

Extension Web Développer pour Firefox : Cette extension ajoute un menu à Firefox vous permettant d’avoir accès à différents outils :

• Gestion des cookies
• Manipulation et affichage des feuilles de style css
• Informations sur les images
• Informations sur les formulaires
• Outils de validation HTML / CSS (W3C)

Site web de l’extension : http://chrispederick.com/work/web-developer/

Extension Firebug :

Firebug est une extension primordial pour le développement de sites Web. Contrairement à la barre de développement “Web Développer” cette extension est orientée ‘client’; il est ainsi possible d’analyser le code généré côté client par JavaScript.

4°) Ressources et documentations

Voici une liste de liens utiles ; je vous encourage vivement à les consulter avant de commencer et de les avoirs dans vos favoris :

http://codex.wordpress.org/Developer_Documentation – Documentation WordPress à l’attention des développeurs

http://codex.wordpress.org/Theme_Development – Documentation spécifique aux développement de thèmes

Il est important de bien appréhender les notions techniques de WordPress et notamment cette page : http://codex.wordpress.org/Plugin_API ; cette dernière vous apportera de nombreuses information sur l’API WordPress qui est à la base des développement autour du moteur de Blog.

5°) Introduction à l’API WordPress

Sans entrer dans les détails, je vais vous présenter en quelques lignes l’API WordPress. Une API vous permet d’interagir avec WordPress. Vous entendrez parler de HOOK

Il existe deux types de HOOK :

• Les filtres
• Les actions

Les filtres sont des événements que WordPress lancent afin de modifier des textes de différents types avant de les insérer dans la base de données ou de les afficher à l’écran

Les actions sont des événement que WordPress lance à des moments spécifique de leur exécution.

Ces éléments ne sont pas directement utilisés dans les thèmes mais principalement dans les plugins et widgets qui y sont intégrés

Les LOOPS sont utilisés par WordPress pour afficher chacun de vos articles.

La syntaxe de base est la suivante :

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

6°) Informations utiles

WordPress est installé en local chez moi sur un serveur LAMPP. OS Windows. J’utilise l’éditeur de Code Aptana Studio. Le rendu est réalisé sur Firefox. Il sera donc nécessaire de rendre ce code compatible avec d’autres navigateurs WEB.