Upload
chi-nacim
View
4.062
Download
5
Embed Size (px)
DESCRIPTION
Création de thèmes WordPress (conférence).
Citation preview
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