creation de-themes-wp

47

Upload: chi-nacim

Post on 25-Jan-2015

4.059 views

Category:

Design


5 download

DESCRIPTION

Création de thèmes WordPress (conférence).

TRANSCRIPT

Page 1: Creation de-themes-wp
Page 2: 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

&

Page 3: Creation de-themes-wp

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

Page 4: Creation de-themes-wp

Web Design

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

Page 5: Creation de-themes-wp

Mise en page (The layout)

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

Page 6: Creation de-themes-wp

Concevoir son site

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

Page 7: Creation de-themes-wp

Définir les sections

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

Page 8: Creation de-themes-wp

Suivre les standards web

Structure en HTML (XHTML où HTML5)

Page 9: Creation de-themes-wp

Suivre les standards web

Mise en forme en CSS

Page 10: Creation de-themes-wp

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

Page 11: Creation de-themes-wp

Conversion en thème

WordPress

Page 12: Creation de-themes-wp

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

Création du dossier de thème

Page 13: Creation de-themes-wp
Page 14: Creation de-themes-wp

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.

Page 15: Creation de-themes-wp

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

Page 16: Creation de-themes-wp

Hiérarchie des fichiers modèles

Page 17: Creation de-themes-wp

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

Page 18: Creation de-themes-wp

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

Page 19: Creation de-themes-wp

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

Page 20: Creation de-themes-wp

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

Page 21: Creation de-themes-wp

Let the coding begin

Page 22: Creation de-themes-wp

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

Page 23: Creation de-themes-wp

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

Page 24: Creation de-themes-wp

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

Page 25: Creation de-themes-wp

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)

Page 26: Creation de-themes-wp

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

Page 27: Creation de-themes-wp

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

Page 28: Creation de-themes-wp

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)

Page 29: Creation de-themes-wp

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 :

Page 30: Creation de-themes-wp

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.

Page 31: Creation de-themes-wp

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

Page 32: Creation de-themes-wp

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

Page 33: Creation de-themes-wp

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

Page 34: Creation de-themes-wp

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

Page 35: Creation de-themes-wp

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

Page 36: Creation de-themes-wp

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

Page 37: Creation de-themes-wp

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…

Page 38: Creation de-themes-wp

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

Page 39: Creation de-themes-wp

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…

Page 40: Creation de-themes-wp

Liens Utiles

Page 41: Creation de-themes-wp

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

Page 42: Creation de-themes-wp

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

Page 43: Creation de-themes-wp

Les Conseils

Page 44: Creation de-themes-wp

Travailler sur des serveurs locaux

WampServer LampServer Server2Go MampServer

Page 45: Creation de-themes-wp

Utiliser les outils de test et de débuguage

Raccourci :

F12 Raccourci :

Ctrl+Maj+i

Raccourci :

F12

Raccourci :

F12

Page 46: Creation de-themes-wp

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

Page 47: Creation de-themes-wp

Equilibrer le Design/Contenu

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

Contenu Design