Module 5 - WordPress

Module 5

WordPress 5
Content Management System

1/33 [Link]
 Module 5 - WordPress

Table des matières

WORDPRESS............................................................................................4

Les gestionnaires de contenu.............................................................................4

C.M.S........................................................................................................................................................ 4

Les solutions issues du libre.................................................................................................................. 5

Sites vitrines et blogs............................................................................................................................ 5
Sites de vente en ligne.......................................................................................................................... 6

Environnement serveur......................................................................................6
PHP5/MySQL........................................................................................................................................... 6
Site statique........................................................................................................................................... 6
Site dynamique..................................................................................................................................... 6
Technologies......................................................................................................................................... 6

En local sous WAMP............................................................................................................................... 7

Présentation du logiciel........................................................................................................................ 7
Utilisation............................................................................................................................................... 8

WordPress.............................................................................................................9
Wiki........................................................................................................................................................... 9

Sites de références................................................................................................................................. 9

Back-office............................................................................................................................................. 10

Thèmes.................................................................................................................................................. 13

Extensions (plugins).............................................................................................................................. 13

Optimisation.......................................................................................................................................... 14

Création de thème.............................................................................................15
Organisation des fichiers sources....................................................................................................... 15

Principaux fichiers du thème............................................................................................................... 16

Les fonctions PHP dans WordPress.................................................................................................... 17

Les inclusions........................................................................................................................................ 18
[Link].......................................................................................................................................... 20
[Link]............................................................................................................................................ 22
[Link] (widgets)......................................................................................................................... 23

Les menus du site................................................................................................................................. 23

La boucle (The loop)............................................................................................................................. 24

[Link].............................................................................................................................................. 25

2/33 [Link]
 Module 5 - WordPress

[Link]................................................................................................................................................ 26

[Link]............................................................................................................................................... 28

[Link].......................................................................................................................................... 29

[Link].................................................................................................................................................. 29

[Link]............................................................................................................................................. 30

WP_Query.............................................................................................................................................. 31

Meta Boxes............................................................................................................................................ 32

Custom Post Types............................................................................................................................... 33

3/33 [Link]
 Module 5 - WordPress

WORDPRESS

Les gestionnaires de contenu

C.M.S
Content Management System (système de gestion de contenu).

Outil permettant d'administrer simplement un site Web, à la façon d'un blog grâce à une interface
d'administration du site (=back-office).
Également, plate-forme de développement contenant et organisant les fichiers sources du site : .php,
.html, .css…

Chaque C.M.S (Drupal, SPIP, Prestashop, Joomla) à sa propre interface d'administration

Back-office WordPress 5

Si vous avez de solides connaissances en PHP, MySQL, HTML, CSS, JavaScript, vous pourrez développer
votre propre solution de gestion de contenu. C'est ce que font certaines agences Web.

4/33 [Link]
 Module 5 - WordPress

Cependant, de plus en plus d'agences et d'indépendants utilisent des logiciels issus du libre. Le code
source étant ouvert, ce sont des milliers de développeurs qui les font évoluer en créant des plugins
(fonctionnalités) et thèmes prêt à l'emploi.

Les solutions issues du libre

Les plus utilisés en France 2017

Sites vitrines et blogs

 Wordpress

 Joomla

 Drupal

Part d'utilisation des C.M.S en France 2016

Source de l'image : [Link]

5/33 [Link]
 Module 5 - WordPress

Sites de vente en ligne

 Prestashop

 Magento

Environnement serveur

PHP5/MySQL

Site statique
Au début du Web, les sites étaient construits avec des pages dites "statiques".
C'est à dire que pour modifier votre site (textes, images, liens) vous devez modifier directement le code
HTML/CSS de la page. [voir les modules HTML/CSS]
Également, pour créer une page, il faut recréer un fichier HTML, ce qui rend l'administration d'un tel
site fastidieuse voire impossible pour les personnes n'ayant pas de compétences en HTML/CSS/
JavaScript.

Site dynamique
Il est aujourd'hui possible, grâce à une interface d'administration (back-office) de faire toutes les
modifications sur le contenu : textes, images, messages de forum. Tout ceci étant accessible à une
personne n'ayant aucune connaissance en HTML/CSS.
De nouvelles fonctionnalités sont alors possibles : forum, espace membre, formulaires etc... grâce aux
fichiers PHP inclus dans le gestionnaire de contenu (C.M.S).

Technologies
Pour réaliser un tel site, il faudra avoir recours à deux nouveaux langages : PHP (Hypertext Preprocessor)
et MySQL (Structured Query Language).

Exemple de script PHP

<?php
$id_agent=$_POST['id_agent'];
// récupération d'un identifiant envoyé par formulaire
?>

6/33 [Link]
 Module 5 - WordPress

Exemple de requête SQL

DELETE FROM db_competence_agent WHERE id_agent = $id_agent;
// Supprimer une ligne en fonction de l'identifiant

Pour héberger des sites dynamiques, la plupart des hébergeurs (OVH, 1and1, nFrance …) ont un
environnement LAMP :

Linux : système d'exploitation

Apache : serveur Web
MySQL : serveur de base de données
PHP : langage de script

Le PHP s’insère dans le HTML, soit directement

<strong><?php echo($donnees['titre']); ?></strong> - <em> le <?php
echo($donnees['date_creation_fr']); ?></em>

Soit par inclusion de script externe

<?php
include '[Link]';
?>

En local sous WAMP

Présentation du logiciel
+ WampServer est un logiciel gratuit à installer sur votre ordinateur personnel et qui va vous permettre
de travailler en local dans les mêmes conditions que si votre site était hébergé sur un serveur distant.
Le dossier contenant votre site sera placé dans C:\wamp\www. Vous pourrez ainsi placer plusieurs
dossiers qui correspondront à plusieurs sites ayant chacun leur base de donnée propre.
[Link]

+ UwAmp Il est aussi possible d'utiliser une version portable (sans installation) de Wamp qui peut donc
«tourner» sur clé USB. C'est la solution que nous privilégierons :
[Link] (Télécharger la version zippée pour PC)

+ USB Webserver. Si vous n'arrivez pas à faire tourner un serveur sur votre machine (problemes de
configurations de votre ordinateur). Vous pouvez utiliser cette solution robuste :
[Link]

7/33 [Link]
 Module 5 - WordPress

Utilisation
Pour démarrer UwAmp, double-clic sur le fichier « [Link] » vous verrez apparaître dans la barre
des taches une icône verte et bleue.
Clic gauche dessus, le menu apparaît :
 Navigateur www va vous permettre d’accéder à votre site et déclenchera son ouverture dans
votre navigateur par défaut. L'URL de votre site en local aura la forme :
[Link]

 PHPMyAdmin vous permettra d'accéder à l'interface de gestion de vos bases de données (à

manier avec précaution !)

 Dossier www est un raccourci qui vous permettant d’accéder directement au dossier racine de
votre site : tous les fichiers sources.

 Apache/PHP/MySQL vous permettent d'avoir des renseignement sur votre configuration en

local, par exemple PHP 5.3.5, voire de la modifier (fichier [Link]) ...

8/33 [Link]
 Module 5 - WordPress

WordPress

Wiki
WordPress est un système de gestion de contenu libre écrit en PHP, reposant sur une base de données
MySQL, et distribué par Automattic. WordPress est surtout utilisé comme moteur de blog, mais ses
fonctionnalités lui permettent également de gérer n'importe quel site web. Il est distribué selon les
termes de la GNU GPL. Le logiciel est aussi à l'origine du service [Link].

Source : [Link]

Sites de références
• Site officiel : [Link]
Version Française (téléchargement) : [Link]

• Documentation technique : [Link]

Version Française : [Link]

• Forum d'entraide (fr) : [Link]

• Blog Wordpress (en ligne) : [Link]

Version Française : [Link]

TP25_installation_wordpress_local

9/33 [Link]
 Module 5 - WordPress

Back-office
Accès
[Link]

Back-office du site

Le menu principal (colonne gauche) est partagé en trois section :

• le tableau de bord : page d'accueil du back-office
• les contenus [Articles - Médias - Pages - Commentaires]
• les paramètres du site [Apparence - Extensions - Utilisateurs - Outils – Réglages]

Contenus "pages" ou "articles" ?

Pages et articles sont sensiblement la même chose : elles contiennent un titre, du contenu
• Les pages seront utilisées pour publier du contenu dont la date de publication importe peu.

10/33 [Link]
 Module 5 - WordPress

Ex : contact, présentation, mentions légales...

Si vous installez un thème, regardez dans la page s'il propose des "modèles de page"

• Les articles (posts) sont utilisés pour publier des informations comme des billets dans un
blog (la date compte). Ex : Actualités...

Documentation : [Link]

Widget
Apparence > Widgets. Spécificité de Worpress, il permettra d'installer des applications en un clic, c'est
une sorte "mini-plugin" offrant une fonctionnalités : calendrier, derniers posts, formulaire de
recherche...

Gestion des menus Front-office

Apparence > Menus. Vous pouvez construire très facilement le/les menu du site Web.
Un menu peut être constitué de pages, articles, catégories, ou liens libres.

Utilisateurs
Il peut y avoir plusieurs rédacteurs pour un même site. Lors de l'ajout d'un nouvel utilisateur, il est
possible de déterminer quels seront ses "pouvoirs" (ecrire, publier...).
[Link]

TP Guidé
Prise en main du back-office (à partir de l'installation réalisée au TP25)

+ Supprimez l'article « bonjour tout le monde » et la « page d'exemple »

+ Créez 2 catégories : Blog / Créations

+ Allez dans réglages >

• Ecriture > Catégorie par défaut des articles : Blog
• Discussion > Avant la publication d'un commentaire > cocher « Le commentaire doit
etre approuvé manuellement »
• Permaliens > cocher « Titre de la publication »

+ Créez 4 articles :
• Titre : Les animations en CSS3 – Catégorie : Blog – Etiquettes : CSS3, HTML5
• Titre : Jouons avec jQuery – Catégorie : Blog – Etiquettes : HTML5, jQuery
• Titre : Intégration HTML5/CSS3 – Catégorie : Créations – Etiquettes : CSS3, HTML5
• Titre : Webdesign – Catégorie : Créations – Etiquettes : CSS3, Photoshop

11/33 [Link]
 Module 5 - WordPress

> Insérez dans ces articles du faux texte (lorem ipsum).

> Pour chaque article, choisissez une image mise en avant au format paysage. Cette image
doit être optimisée pour le web (voir images > divers).

+ Créez 3 pages : A propos / Contact / Mentions légales

> Insérez dans ces pages du faux texte (lorem ipsum).

+ Travaillez la mise en page (testez les blocs de l'éditeur) de la page « A propos ».

12/33 [Link]
 Module 5 - WordPress

Thèmes
C'est la grande force de WordPress !

Une impressionnante galerie de themes gratuits (ou presque...) qui vont permettre de changer
l'habillage du site : [Link]

Les thèmes offrent plus ou moins d'options de configurations, par exemple :

• Virtue - Theme très complet avec beaucoup d'options possibles

• Twenty Sixteen, thème plus simple à paraméter.

Certains thèmes intègrent des plugins/widgets. Donc il vaut mieux d'abord se fixer sur un thème et
dans un second temps travailler : menus, widgets, extensions.

Pour voir à quoi le thème ressemble avant de l'installer, oubliez « l'aperçu » (bouton haut/droite) car le
rendu n'est pas très fidèle. Lorsque l'option est disponible, rendez-vous plutôt sur le site de l'éditeur :

TP26_paramétrage_thème

Extensions (plugins)
Les plugins permettent d'étendre les fonctionnalités de wordpress. Ils peuvent être gratuits ou payants,
plus ou moins simples à configurer.

ATTENTION : Sur un site en production, n’installer que les plugins absolument nécessaires (en
fonction de vos besoins). S’il existe une solution sans passer par un plugin, privilégiez-la.

Les plugins ralentissent le site et augmentent les probabilités d’incompatibilités (entre plugins et au
changement de version de WordPress). De plus ils « alourdissent » le menu du back-office.

Vérifiez toujours que l'extension est compatible avec votre version de WordPress.

• Tous les plugins (authentifiés par Wordpress) : [Link]

• Plugins séléctionnés (fr) : [Link]
• Top plugins (fr) : [Link]

13/33 [Link]
 Module 5 - WordPress

TP27_extensions_wordpress

Optimisation
Voir en ligne : [Link]

• Dans [Link] (désactive les révisions d'articles)

define( 'WP_POST_REVISIONS', false );

• Dans [Link] - a la fin du fichier (augmente la taille mémoire)

define('WP_MEMORY_LIMIT', '96M');

TP28_woocommerce

14/33 [Link]
 Module 5 - WordPress

Création de thème

Organisation des fichiers sources

Dans les fichiers présents directement à la racine du site, à noter :
• [Link] : 1er fichier ciblé par le navigateur, sa seule fonction est de charger le thème
choisi en back-office.
• wp-config : fichier créé lors de l'installation de Wordpress, sont enregistrées les
informations de connexion à la base de donnée.

Dossiers racine :
• wp-admin : fichiers sources du back-office. Les modifications sur ces fichiers ne peuvent être
effectuées que par des développeurs confirmés.
• wp-includes : ensemble des fonctions php pour la partie front-end. Constitue le noyau (Core)
du logiciel. Domaine également réservé aux développeurs back-end car une mauvaise
manipulation dans ces fichiers peut entrainer des bugs.
• wp-content : ce dossier contient tous les fichiers HTML/CSS gérant l'affichage des pages du
site. C'est donc quasi-exclusivement dans les fichiers sources de ce dossier qu'interviendra
le dévelopeur front-end

Contenu de wp-content :
• languages : gestion des traductions
• plugins : toutes les extensions chargées depuis le back-office (quel que soit le theme choisi)
viennent se placer dans ce dossier. Vous pouvez déposer directement un plugin dans ce
dossier et l'activer par la suite en back-office
• themes : affichage du site à l'écran. Contient les différents themes par défaut +
éventuellement ceux chargés par vous. Un seul des dossiers contenu dans thèmes est actif
(celui sélectionné en back-office).
• upgrade : gestion des mises à jour
• upload : tous les fichiers chagés depuis le back-office sont placés (classés) dans ce dossier

15/33 [Link]
 Module 5 - WordPress

Principaux fichiers du thème

Les fichiers constitutifs d'un thème sont contenus dans wp-content > themes > [mon-theme]. Tout ce
qui va permettre l'affichage du site à l'écran (HTML/CSS)

• [Link]
Ce fichier contiendra le CSS de votre site.
Reprendre une feuille de style d'un autre theme et compléter les informations enregistrées en
commentaires en début de page. Elles seront affichées en back-office.
Vous pouvez également garder la partie "reset" de la feuille de style ainsi copiée.

TP29_modifications_css_wordpress

• [Link]
Page d'accueil du site. Sera également affiché si aucun autre template n'est disponible pour afficher
une page demandée.
Tout theme donc être composé d'au moins ces 2 fichiers : [Link] et [Link]. En fonction du type de
contenu à afficher, différents fichiers php pourront être appelés.

Voici les autres principaux fichiers qui peuvent être utilisés dans un theme :

• Page > [Link]

• Article (Post) > [Link]
• Categorie > [Link]
• Archive (classée par date) > [Link]
• Resultat de recherche > [Link]
• Mot clé > [Link]
• 404 (page introuvable) > [Link]
• Auteur > [Link]

Si l'un ou plusieurs fichiers suivants n'existent pas : [Link], [Link], [Link], [Link], la
page renvoyée sera : [Link]

16/33 [Link]
 Module 5 - WordPress

• [Link]
Active les fonctionnalités prévues par le thème : menu de navigation, miniatures, fonctions
personnalisées...

• [Link]
Affiche la vignette en back-office

TP30_theme_wordpress_structure

Les fonctions PHP dans WordPress

Pour rendre le site dynamique (administrable) il va falloir remplacer le texte et images "en dur" dans le
HTML par des fonctions PHP permettant de modifier ces éléments depuis le back-office WordPress.

Les fonctions PHP dans WordPress seront utilisées pour des tâches très variées : afficher un titre, une
liste d'articles, insérer un menu, des widgets, afficher le contenu des articles...

• Tout ce qui concerne le code propre à Wordpress se trouve dans le Codex (essentiellement en
Anglais) : [Link]

• Une refonte de la documentation est en cours : [Link]

• La liste des fonctions et leur utilisation (Anglais) :

[Link]

17/33 [Link]
 Module 5 - WordPress

Exemple de fonctions d'affichage : bloginfo(); (ici pour l'affichage du titre et du slogan du site) :

Back-office Code PHP

<?php bloginfo('name'); ?>

<?php bloginfo('description'); ?>

CODE PHP et HTML

<header id="entete">
<h1 class="site"><?php bloginfo('name'); ?></h1>
<p class="sous_titre"><?php bloginfo('description'); ?></p>
</header>

Les inclusions
Dans un soucis de simplification et de maintenabilité, il va être possible d'inclure des parties de code
qui sont les mêmes de pages en pages.

Généralement :
• Entete > [Link]
• Pied de page > [Link]
• Colonne latérale > [Link]

Ainsi par exemple, une modification dans l'inclusion [Link] se fera dans les pages : [Link],
[Link], [Link], [Link]...

18/33 [Link]
 Module 5 - WordPress

Dans ces pages, l'inclusion des fichiers grâce aux fonctions suivantes :
• <?php get_header(); ?> | <?php get_sidebar(); ?> | <?php get_footer(); ?>

[Link] après inclusions :

<?php get_header(); ?>

<!-- Début conteneur principal-->

<main class="principal conteneur flex">
<!-- Liste des articles-->
<section id="page">
<!-- Article 1-->
<article class="index">
<!-- Contenu de l'article-->
</article>
<!-- Fin article 1-->
</section>
<!-- Fin liste des articles -->

<?php get_sidebar(); ?>

</main>
<!-- Fin conteneur principal-->

<?php get_footer(); ?>

TP31_theme_wordpress_inclusions

19/33 [Link]
 Module 5 - WordPress

[Link]
<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="[Link]
family=Montserrat:400,500,700%7COpen+Sans" rel="stylesheet">
<link rel="stylesheet" href="[Link]
integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
crossorigin="anonymous">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
<!--/1/ wp_head() - !important! - appels javascript et css des plugins et charge les
principaux css du theme-->
</head>

<body id="top" <?php body_class(); ?>>

<!-- Début entete-->
<header class="fond">
<div class="conteneur">
<div id="entete">
<h1 class="logo">
<a href="<?phpbloginfo('url'); ?>">
<?php bloginfo('name'); ?>
</a>
</h1>
<p><?php bloginfo('description'); ?></p>
</div>
</div>
<!--Navigation à travailler (cf "les menus du site" ci-dessous)-->
<nav id="menu">
<ul>
<li><a class="actif" href="[Link]">Accueil</a></li>
<li><a href="[Link]">Portfolio</a></li>
<li><a href="[Link]">Labo</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
<nav id="menu-mobile">
<i class="fas fa-bars"></i>
<ul>
<li><a class="actif" href="[Link]">Accueil</a></li>
<li><a href="[Link]">Portfolio</a></li>
<li><a href="[Link]">Labo</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
<!--fin note - zone de navigation à travailler (statique)-->
</header>
<!-- Fin entete-->

20/33 [Link]
 Module 5 - WordPress

PHP Code HTML généré

<html <?php language_attributes(); ?>> <html lang="fr-FR">
<meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta charset="UTF-8" />
<title><?php wp_title( '|', true, 'right' ); ?></title> <title>Portfolio|Le blog du webmaster</title>
(A mettre si n'est pas géré dans [Link] - Si vous utilisez
[theme-base] fourni dans ce cours, vous n'avez pas à insérer cette
ligne)

<link rel="pingback" href="<?php Documentation :

bloginfo( 'pingback_url' ); ?>"> [Link]
ging#Pingbacks
<head> Très important
... Permet aux plugins d'insérer du code dans le
<?php wp_head(); ?> <head> (css, js). Lien vers le fichier "[Link]".
</head> A placer juste avant la fermeture du </head>
<h1><?php bloginfo('name'); ?></h1> <h1>Le blog du Webmaster</h1>
<h1> <h1>
<a href="<?php bloginfo('url'); ?>"> <a href="[Link]
<?php bloginfo('name'); ?> Le blog du Webmaster
</a> </a>
</h1> </h1>
<p><?php bloginfo('description'); ?></p> <p>Site de test Wordpress</p>
<body <?php body_class(); ?> > </body> Généré dans pour un article par exemple :
<body class="post-template-default single single-
post postid-186 single-format-standard"></body>
- Ne pas mettre les balises : <meta name="description"> - <meta name="author"> ... qui seront générées
par le plugin Yoast
- Ne pas mettre le lien vers le favicon <link rel="shortcut icon" >
- Des fonctions particulières à votre thème se trouvent dans le fichier [Link], comme par exemple de
générer dynamiquement le <title> (c'est le cas dans webmasterblog).

21/33 [Link]
 Module 5 - WordPress

[Link]
<!-- Début pied de page-->
<footer class="conteneur">
<div id="pied" class="flex">
<small><a href="#" target="_blank">[Link]</a></small>
<!--zone de navigation à travailler-->
<nav id="menu-pied">
<ul>
<li><a href="#">Crédits</a></li>
<li><a href="#">Mentions légales</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<ul>
<li><a href="#"><i class="fab fa-facebook-square fa-lg"></i></a></li>
<li><a href="#"><i class="fab fa-twitter-square fa-lg"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin fa-lg"></i></a></li>
</ul>
<!--zone de navigation à travailler-->
</div>
<a href="#top" class="top js-scrollTo"><i class="fa-lg fas fa-chevron-up"></i></a>
</footer>
<!-- Fin pied de page-->

<?php wp_footer(); ?>

<!--/2/ wp_footer() - !important! - appels javascript des plugins-->
</body>

</html>

<?php wp_footer(); ?> Très important

</body> Permet aux plugins d'insérer du code avant la
fermeture de <body>

22/33 [Link]
 Module 5 - WordPress

[Link] (widgets)
Vous pouvez inclure les widgets Wordpress à l'endroit que vous voulez dans votre template. Le plus
souvant dans l'inclusion [Link]. La zone de widget a été travaillée au préalable dans : Apparence
> Widgets, nous pouvons l'inclure au template grâce à la fonction :

Inclusion dans la colonne droite

<!-- Début colonne-->
<aside id="colonne">
<?php dynamic_sidebar('colonne'); ?>
</aside>
<!-- Fin colonne-->

L'identifiant 'colonne'est défini dans [Link], vous pouvez modifier les paramètres de la
fonction : webmasterblog_widgets_init().

Nouvelle zone de Widgets

Vous pouvez bien entendu créer une nouvelle zone de widgets (en pied de page par exemple) :
dupliquez l'ensemble du bloc register_sidebar() dans et changez le paramètre : id=>'pied' (ainsi que
name et description associés qui seront visibles en back-office)

Appelez cette nouvelle zone de widgets dans votre [Link] avec :

<footer>
<?php dynamic_sidebar('pied'); ?>
</footer>

Les menus du site

Plusieurs menus

Vous pouvez déclarer plusieurs menus dans [Link] en modifiant les paramètres de la
fonction : register_nav_menus() (3 menus déclarés dans le theme webmasterblog : principal – mobile
– pied).

+ Vous pouvez appeler dans [Link] le menu principal paramétré depuis le back-office identifiant
donné dans register_nav_menus() : 'entete'
<?php wp_nav_menu( array( 'theme_location' =>
'principal','container'=>'nav', 'container_id'=>'menu') ); ?>

23/33 [Link]
 Module 5 - WordPress

+ En dessous de ce menu pour insérer une navigation mobile :

<!--Menu mobile-->
<?php wp_nav_menu( array( 'theme_location' =>
'mobile','container'=>'nav', 'container_id'=>'menu-mobile' ) ); ?>

+ De même, dans [Link], pour appeler le menu pied de page :

<!--Menu pied-->
<?php wp_nav_menu( array( 'theme_location' => 'pied','container'=>'nav',
'container_id'=>'menu-pied' ) ); ?>

La boucle (The loop)

Une boucle va permettre d'afficher les contenus des Articles et Pages :
[Link]

Structure simple
<?php while (have_posts()) : the_post(); ?>
<!-- Pour CHAQUE article, j'affiche ça (titre, texte, auteur...) = BOUCLE -->
<?php endwhile; ?>

Structure avec condition

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- SI il y a au moins 1 article, j'affiche ça (titre, texte, auteur...) -->
<?php endwhile; else : ?>
<!-- SINON j'affiche ça ("Désolé pas de contenu") -->
<?php endif; ?>

La boucle sera aussi bien utilisée pour afficher le contenu d'un article isolé (dans [Link]) que pour
afficher la liste des derniers articles en page d'accueil (dans [Link]). Elle prend en compte son
environnement ([Link], [Link]) et renvoie les contenus associés sans avoir à modifier la
boucle.

Tous les champs mobilisables à l'intérieur d'une boucle s'appellent des marqueurs de modèle
(template tags) : titre, texte, auteur, date de publication etc... :
[Link]

Nous allons voir ci-dessous l'utilisation de la boucle dans les principaux fichiers du thème :

24/33 [Link]
 Module 5 - WordPress

[Link]
Ce fichier va permettre de gérer l'affichage d'un article (post). Une actualité par exemple.
Les inclusions header, footer et éventuellement sidebar sont à placer dans ce fichier.

Le contenu de l'article sera affiché dans la boucle (<?php the_title() ?>...).

Liste des champs qui peuvent être affichés (titre de l'article, catégorie, auteur, date...) :
[Link]

[Link]

<?php get_header(); ?>

<main class="principal conteneur flex">
<article id="page">
<!-- DEBUT de la boucle -->
<?php while (have_posts()) : the_post(); ?>

<!-- Affiche l'image mise en avant de l'article-->

<?php the_post_thumbnail('medium_large') ?>

<div class="inter">
<h1>
<!-- Affiche le titre de l'article-->
<?php the_title() ?>
</h1>
<p class="infos">
<!-- Affiche la date, l'auteur et la/les catégories-->
<span><?php the_date(); ?></span> /
<span><?php the_author(); ?></span> /
<span><?php the_category(', '); ?></span>
</p>
<!-- Affiche le contenu de l'article-->
<?php the_content() ?>
<div class="etiquettes">
<p>
<!-- Affiche les mots clés de l'article-->
<?php the_tags('<strong>Mots clés :</strong> '); ?>
</p>
</div>
<!-- affiche les commentaires de l'article -->
<?php comments_template(); ?>
</div>
<!-- FIN de la boucle -->
<?php endwhile; ?>
</article>
<?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

25/33 [Link]
 Module 5 - WordPress

Les posts formats

Il est possible de choisir un affichage différencié en fonction du type d'article : galerie, citation, video...,
Voir à ce sujet : [Link]

[Link]
Ce template servira à afficher les pages du site (A propos, contact, mentions légales...).
L'environnement sera sensiblement le même que pour [Link]. sans l'affichage de la catégorie
(réservées aux articles). Il n'est peut-être pas nécéssaire d'afficher l'auteur de la page, la date de
publication, les commentaires etc...

Dans le modele ci-dessous la page s'affiche par défaut sans colonne (pas d'inclusion de [Link])

[Link]

<?php get_header(); ?>

<main class="principal conteneur">

<article id="pleine-page" >

<!-- DEBUT de la boucle -->
<?php while (have_posts()) : the_post(); ?>

<!-- Affiche l'image mise en avant de la page-->

<?php the_post_thumbnail('full') ?>

<div class="inter">
<h1>
<!-- Affiche le titre de la page-->
<?php the_title() ?>
</h1>

<!-- Affiche le contenu de la page-->

<?php the_content() ?>
</div>

<!-- FIN de la boucle -->

<?php endwhile; ?>
</article>

</main>

<?php get_footer(); ?>

26/33 [Link]
 Module 5 - WordPress

Différents gabarits de pages

Il est possible d'avoir un affichage différent pour certaines pages. Par

exemple, un modèle de page AVEC colonne.

Dans ce cas, créer un nouveau fichier PHP [Link] par

exemple, placé dans le répertoire page-templates. La déclaration de
ce nouveau fichier se fait grâce au commentaire PHP Template
Name en début de code

[Link]
<?php
/*
Template Name: Page avec colonne (widgets)
*/
?>
<?php get_header(); ?>

<main class="principal conteneur flex">

<article id="page" >
<!-- DEBUT de la boucle -->
<?php while (have_posts()) : the_post(); ?>

<!-- Affiche l'image mise en avant de la page-->

<?php the_post_thumbnail('medium_large') ?>

<div class="inter">
<h1>
<!-- Affiche le titre de la page-->
<?php the_title() ?>
</h1>

<!-- Affiche le contenu de la page-->

<?php the_content() ?>
</div>

<!-- FIN de la boucle -->

<?php endwhile; ?>
</article>

<?php get_sidebar(); ?>

</main>

<?php get_footer(); ?>

27/33 [Link]
 Module 5 - WordPress

[Link]
Page d'accueil du site.
• Paramétrer <?php the_excerpt(); ?> : Premières lignes de texte de l'article
[Link] – (parametrages à la fin de [Link])
• Paramétrer <?php the_post_thumbnail() ?> avec des tailles d'image personnalisées
"custom-size", voir la fonction add_image_size à la fin du fichier [Link]

[Link]
<?php get_header(); ?>
<!-- Début conteneur principal-->
<main class="principal conteneur flex">
<!-- Liste des articles-->
<section id="page">
<!-- DEBUT BOUCLE-->
<?php if ( have_posts() ) : while ( have_posts() ) :
the_post(); ?>

<article class="index">
<a href="<?php
the_permalink(); ?>">
<?php the_post_thumbnail('custom-size') ?>
</a>
<div class="presentation">
<h2>
<a href="<?php
the_permalink() ?>">
<?php the_title(); ?>
</a>
</h2>
<p class="infos">
<span><?phpecho get_the_date(); ?></span>/
<span><?php the_author(); ?></span>/
<span><?php the_category(', '); ?></span>
</p>
<?php the_excerpt(); ?>
</div>
</article>

<!-- FIN BOUCLE-->

<?php endwhile; else: ?>
<p>
<?php _e("Il n'y a pas de publication ce jour."); ?>
</p>
<?php endif; ?>
</section>
<!-- Fin liste des articles -->

<?php get_sidebar(); ?>

</main>
<!-- Fin conteneur principal-->

<?php get_footer(); ?>

28/33 [Link]
 Module 5 - WordPress

[Link]
Ce fichier affiche une liste d'articles liés à : une catégorie - [Link], un mot clé - [Link], un
auteur - [Link], une date – [Link] si ces fichiers ne sont pas présents dans le theme.

La boucle « reconnaissant » seule son environnement, elle s'adaptera Cela peut être un copié/collé du
fichier [Link] ci-dessus, ou réalisez un autre affichage HTML

[Link]
Page d'erreur, page introuvable
<?php get_header(); ?>

<main class="principal conteneur">

<article id="pleine-page">
<!-- DEBUT de la boucle -->

<div class="inter">
<h1>Erreur 404</h1>
<p>Nous sommes désolé mais la page recherchée n'existe plus ou a été
déplacée, revenez à <a href="<?php bloginfo('url'); ?>">l'accueil du site</a> ou
effectuez une recherche :</p> <?php get_search_form(); ?>

</div>
</article>

</main>

<?php get_footer(); ?>

29/33 [Link]
 Module 5 - WordPress

[Link]
Page daffichage des résultats d'une recherche dans le site (si moteur de recherche)
<?php get_header(); ?>
<main class="principal conteneur">
<article id="pleine-page">

<div class="inter">
<h1>
Résultats de la recherche :
</h1>
<ul>

<!-- DEBUT de la boucle -->

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<li><a href="<?php the_permalink();?>">

<?php the_title();?></a></li>
<!-- FIN de la boucle -->

<?php endwhile; else: ?>

</ul>
<p>
<?php _e("Aucun résultat pour cette recherche"); ?>
</p>
<?php endif; ?>
</div>

</article>
</main>
<?php get_footer(); ?>

Vous pouvez améliorer l'affichage des résultats (avec titre, résumé, image à la une...)

TP32_theme_wordpress_finalisation

30/33 [Link]
 Module 5 - WordPress

WP_Query
Afin de gérer au mieux l'affichage sur des sites complexes, il faut parfois faire des requetes élaborées.
Par exemple : Tous les articles de la "catégorie 2" - Tous les articles ayant le mot clé "développement",
classés par date inverse...

Afficher sur la page d'accueil le titre et texte de la page "A propos" (identifiant=4)
<?php
$the_query = new WP_Query(array('page_id' => 4));
while ($the_query->have_posts()) : $the_query->the_post();
?>
<h2><?php the_title(); ?></h2>
<?php the_content();?>
<?php endwhile; ?>

Si une autre boucle doit être placée aprés celle-ci,ajouter (après <?php endwhile; ?>) :
<?php wp_reset_postdata(); ?>

Autres exemples de requêtes (5 articles de la catégorie voiture par date ...)

[Link]
$args= array(
'showposts' => 5, // nombre d'article
'category_name' => 'voiture', // nom de la catégorie (identifiant
sans accent et majuscule)
'orderby' => 'date', // ordre par date
'order' => 'desc', // ordre décendant
'tag' => 'rouge' // mot clé (identifiant sans accent et majuscule)
);
?>

Liste des paramêtres possibles pour la fonction WP_Query :

[Link]

31/33 [Link]
 Module 5 - WordPress

Meta Boxes
Gérer l'affichage d'informations supplémentaires dans des zones prédéterminées.

Back-office

Dans [Link]
<p>
<strong>Session :</strong>
<?php echo get_post_meta($post->ID, "session", true); ?>
</p>

Aller Plus loin

Pour insérer d'autres types de champs : cases à cocher, zone de texte, upload de pdf...

Voir le tuto en ligne : [Link]

Avec un plugin

Pour gérer plus facilement la création et l'appel de nouveaux champs personnalisés :

[Link]

32/33 [Link]
 Module 5 - WordPress

Custom Post Types

Créer de nouveaux objets éditoriaux

Back-office

Dans [Link]
add_action( 'init', 'create_post_type' );
function create_post_type() {
register_post_type( 'stagiaire',
array(
'labels' => array(
'name' => __( 'Stagiaire' ),
'singular_name' => __( 'Stagiaires' )
),
'public' => true,
'has_archive' => true,
'menu_position' => 5,
'menu_icon' => 'dashicons-admin-users',
)
);
}

Documentation

[Link]

A contrario, pour supprimer certains éléments du menu (Widgets, outils...) :

[Link]

TP33_export_bdd_wordpress

33/33 [Link]