SlideShare une entreprise Scribd logo
1  sur  16
Présenté par :
Abderrahmane OUBROU
Mohamed AGHROUD 26/11/2023
Wordpress: thèmes et templates
1
La formation sous thème :
2
PLAN
INTRODUCTION
CHOISIR ET INSTALLER DESTHÈMES
PERSONNALISATION DESTHÈMES
CRÉATION DE MODÈLES PERSONNALISÉS
TRAVAILLER AVEC DESTHÈMES ENFANTS
3
I. Les objectifs de cours
• Comprendre l'importance des thèmes et templates WordPress
• Explorons les thèmes WordPress
• Découvrons les templates WordPress
• Personnalisation approfondie avec Thèmes et Templates
• Choisir et personnaliser efficacement vos thèmes et templates
4
I. Introduction
Un thème Wordpress est un ensemble de fichiers qui auront
comme rôle de modifier et personnaliser l’apparence global du
site mais également la disposition des contenus.
un thème impact toute la partie visuelle du site wordpress.
un thème Wordpress ne modifiera en aucun cas les contenus
créés tels que les articles, les titres et descriptions du site, …
Il est donc nécessaire de bien séparer l’apparence graphique
d’un site et son contenu
5
I. Introduction
Un thème Wordpress peut inclure les éléments suivants
Fichiers de modèle(template files)
Fichiers de style
Images et medias
fonctions
6
I. Introduction
Template se réfère généralement à un fichier de modèle
spécifique utilisé pour afficher une partie spécifique du site.
Par exemple, il y a des templates pour les pages, les articles, les
archives, les catégories, etc.
Chaque type de contenu peut avoir son propre fichier de modèle,
dictant comment il est affiché sur le site.
Thème vs Template
Thème Template
ensemble global de fichiers définissant
l'apparence d'un site
fait référence à un fichier spécifique utilisé pour
afficher une partie spécifique du contenu sur le site
7
II. Choisir et installer des thèmes
Connectez-vous à votre tableau de bord WordPress.
Une fois connecté, accédez à l’onglet « Apparence », puis cliquez
sur « Thèmes ».
Pour ajouter un nouveau thème, cliquez sur le bouton « Ajouter »
Cliquez sur le bouton « Téléverser un thème » en haut de la
page. Choisissez le fichier ZIP du thème depuis votre ordinateur,
puis cliquez sur « Installer ».
changer de thème WordPress ?
Accédez d’abord au menu « Apparence » et sélectionnez
« Thèmes ». Passez ensuite le curseur sur le thème que vous
souhaitez utiliser et cliquez sur « Activer »
8
III. Création des thèmes
Prérequis : HTML,CSS,PHP
Étape 1 : créer le dossier de votre thème
/wp-content/theme/montheme
ce dossier doit contenir au minimum les fichiers
1. le fichier style.css : pour la configuration et l’ajout des règles de style
2. le fichier index.php : pour l’affichage du contenu de votre site,
3. le fichier functions.php : pour l’ajout de fonctionnalités WordPress dans votre thème.
Étape 2 : créer le fichier style.css
il faudra les déclarer dans le fichier functions.php tous les fichiers css que nous découvrirons plus bas.
Étape 3 : créer le fichier index.php
Étape 4 : activer le thème WordPress
Étape 5 : créer le fichier functions.php
9
IV. Création de modèles personnalisés
Créer un nouveau modèle
1. Créez une nouvelle publication (article ou page).
2. Ouvrez la colonne latérale des réglages et allez sur l’onglet Article ou Page.
3. Dans la section Modèle, sélectionnez l’option Nouveau.
4. Vous devrez alors donner un nom à votre modèle. Nous vous recommandons d’utiliser un nom
décrivant le type de modèle, comme par exemple « Pleine largeur ».
5. Vous passerez alors en mode d’édition de modèle, et pourrez faire toutes les modifications que
vous voulez sur le modèle en cours d’édition. Si besoin, vous pouvez revenir vers l’édition de votre
publication avec le lien de retour à la publication.
6. Une fois que vous avez fini vos modifications, cliquez sur Publier pour enregistrer vos
modifications.
10
• créer un thème enfant.
• C’est parce que si vous modifiez le thème directement et que vous le mettez à jour (ce que vous
devriez faire), vous perdrez tous les changements que vous avez faits.
• La création d’un thème enfant se compose de quatre étapes :
1. Créer un nouveau dossier dans wp-content/themes.
2. Dans ce dossier, créez une feuille de style. Dans cette feuille de style, dites à WordPress qu’il
s’agit d’un thème enfant de votre thème existant.
3. Ajoutez des copies des fichiers que vous voulez modifier au thème enfant et modifiez-les à cet
endroit.
4. Activez le thème enfant dans votre site.
WordPress utilisera toujours un fichier du thème enfant pour produire du contenu à moins qu’il n’y ait un
fichier plus haut dans la hiérarchie du thème parent. S’il y a deux versions du même fichier, il utilisera celle du
thème enfant. Cela signifie que votre nouveau fichier dans le thème enfant remplacera celui du thème parent.
IV. Travailler avec les thèmes enfants
Pratique
Objectif du jour:
1. Concevoir un thème pour wordpress
 Liste des articles
 Slidebar
 Catégorie
2. Pour aller un peu plus loin :Créer un carousel
11
Pratique
Introduction
Le processus:
CSS
Entête
Corps de Template
Structure les fichiers
Conclusion
12
Pratique
Concevoir un thème pour wordpress
Créer un dossier contenant les fichier de thèmes :
Dossier /wp-content/themes
Index.html>index.php
13
Merci pour votre attention
REFERENCES:
 https://www.blogdumoderateur.com/creer-theme-
wordpress/#:~:text=Pour%20cr%C3%A9er%20un%20th%C3%A8me%20WordPre
ss,accents%2C%20ou%20d'espaces.
15
Discussion

Contenu connexe

Similaire à WordPress thèmes et template.pptx

WordCamp Montreal 2016
WordCamp Montreal 2016WordCamp Montreal 2016
WordCamp Montreal 2016nickadamstv
 
Introduction à Wordpress
Introduction à WordpressIntroduction à Wordpress
Introduction à WordpressChris Gaillard
 
Creer un site internet sous WordPress
Creer un site internet sous WordPress Creer un site internet sous WordPress
Creer un site internet sous WordPress Erwan Tanguy
 
Comment créer un modèle de document Word ?
Comment créer un modèle de document Word ?Comment créer un modèle de document Word ?
Comment créer un modèle de document Word ?Votre Assistante
 
Supports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMSSupports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMSAnnabelle Buffart
 
Créer un blog sur WordPress
Créer un blog sur WordPressCréer un blog sur WordPress
Créer un blog sur WordPressURFIST de Rennes
 
Creation de template_joomla_2.5_-_v_1.0
Creation de template_joomla_2.5_-_v_1.0Creation de template_joomla_2.5_-_v_1.0
Creation de template_joomla_2.5_-_v_1.0Faiz Morchid
 
Tutoriel express pour Omeka sur Omeka.net
Tutoriel express pour Omeka sur Omeka.netTutoriel express pour Omeka sur Omeka.net
Tutoriel express pour Omeka sur Omeka.netLaurent Moccozet
 
Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015Romain Jarraud
 
Comment créer un thème enfant sur WordPress
Comment créer un thème enfant sur WordPressComment créer un thème enfant sur WordPress
Comment créer un thème enfant sur WordPressJonathan Grandin
 
Modeles eBay | Boutiques Designs | Design eBay personnalise
Modeles eBay | Boutiques Designs | Design eBay personnaliseModeles eBay | Boutiques Designs | Design eBay personnalise
Modeles eBay | Boutiques Designs | Design eBay personnaliseAlexandre Rivera
 
CréAtion Blog IntéGrer Un Fichier TéLéChargeable
CréAtion Blog   IntéGrer Un Fichier TéLéChargeableCréAtion Blog   IntéGrer Un Fichier TéLéChargeable
CréAtion Blog IntéGrer Un Fichier TéLéChargeablelpuren
 
Procédurier_Eklablog
Procédurier_EklablogProcédurier_Eklablog
Procédurier_EklablogUQAR
 
Création site intégrer un fichier téléchargeable
Création site   intégrer un fichier téléchargeableCréation site   intégrer un fichier téléchargeable
Création site intégrer un fichier téléchargeablelpuren
 

Similaire à WordPress thèmes et template.pptx (20)

WordCamp Montreal 2016
WordCamp Montreal 2016WordCamp Montreal 2016
WordCamp Montreal 2016
 
Introduction à Wordpress
Introduction à WordpressIntroduction à Wordpress
Introduction à Wordpress
 
Wordpress meetup
Wordpress meetupWordpress meetup
Wordpress meetup
 
Creer un site internet sous WordPress
Creer un site internet sous WordPress Creer un site internet sous WordPress
Creer un site internet sous WordPress
 
Comment créer un modèle de document Word ?
Comment créer un modèle de document Word ?Comment créer un modèle de document Word ?
Comment créer un modèle de document Word ?
 
Formation wordpress
Formation wordpressFormation wordpress
Formation wordpress
 
Prise en main de Joomla
Prise en main de JoomlaPrise en main de Joomla
Prise en main de Joomla
 
Supports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMSSupports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMS
 
Utiliser WordPress
Utiliser WordPressUtiliser WordPress
Utiliser WordPress
 
Créer un blog sur WordPress
Créer un blog sur WordPressCréer un blog sur WordPress
Créer un blog sur WordPress
 
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)
 
Creation de template_joomla_2.5_-_v_1.0
Creation de template_joomla_2.5_-_v_1.0Creation de template_joomla_2.5_-_v_1.0
Creation de template_joomla_2.5_-_v_1.0
 
Tutoriel express pour Omeka sur Omeka.net
Tutoriel express pour Omeka sur Omeka.netTutoriel express pour Omeka sur Omeka.net
Tutoriel express pour Omeka sur Omeka.net
 
Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015
 
Comment créer un thème enfant sur WordPress
Comment créer un thème enfant sur WordPressComment créer un thème enfant sur WordPress
Comment créer un thème enfant sur WordPress
 
WordPress et SEO - SEOCampus 2013
WordPress et SEO - SEOCampus 2013WordPress et SEO - SEOCampus 2013
WordPress et SEO - SEOCampus 2013
 
Modeles eBay | Boutiques Designs | Design eBay personnalise
Modeles eBay | Boutiques Designs | Design eBay personnaliseModeles eBay | Boutiques Designs | Design eBay personnalise
Modeles eBay | Boutiques Designs | Design eBay personnalise
 
CréAtion Blog IntéGrer Un Fichier TéLéChargeable
CréAtion Blog   IntéGrer Un Fichier TéLéChargeableCréAtion Blog   IntéGrer Un Fichier TéLéChargeable
CréAtion Blog IntéGrer Un Fichier TéLéChargeable
 
Procédurier_Eklablog
Procédurier_EklablogProcédurier_Eklablog
Procédurier_Eklablog
 
Création site intégrer un fichier téléchargeable
Création site   intégrer un fichier téléchargeableCréation site   intégrer un fichier téléchargeable
Création site intégrer un fichier téléchargeable
 

Dernier

Système National de Santé au- Maroc-(2017)."pdf"
Système National de Santé au- Maroc-(2017)."pdf"Système National de Santé au- Maroc-(2017)."pdf"
Système National de Santé au- Maroc-(2017)."pdf"tachakourtzineb
 
Festival de Cannes 2024. pptx
Festival    de   Cannes      2024.  pptxFestival    de   Cannes      2024.  pptx
Festival de Cannes 2024. pptxTxaruka
 
Decret-n°19-10-du-23-janvier-2019-reglementant-lexportation-des-déchets-spéci...
Decret-n°19-10-du-23-janvier-2019-reglementant-lexportation-des-déchets-spéci...Decret-n°19-10-du-23-janvier-2019-reglementant-lexportation-des-déchets-spéci...
Decret-n°19-10-du-23-janvier-2019-reglementant-lexportation-des-déchets-spéci...zidani2
 
EL KATRY Reem: Proposition de Programme Artistique et Exposition pour les Écoles
EL KATRY Reem: Proposition de Programme Artistique et Exposition pour les ÉcolesEL KATRY Reem: Proposition de Programme Artistique et Exposition pour les Écoles
EL KATRY Reem: Proposition de Programme Artistique et Exposition pour les ÉcolesSOLIANAEvelyne
 
Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...
Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...
Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...Pedago Lu
 
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024frizzole
 
Comment enseigner la langue française en Colombie?
Comment enseigner la langue française en Colombie?Comment enseigner la langue française en Colombie?
Comment enseigner la langue française en Colombie?sashaflor182
 
Quitter la nuit. pptx
Quitter          la        nuit.    pptxQuitter          la        nuit.    pptx
Quitter la nuit. pptxTxaruka
 
Gestion des flux de trésorerie dans les entreprises
Gestion des flux de trésorerie dans les entreprisesGestion des flux de trésorerie dans les entreprises
Gestion des flux de trésorerie dans les entreprisesHamdConseil
 
Présentation Webinaire Cohésion - Concevoir et mettre en place une CMDB, comm...
Présentation Webinaire Cohésion - Concevoir et mettre en place une CMDB, comm...Présentation Webinaire Cohésion - Concevoir et mettre en place une CMDB, comm...
Présentation Webinaire Cohésion - Concevoir et mettre en place une CMDB, comm...Technologia Formation
 
Présentation sur les Risques Électriques et Leur Prévention en Algérie
Présentation sur les Risques Électriques et Leur Prévention en AlgériePrésentation sur les Risques Électriques et Leur Prévention en Algérie
Présentation sur les Risques Électriques et Leur Prévention en AlgérieSeifTech
 
Webinaire Technologia | DAX : nouvelles fonctions
Webinaire Technologia | DAX : nouvelles fonctionsWebinaire Technologia | DAX : nouvelles fonctions
Webinaire Technologia | DAX : nouvelles fonctionsTechnologia Formation
 
Quitter la nuit. pptx
Quitter        la             nuit.   pptxQuitter        la             nuit.   pptx
Quitter la nuit. pptxTxaruka
 

Dernier (13)

Système National de Santé au- Maroc-(2017)."pdf"
Système National de Santé au- Maroc-(2017)."pdf"Système National de Santé au- Maroc-(2017)."pdf"
Système National de Santé au- Maroc-(2017)."pdf"
 
Festival de Cannes 2024. pptx
Festival    de   Cannes      2024.  pptxFestival    de   Cannes      2024.  pptx
Festival de Cannes 2024. pptx
 
Decret-n°19-10-du-23-janvier-2019-reglementant-lexportation-des-déchets-spéci...
Decret-n°19-10-du-23-janvier-2019-reglementant-lexportation-des-déchets-spéci...Decret-n°19-10-du-23-janvier-2019-reglementant-lexportation-des-déchets-spéci...
Decret-n°19-10-du-23-janvier-2019-reglementant-lexportation-des-déchets-spéci...
 
EL KATRY Reem: Proposition de Programme Artistique et Exposition pour les Écoles
EL KATRY Reem: Proposition de Programme Artistique et Exposition pour les ÉcolesEL KATRY Reem: Proposition de Programme Artistique et Exposition pour les Écoles
EL KATRY Reem: Proposition de Programme Artistique et Exposition pour les Écoles
 
Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...
Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...
Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...
 
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024
 
Comment enseigner la langue française en Colombie?
Comment enseigner la langue française en Colombie?Comment enseigner la langue française en Colombie?
Comment enseigner la langue française en Colombie?
 
Quitter la nuit. pptx
Quitter          la        nuit.    pptxQuitter          la        nuit.    pptx
Quitter la nuit. pptx
 
Gestion des flux de trésorerie dans les entreprises
Gestion des flux de trésorerie dans les entreprisesGestion des flux de trésorerie dans les entreprises
Gestion des flux de trésorerie dans les entreprises
 
Présentation Webinaire Cohésion - Concevoir et mettre en place une CMDB, comm...
Présentation Webinaire Cohésion - Concevoir et mettre en place une CMDB, comm...Présentation Webinaire Cohésion - Concevoir et mettre en place une CMDB, comm...
Présentation Webinaire Cohésion - Concevoir et mettre en place une CMDB, comm...
 
Présentation sur les Risques Électriques et Leur Prévention en Algérie
Présentation sur les Risques Électriques et Leur Prévention en AlgériePrésentation sur les Risques Électriques et Leur Prévention en Algérie
Présentation sur les Risques Électriques et Leur Prévention en Algérie
 
Webinaire Technologia | DAX : nouvelles fonctions
Webinaire Technologia | DAX : nouvelles fonctionsWebinaire Technologia | DAX : nouvelles fonctions
Webinaire Technologia | DAX : nouvelles fonctions
 
Quitter la nuit. pptx
Quitter        la             nuit.   pptxQuitter        la             nuit.   pptx
Quitter la nuit. pptx
 

WordPress thèmes et template.pptx

  • 1. Présenté par : Abderrahmane OUBROU Mohamed AGHROUD 26/11/2023 Wordpress: thèmes et templates 1 La formation sous thème :
  • 2. 2 PLAN INTRODUCTION CHOISIR ET INSTALLER DESTHÈMES PERSONNALISATION DESTHÈMES CRÉATION DE MODÈLES PERSONNALISÉS TRAVAILLER AVEC DESTHÈMES ENFANTS
  • 3. 3 I. Les objectifs de cours • Comprendre l'importance des thèmes et templates WordPress • Explorons les thèmes WordPress • Découvrons les templates WordPress • Personnalisation approfondie avec Thèmes et Templates • Choisir et personnaliser efficacement vos thèmes et templates
  • 4. 4 I. Introduction Un thème Wordpress est un ensemble de fichiers qui auront comme rôle de modifier et personnaliser l’apparence global du site mais également la disposition des contenus. un thème impact toute la partie visuelle du site wordpress. un thème Wordpress ne modifiera en aucun cas les contenus créés tels que les articles, les titres et descriptions du site, … Il est donc nécessaire de bien séparer l’apparence graphique d’un site et son contenu
  • 5. 5 I. Introduction Un thème Wordpress peut inclure les éléments suivants Fichiers de modèle(template files) Fichiers de style Images et medias fonctions
  • 6. 6 I. Introduction Template se réfère généralement à un fichier de modèle spécifique utilisé pour afficher une partie spécifique du site. Par exemple, il y a des templates pour les pages, les articles, les archives, les catégories, etc. Chaque type de contenu peut avoir son propre fichier de modèle, dictant comment il est affiché sur le site. Thème vs Template Thème Template ensemble global de fichiers définissant l'apparence d'un site fait référence à un fichier spécifique utilisé pour afficher une partie spécifique du contenu sur le site
  • 7. 7 II. Choisir et installer des thèmes Connectez-vous à votre tableau de bord WordPress. Une fois connecté, accédez à l’onglet « Apparence », puis cliquez sur « Thèmes ». Pour ajouter un nouveau thème, cliquez sur le bouton « Ajouter » Cliquez sur le bouton « Téléverser un thème » en haut de la page. Choisissez le fichier ZIP du thème depuis votre ordinateur, puis cliquez sur « Installer ». changer de thème WordPress ? Accédez d’abord au menu « Apparence » et sélectionnez « Thèmes ». Passez ensuite le curseur sur le thème que vous souhaitez utiliser et cliquez sur « Activer »
  • 8. 8 III. Création des thèmes Prérequis : HTML,CSS,PHP Étape 1 : créer le dossier de votre thème /wp-content/theme/montheme ce dossier doit contenir au minimum les fichiers 1. le fichier style.css : pour la configuration et l’ajout des règles de style 2. le fichier index.php : pour l’affichage du contenu de votre site, 3. le fichier functions.php : pour l’ajout de fonctionnalités WordPress dans votre thème. Étape 2 : créer le fichier style.css il faudra les déclarer dans le fichier functions.php tous les fichiers css que nous découvrirons plus bas. Étape 3 : créer le fichier index.php Étape 4 : activer le thème WordPress Étape 5 : créer le fichier functions.php
  • 9. 9 IV. Création de modèles personnalisés Créer un nouveau modèle 1. Créez une nouvelle publication (article ou page). 2. Ouvrez la colonne latérale des réglages et allez sur l’onglet Article ou Page. 3. Dans la section Modèle, sélectionnez l’option Nouveau. 4. Vous devrez alors donner un nom à votre modèle. Nous vous recommandons d’utiliser un nom décrivant le type de modèle, comme par exemple « Pleine largeur ». 5. Vous passerez alors en mode d’édition de modèle, et pourrez faire toutes les modifications que vous voulez sur le modèle en cours d’édition. Si besoin, vous pouvez revenir vers l’édition de votre publication avec le lien de retour à la publication. 6. Une fois que vous avez fini vos modifications, cliquez sur Publier pour enregistrer vos modifications.
  • 10. 10 • créer un thème enfant. • C’est parce que si vous modifiez le thème directement et que vous le mettez à jour (ce que vous devriez faire), vous perdrez tous les changements que vous avez faits. • La création d’un thème enfant se compose de quatre étapes : 1. Créer un nouveau dossier dans wp-content/themes. 2. Dans ce dossier, créez une feuille de style. Dans cette feuille de style, dites à WordPress qu’il s’agit d’un thème enfant de votre thème existant. 3. Ajoutez des copies des fichiers que vous voulez modifier au thème enfant et modifiez-les à cet endroit. 4. Activez le thème enfant dans votre site. WordPress utilisera toujours un fichier du thème enfant pour produire du contenu à moins qu’il n’y ait un fichier plus haut dans la hiérarchie du thème parent. S’il y a deux versions du même fichier, il utilisera celle du thème enfant. Cela signifie que votre nouveau fichier dans le thème enfant remplacera celui du thème parent. IV. Travailler avec les thèmes enfants
  • 11. Pratique Objectif du jour: 1. Concevoir un thème pour wordpress  Liste des articles  Slidebar  Catégorie 2. Pour aller un peu plus loin :Créer un carousel 11
  • 12. Pratique Introduction Le processus: CSS Entête Corps de Template Structure les fichiers Conclusion 12
  • 13. Pratique Concevoir un thème pour wordpress Créer un dossier contenant les fichier de thèmes : Dossier /wp-content/themes Index.html>index.php 13
  • 14. Merci pour votre attention