Formation sur le CMS WordPress

1. WordPress
Version du 10 décembre 2017

2. “
https://fr.slideshare.net/ThomasBodin3/presentations
2

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

39. WordPress (3/4)
Création d’un thème
39

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

53. WordPress (4/4)
Mise en ligne
53

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

65. 65
Merci !
@ThomasBodinFr
hi@thomas-bodin.com