SlideShare une entreprise Scribd logo
Création de thèmes WordPress



                                   Par

Mohamed Cherif                           Ghilas BELHADJ


                                    &
BOUCHELAGHEM                             Développeur et Designer Web

Concepteur et développeur web de         Tizi-Ouzou – Algérie

Annaba – Algérie
Introduction

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…)
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
Pourquoi le HTML et ne pas coder le PHP
                directement?

                 S’assurer que

 HTML et CSS valide      l’affichage du site est
                           compatible avec tout les
                           navigateurs majeurs
Conversion en thème
    WordPress
Création du dossier de thème




 Tout les thèmes se trouvent dans le dossier /wp-content/themes/
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?




               style.css                                                 index.php

Coller le fichier «style.css» et « index.html» dans le dossier de thème et renomme ce dernier en « index.php »
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




                                                                                                                            225px
   Author: Cherif BOUCHELAGHEM
   Author URI: http://wpdz.org/
   Version: 1.0
   */
                                                                                                300px


      Fournir différentes informations                                   Créer un fichier screenshot.png
      qui permettent d’afficher le                                       avec la capture écran du site
      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
Marqueurs de Modèle (Template tags)

    C’est Quoi?                          Classement
                                   Marqueurs de l'Auteur
 Ce sont de courtes               Marqueurs des Catégories
 fonctions PHP qui                 Marqueurs des Commentaires
                                   Marqueurs de la Date et de
 vont appeler d’autres                l'Heure
 fichiers à l’endroit où             Marqueurs Généraux
                                     Marqueurs des Liens
 ils ont été insérés, ou             Marqueurs du Gestionnaire de
 charger du contenu.              
                                      Liens
                                      Marqueurs des Permaliens
                                     Marqueurs des Articles
                                     Marqueurs des Tags
                                     Marqueurs des Rétroliens

         http://codex.wordpress.org/fr:Marqueurs_de_Modele
Marqueurs conditionels (conditional tags)



 Les Marqueurs Conditionnels peuvent          is_home() Quand la page principale est
  être utilisés dans vos Thèmes pour            affichée.
  décider du contenu à afficher sur une        is_single() Quand une page d'Article unique
  page spécifique ou comment ce contenu         est affichée.
  doit être affiché en fonction                is_single() Quand une page d'Article unique
                                                est affichée.
  de conditions que remplit cette page.
  Par exemple, si vous voulez insérer un       is_page() Quand une page est affichée.
  texte particulier au-dessus d'une série      is_category() Quand une page de Catégorie
                                                d'archive est affichée.
  d'Articles, mais seulement sur la page
  principale de votre blog, avec le            Etc…
  Marqueur Conditionnel is_home(), cela
  devient facile.
 Ces Marqueurs sont en relation étroite
  avec la Hiérarchie des Modèlesde
  WordPress.

             http://codex.wordpress.org/fr:Marqueurs_conditionnels
Let the coding begin
Fichers de
                                        Contenu de index.php
  thème
     style.css
    index.php

   header.php
   The Loop
   footer.php
   single.php
   sidebar.php
   comments.php
   page.php
   search.php
                                         get_header(): importe header.php
   search-form.php
                                      Importation des
   Modèles de page                 templates header.php,
                                                             Afficher le
                                                                              Afficher un message si
                                                              contenu
                                       sidebar.php et                             rien à afficher
                                                             de la page
                                         footer.php

get_footer: accepte chaine de caractère comme paramètre pour inclure les modèles de différent footer
Contenu de header.php
Fichiers de thème
   style.css                                                               Afficher le titre pour
                                                                           chaque template avec
  index.php                                                                  conditional tags

  header.php

 The Loop
 footer.php
 single.php
 sidebar.php
                                                                                          Insertions des
 comments.php                                                                               fichiers JS

 page.php
 search.php
 search-form.php
 Modèles de page       Définir le doctype, les
                                                                      fournit ici l’URL du flux
                    attributs de langue dans la      Importer le
                                                                       RSS au format RSS 2.0
                    balise <html> et définir le   fichier style.css
                                                                       et l’URL des retroliens
                              charset
La boucle (the loop)
Fichiers de thème
   style.css
  index.php

  header.php

  The Loop

 footer.php
 single.php
 sidebar.php
 comments.php
 page.php
 search.php         S’il y a des articles on    Affichage des liens vers    Afficher un message
                    les affiche l’un après     les anciens article où les      s’il n y a aucun
 search-form.php             l’autre                articles récents                 article

 Modèles de page
L’intérieur de la boucle (the loop)
Fichiers de thème
   style.css
  index.php

  header.php

  The Loop

 footer.php
 single.php
 sidebar.php
 comments.php
 page.php
 search.php          Affichage du titre en   Affichage infos relative à
                                                                           Afficher le contenu de
                                                                           l’article plus les liens
                      tant que lien vers      l’article: date, auteur,
 search-form.php           l’article              catégorie... etc
                                                                               vers un article
                                                                          précédent et un suivant
 Modèles de page
Contenu de pied de page (footer.php)
Fichiers de thème
   style.css
  index.php

  header.php

  The Loop

  footer.php

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

 Modèles de page                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>

     Un site peut contenir plusieurs footer qui peut être inclus par la fonction get_footer
Contenu de la vus d’un article(single.php)

Fichiers de thème
   style.css
  index.php

  header.php
                                                                     Afficher les liens de
  The Loop                                                      navigation entre les articles
  footer.php

  single.php

 sidebar.php
 comments.php
 page.php
 search.php         Importation des                     Afficher un
 search-form.php        templates
                      header.php,
                                      Afficher le
                                      contenu de
                                                        message et le
                                                       formulaire de
                                                                                Afficher le
                                                                              formulaire des
 Modèles de page     sidebar.php et
                       footer.php
                                        la page     recherche si la page
                                                        n’existe pas
                                                                               commentaire
la barre latérale (sidebar.php)
Fichiers de thème
   style.css
  index.php

  header.php
                    Cette barre peut-
  The Loop         être incluse dans
  footer.php       votre page, avec un
                    simple appelle de
  single.php       fonction
  sidebar.php
                    get_sidebar().

 comments.php
 page.php
 search.php
 search-form.php
 Modèles de page
Activation des Widgets
                                L’activation des Widgets se fait à partir du fichier
                                functions.php,     en     insérant     la    fonction
Fichiers de thème               register_sidebar() avec son paramètre tableau :
    style.css
                                                                                     C’est ce nom
   index.php                                                                        qui vas
                                                                                     être utilisé
   header.php                                                                       lors de la
                                                                                     vérification
   The Loop
                                                                                     des Widgets
   footer.php

   single.php

   sidebar.php

  comments.php
  page.php
  search.php
  search-form.php
  Modèles de page


À ce stade, vous pourrez d’ors et déjà utiliser des Widgets sur votre sidebar depuis le Back-End.
Contenu de la barre latérale (sidebar.php)

                    Coté code, le fichier sidebar.php ne contient pas grand
Fichiers de thème   choses, à part la vérification des Widgets et les menus
                    par défauts.
   style.css
  index.php

  header.php
                                                                 Nom déclaré
  The Loop                                                     dans le fichier
                                                               functions.php
  footer.php

  single.php

  sidebar.php

 comments.php
 page.php
 search.php
 search-form.php
                       Ces fonctions seront
 Modèles de page       utilisé s’il n’y a pas de
                          Widgets Acrifes
Quelques Fonctions célèbres pour la sidebar
                    Dans le cas ou vous voudriez utiliser une autre sidebars,
                    vous avez la possibilité l’utiliser la même fonction
Fichiers de thème   get_sidebar(‘secondaire’) qui vas appeler le fichier
                    sidebar-secondaire.php
   style.css
                    wp_get_archives() : Permet de lister les dernier articles
  index.php        de votre site.
  header.php       wp_tag_cloud() : idéal si vous utilisez des tags dans vos
  The Loop         articles de lister les plus utilisées sous forme de nuage de
  footer.php       tags.
  single.php
                    wp_list_categories() : Affiche la liste des catégories de
                    votre site.
  sidebar.php
                    wp_list_bookmarks() : Affiche la liste des liens géré
 comments.php       depuis le panneau d’administration.
 page.php           get_search_form () : Affiche le formulaire de recherche.
 search.php
 search-form.php    Vous pouvez avoir l’intégralité des fonctions avec leurs
 Modèles de page    paramètres                 détaillés                 sur
                    http://www.codex.wordpress.org/
Les commentaires (comments.php)

Fichiers de thème
   style.css
  index.php

  header.php

  The Loop

  footer.php
                    Appelle de la template
                    comments.php par la
  single.php       fonction
  sidebar.php      comments_template()
  comments.php

 page.php
 search.php
 search-form.php
 Modèles de page
Structure du fichier comments.php
Fichiers de thème
   style.css
  index.php        Si l’article n’est pas protégé
  header.php
                                                     Alors, Afficher les
                                                      commentaires
  The Loop
                      S’il y des commentaires
  footer.php

  single.php

  sidebar.php       Si les commentaires sont
  comments.php               ouverts
 page.php                                            Alors, Afficher le
 search.php                                             formulaire
 search-form.php    Si aucune inscription n’est
                             requise
 Modèles de page
Contenu du modèle de
                                     commentaires
Fichiers de thème                   (comments.php)
   style.css
                                                                      Article protégé par
  index.php                                                             mot de passe
  header.php

  The Loop

  footer.php                                                  Afficher les commentaires
                                                                s’il y en a, sinon un petit
  single.php                                                             message
  sidebar.php

  comments.php

 page.php                                       Afficher le formulaire si les commentaires
 search.php                                        sont ouverts sinon un petit message

 search-form.php
 Modèles de page    Dans comments.php, nous aurons besoins de vérifier certaines conditions
                    avant d’afficher les commentaires avec la fonctions wp_list_comments()
Contenu de page (page.php)
Fichiers de thème
    style.css
   index.php

   header.php

   The Loop

   footer.php

   single.php

   sidebar.php

   comments.php

   page.php                        Importation des
                                                         Afficher      Afficher un message et    Afficher le
                                        templates
  search.php                          header.php,
                                                            le            le formulaire de       formulaire
                                                         contenu        recherche si la page         des
                                     sidebar.php et
  search-form.php                      footer.php
                                                        de la page           n’existe pas       commentaire

  Modèles de page


 ressemble au fichier single.php, donc il n’y a pas de nouvelles fonctions à apprendre dans cette template.
Contenu du fichier search.php
Fichiers de thème
    style.css
   index.php

   header.php

   The Loop

   footer.php

   single.php

   sidebar.php

   comments.php

   page.php

  search.php
                                       Importation des
  search-form.php                          templates           Afficher les termes
                                                                                       Afficher les résultats
                                         header.php,           de recherches dans
  Modèles de page                       sidebar.php et               la page
                                                                                           de recherche
                                          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
Fichiers de thème
    style.css
   index.php

   header.php

   The Loop
                                   Vous pouvez mettre le formulaire de recherche dans son
   footer.php                     propre fichier pour pouvoir l’utiliser facilement sur
   single.php                     d’autres templates avec la fonction get_search_form()
   sidebar.php
                                   Vous pouvez, par exemple, utiliser cette fonction :
   comments.php
                                       Dans le fichier 404.php
   page.php
                                       Après le else d’une boucle.
  search.php                           Dans la sidebar
  search-form.php                      Etc…
  Modèles de page


 ressemble au fichier single.php, donc il n’y a pas de nouvelles fonctions à apprendre dans cette template.
Les modèles de page
                     Vous     pouvez      choisir
                     lorsque vous créez votre
Fichiers de thème    page, le modèle qui lui
   style.css        sera             appliquée
                     (formulaire de contacte,
  index.php
                     plan du site, etc…).
  header.php
                     Pour en créer vous n’avez
  The Loop          qu’a copier la template
  footer.php        page.php et le renommer
  single.php        comme suite : template-
  sidebar.php
                     nom_du_modele.php
                    Ensuite ajouter le code suivant au tout début :
  comments.php
                    <?php
  page.php         /*
 search.php         Template Name: Nom du modèle
                    */
 search-form.php    ?>
 Modèles de page    Nom du modèle correspond au nom qui apparaitra
                    dans le back-end
Les modèles de page
                    Maintenant que vous avez votre modèle de page par
                    défaut, vous pouvez lui apporter les modifications
Fichiers de thème   nécessaires en terme de style et fonctionnalités PHP.
   style.css       Vous pouvez par exemple :
  index.php         Supprimez la sidebar
  header.php        Ajouter de nouvelles fonctions Wordpress
  The Loop          Appliquez un style différent via CSS
  footer.php        Etc…
  single.php       Exemple de page modèle :
  sidebar.php        Page d’erreur 404 (404.php)
  comments.php       Page de liens (links.php)
  page.php           Plan du site (sitemap.php)
 search.php           Page d’archives (archives.php)
 search-form.php        Page D’accueil (index.php)
 Modèles de page        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
Les liens incontournables


Documentation officielle:      Les BloGs:

                                     smashingmagazine.com
    codex.wordpress.org         
                                    speckyboy.com
                                    tutplus.com

                                Tutoriel sur Wordpress :
                                  digwp.com
                                  wprecipes.com
                                  wpbeginner.com
                                  wpcandy.com
                                  pimpmywordpress.com
                                  wpengineer.com
                                  wpzine.com
                                  wptavern.com
Les Conseils
Travailler sur des serveurs locaux




WampServer      Server2Go       LampServer   MampServer
Utiliser les outils de test et de débuguage




Raccourci :   Raccourci :      Raccourci :    Raccourci :
F12           Ctrl+Maj+i       F12            F12
Vérifier si votre thème respecte les standards du web
Créer des thèmes aussi légers que possible

      Equilibrer le Design/Contenu


           Contenu      Design

Contenu connexe

Tendances

WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
Aurélien Denis
 
CSS 3
CSS 3CSS 3
Introduction à Wordpress
Introduction à WordpressIntroduction à Wordpress
Introduction à Wordpress
Chris Gaillard
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
Abdoulaye Dieng
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
Thomas Bodin
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
jverrecchia
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
Erwan Tanguy
 
WordPress + HTTPS
WordPress + HTTPSWordPress + HTTPS
WordPress + HTTPS
Brice Capobianco
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
Thomas Bodin
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
Ghodhbane Mohamed Amine
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
Abdoulaye Dieng
 
Wordpress meetup
Wordpress meetupWordpress meetup
Wordpress meetup
Erwan Tanguy
 
Construire un site de presse avec Wordpress ?
Construire un site de presse avec Wordpress ?Construire un site de presse avec Wordpress ?
Construire un site de presse avec Wordpress ?
Benjamin LUPU
 
Formation php pdo
Formation php pdoFormation php pdo
Formation php pdo
Souhaibou Salla
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
Frédéric Simonet
 
Utiliser WordPress
Utiliser WordPressUtiliser WordPress
Utiliser WordPress
Daniel GUEYSSET
 
Les bases du CSS3
Les bases du CSS3Les bases du CSS3
Les bases du CSS3
Erwan Tanguy
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
Formation WordPress à Blida
Formation WordPress à BlidaFormation WordPress à Blida
Formation WordPress à Blida
Gd6d
 

Tendances (20)

WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 
CSS 3
CSS 3CSS 3
CSS 3
 
Introduction à Wordpress
Introduction à WordpressIntroduction à Wordpress
Introduction à Wordpress
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
WordPress + HTTPS
WordPress + HTTPSWordPress + HTTPS
WordPress + HTTPS
 
Pdo
PdoPdo
Pdo
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
Wordpress meetup
Wordpress meetupWordpress meetup
Wordpress meetup
 
Construire un site de presse avec Wordpress ?
Construire un site de presse avec Wordpress ?Construire un site de presse avec Wordpress ?
Construire un site de presse avec Wordpress ?
 
Formation php pdo
Formation php pdoFormation php pdo
Formation php pdo
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Utiliser WordPress
Utiliser WordPressUtiliser WordPress
Utiliser WordPress
 
Les bases du CSS3
Les bases du CSS3Les bases du CSS3
Les bases du CSS3
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Formation WordPress à Blida
Formation WordPress à BlidaFormation WordPress à Blida
Formation WordPress à Blida
 

En vedette

Creating a Wordpress Theme from Scratch
Creating a Wordpress Theme from ScratchCreating a Wordpress Theme from Scratch
Creating a Wordpress Theme from Scratch
Patrick Rauland
 
Bien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPressBien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPress
Aurélien Denis
 
Le centre de la bible
Le centre de la bibleLe centre de la bible
Le centre de la bibledaniellamy
 
2011 06 30[1]
2011 06 30[1]2011 06 30[1]
2011 06 30[1]magic32
 
ABS Découvrir Paris avec Amélie Poulain
ABS Découvrir Paris avec Amélie PoulainABS Découvrir Paris avec Amélie Poulain
ABS Découvrir Paris avec Amélie Poulainaniaal
 
Electromagnetic
ElectromagneticElectromagnetic
Electromagnetic
Mary Joy Somobay
 
Actividad 4 laboratorio 2
Actividad 4 laboratorio 2Actividad 4 laboratorio 2
Actividad 4 laboratorio 2
Meybeline10
 
WordPress : optimisation pour le référencement
WordPress : optimisation pour le référencement WordPress : optimisation pour le référencement
WordPress : optimisation pour le référencement
Chi Nacim
 
Atlas der menschlichen Anatomie für Android Tablet
 Atlas der menschlichen Anatomie für Android Tablet Atlas der menschlichen Anatomie für Android Tablet
Atlas der menschlichen Anatomie für Android Tablet
Visible Body
 
Pb les montagnards (1)
Pb les montagnards (1)Pb les montagnards (1)
Pb les montagnards (1)
clara65
 
Manual siemens combi kg39nai22
Manual siemens   combi kg39nai22Manual siemens   combi kg39nai22
Manual siemens combi kg39nai22
Alsako Electrodomésticos
 
Tooth it Yourself | Informations Scientifiques
Tooth it Yourself | Informations ScientifiquesTooth it Yourself | Informations Scientifiques
Tooth it Yourself | Informations Scientifiques
Orthoglobal
 
Proyecto 3ra parcial Esteban Maldonado - 2do Sistemas Nocturno
Proyecto 3ra parcial   Esteban Maldonado - 2do Sistemas NocturnoProyecto 3ra parcial   Esteban Maldonado - 2do Sistemas Nocturno
Proyecto 3ra parcial Esteban Maldonado - 2do Sistemas Nocturno
Esteban Maldonado
 
Manual siemens encimera inducción eh601md21e
Manual siemens   encimera inducción eh601md21eManual siemens   encimera inducción eh601md21e
Manual siemens encimera inducción eh601md21e
Alsako Electrodomésticos
 
Campana Smeg KL175XE
Campana Smeg KL175XECampana Smeg KL175XE
Campana Smeg KL175XE
Alsako Electrodomésticos
 
Manual balay secadora 3sc885b
Manual balay   secadora 3sc885bManual balay   secadora 3sc885b
Manual balay secadora 3sc885b
Alsako Electrodomésticos
 

En vedette (20)

Creating a Wordpress Theme from Scratch
Creating a Wordpress Theme from ScratchCreating a Wordpress Theme from Scratch
Creating a Wordpress Theme from Scratch
 
Bien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPressBien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPress
 
Lm ants
Lm antsLm ants
Lm ants
 
Le centre de la bible
Le centre de la bibleLe centre de la bible
Le centre de la bible
 
Chronologies
ChronologiesChronologies
Chronologies
 
2011 06 30[1]
2011 06 30[1]2011 06 30[1]
2011 06 30[1]
 
ABS Découvrir Paris avec Amélie Poulain
ABS Découvrir Paris avec Amélie PoulainABS Découvrir Paris avec Amélie Poulain
ABS Découvrir Paris avec Amélie Poulain
 
Certificates - Elliot
Certificates - ElliotCertificates - Elliot
Certificates - Elliot
 
Electromagnetic
ElectromagneticElectromagnetic
Electromagnetic
 
Creche6
Creche6Creche6
Creche6
 
Actividad 4 laboratorio 2
Actividad 4 laboratorio 2Actividad 4 laboratorio 2
Actividad 4 laboratorio 2
 
WordPress : optimisation pour le référencement
WordPress : optimisation pour le référencement WordPress : optimisation pour le référencement
WordPress : optimisation pour le référencement
 
Atlas der menschlichen Anatomie für Android Tablet
 Atlas der menschlichen Anatomie für Android Tablet Atlas der menschlichen Anatomie für Android Tablet
Atlas der menschlichen Anatomie für Android Tablet
 
Pb les montagnards (1)
Pb les montagnards (1)Pb les montagnards (1)
Pb les montagnards (1)
 
Manual siemens combi kg39nai22
Manual siemens   combi kg39nai22Manual siemens   combi kg39nai22
Manual siemens combi kg39nai22
 
Tooth it Yourself | Informations Scientifiques
Tooth it Yourself | Informations ScientifiquesTooth it Yourself | Informations Scientifiques
Tooth it Yourself | Informations Scientifiques
 
Proyecto 3ra parcial Esteban Maldonado - 2do Sistemas Nocturno
Proyecto 3ra parcial   Esteban Maldonado - 2do Sistemas NocturnoProyecto 3ra parcial   Esteban Maldonado - 2do Sistemas Nocturno
Proyecto 3ra parcial Esteban Maldonado - 2do Sistemas Nocturno
 
Manual siemens encimera inducción eh601md21e
Manual siemens   encimera inducción eh601md21eManual siemens   encimera inducción eh601md21e
Manual siemens encimera inducción eh601md21e
 
Campana Smeg KL175XE
Campana Smeg KL175XECampana Smeg KL175XE
Campana Smeg KL175XE
 
Manual balay secadora 3sc885b
Manual balay   secadora 3sc885bManual balay   secadora 3sc885b
Manual balay secadora 3sc885b
 

Similaire à Creation de-themes-wp

SPIP
SPIPSPIP
cours Php
cours Phpcours Php
cours Php
mohamednacim
 
Accessibilité et SEO - Sébastien Delorme - SEO Campus 2010
Accessibilité et SEO - Sébastien Delorme - SEO Campus 2010Accessibilité et SEO - Sébastien Delorme - SEO Campus 2010
Accessibilité et SEO - Sébastien Delorme - SEO Campus 2010
SEO CAMP
 
Concilier accessibilité et SEO
Concilier accessibilité et SEOConcilier accessibilité et SEO
Concilier accessibilité et SEOSébastien Delorme
 
Formation WordPress médiathèque Mauguio (mai 2017)
Formation WordPress médiathèque Mauguio (mai 2017)Formation WordPress médiathèque Mauguio (mai 2017)
Formation WordPress médiathèque Mauguio (mai 2017)
Médiathèque Gaston Baissette à Mauguio
 
Developpement Web.pptx
Developpement Web.pptxDeveloppement Web.pptx
Developpement Web.pptx
IbrahimaBarry49
 
WordPress thèmes et template.pptx
WordPress thèmes et template.pptxWordPress thèmes et template.pptx
WordPress thèmes et template.pptx
GHRIS -INFO
 
Créer un template pour Joomla 2.5
Créer un template pour Joomla 2.5Créer un template pour Joomla 2.5
Créer un template pour Joomla 2.5
Com'3elles - www.com3elles.com
 
Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)Laurent Moccozet
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
RihabBENLAMINE
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
RihabBENLAMINE
 
html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
RihabBENLAMINE
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
JDerrien
 
Chapitre 3 : initiation CSS
Chapitre 3 : initiation CSSChapitre 3 : initiation CSS
Chapitre 3 : initiation CSS
Manel Ben Sassi
 
Stratégie SEO avec WordPress
Stratégie SEO avec WordPressStratégie SEO avec WordPress
Stratégie SEO avec WordPress
Daniel Roch - SeoMix
 
Les bases complètes d'un site WordPress optimisé
Les bases complètes d'un site WordPress optimiséLes bases complètes d'un site WordPress optimisé
Les bases complètes d'un site WordPress optimisé
Daniel Roch - SeoMix
 
Atelier template
Atelier templateAtelier template
Atelier template
Pierre Sempé
 
Formation wordpress
Formation wordpressFormation wordpress
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
ssuser1a62e1
 

Similaire à Creation de-themes-wp (20)

SPIP
SPIPSPIP
SPIP
 
cours Php
cours Phpcours Php
cours Php
 
Accessibilité et SEO - Sébastien Delorme - SEO Campus 2010
Accessibilité et SEO - Sébastien Delorme - SEO Campus 2010Accessibilité et SEO - Sébastien Delorme - SEO Campus 2010
Accessibilité et SEO - Sébastien Delorme - SEO Campus 2010
 
Concilier accessibilité et SEO
Concilier accessibilité et SEOConcilier accessibilité et SEO
Concilier accessibilité et SEO
 
Formation WordPress médiathèque Mauguio (mai 2017)
Formation WordPress médiathèque Mauguio (mai 2017)Formation WordPress médiathèque Mauguio (mai 2017)
Formation WordPress médiathèque Mauguio (mai 2017)
 
Developpement Web.pptx
Developpement Web.pptxDeveloppement Web.pptx
Developpement Web.pptx
 
WordPress thèmes et template.pptx
WordPress thèmes et template.pptxWordPress thèmes et template.pptx
WordPress thèmes et template.pptx
 
Créer un template pour Joomla 2.5
Créer un template pour Joomla 2.5Créer un template pour Joomla 2.5
Créer un template pour Joomla 2.5
 
Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Chapitre 3 : initiation CSS
Chapitre 3 : initiation CSSChapitre 3 : initiation CSS
Chapitre 3 : initiation CSS
 
Stratégie SEO avec WordPress
Stratégie SEO avec WordPressStratégie SEO avec WordPress
Stratégie SEO avec WordPress
 
Les bases complètes d'un site WordPress optimisé
Les bases complètes d'un site WordPress optimiséLes bases complètes d'un site WordPress optimisé
Les bases complètes d'un site WordPress optimisé
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Formation wordpress
Formation wordpressFormation wordpress
Formation wordpress
 
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
 
Seo
SeoSeo
Seo
 

Creation de-themes-wp

  • 1.
  • 2. Création de thèmes WordPress Par Mohamed Cherif Ghilas BELHADJ & BOUCHELAGHEM Développeur et Designer Web Concepteur et développeur web de Tizi-Ouzou – Algérie Annaba – Algérie
  • 3. Introduction 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…)
  • 4. Web Design Le web design moderne divise la page d’un site web en sections où en modules
  • 5. Mise en page (The layout) Il est toujours mieux et fortement recommandé de planifier le design
  • 6. Concevoir son site Design visuel aide à avoir une idée générale sur l’apparence de site
  • 7. Définir les sections Toujours avant de commencer à écrire des balises (Markup)
  • 8. Suivre les standards web Structure en HTML (XHTML où HTML5)
  • 9. Suivre les standards web Mise en forme en CSS
  • 10. Pourquoi le HTML et ne pas coder le PHP directement? S’assurer que  HTML et CSS valide  l’affichage du site est compatible avec tout les navigateurs majeurs
  • 11. Conversion en thème WordPress
  • 12. Création du dossier de thème Tout les thèmes se trouvent dans le dossier /wp-content/themes/
  • 13.
  • 14. 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.
  • 17. Avec quoi je peux démarrer? style.css index.php Coller le fichier «style.css» et « index.html» dans le dossier de thème et renomme ce dernier en « index.php »
  • 18. 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 225px Author: Cherif BOUCHELAGHEM Author URI: http://wpdz.org/ Version: 1.0 */ 300px Fournir différentes informations Créer un fichier screenshot.png qui permettent d’afficher le avec la capture écran du site 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
  • 19. Marqueurs de Modèle (Template tags) C’est Quoi? Classement  Marqueurs de l'Auteur  Ce sont de courtes  Marqueurs des Catégories fonctions PHP qui  Marqueurs des Commentaires  Marqueurs de la Date et de vont appeler d’autres l'Heure fichiers à l’endroit où  Marqueurs Généraux  Marqueurs des Liens ils ont été insérés, ou  Marqueurs du Gestionnaire de charger du contenu.  Liens Marqueurs des Permaliens  Marqueurs des Articles  Marqueurs des Tags  Marqueurs des Rétroliens http://codex.wordpress.org/fr:Marqueurs_de_Modele
  • 20. Marqueurs conditionels (conditional tags)  Les Marqueurs Conditionnels peuvent  is_home() Quand la page principale est être utilisés dans vos Thèmes pour affichée. décider du contenu à afficher sur une  is_single() Quand une page d'Article unique page spécifique ou comment ce contenu est affichée. doit être affiché en fonction  is_single() Quand une page d'Article unique est affichée. de conditions que remplit cette page. Par exemple, si vous voulez insérer un  is_page() Quand une page est affichée. texte particulier au-dessus d'une série  is_category() Quand une page de Catégorie d'archive est affichée. d'Articles, mais seulement sur la page principale de votre blog, avec le  Etc… Marqueur Conditionnel is_home(), cela devient facile.  Ces Marqueurs sont en relation étroite avec la Hiérarchie des Modèlesde WordPress. http://codex.wordpress.org/fr:Marqueurs_conditionnels
  • 21. Let the coding begin
  • 22. Fichers de Contenu de index.php thème  style.css  index.php header.php The Loop footer.php single.php sidebar.php comments.php page.php search.php get_header(): importe header.php search-form.php Importation des Modèles de page templates header.php, Afficher le Afficher un message si contenu sidebar.php et rien à afficher de la page footer.php get_footer: accepte chaine de caractère comme paramètre pour inclure les modèles de différent footer
  • 23. Contenu de header.php Fichiers de thème  style.css Afficher le titre pour chaque template avec  index.php conditional tags  header.php The Loop footer.php single.php sidebar.php Insertions des comments.php fichiers JS page.php search.php search-form.php Modèles de page Définir le doctype, les fournit ici l’URL du flux attributs de langue dans la Importer le RSS au format RSS 2.0 balise <html> et définir le fichier style.css et l’URL des retroliens charset
  • 24. La boucle (the loop) Fichiers de thème  style.css  index.php  header.php  The Loop footer.php single.php sidebar.php comments.php page.php search.php S’il y a des articles on Affichage des liens vers Afficher un message les affiche l’un après les anciens article où les s’il n y a aucun search-form.php l’autre articles récents article Modèles de page
  • 25. L’intérieur de la boucle (the loop) Fichiers de thème  style.css  index.php  header.php  The Loop footer.php single.php sidebar.php comments.php page.php search.php Affichage du titre en Affichage infos relative à Afficher le contenu de l’article plus les liens tant que lien vers l’article: date, auteur, search-form.php l’article catégorie... etc vers un article précédent et un suivant Modèles de page
  • 26. Contenu de pied de page (footer.php) Fichiers de thème  style.css  index.php  header.php  The Loop  footer.php single.php sidebar.php comments.php page.php Il peut être structuré avec des sidebar (qu’on verra par la suite) qui search.php contient des Widgets, n’importe quel Template tag WordPress qui search-form.php charge du contenu comme des liens en occurrence où texte statique Modèles de page 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> Un site peut contenir plusieurs footer qui peut être inclus par la fonction get_footer
  • 27. Contenu de la vus d’un article(single.php) Fichiers de thème  style.css  index.php  header.php Afficher les liens de  The Loop navigation entre les articles  footer.php  single.php sidebar.php comments.php page.php search.php Importation des Afficher un search-form.php templates header.php, Afficher le contenu de message et le formulaire de Afficher le formulaire des Modèles de page sidebar.php et footer.php la page recherche si la page n’existe pas commentaire
  • 28. la barre latérale (sidebar.php) Fichiers de thème  style.css  index.php  header.php Cette barre peut-  The Loop être incluse dans  footer.php votre page, avec un simple appelle de  single.php fonction  sidebar.php get_sidebar(). comments.php page.php search.php search-form.php Modèles de page
  • 29. Activation des Widgets L’activation des Widgets se fait à partir du fichier functions.php, en insérant la fonction Fichiers de thème register_sidebar() avec son paramètre tableau :  style.css C’est ce nom  index.php qui vas être utilisé  header.php lors de la vérification  The Loop des Widgets  footer.php  single.php  sidebar.php comments.php page.php search.php search-form.php Modèles de page À ce stade, vous pourrez d’ors et déjà utiliser des Widgets sur votre sidebar depuis le Back-End.
  • 30. Contenu de la barre latérale (sidebar.php) Coté code, le fichier sidebar.php ne contient pas grand Fichiers de thème choses, à part la vérification des Widgets et les menus par défauts.  style.css  index.php  header.php Nom déclaré  The Loop dans le fichier functions.php  footer.php  single.php  sidebar.php comments.php page.php search.php search-form.php Ces fonctions seront Modèles de page utilisé s’il n’y a pas de Widgets Acrifes
  • 31. Quelques Fonctions célèbres pour la sidebar Dans le cas ou vous voudriez utiliser une autre sidebars, vous avez la possibilité l’utiliser la même fonction Fichiers de thème get_sidebar(‘secondaire’) qui vas appeler le fichier sidebar-secondaire.php  style.css wp_get_archives() : Permet de lister les dernier articles  index.php de votre site.  header.php wp_tag_cloud() : idéal si vous utilisez des tags dans vos  The Loop articles de lister les plus utilisées sous forme de nuage de  footer.php tags.  single.php wp_list_categories() : Affiche la liste des catégories de votre site.  sidebar.php wp_list_bookmarks() : Affiche la liste des liens géré comments.php depuis le panneau d’administration. page.php get_search_form () : Affiche le formulaire de recherche. search.php search-form.php Vous pouvez avoir l’intégralité des fonctions avec leurs Modèles de page paramètres détaillés sur http://www.codex.wordpress.org/
  • 32. Les commentaires (comments.php) Fichiers de thème  style.css  index.php  header.php  The Loop  footer.php Appelle de la template comments.php par la  single.php fonction  sidebar.php comments_template()  comments.php page.php search.php search-form.php Modèles de page
  • 33. Structure du fichier comments.php Fichiers de thème  style.css  index.php Si l’article n’est pas protégé  header.php Alors, Afficher les commentaires  The Loop S’il y des commentaires  footer.php  single.php  sidebar.php Si les commentaires sont  comments.php ouverts page.php Alors, Afficher le search.php formulaire search-form.php Si aucune inscription n’est requise Modèles de page
  • 34. Contenu du modèle de commentaires Fichiers de thème (comments.php)  style.css Article protégé par  index.php mot de passe  header.php  The Loop  footer.php Afficher les commentaires s’il y en a, sinon un petit  single.php message  sidebar.php  comments.php page.php Afficher le formulaire si les commentaires search.php sont ouverts sinon un petit message search-form.php Modèles de page Dans comments.php, nous aurons besoins de vérifier certaines conditions avant d’afficher les commentaires avec la fonctions wp_list_comments()
  • 35. Contenu de page (page.php) Fichiers de thème  style.css  index.php  header.php  The Loop  footer.php  single.php  sidebar.php  comments.php  page.php Importation des Afficher Afficher un message et Afficher le templates search.php header.php, le le formulaire de formulaire contenu recherche si la page des sidebar.php et search-form.php footer.php de la page n’existe pas commentaire Modèles de page ressemble au fichier single.php, donc il n’y a pas de nouvelles fonctions à apprendre dans cette template.
  • 36. Contenu du fichier search.php Fichiers de thème  style.css  index.php  header.php  The Loop  footer.php  single.php  sidebar.php  comments.php  page.php search.php Importation des search-form.php templates Afficher les termes Afficher les résultats header.php, de recherches dans Modèles de page sidebar.php et la page de recherche footer.php ressemble au fichier single.php, donc il n’y a pas de nouvelles fonctions à apprendre dans cette template.
  • 37. Contenu du fichier searchform.php Fichiers de thème  style.css  index.php  header.php  The Loop Vous pouvez mettre le formulaire de recherche dans son  footer.php propre fichier pour pouvoir l’utiliser facilement sur  single.php d’autres templates avec la fonction get_search_form()  sidebar.php Vous pouvez, par exemple, utiliser cette fonction :  comments.php Dans le fichier 404.php  page.php Après le else d’une boucle. search.php Dans la sidebar search-form.php Etc… Modèles de page ressemble au fichier single.php, donc il n’y a pas de nouvelles fonctions à apprendre dans cette template.
  • 38. Les modèles de page Vous pouvez choisir lorsque vous créez votre Fichiers de thème page, le modèle qui lui  style.css sera appliquée (formulaire de contacte,  index.php plan du site, etc…).  header.php Pour en créer vous n’avez  The Loop qu’a copier la template  footer.php page.php et le renommer  single.php comme suite : template-  sidebar.php nom_du_modele.php Ensuite ajouter le code suivant au tout début :  comments.php <?php  page.php /* search.php Template Name: Nom du modèle */ search-form.php ?> Modèles de page Nom du modèle correspond au nom qui apparaitra dans le back-end
  • 39. Les modèles de page Maintenant que vous avez votre modèle de page par défaut, vous pouvez lui apporter les modifications Fichiers de thème nécessaires en terme de style et fonctionnalités PHP.  style.css Vous pouvez par exemple :  index.php  Supprimez la sidebar  header.php  Ajouter de nouvelles fonctions Wordpress  The Loop  Appliquez un style différent via CSS  footer.php  Etc…  single.php Exemple de page modèle :  sidebar.php Page d’erreur 404 (404.php)  comments.php Page de liens (links.php)  page.php Plan du site (sitemap.php) search.php Page d’archives (archives.php) search-form.php Page D’accueil (index.php) Modèles de page Page de contact (contant.php) Etc…
  • 41. 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
  • 42. Les liens incontournables Documentation officielle: Les BloGs: smashingmagazine.com  codex.wordpress.org   speckyboy.com  tutplus.com  Tutoriel sur Wordpress :  digwp.com  wprecipes.com  wpbeginner.com  wpcandy.com  pimpmywordpress.com  wpengineer.com  wpzine.com  wptavern.com
  • 44. Travailler sur des serveurs locaux WampServer Server2Go LampServer MampServer
  • 45. Utiliser les outils de test et de débuguage Raccourci : Raccourci : Raccourci : Raccourci : F12 Ctrl+Maj+i F12 F12
  • 46. Vérifier si votre thème respecte les standards du web
  • 47. Créer des thèmes aussi légers que possible Equilibrer le Design/Contenu Contenu Design