creation de-themes-wp

Création de thèmes WordPress

Mohamed Cherif

BOUCHELAGHEM

Concepteur et développeur web de

Annaba – Algérie

Ghilas BELHADJ

Développeur et Designer Web

Tizi-Ouzou – Algérie

Par

&

Nous allons voir dans cette présentation le fonctionnement d’un thème

WordPress « simple » et par la même occasion, comment créer le

vôtre, en convertissant une Template HTML statique en un thème

WordPress utilisable.

Toutefois, certains prérequis sont nécessaires, à savoir :

Standards Web: XHTML (ou HTML5) et CSS (CSS3), et le cas

échéant JavaScript.

Des connaissances basiques : PHP

Des outils de bases : Un éditeur de code (Notepad++), un logiciel

de création graphique (The Gimp, Photoshop, etc…)

Introduction

Web Design

Le web design moderne divise la page d’un site web en sections où en modules

Mise en page (The layout)

Il est toujours mieux et fortement recommandé de planifier le design

Concevoir son site

Design visuel aide à avoir une idée générale sur l’apparence de site

Définir les sections

Toujours avant de commencer à écrire des balises (Markup)

Suivre les standards web

Structure en HTML (XHTML où HTML5)

Suivre les standards web

Mise en forme en CSS

HTML et CSS valide

l’affichage du site est compatible avec tout les navigateurs majeurs

Pourquoi le HTML et ne pas coder le PHP directement?

S’assurer que

Conversion en thème

WordPress

Tout les thèmes se trouvent dans le dossier /wp-content/themes/

Création du dossier de thème

Pourquoi tout ces fichiers?

Du codex

Les fichiers modèles des thèmes constituent les pièces du puzzle que WordPress assemble pour afficher les pages de votre site. Certains modèles (les fichiers d'entête ou de pied de page, par exemple) sont utilisés pour toutes les pages générées ; d'autres ne sont utilisés que sous certaines circonstances.

Comment WordPress gère-t-il tout ça?

Hiérarchie des fichiers modèles

Avec quoi je peux démarrer?

Coller le fichier «style.css» et « index.html» dans le dossier de thème et renomme ce dernier en « index.php »

index.php style.css

225p

x

300px

Créer un fichier screenshot.png avec la capture écran du site

Je ne vois pas mon thème dans le sélecteur du

thèmes !!

/*

Theme Name: Plain & Clean

Theme URI: http://wpdz.org/

Description: basic Theme for learning

Author: Cherif BOUCHELAGHEM

Author URI: http://wpdz.org/

Version: 1.0

*/

Fournir différentes informations qui permettent d’afficher le thème parmi ceux déjà disponibles

style.css est obligatoire, c’est à partir de ce fichier que WordPress extrait les données nécessaires pour afficher le thème dans le backend

C’est Quoi? Classement

Ce sont de courtes fonctions PHP qui vont appeler d’autres fichiers à l’endroit où ils ont été insérés, ou charger du contenu.

Marqueurs de l'Auteur

Marqueurs des Catégories

Marqueurs des Commentaires

Marqueurs de la Date et de l'Heure

Marqueurs Généraux

Marqueurs des Liens

Marqueurs du Gestionnaire de Liens

Marqueurs des Permaliens

Marqueurs des Articles

Marqueurs des Tags

Marqueurs des Rétroliens

Marqueurs de Modèle (Template tags)

http://codex.wordpress.org/fr:Marqueurs_de_Modele

Les Marqueurs Conditionnels peuvent être utilisés dans vos Thèmes pour décider du contenu à afficher sur une page spécifique ou comment ce contenu doit être affiché en fonction de conditions que remplit cette page. Par exemple, si vous voulez insérer un texte particulier au-dessus d'une série d'Articles, mais seulement sur la page principale de votre blog, avec le Marqueur Conditionnel is_home(), cela devient facile.

Ces Marqueurs sont en relation étroite avec la Hiérarchie des Modèlesde WordPress.

is_home() Quand la page principale est affichée.

is_single() Quand une page d'Article unique est affichée.

is_single() Quand une page d'Article unique est affichée.

is_page() Quand une page est affichée.

is_category() Quand une page de Catégorie d'archive est affichée.

Etc…

Marqueurs conditionels (conditional tags)

http://codex.wordpress.org/fr:Marqueurs_conditionnels

Let the coding begin

Fichers de thème

get_header(): importe header.php

Contenu de index.php

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page Importation des

templates header.php, sidebar.php et

footer.php

Afficher le contenu

de la page

Afficher un message si rien à afficher

get_footer: accepte chaine de caractère comme paramètre pour inclure les modèles de différent footer

Fichiers de thème

Contenu de header.php

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Afficher le titre pour chaque template avec

conditional tags

Importer le fichier style.css

Définir le doctype, les attributs de langue dans la balise <html> et définir le

charset

fournit ici l’URL du flux RSS au format RSS 2.0 et l’URL des retroliens

Insertions des

fichiers JS

La boucle (the loop)

S’il y a des articles on les affiche l’un après

l’autre

Affichage des liens vers les anciens article où les

articles récents

Afficher un message s’il n y a aucun

article

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Fichiers de thème

Afficher le contenu de l’article plus les liens

vers un article précédent et un suivant

Affichage du titre en tant que lien vers

l’article

Affichage infos relative à l’article: date, auteur,

catégorie... etc

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Fichiers de thème

L’intérieur de la boucle (the loop)

Contenu de pied de page (footer.php)

Il peut être structuré avec des sidebar (qu’on verra par la suite) qui contient des Widgets, n’importe quel Template tag WordPress qui charge du contenu comme des liens en occurrence où texte statique

wp_footer(): c’est la même chose que wp_head() , mais spécifiquement pour les fichier JS, pour suivre les bonnes pratique d’intégration des fichiers JS en bas de page avant la fermeture de la balise <body></body>

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Fichiers de thème

Un site peut contenir plusieurs footer qui peut être inclus par la fonction get_footer

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Fichiers de thème

Contenu de la vus d’un article(single.php)

Afficher le contenu de

la page

Afficher un message et le formulaire de

recherche si la page n’existe pas

Afficher le formulaire des commentaire

Importation des templates

header.php, sidebar.php et

footer.php

Afficher les liens de navigation entre les articles

Cette barre peut-être incluse dans votre page, avec un simple appelle de fonction get_sidebar().

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Fichiers de thème

la barre latérale (sidebar.php)

C’est ce nom qui vas être utilisé lors de la vérification des Widgets

À ce stade, vous pourrez d’ors et déjà utiliser des Widgets sur votre sidebar depuis le Back-End.

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Fichiers de thème

Activation des Widgets L’activation des Widgets se fait à partir du fichier functions.php, en insérant la fonction register_sidebar() avec son paramètre tableau :

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Fichiers de thème

Contenu de la barre latérale (sidebar.php)

Nom déclaré dans le fichier

functions.php

Ces fonctions seront utilisé s’il n’y a pas de

Widgets Acrifes

Coté code, le fichier sidebar.php ne contient pas grand choses, à part la vérification des Widgets et les menus par défauts.

Dans le cas ou vous voudriez utiliser une autre sidebars, vous avez la possibilité l’utiliser la même fonction get_sidebar(‘secondaire’) qui vas appeler le fichier sidebar-secondaire.php

wp_get_archives() : Permet de lister les dernier articles de votre site.

wp_tag_cloud() : idéal si vous utilisez des tags dans vos articles de lister les plus utilisées sous forme de nuage de tags.

wp_list_categories() : Affiche la liste des catégories de votre site.

wp_list_bookmarks() : Affiche la liste des liens géré depuis le panneau d’administration.

get_search_form () : Affiche le formulaire de recherche.

Vous pouvez avoir l’intégralité des fonctions avec leurs paramètres détaillés sur http://www.codex.wordpress.org/

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Fichiers de thème

Quelques Fonctions célèbres pour la sidebar

Appelle de la template comments.php par la fonction comments_template()

Les commentaires (comments.php)

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Fichiers de thème

S’il y des commentaires

Si l’article n’est pas protégé

Alors, Afficher les commentaires

Si aucune inscription n’est requise

Si les commentaires sont ouverts

Alors, Afficher le formulaire

Structure du fichier comments.php

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Fichiers de thème

Article protégé par mot de passe

Afficher les commentaires s’il y en a, sinon un petit

message

Afficher le formulaire si les commentaires sont ouverts sinon un petit message

Dans comments.php, nous aurons besoins de vérifier certaines conditions avant d’afficher les commentaires avec la fonctions wp_list_comments()

Contenu du modèle de

commentaires

(comments.php)

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Fichiers de thème

Afficher le

contenu de la page

Afficher un message et le formulaire de

recherche si la page n’existe pas

Afficher le formulaire

des commentaire

Importation des templates

header.php, sidebar.php et

footer.php

ressemble au fichier single.php, donc il n’y a pas de nouvelles fonctions à apprendre dans cette template.

Contenu de page (page.php)

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Fichiers de thème

ressemble au fichier single.php, donc il n’y a pas de nouvelles fonctions à apprendre dans cette template.

Contenu du fichier search.php

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Fichiers de thème

Afficher les termes de recherches dans

la page

Afficher les résultats de recherche

Importation des templates

header.php, sidebar.php et

footer.php

ressemble au fichier single.php, donc il n’y a pas de nouvelles fonctions à apprendre dans cette template.

Contenu du fichier

searchform.php

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Fichiers de thème

Vous pouvez mettre le formulaire de recherche dans son propre fichier pour pouvoir l’utiliser facilement sur d’autres templates avec la fonction get_search_form() Vous pouvez, par exemple, utiliser cette fonction :

Dans le fichier 404.php Après le else d’une boucle. Dans la sidebar Etc…

Vous pouvez choisir lorsque vous créez votre page, le modèle qui lui sera appliquée (formulaire de contacte, plan du site, etc…).

Pour en créer vous n’avez qu’a copier la template page.php et le renommer comme suite : template-nom_du_modele.php

Ensuite ajouter le code suivant au tout début : <?php /* Template Name: Nom du modèle */ ?> Nom du modèle correspond au nom qui apparaitra dans le back-end

Les modèles de page

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Fichiers de thème

Les modèles de page

style.css

index.php

header.php

The Loop

footer.php

single.php

sidebar.php

comments.php

page.php

search.php

search-form.php

Modèles de page

Fichiers de thème

Maintenant que vous avez votre modèle de page par défaut, vous pouvez lui apporter les modifications nécessaires en terme de style et fonctionnalités PHP.

Vous pouvez par exemple :

Supprimez la sidebar

Ajouter de nouvelles fonctions Wordpress

Appliquez un style différent via CSS

Etc…

Exemple de page modèle :

Page d’erreur 404 (404.php)

Page de liens (links.php)

Plan du site (sitemap.php)

Page d’archives (archives.php)

Page D’accueil (index.php)

Page de contact (contant.php)

Etc…

Liens Utiles

Les liens incontournable

Les sites francophones: Documentation officielle :

codex.wordpress.org/fr:Accueil Tutoriels sur la création de thèmes Wordpress :

fran6art.com eiffair.fr grafikart.fr

Forum d’entraide Wordpress :

wordpress-fr.net Ressources :

geekeries.fr

Documentation officielle: Les BloGs:

codex.wordpress.org

smashingmagazine.com speckyboy.com tutplus.com

Tutoriel sur Wordpress : digwp.com wprecipes.com wpbeginner.com wpcandy.com pimpmywordpress.com wpengineer.com wpzine.com wptavern.com

Les liens incontournables

Les Conseils

Travailler sur des serveurs locaux

WampServer LampServer Server2Go MampServer

Utiliser les outils de test et de débuguage

Raccourci :

F12 Raccourci :

Ctrl+Maj+i

Raccourci :

F12

Raccourci :

F12

Vérifier si votre thème respecte les standards du web

Equilibrer le Design/Contenu

Créer des thèmes aussi légers que possible

Contenu Design