SlideShare une entreprise Scribd logo
1  sur  65
Télécharger pour lire hors ligne
WordPress
Version du 10 décembre 2017
“
https://fr.slideshare.net/ThomasBodin3/presentations
2
Hello!
Je m’appelle Thomas et je suis co-fondateur d’Hidden.market,
une startup dans le domaine du recrutement IT !
Retrouvez moi sur Twitter @ThomasBodinFr
3
Planning
4
Prise en main du CMS
Création d’un thème
Premiers pas dans le code
Mise en ligne
WordPress (1/4)
Prise en main du CMS
5
1. Présentation de WordPress
2. Découverte du back-office
3. Les plugins
4. Les thèmes
5. Installation en local
6
1. Présentation de
WordPress
WordPress est un CMS (Content Management System ou Système
de Gestion de Contenu en français), c’est-à-dire qu’il permet à
l’utilisateur (c'est-à-dire l’administrateur du site) de créer
facilement des pages de contenu, comme par exemple :
▫ la page de présentation d’une entreprise
▫ des articles de blog
▫ une page de contact
▫ un portfolio pour un artiste
▫ des fiches produits sur un site de vente en ligne
▫ un forum
▫ Etc
L’idée d’un CMS est de donner la possibilité de facilement créer du
contenu sur le site, sans avoir à mettre les mains dans le code ni
même avoir de connaissances techniques particulières.
7
Sortie de la v1 en 2004
1. Présentation de
WordPress
Attention à ne pas confondre WordPress.org et WordPress.com
Les 2 sont bien des CMS, les 2 sont bien des WordPress mais
pourtant il y a une grande différence.
Le .com :
Cela vous permet de télécharger l’ensemble du CMS et donc
d’avoir accès à tous les fichiers pour pouvoir ensuite mettre votre
site en ligne chez n’importe qui (1&1, OVH,...)
Le .org :
C’est la version payante de WordPress, vous n’avez accès à rien et
votre site est hébergé chez WordPress plus ou moins
gratuitement.
8
Part de marché des CMS en 2016
9
2. Découverte du
Back-office
Le menu est partagé en trois sections :
1) le tableau de bord
C’est une page qui affiche des informations générales sur
l’ensemble du site
2) les contenus
Editions des pages, articles, médias et commentaires. Ici, vous
pourrez ajouter, supprimer ou éditer le contenu de votre site et,
faire de la modération sur les commentaires. C’est la partie la plus
utilisée pour produire du contenu sur le site
3) les paramètres du site
Paramétrage du site, comme le choix du thème et des plugins ou
la gestion des utilisateurs
10
Accéder au back-office en
ajoutant /wp-admin après
votre extension.
Ex:
http://mon-site.fr/wp-admin
Place your screenshot here
11
Les articles
Gestion des articles du
blog
12
Les médias
Liste des tous les
médias (image, pdf,...)
upload depuis le
back-office
13
Les pages
Gestion des pages de
votre site
14
Les commentaires
Tous les commentaires
de votre site
15
3. Les plugins
Il existe plus de 45 000
plugins WordPress en
2016 !
Vous trouverez la liste
de tous les plugins sur
le site officiel :
https://fr.wordpress.or
g/plugins/
mais également depuis
votre back-office
16
4. Les thèmes
Il existe 2 types de thèmes :
- Les payants que vous
pouvez acheter sur
themeforest
- Les gratuits disponible
sur le site officiel
En moyenne vous pouvez
acheter 1 thème pour 60$
5. Installation en
local
1. Télécharger WordPress ici
2. Dézipper le fichier
3. Renommer le dossier du nom du site
4. Mettre le dossier dans votre répertoire htdocs ou www
5. Lancer votre serveur local (MAMP, LAMP, WAMP,...)
6. Créer une base de données dans phpMyAdmin du même
nom que votre dossier (pour vous y retrouver)
7. Se rendre sur votre url local : http://localhost:8888/mon-site/
8. Suivre les instructions de WordPress
9. C’est terminé :-)
17
Exercice : Créer votre portfolio
1. Installer WordPress en local
2. Installer le thème WordPress : Customizr
3. Créer des pages accueil, réalisation, blog, contact
4. Configurer votre site : permalien, page d’accueil, menu
5. Créer un utilisateur ayant accès uniquement aux
articles du blog
6. Ecrire des articles avec ce nouvel utilisateur
7. Installer des plugins et les configurer : formulaire de
contact, favicon, partage sur les réseaux sociaux, SEO,
sécurité…
8. Installer une boutique sur votre site pour vendre des
bijoux fantaisies
9. Changer de thème WordPress pour : Astrid
10. Mise en ligne de votre site
18
WordPress (2/4)
Premiers pas dans le code
19
1. Structure/Arborescence WordPress
2. Structure d’un thème
3. Hiérarchie des fichiers modèles
4. Les boucles
5. Les marqueurs
20
1. Structure /
Arborescence
Racine de WordPress :
Le fichier wp-config.php est le seul fichier que vous pouvez
modifier. C’est un fichier généré lors de l’installation de
WordPress, à partir du fichier wp-config-sample.php. Les
informations qui ont servi à la configuration du site se trouvent
dans ce fichier : le nom de la base de données, le mot de passe,
l’URL de la base de données, le préfixe des tables,…
Ensuite il y a 3 dossiers :
▫ wp-includes : regroupe toute la logique de WordPress, pour
toutes les fonctionnalités natives
▫ wp-admin permet de regrouper les pages et fonctionnalités
de l’interface d’administration
▫ wp-content contient les plugins et les thèmes installés dans
votre application. C’est ICI que vous allez coder !
21
La plupart des fichiers sont soit
des points d’entrée de
l’application soit des fichiers
permettant l’initialisation de
l’application.
1. Structure /
Arborescence
Contenu du dossier wp-content :
▫ languages/ contient les fichiers de langue de WordPress
▫ plugins/ contient l’ensemble des extensions installées. Vous
pouvez en installer depuis le back-office ou
télécharger/créer des plugins et les placer ici.
▫ themes/ contient l’ensemble des thèmes installés. Vous
pouvez en installer depuis le back-office ou
télécharger/créer des thèmes et les placer ici.
▫ uploads/ contient l’ensemble des médias téléchargés. Par
défaut WordPress classe les médias dans des dossiers ayant
pour nom l’année, avec à l’intérieur des dossiers ayant pour
nom les mois en chiffres (01, 02, … 12).
▫ upgrade/ accueille les fichiers compressés des mises à jour
de thèmes ou d’extensions. Ce dossier apparaîtra lorsque
vous effectuerez une mise à jour.
▫ le fichier index.php sert uniquement à la sécurité du dossier
wp-content.
22
C’est ICI que vous allez coder !
2. Structure d’un
thème
Le fichier style.css
Ce fichier permet de déclarer le thème auprès de WordPress ; on
y renseignera notamment le nom du thème, l'auteur et le site
Internet, ou encore un numéro de version.
Il peut également contenir des règles de mise en forme CSS.
La seule obligation est d'avoir un en-tête de déclaration du thème.
Rien qu'avec ce fichier, WordPress est capable de détecter votre
thème, celui-ci doit ainsi être visible dans la liste des thèmes du
back-office.
/*
Theme Name: Mon nom de thème
Author: Votre nom
Version: 1.0
*/
23
2. Structure d’un
thème
Le fichier screenshot.png
C’est l’image qui s’affiche dans la rubrique des thèmes du
back-office
24
2. Structure d’un
thème
Le fichier index.php est obligatoire car c’est le fichier qui va
afficher quelque chose à votre écran dans toutes les situations.
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
<?php get_footer(); ?>
25
2. Structure d’un
thème
Le fichier functions.php
Il contient des fonctions et permet principalement de définir des
traitements particuliers à appeler depuis vos templates, dans le
but d'éviter d'alourdir ces derniers avec trop de code PHP.
Les fonctions qui y sont définies sont alors accessibles depuis tous
les fichiers du thème.
Ce fichier est uniquement en PHP, donc vous ne pouvez écrire que
du PHP en ouvrant php (<?php) au début du fichier.
26
2. Structure d’un
thème
Le fichier header.php
Il contient le <html>, <body>, <head> et souvent le menu d’un site.
C’est la partie qui se répète sur vos différentes page du site.
<html>
<head>
<?php wp_head(); //Pour les plugins ?>
</head>
<body>
<header>
<nav>
</header>
Au lieu de réécrire à plusieurs endroits le même code, il suffira
d’inclure le header.
Pour cela on utilise la fonction PHP native de WordPress :
<?php get_header(); ?>
27
2. Structure d’un
thème
Le fichier footer.php
Tout comme le fichier header.php, footer fait la même chose mais
pour le pied de page de votre site (</body>,</html>)
<?php wp_footer(); //Pour les plugins ?>
</body>
</html>
Pour l’utiliser sur une page, vous utiliserez la fonction PHP native
de WordPress :
<?php get_footer(); ?>
28
2. Structure d’un
thème
Les dossiers js et css
Même si vous pouvez écrire votre CSS dans le fichier style.css,
vous pouvez également le laisser vide et inclure d’autres feuilles
de styles CSS dans ce répertoire. Vous pouvez même vous servir
de ce répertoire pour faire du LESS ou du SASS.
Le dossier JS contiendra vos différents fichiers javascript.
29
2. Structure d’un
thème
Le dossier template
Il contient des fichiers PHP qui sont les templates de votre thème.
En effet, dans votre back-office vous pouvez créer des pages et
appliquer des templates à ces pages pour avoir une structure et et
un design spécifique.
C’est dans ce répertoire que l’on définit les différents templates de
page.
Pour créer un template de page, il suffit de le définir depuis un
commentaire PHP :
<?php
/**
* Template Name: Votre nom de template de page
*/
?>
30
3. Hiérarchie des
fichiers modèles
Les fichiers modèles des thèmes constituent les pièces du puzzle
que WordPress assemble pour afficher les pages de votre site.
En fonction de ce que vous voulez, WordPress ira chercher un
fichier spécifique et si il ne le trouve pas il ira en chercher un
autre.
Par exemple il existe un fichier 404.php que WordPress ira
chercher en cas d’erreur 404. Mais si ce fichier n’existe pas il ira
sur la page index.php qui n’est pas la plus adapté.
Quand vous vous poserez la question :
“Quel fichier de modèle sera utilisé par WordPress pour
afficher tel type de page ?”
Vous trouverez la réponse dans l’image suivante :
31
https://codex.wordpress.org/image
s/c/ca/Template_Hierarchy_2015.p
ng
32
3. Hiérarchie des
fichiers modèles
Affichage de la page d'accueil
front-page.php
Affichage d'un article seul
single.php
Affichage d'une catégorie
Il est possible de personnaliser les modèles de Catégorie. Dans
l'exemple ci-dessous, la catégorie dont l'identifiant numérique est
6 (cat id) a un modèle spécifique.
category-6.php
category.php
archive.php
33
https://codex.wordpress.org/image
s/c/ca/Template_Hierarchy_2015.p
ng
3. Hiérarchie des
fichiers modèles
Affichage d'un auteur
author.php
Affichage de résultats de recherche
search.php
Affichage d'une page 404 non trouvée
404.php
34
https://codex.wordpress.org/image
s/c/ca/Template_Hierarchy_2015.p
ng
4. Les boucles
La Boucle (The Loop) est utilisée par WordPress pour afficher
chacun de vos Articles. Par l'utilisation de La Boucle, WordPress
traite tous les Articles devant être affichés sur la page active.
Tous les morceaux de code HTML ou PHP placés entre le début et
la fin de La Boucle seront exécutés pour chaque Article.
La Boucle commence ici :
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
et finit là :
<?php endwhile; endif; ?>
35
4. Les boucles
Si vous souhaitez afficher une boucle pour récupérer un certain
type de contenu et l’afficher dans un ordre précis, dans une
certaine limite,... Cela est possible en faisant une WP_Query ce
qui revient à faire une requête SQL.
Par exemple, vous pouvez afficher les 5 derniers articles de cette
manière :
<?php
$args = array(
'post_type' => 'post', //Type de contenu
'posts_per_page' => 5, // Limite
'orderby' => 'date', // Ordre
'order' => 'DESC'
);
$recentPosts = new WP_Query($args);
while ($recentPosts->have_posts()) : $recentPosts->the_post();
?>
<!--C’est ici que j’affiche le contenu de mon type de post-->
<?php endwhile; ?>
36
https://codex.wordpress.org/Class_
Reference/WP_Query
5. Les marqueurs
Les marqueurs de modèle sont utilisés par les Modèles de votre
blog pour afficher dynamiquement des informations comme le
titre, l’auteur, la date, les commentaires, les liens, le contenu d’un
article, les catégories,...
Liste des marqueurs :
https://codex.wordpress.org/fr:Marqueurs_de_Modele
Exemple de marqueurs :
<?php
the_permalink(); //Affichage de l’URL du “post”
the_title(); //Affichage du titre
the_excerpt(); //Affichage du début de l’article
the_content(); //Affichage du contenu de l’article
?>
37
Exercice : Allociné 1/3
1. Créer un thème Allociné
2. Créer une page d’accueil affichant les 5 derniers
articles du blog
3. Créer un menu : Accueil, Cinéma, Série, News
4. Créer un footer : reprendre celui d’Allociné
5. Créer des modèles de pages pour qui sommes-nous,
mentions légales, contact
6. Afficher tous les articles du blog sur la page News
7. Créer le fichier single pour afficher le contenu d’un
article
38
WordPress (3/4)
Création d’un thème
39
1. Les Custom Post Types
2. ACF
3. Hooks
4. Codex Wordpress
40
1. Les Custom Post
Type (CPT)
Par défaut, WordPress est fourni avec 2 post types – autrement dit
2 types de contenus que sont les articles et les pages.
Et bien, sachez qu’il est possible de créer vos propres types, se
sont les Custom Post Type !
Par exemple, une agence immobilière aura des articles pour son
blog, des pages pour son contenu “statique” et des Custom Post
Type pour ses maisons et ses appartements.
41
https://codex.wordpress.org/Post_T
ypes
1. Les Custom Post
Type (CPT)
Vous pouvez créer le CPT que vous voulez, il suffit de le définir
dans votre fichier functions.php
add_action( 'init', 'create_post_type' );
function create_post_type() {
register_post_type( 'appartement',
array(
'labels' => array(
'name' => __( 'Appartements' ),
'singular_name' => __( 'Appartement' )
),
'supports' => array('title', 'editor'), //'title', 'editor',
'thumbnail', 'author', 'excerpt', 'revisions', 'page-attributes'
'public' => true,
'menu_icon' => 'dashicons-megaphone',
'has_archive' => true
)
);
}
42
https://codex.wordpress.org/Post_T
ypes
1. Les Custom Post
Type (CPT)
Une fois que vous avez créé votre CPT, vous pouvez y accéder
depuis le back-office et ajouter autant de contenus que vous
voulez. Cela fonctionne de la même manière que “Articles”.
Pour afficher votre CPT vous devrez créer :
▫ archive-$monCpt.php
▫ single-$monCpt.php
Ces fichiers se construisent de la même manière que archive.php
et single.php
Le fait d’avoir mis le nom de votre CPT dans le nom du fichier
suffit à WordPress !!!
43
https://codex.wordpress.org/Post_T
ypes
44
ACF
C’est un plugin qui permet de rajouter des champs (input, textarea, date,…) aux formulaires de contenu du
back-office.
Par défaut vous ne pouvez avoir qu’un titre et un contenu, avec ACF vous pouvez rajouter ce que vous
voulez en champs et donc customiser votre WordPress pour en faire ce que vous voulez.
https://wordpress.org/plugins/advanced-custom-fields/
2. ACF
Créer votre nouveau groupe de champs :
1. Créer un nouveau ACF (Cinéma par exemple)
2. Attribuer cet ACF au contenu que vous voulez améliorer
(Cinéma par exemple)
3. Ajouter des champs puis enregistrer (réalisateur par
exemple)
4. Rendez-vous sur votre contenu pour vérifier ce nouveau
champs
Voilà, vous venez de créer un ACF et un nouveau champs dans le
back-office pour personnaliser votre thème. Il ne reste plus qu’à
afficher la valeur du champs côté front !
45
2. ACF
Afficher votre groupe de champs côté front :
Pour afficher un contenu ACF c’est aussi simple que d’afficher le
titre ou le contenu. Voici la syntaxe :
<?php the_field('nom_de_votre_acf'); ?>
Exemple :
<?php
the_title(); //affichage du titre
the_content(); //affichage du contenu
the_field('realisateur'); //affichage du ACF réalisateur
?>
Attention : En fonction du type de votre champs, la syntaxe peut
varier. Se référer à la documentation !
46
3. Hooks
Sans le savoir, vous avez déjà utiliser les hooks.
En effet, en créant un CPT vous venez de réaliser un hook
WordPress !
Un hook, est un mécanisme permettant aux développeurs
d'effectuer une action précise à un moment particulier.
La liste est longue : il y a plus de 1500 « hooks ». La liste de Adam
R. Brown constitue un matériel de référence précieux.
47
3. Hooks
Les « hooks » sont classés en deux catégories : les actions et les
filtres.
Les actions sont basées sur des événements. Par exemple, le «
hook » publish_post permet d'ajouter des fonctionnalités qui
seront exécutées à chaque fois qu'un article est publié.
Les filtres, quant à eux, permettent de modifier le texte qui sera
affiché à l'écran ou enregistré dans la BD. Par exemple, le « hook »
the_title permet d'ajuster la façon dont le titre d'un article sera
affiché à l'écran.
48
3. Hooks Pour utiliser un hook, il faut :
1. Ecrire la méthode qui devra être exécuté dans votre fichier
functions.php
2. Enregistrer le hook (toujours dans functions.php) :
a. add_action( 'nom_du_hook', 'nom_de_la_methode' );
b. add_filter( 'nom_du_hook', 'nom_de_la_methode' );
49
3. Hooks
Changer le nom du rôle utilisateur “Subscriber” en “Membre” :
<?php
function change_role_name() {
global $wp_roles;
if ( ! isset( $wp_roles ) )
$wp_roles = new WP_Roles();
$wp_roles->roles['subscriber']['name'] = 'Membre';
$wp_roles->role_names['subscriber'] = 'Membre';
}
add_action('init', 'change_role_name');
?>
Cacher la barre WordPress côté front :
<?php add_filter('show_admin_bar', '__return_false'); ?>
50
4. Codex WordPress
WordPress à une documentation en ligne très bien faite et en
français, le codex !
URL : https://codex.wordpress.org/
Vous trouverez les réponses à vos questions sur ce site comme
par exemple :
▫ Comment afficher l’avatar d’un utilisateur,
▫ Comment créer un custom post type,
▫ Comment afficher les post d’une catégorie précise,
▫ Comment faire une pagination de post,
▫ …
Toutes vos réponses sont ici, à vous de faire la bonne recherche
Google !
51
Exercice : Allociné 2/3
1. Créer un Custom Post Type Cinéma et un CPT Série
2. Créer un ACF Cinéma (bande-annonce, date de sortie,
réalisateur, acteurs, photos...)
3. Créer un ACF Série (créateur, acteurs, nationalité,
statut, synopsis...)
4. Afficher les 5 derniers films et 5 dernières séries sur la
page d’accueil
5. Afficher tous les films dans la page Cinéma
6. Afficher toutes les séries dans la page Série
7. Créer les single associés à Cinéma et Série pour avoir
plus d’informations via les ACF
52
WordPress (4/4)
Mise en ligne
53
1. Installation côté serveur
2. Optimisation
3. Sécurité
4. SEO
5. Autres plugins
54
1. Installation côté
serveur
1. Transférer tous les fichiers de votre site dans le répertoire
de votre serveur (via Filezilla par exemple)
2. Modifier le fichier wp-config.php pour y mettre les accès à la
BDD
3. Aller sur votre phpMyAdmin en local pour sélectionner et
exporter la BDD de votre site WordPress
4. Aller sur phpMyAdmin de votre hébergeur et importez-y le
fichier précédemment téléchargé
5. Dans cette BDD
a. Sélectionner la TABLE options
b. Modifier les valeurs de la ligne 1 et 2 pour y mettre
l’adresse URL de votre site à la place de l’URL de votre
serveur local
55
56
W3 Total Cache
Mise en cache des fichiers source de votre site, minifications des sources, CDN
https://fr.wordpress.org/plugins/w3-total-cache/
57
WP Smush
Réduction du poids des images uploads depuis le back-office
https://fr.wordpress.org/plugins/wp-smushit/
58
WP Admin UI Customize
Ce plugin permet de customiser le back-office pour les différentes rôles utilisateurs. Par exemple, si vous
ne voulez pas que votre client accède à certains menu du back-office.
https://fr.wordpress.org/plugins/wp-admin-ui-customize/
59
SecuPress
Mise en place simple de solutions pour sécuriser au mieux votre site contre des attaques. Il inclut
également un système de sauvegarde automatique de votre BDD et d’autres fonctionnalités très utiles.
https://fr.wordpress.org/plugins/secupress/
60
Yoast SEO
Ce plugin permet d’optimiser votre référencement en suivant les best practices du référencement naturel
https://fr.wordpress.org/plugins/wordpress-seo/
61
Disqus
Système de commentaire amélioré
https://fr.wordpress.org/plugins/disqus-comment-system/
62
WP Optimize
Ce plugin optimise votre base de données qui a tendance à grossir trop vite.
https://fr.wordpress.org/plugins/wp-optimize/
63
Polylang
Pour faire de votre site WordPress, un site international
https://fr.wordpress.org/plugins/polylang/
Exercice : Allociné 3/3
Installer les plugins et les configurer sauf si vous utilisez déjà
des plugins équivalent.
64
65
Merci !
@ThomasBodinFr
hi@thomas-bodin.com

Contenu connexe

Tendances

Community Management-Cours 1.pdf
Community Management-Cours 1.pdfCommunity Management-Cours 1.pdf
Community Management-Cours 1.pdfhani586
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSSSamuel Robert
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement webHouda TOUKABRI
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapBassem ABCHA
 
Les Stratégies Gagnantes Réseaux Sociaux pour 2023 - Webinar JumpStart -
Les Stratégies Gagnantes Réseaux Sociaux  pour 2023 - Webinar JumpStart - Les Stratégies Gagnantes Réseaux Sociaux  pour 2023 - Webinar JumpStart -
Les Stratégies Gagnantes Réseaux Sociaux pour 2023 - Webinar JumpStart - Julien Dereumaux
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Abel LIFAEFI MBULA
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...MOHAMMED MOURADI
 
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliothequeEcole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliothequeMehdi Hamime
 
Decret carte sanitaire (2)
Decret carte sanitaire (2)Decret carte sanitaire (2)
Decret carte sanitaire (2)AZOUZ HASNAOUI
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPKristen Le Liboux
 
Les Bases du Marketing
Les Bases du MarketingLes Bases du Marketing
Les Bases du MarketingMylène Bordin
 
Android-Tp3: fragments et menus
Android-Tp3: fragments et menusAndroid-Tp3: fragments et menus
Android-Tp3: fragments et menusLilia Sfaxi
 
présentation de soutenance PFE
présentation de soutenance PFEprésentation de soutenance PFE
présentation de soutenance PFEKarim Labidi
 

Tendances (20)

Tp1 wp etud
Tp1 wp etudTp1 wp etud
Tp1 wp etud
 
Community Management-Cours 1.pdf
Community Management-Cours 1.pdfCommunity Management-Cours 1.pdf
Community Management-Cours 1.pdf
 
Chapitre 01 - Notions de base
Chapitre 01 - Notions de baseChapitre 01 - Notions de base
Chapitre 01 - Notions de base
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSS
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
 
Les Stratégies Gagnantes Réseaux Sociaux pour 2023 - Webinar JumpStart -
Les Stratégies Gagnantes Réseaux Sociaux  pour 2023 - Webinar JumpStart - Les Stratégies Gagnantes Réseaux Sociaux  pour 2023 - Webinar JumpStart -
Les Stratégies Gagnantes Réseaux Sociaux pour 2023 - Webinar JumpStart -
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
 
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliothequeEcole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
 
Decret carte sanitaire (2)
Decret carte sanitaire (2)Decret carte sanitaire (2)
Decret carte sanitaire (2)
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 
Les Bases du Marketing
Les Bases du MarketingLes Bases du Marketing
Les Bases du Marketing
 
Android-Tp3: fragments et menus
Android-Tp3: fragments et menusAndroid-Tp3: fragments et menus
Android-Tp3: fragments et menus
 
présentation de soutenance PFE
présentation de soutenance PFEprésentation de soutenance PFE
présentation de soutenance PFE
 

Similaire à WordPress

WordPress thèmes et template.pptx
WordPress thèmes et template.pptxWordPress thèmes et template.pptx
WordPress thèmes et template.pptxGHRIS -INFO
 
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
 
Drupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliersDrupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliersFrédéric Simonet
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptRihabBENLAMINE
 
Introduction à Wordpress
Introduction à WordpressIntroduction à Wordpress
Introduction à WordpressChris Gaillard
 
Wordpress pour les entreprises
Wordpress pour les entreprisesWordpress pour les entreprises
Wordpress pour les entreprisesmonsieurpixel
 
Creation de-themes-wp
Creation de-themes-wpCreation de-themes-wp
Creation de-themes-wpChi Nacim
 
WordPress Bases e-learning
WordPress Bases e-learningWordPress Bases e-learning
WordPress Bases e-learningAntonio Soto
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMSAurélien Denis
 
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
 
Florence Labord Moodle
Florence Labord  MoodleFlorence Labord  Moodle
Florence Labord MoodleWalibi
 

Similaire à WordPress (20)

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
 
WordPress thèmes et template.pptx
WordPress thèmes et template.pptxWordPress thèmes et template.pptx
WordPress thèmes et template.pptx
 
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
 
SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
Wordpress meetup
Wordpress meetupWordpress meetup
Wordpress meetup
 
Exemple demarrage wp_v01
Exemple demarrage wp_v01Exemple demarrage wp_v01
Exemple demarrage wp_v01
 
Drupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliersDrupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliers
 
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)
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
Introduction à Wordpress
Introduction à WordpressIntroduction à Wordpress
Introduction à Wordpress
 
Wordpress pour les entreprises
Wordpress pour les entreprisesWordpress pour les entreprises
Wordpress pour les entreprises
 
Creation de-themes-wp
Creation de-themes-wpCreation de-themes-wp
Creation de-themes-wp
 
Developpement Web.pptx
Developpement Web.pptxDeveloppement Web.pptx
Developpement Web.pptx
 
Prise en main de Joomla
Prise en main de JoomlaPrise en main de Joomla
Prise en main de Joomla
 
WordPress Bases e-learning
WordPress Bases e-learningWordPress Bases e-learning
WordPress Bases e-learning
 
Cours1
Cours1Cours1
Cours1
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 
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)
 
Florence Labord Moodle
Florence Labord  MoodleFlorence Labord  Moodle
Florence Labord Moodle
 
Sécuriser son site wordpress
Sécuriser son site wordpressSécuriser son site wordpress
Sécuriser son site wordpress
 

Dernier

SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSKennel
 
Presentation de la plateforme Moodle - avril 2024
Presentation de la plateforme Moodle - avril 2024Presentation de la plateforme Moodle - avril 2024
Presentation de la plateforme Moodle - avril 2024Gilles Le Page
 
Cours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETCours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETMedBechir
 
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSKennel
 
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 37
 
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 37
 
Principe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 tempsPrincipe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 tempsRajiAbdelghani
 
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSKennel
 
Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Alain Marois
 
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .
Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .Txaruka
 
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETCours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETMedBechir
 
PIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdfPIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdfRiDaHAziz
 
Le Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directeLe Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directeXL Groupe
 
Bernard Réquichot.pptx Peintre français
Bernard Réquichot.pptx   Peintre françaisBernard Réquichot.pptx   Peintre français
Bernard Réquichot.pptx Peintre françaisTxaruka
 
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSKennel
 
PIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdfPIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdfRiDaHAziz
 
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...Faga1939
 
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSKennel
 

Dernier (19)

SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
 
Presentation de la plateforme Moodle - avril 2024
Presentation de la plateforme Moodle - avril 2024Presentation de la plateforme Moodle - avril 2024
Presentation de la plateforme Moodle - avril 2024
 
Cours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETCours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSET
 
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
 
DO PALÁCIO À ASSEMBLEIA .
DO PALÁCIO À ASSEMBLEIA                 .DO PALÁCIO À ASSEMBLEIA                 .
DO PALÁCIO À ASSEMBLEIA .
 
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
 
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
 
Principe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 tempsPrincipe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 temps
 
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
 
Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024
 
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .
Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .
 
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETCours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
 
PIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdfPIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdf
 
Le Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directeLe Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directe
 
Bernard Réquichot.pptx Peintre français
Bernard Réquichot.pptx   Peintre françaisBernard Réquichot.pptx   Peintre français
Bernard Réquichot.pptx Peintre français
 
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
 
PIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdfPIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdf
 
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
 
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
 

WordPress

  • 1. WordPress Version du 10 décembre 2017
  • 3. Hello! Je m’appelle Thomas et je suis co-fondateur d’Hidden.market, une startup dans le domaine du recrutement IT ! Retrouvez moi sur Twitter @ThomasBodinFr 3
  • 4. Planning 4 Prise en main du CMS Création d’un thème Premiers pas dans le code Mise en ligne
  • 5. WordPress (1/4) Prise en main du CMS 5
  • 6. 1. Présentation de WordPress 2. Découverte du back-office 3. Les plugins 4. Les thèmes 5. Installation en local 6
  • 7. 1. Présentation de WordPress WordPress est un CMS (Content Management System ou Système de Gestion de Contenu en français), c’est-à-dire qu’il permet à l’utilisateur (c'est-à-dire l’administrateur du site) de créer facilement des pages de contenu, comme par exemple : ▫ la page de présentation d’une entreprise ▫ des articles de blog ▫ une page de contact ▫ un portfolio pour un artiste ▫ des fiches produits sur un site de vente en ligne ▫ un forum ▫ Etc L’idée d’un CMS est de donner la possibilité de facilement créer du contenu sur le site, sans avoir à mettre les mains dans le code ni même avoir de connaissances techniques particulières. 7 Sortie de la v1 en 2004
  • 8. 1. Présentation de WordPress Attention à ne pas confondre WordPress.org et WordPress.com Les 2 sont bien des CMS, les 2 sont bien des WordPress mais pourtant il y a une grande différence. Le .com : Cela vous permet de télécharger l’ensemble du CMS et donc d’avoir accès à tous les fichiers pour pouvoir ensuite mettre votre site en ligne chez n’importe qui (1&1, OVH,...) Le .org : C’est la version payante de WordPress, vous n’avez accès à rien et votre site est hébergé chez WordPress plus ou moins gratuitement. 8
  • 9. Part de marché des CMS en 2016 9
  • 10. 2. Découverte du Back-office Le menu est partagé en trois sections : 1) le tableau de bord C’est une page qui affiche des informations générales sur l’ensemble du site 2) les contenus Editions des pages, articles, médias et commentaires. Ici, vous pourrez ajouter, supprimer ou éditer le contenu de votre site et, faire de la modération sur les commentaires. C’est la partie la plus utilisée pour produire du contenu sur le site 3) les paramètres du site Paramétrage du site, comme le choix du thème et des plugins ou la gestion des utilisateurs 10 Accéder au back-office en ajoutant /wp-admin après votre extension. Ex: http://mon-site.fr/wp-admin
  • 11. Place your screenshot here 11 Les articles Gestion des articles du blog
  • 12. 12 Les médias Liste des tous les médias (image, pdf,...) upload depuis le back-office
  • 13. 13 Les pages Gestion des pages de votre site
  • 14. 14 Les commentaires Tous les commentaires de votre site
  • 15. 15 3. Les plugins Il existe plus de 45 000 plugins WordPress en 2016 ! Vous trouverez la liste de tous les plugins sur le site officiel : https://fr.wordpress.or g/plugins/ mais également depuis votre back-office
  • 16. 16 4. Les thèmes Il existe 2 types de thèmes : - Les payants que vous pouvez acheter sur themeforest - Les gratuits disponible sur le site officiel En moyenne vous pouvez acheter 1 thème pour 60$
  • 17. 5. Installation en local 1. Télécharger WordPress ici 2. Dézipper le fichier 3. Renommer le dossier du nom du site 4. Mettre le dossier dans votre répertoire htdocs ou www 5. Lancer votre serveur local (MAMP, LAMP, WAMP,...) 6. Créer une base de données dans phpMyAdmin du même nom que votre dossier (pour vous y retrouver) 7. Se rendre sur votre url local : http://localhost:8888/mon-site/ 8. Suivre les instructions de WordPress 9. C’est terminé :-) 17
  • 18. Exercice : Créer votre portfolio 1. Installer WordPress en local 2. Installer le thème WordPress : Customizr 3. Créer des pages accueil, réalisation, blog, contact 4. Configurer votre site : permalien, page d’accueil, menu 5. Créer un utilisateur ayant accès uniquement aux articles du blog 6. Ecrire des articles avec ce nouvel utilisateur 7. Installer des plugins et les configurer : formulaire de contact, favicon, partage sur les réseaux sociaux, SEO, sécurité… 8. Installer une boutique sur votre site pour vendre des bijoux fantaisies 9. Changer de thème WordPress pour : Astrid 10. Mise en ligne de votre site 18
  • 19. WordPress (2/4) Premiers pas dans le code 19
  • 20. 1. Structure/Arborescence WordPress 2. Structure d’un thème 3. Hiérarchie des fichiers modèles 4. Les boucles 5. Les marqueurs 20
  • 21. 1. Structure / Arborescence Racine de WordPress : Le fichier wp-config.php est le seul fichier que vous pouvez modifier. C’est un fichier généré lors de l’installation de WordPress, à partir du fichier wp-config-sample.php. Les informations qui ont servi à la configuration du site se trouvent dans ce fichier : le nom de la base de données, le mot de passe, l’URL de la base de données, le préfixe des tables,… Ensuite il y a 3 dossiers : ▫ wp-includes : regroupe toute la logique de WordPress, pour toutes les fonctionnalités natives ▫ wp-admin permet de regrouper les pages et fonctionnalités de l’interface d’administration ▫ wp-content contient les plugins et les thèmes installés dans votre application. C’est ICI que vous allez coder ! 21 La plupart des fichiers sont soit des points d’entrée de l’application soit des fichiers permettant l’initialisation de l’application.
  • 22. 1. Structure / Arborescence Contenu du dossier wp-content : ▫ languages/ contient les fichiers de langue de WordPress ▫ plugins/ contient l’ensemble des extensions installées. Vous pouvez en installer depuis le back-office ou télécharger/créer des plugins et les placer ici. ▫ themes/ contient l’ensemble des thèmes installés. Vous pouvez en installer depuis le back-office ou télécharger/créer des thèmes et les placer ici. ▫ uploads/ contient l’ensemble des médias téléchargés. Par défaut WordPress classe les médias dans des dossiers ayant pour nom l’année, avec à l’intérieur des dossiers ayant pour nom les mois en chiffres (01, 02, … 12). ▫ upgrade/ accueille les fichiers compressés des mises à jour de thèmes ou d’extensions. Ce dossier apparaîtra lorsque vous effectuerez une mise à jour. ▫ le fichier index.php sert uniquement à la sécurité du dossier wp-content. 22 C’est ICI que vous allez coder !
  • 23. 2. Structure d’un thème Le fichier style.css Ce fichier permet de déclarer le thème auprès de WordPress ; on y renseignera notamment le nom du thème, l'auteur et le site Internet, ou encore un numéro de version. Il peut également contenir des règles de mise en forme CSS. La seule obligation est d'avoir un en-tête de déclaration du thème. Rien qu'avec ce fichier, WordPress est capable de détecter votre thème, celui-ci doit ainsi être visible dans la liste des thèmes du back-office. /* Theme Name: Mon nom de thème Author: Votre nom Version: 1.0 */ 23
  • 24. 2. Structure d’un thème Le fichier screenshot.png C’est l’image qui s’affiche dans la rubrique des thèmes du back-office 24
  • 25. 2. Structure d’un thème Le fichier index.php est obligatoire car c’est le fichier qui va afficher quelque chose à votre écran dans toutes les situations. <?php get_header(); ?> <?php if (have_posts()) : while (have_posts()) : the_post();?> <?php the_content(); ?> <?php endwhile; endif; ?> <?php get_footer(); ?> 25
  • 26. 2. Structure d’un thème Le fichier functions.php Il contient des fonctions et permet principalement de définir des traitements particuliers à appeler depuis vos templates, dans le but d'éviter d'alourdir ces derniers avec trop de code PHP. Les fonctions qui y sont définies sont alors accessibles depuis tous les fichiers du thème. Ce fichier est uniquement en PHP, donc vous ne pouvez écrire que du PHP en ouvrant php (<?php) au début du fichier. 26
  • 27. 2. Structure d’un thème Le fichier header.php Il contient le <html>, <body>, <head> et souvent le menu d’un site. C’est la partie qui se répète sur vos différentes page du site. <html> <head> <?php wp_head(); //Pour les plugins ?> </head> <body> <header> <nav> </header> Au lieu de réécrire à plusieurs endroits le même code, il suffira d’inclure le header. Pour cela on utilise la fonction PHP native de WordPress : <?php get_header(); ?> 27
  • 28. 2. Structure d’un thème Le fichier footer.php Tout comme le fichier header.php, footer fait la même chose mais pour le pied de page de votre site (</body>,</html>) <?php wp_footer(); //Pour les plugins ?> </body> </html> Pour l’utiliser sur une page, vous utiliserez la fonction PHP native de WordPress : <?php get_footer(); ?> 28
  • 29. 2. Structure d’un thème Les dossiers js et css Même si vous pouvez écrire votre CSS dans le fichier style.css, vous pouvez également le laisser vide et inclure d’autres feuilles de styles CSS dans ce répertoire. Vous pouvez même vous servir de ce répertoire pour faire du LESS ou du SASS. Le dossier JS contiendra vos différents fichiers javascript. 29
  • 30. 2. Structure d’un thème Le dossier template Il contient des fichiers PHP qui sont les templates de votre thème. En effet, dans votre back-office vous pouvez créer des pages et appliquer des templates à ces pages pour avoir une structure et et un design spécifique. C’est dans ce répertoire que l’on définit les différents templates de page. Pour créer un template de page, il suffit de le définir depuis un commentaire PHP : <?php /** * Template Name: Votre nom de template de page */ ?> 30
  • 31. 3. Hiérarchie des fichiers modèles Les fichiers modèles des thèmes constituent les pièces du puzzle que WordPress assemble pour afficher les pages de votre site. En fonction de ce que vous voulez, WordPress ira chercher un fichier spécifique et si il ne le trouve pas il ira en chercher un autre. Par exemple il existe un fichier 404.php que WordPress ira chercher en cas d’erreur 404. Mais si ce fichier n’existe pas il ira sur la page index.php qui n’est pas la plus adapté. Quand vous vous poserez la question : “Quel fichier de modèle sera utilisé par WordPress pour afficher tel type de page ?” Vous trouverez la réponse dans l’image suivante : 31 https://codex.wordpress.org/image s/c/ca/Template_Hierarchy_2015.p ng
  • 32. 32
  • 33. 3. Hiérarchie des fichiers modèles Affichage de la page d'accueil front-page.php Affichage d'un article seul single.php Affichage d'une catégorie Il est possible de personnaliser les modèles de Catégorie. Dans l'exemple ci-dessous, la catégorie dont l'identifiant numérique est 6 (cat id) a un modèle spécifique. category-6.php category.php archive.php 33 https://codex.wordpress.org/image s/c/ca/Template_Hierarchy_2015.p ng
  • 34. 3. Hiérarchie des fichiers modèles Affichage d'un auteur author.php Affichage de résultats de recherche search.php Affichage d'une page 404 non trouvée 404.php 34 https://codex.wordpress.org/image s/c/ca/Template_Hierarchy_2015.p ng
  • 35. 4. Les boucles La Boucle (The Loop) est utilisée par WordPress pour afficher chacun de vos Articles. Par l'utilisation de La Boucle, WordPress traite tous les Articles devant être affichés sur la page active. Tous les morceaux de code HTML ou PHP placés entre le début et la fin de La Boucle seront exécutés pour chaque Article. La Boucle commence ici : <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> et finit là : <?php endwhile; endif; ?> 35
  • 36. 4. Les boucles Si vous souhaitez afficher une boucle pour récupérer un certain type de contenu et l’afficher dans un ordre précis, dans une certaine limite,... Cela est possible en faisant une WP_Query ce qui revient à faire une requête SQL. Par exemple, vous pouvez afficher les 5 derniers articles de cette manière : <?php $args = array( 'post_type' => 'post', //Type de contenu 'posts_per_page' => 5, // Limite 'orderby' => 'date', // Ordre 'order' => 'DESC' ); $recentPosts = new WP_Query($args); while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?> <!--C’est ici que j’affiche le contenu de mon type de post--> <?php endwhile; ?> 36 https://codex.wordpress.org/Class_ Reference/WP_Query
  • 37. 5. Les marqueurs Les marqueurs de modèle sont utilisés par les Modèles de votre blog pour afficher dynamiquement des informations comme le titre, l’auteur, la date, les commentaires, les liens, le contenu d’un article, les catégories,... Liste des marqueurs : https://codex.wordpress.org/fr:Marqueurs_de_Modele Exemple de marqueurs : <?php the_permalink(); //Affichage de l’URL du “post” the_title(); //Affichage du titre the_excerpt(); //Affichage du début de l’article the_content(); //Affichage du contenu de l’article ?> 37
  • 38. Exercice : Allociné 1/3 1. Créer un thème Allociné 2. Créer une page d’accueil affichant les 5 derniers articles du blog 3. Créer un menu : Accueil, Cinéma, Série, News 4. Créer un footer : reprendre celui d’Allociné 5. Créer des modèles de pages pour qui sommes-nous, mentions légales, contact 6. Afficher tous les articles du blog sur la page News 7. Créer le fichier single pour afficher le contenu d’un article 38
  • 40. 1. Les Custom Post Types 2. ACF 3. Hooks 4. Codex Wordpress 40
  • 41. 1. Les Custom Post Type (CPT) Par défaut, WordPress est fourni avec 2 post types – autrement dit 2 types de contenus que sont les articles et les pages. Et bien, sachez qu’il est possible de créer vos propres types, se sont les Custom Post Type ! Par exemple, une agence immobilière aura des articles pour son blog, des pages pour son contenu “statique” et des Custom Post Type pour ses maisons et ses appartements. 41 https://codex.wordpress.org/Post_T ypes
  • 42. 1. Les Custom Post Type (CPT) Vous pouvez créer le CPT que vous voulez, il suffit de le définir dans votre fichier functions.php add_action( 'init', 'create_post_type' ); function create_post_type() { register_post_type( 'appartement', array( 'labels' => array( 'name' => __( 'Appartements' ), 'singular_name' => __( 'Appartement' ) ), 'supports' => array('title', 'editor'), //'title', 'editor', 'thumbnail', 'author', 'excerpt', 'revisions', 'page-attributes' 'public' => true, 'menu_icon' => 'dashicons-megaphone', 'has_archive' => true ) ); } 42 https://codex.wordpress.org/Post_T ypes
  • 43. 1. Les Custom Post Type (CPT) Une fois que vous avez créé votre CPT, vous pouvez y accéder depuis le back-office et ajouter autant de contenus que vous voulez. Cela fonctionne de la même manière que “Articles”. Pour afficher votre CPT vous devrez créer : ▫ archive-$monCpt.php ▫ single-$monCpt.php Ces fichiers se construisent de la même manière que archive.php et single.php Le fait d’avoir mis le nom de votre CPT dans le nom du fichier suffit à WordPress !!! 43 https://codex.wordpress.org/Post_T ypes
  • 44. 44 ACF C’est un plugin qui permet de rajouter des champs (input, textarea, date,…) aux formulaires de contenu du back-office. Par défaut vous ne pouvez avoir qu’un titre et un contenu, avec ACF vous pouvez rajouter ce que vous voulez en champs et donc customiser votre WordPress pour en faire ce que vous voulez. https://wordpress.org/plugins/advanced-custom-fields/
  • 45. 2. ACF Créer votre nouveau groupe de champs : 1. Créer un nouveau ACF (Cinéma par exemple) 2. Attribuer cet ACF au contenu que vous voulez améliorer (Cinéma par exemple) 3. Ajouter des champs puis enregistrer (réalisateur par exemple) 4. Rendez-vous sur votre contenu pour vérifier ce nouveau champs Voilà, vous venez de créer un ACF et un nouveau champs dans le back-office pour personnaliser votre thème. Il ne reste plus qu’à afficher la valeur du champs côté front ! 45
  • 46. 2. ACF Afficher votre groupe de champs côté front : Pour afficher un contenu ACF c’est aussi simple que d’afficher le titre ou le contenu. Voici la syntaxe : <?php the_field('nom_de_votre_acf'); ?> Exemple : <?php the_title(); //affichage du titre the_content(); //affichage du contenu the_field('realisateur'); //affichage du ACF réalisateur ?> Attention : En fonction du type de votre champs, la syntaxe peut varier. Se référer à la documentation ! 46
  • 47. 3. Hooks Sans le savoir, vous avez déjà utiliser les hooks. En effet, en créant un CPT vous venez de réaliser un hook WordPress ! Un hook, est un mécanisme permettant aux développeurs d'effectuer une action précise à un moment particulier. La liste est longue : il y a plus de 1500 « hooks ». La liste de Adam R. Brown constitue un matériel de référence précieux. 47
  • 48. 3. Hooks Les « hooks » sont classés en deux catégories : les actions et les filtres. Les actions sont basées sur des événements. Par exemple, le « hook » publish_post permet d'ajouter des fonctionnalités qui seront exécutées à chaque fois qu'un article est publié. Les filtres, quant à eux, permettent de modifier le texte qui sera affiché à l'écran ou enregistré dans la BD. Par exemple, le « hook » the_title permet d'ajuster la façon dont le titre d'un article sera affiché à l'écran. 48
  • 49. 3. Hooks Pour utiliser un hook, il faut : 1. Ecrire la méthode qui devra être exécuté dans votre fichier functions.php 2. Enregistrer le hook (toujours dans functions.php) : a. add_action( 'nom_du_hook', 'nom_de_la_methode' ); b. add_filter( 'nom_du_hook', 'nom_de_la_methode' ); 49
  • 50. 3. Hooks Changer le nom du rôle utilisateur “Subscriber” en “Membre” : <?php function change_role_name() { global $wp_roles; if ( ! isset( $wp_roles ) ) $wp_roles = new WP_Roles(); $wp_roles->roles['subscriber']['name'] = 'Membre'; $wp_roles->role_names['subscriber'] = 'Membre'; } add_action('init', 'change_role_name'); ?> Cacher la barre WordPress côté front : <?php add_filter('show_admin_bar', '__return_false'); ?> 50
  • 51. 4. Codex WordPress WordPress à une documentation en ligne très bien faite et en français, le codex ! URL : https://codex.wordpress.org/ Vous trouverez les réponses à vos questions sur ce site comme par exemple : ▫ Comment afficher l’avatar d’un utilisateur, ▫ Comment créer un custom post type, ▫ Comment afficher les post d’une catégorie précise, ▫ Comment faire une pagination de post, ▫ … Toutes vos réponses sont ici, à vous de faire la bonne recherche Google ! 51
  • 52. Exercice : Allociné 2/3 1. Créer un Custom Post Type Cinéma et un CPT Série 2. Créer un ACF Cinéma (bande-annonce, date de sortie, réalisateur, acteurs, photos...) 3. Créer un ACF Série (créateur, acteurs, nationalité, statut, synopsis...) 4. Afficher les 5 derniers films et 5 dernières séries sur la page d’accueil 5. Afficher tous les films dans la page Cinéma 6. Afficher toutes les séries dans la page Série 7. Créer les single associés à Cinéma et Série pour avoir plus d’informations via les ACF 52
  • 54. 1. Installation côté serveur 2. Optimisation 3. Sécurité 4. SEO 5. Autres plugins 54
  • 55. 1. Installation côté serveur 1. Transférer tous les fichiers de votre site dans le répertoire de votre serveur (via Filezilla par exemple) 2. Modifier le fichier wp-config.php pour y mettre les accès à la BDD 3. Aller sur votre phpMyAdmin en local pour sélectionner et exporter la BDD de votre site WordPress 4. Aller sur phpMyAdmin de votre hébergeur et importez-y le fichier précédemment téléchargé 5. Dans cette BDD a. Sélectionner la TABLE options b. Modifier les valeurs de la ligne 1 et 2 pour y mettre l’adresse URL de votre site à la place de l’URL de votre serveur local 55
  • 56. 56 W3 Total Cache Mise en cache des fichiers source de votre site, minifications des sources, CDN https://fr.wordpress.org/plugins/w3-total-cache/
  • 57. 57 WP Smush Réduction du poids des images uploads depuis le back-office https://fr.wordpress.org/plugins/wp-smushit/
  • 58. 58 WP Admin UI Customize Ce plugin permet de customiser le back-office pour les différentes rôles utilisateurs. Par exemple, si vous ne voulez pas que votre client accède à certains menu du back-office. https://fr.wordpress.org/plugins/wp-admin-ui-customize/
  • 59. 59 SecuPress Mise en place simple de solutions pour sécuriser au mieux votre site contre des attaques. Il inclut également un système de sauvegarde automatique de votre BDD et d’autres fonctionnalités très utiles. https://fr.wordpress.org/plugins/secupress/
  • 60. 60 Yoast SEO Ce plugin permet d’optimiser votre référencement en suivant les best practices du référencement naturel https://fr.wordpress.org/plugins/wordpress-seo/
  • 61. 61 Disqus Système de commentaire amélioré https://fr.wordpress.org/plugins/disqus-comment-system/
  • 62. 62 WP Optimize Ce plugin optimise votre base de données qui a tendance à grossir trop vite. https://fr.wordpress.org/plugins/wp-optimize/
  • 63. 63 Polylang Pour faire de votre site WordPress, un site international https://fr.wordpress.org/plugins/polylang/
  • 64. Exercice : Allociné 3/3 Installer les plugins et les configurer sauf si vous utilisez déjà des plugins équivalent. 64