WORD PRESS 5 Guide Complet
WORD PRESS 5 Guide Complet
WORD PRESS 5 Guide Complet
CAP FORMATION
Module 5 - WordPress
EURL DRONADAIR
SIRET : 85032727100019
Module 6
WordPress 5
Content Management System
1/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Plan du cours
WORDPRESS ADMINISTRATION............................................................3
Environnement requis.........................................................................................5
Thèmes................................................................................................................13
Extensions (plugins)...........................................................................................14
Cas pratiques......................................................................................................15
WORPRESS DEVELOPPEMENT.............................................................17
Menus du site.....................................................................................................26
La boucle (loop)..................................................................................................28
Templates...........................................................................................................29
Personnalisations avancées.............................................................................36
2/43 http://31-place-web.net/WordPress
Module 5 - WordPress
WORDPRESS ADMINISTRATION
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..
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.
3/43 http://31-place-web.net/WordPress
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.
4/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Environnement requis
Environnent serveur
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 HTML5/CSS3]
É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).
Pour héberger des sites dynamiques, la plupart des hébergeurs (OVH, o2switch, alwyaysdata…) ont un
environnement LAMP :
5/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Serveur local
Nécessaire pour développer avec WordPress car nous aurons ici besoin de créer/modifier des fichiers
PHP, il est plus pratique qu’ils se trouvent sur notre ordinateur personnel. Les solutions ci-dessous
s’installent comme un logiciel pour créer un environnement de développement dans lequel nous
installeront un nouveau site.
Un serveur 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.
Donc de pouvoir créer des bases de données MySQL (1site = 1base) et de travailler en environnement
PHP.
+ Xampp
https://www.apachefriends.org/fr/index.html
Solution privilégiée dans ce cours, très paramétrable, stable.
+ Wamp
http://www.wampserver.com/
Peut-être la solution la plus utilisée, un classique...
6/43 http://31-place-web.net/WordPress
Module 5 - WordPress
+ UwAmp
https://www.uwamp.com/fr/ (Télécharger la version zippée pour PC)
Version portable sans installation, peut «tourner» sur clé USB. Si vous n’avez pas réussi la cofiguration
de xampp, testez UwAmp, s’installe facilement quel que soit l’environnement.
Pour Mas OS
+ Mamp pour Mac
https://www.mamp.info/
Dossier racine
Le dossier contenant votre site sera placé par défaut dans :
• Avec Xampp : C:\xampp\htdoc
• Avec wamp : C:\wamp\www.
• Avec UwAmp : C:\UwAmp\www
Vous pourrez ainsi placer plusieurs dossiers qui correspondront à plusieurs sites ayant chacun leur
base de donnée propre.
Apache – Admin vous renvoie vers l’adresse locale
crée par xampp :
http://localhost/
7/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Apache et MySQL doivent être démarrés. S’ils ne sont pas au vert vous ne pourrez pas continuer.
Dans ce cas, recherchez de l’aide dans les forums (port utilisé, mauvaise installation, conflit…)
Si cela bloque toujours, quitter et desinstaller xampp – Téléchargez UwAmp en version zippée et testez
le démarrage des serveurs, vous pourrez suivre la suite de cette formation en environnement UwAmp
(très proche de xampp).
8/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Le coeur WordPress 5
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. Il est distribué selon les termes de la GNU
GPL. Le logiciel est aussi à l'origine du service WordPress.com.
Source : http://fr.wikipedia.org/wiki/WordPress
Sites de références
• Site officiel : http://wordpress.org/
Version Française (téléchargement) : http://fr.wordpress.org/
9/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Le back-office en bref...
Accès
http://localhost/webmaster-blog/wp-admin/
Back-office du site
10/43 http://31-place-web.net/WordPress
Module 5 - WordPress
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 (
contact, présentation, mentions légales...), des "pages volantes" non classées.
• Les articles (posts) sont utilisés pour publier des informations qui peuvent être
groupés/organisés en catégories : articles de blog, des créations, des services, des concerts,
des paires de lunettes...
Documentation : https://codex.wordpress.org/fr:Pages
Widgets
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... Affichage des zones de widgets définies par le theme en colonne et/ou pied de page
Menus
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" = rôle (ecrire, publier...). Vous pourrez décider quel
nom ou pseudo sera visible à l'écran.
http://codex.wordpress.org/Rôles_et_Permissions#Super_pouvoirs_pour_le_propri.C3.A9taire_du_blog
11/43 http://31-place-web.net/WordPress
Module 5 - WordPress
2- Créez un nouvel article (associé à la catégorie "Blog") sur votre site "loremipsum-xx.alwaysdata.net"
et reproduisez la mise en page suivante : http://loremipsum-db.alwaysdata.net/testons-les-blocs
Contenu
Des blocs :-) titre, colonne, media, galerie, video, baniere... comme sur le modèle...
Pour la recherche de blocs, utilisez le raccourci /col (pour colonne), ces raccourcis sont indiqués dans la
page démo ci-dessus.
Thème
Si vous voulez le même rendu graphique, cherchez et installez le theme "Chaplin"
3 – Créez 4 pages (contenant un peu de "loremipsum") : "Accueil, "A propos", "Contact", "Mentions
légales" et supprimez la page de bienvenue.
12/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Thèmes
C'est la grande force de WordPress !
Une impressionnante galerie de themes qui vont permettre de changer l'habillage du site :
https://fr.wordpress.org/themes/browse/new/
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. Recherchez le thème sur https://fr.wordpress.org/themes/ et rendez-vous
plutôt sur le site de l'éditeur qui affichera certainement une démo du thème.
TP25_theme_chaplin.pdf
13/43 http://31-place-web.net/WordPress
Module 5 - WordPress
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 (en chargeant des fichiers javascript notamment) 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, mise à jour
recement (moins d'un an), avec beaucoup d'utilisateurs (+ 5000).
TP26_extensions_wordpress.pdf
14/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Cas pratiques
TP27_installation_en_local.pdf
TP28_theme_enfant.pdf
TP29_theme_accesspress.pdf
TP guidé :
- Duppliquer loremipsum-db.alwaysdata.net sur un serveur local
TP guidé :
- Mettre en ligne developpeur-db (réalisé au TP29)
Installez sur votre ordinateur en local (Xampp) un nouveau site WordPress, dossier racine :
webmasterblog-XX (remplacez XX par vos initiales).
Ce site présentera des articles et tutos (Blog), d'un collectif de webmasters en formation.
Exemple de sujets : Ux Design, Symfony, react.js, SEO, WordPress...
Il contiendra aussi une catégorie "créations" dans laquelle seront présentées les plus belles réalisations
de ces apprentis webmasters.
Démo : http://webmasterblog-db.alwaysdata.net/
15/43 http://31-place-web.net/WordPress
Module 5 - WordPress
A faire :
+ Créez 3 pages :
16/43 http://31-place-web.net/WordPress
Module 5 - WordPress
WORPRESS DEVELOPPEMENT
Dossiers racine :
• wp-admin : fichiers sources du back-office. Les fichiers ne seront pas modifiés ici, même pour
faire des modifications en back-office.
• 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 ici 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
17/43 http://31-place-web.net/WordPress
Module 5 - WordPress
ceux chargés par vous. Un seul des dossiers contenu dans thèmes est actif (celui sélectionné en
back-office). C'est ici qu'interviendra le dévelopeur front-end.
• upgrade : gestion des mises à jour
• upload : tous les fichiers chagés depuis le back-office sont placés (classés) dans ce dossier
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)
• style.css
Ce fichier contiendra le CSS de votre site. Il permet également de déclarer un thème un thème grace au
bloc de commentaire actifs à placer en début de fichier (à adapter pour chaque projet.
• index.php
Page d'accueil du site. Sera également affichée si aucun autre template n'est disponible pour
afficher une page demandée.
• functions.php
Active les fonctionnalités prévues par le thème : menu de navigation, miniatures, fonctions
personnalisées...
Tout theme donc être composé d'au moins ces 3 fichiers : index.php, style.css, functions.php.
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 :
18/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Si le fichier suivant n'existe pas : category.php, tag.php, author.php, la page renvoyée sera :
archive.php
• Accueil du site
Le template appelé dépend de vos configurations en back-office :
TP30_theme_wordpress_structure.pdf
19/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Présentation
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) : http://codex.wordpress.org/fr:Accueil
Exemple de fonctions d'affichage : bloginfo(); (ici pour l'affichage du titre et du slogan du site) :
Note : Si vous utilisez l’éditeur VS Code, ajoutez le plugin WordPress Snippets qui vous fera des
propositions de fonctions lorsque vous codez
20/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Inclusions
Dans un soucis de simplification et de maintenabilité, il va être possible d'inclure des parties de code
qui sont les mêmes dans tous le templates.
• Entete > header.php
• Colonne (widgets) > sidebar.php
• Pied de page > footer.php
Ainsi par exemple, une modification de l'inclusion header.php se fera dans les pages : single.php,
tag.php, page.php, index.php...
Dans ces pages, l'inclusion des fichiers grâce aux fonctions suivantes :
• <?php get_header(); ?>
• <?php get_sidebar(); ?>
• <?php get_footer(); ?>
21/43 http://31-place-web.net/WordPress
Module 5 - WordPress
header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
<!--/1/ wp_head() - !important! - permet de charger tous les CSS/JS du thème et des
plugins -->
</head>
22/43 http://31-place-web.net/WordPress
Module 5 - WordPress
<h1> <h1>
<a href="<?php bloginfo('url'); ?>"> <a href="http://localhost/webmaster-blog">
<?php bloginfo('name'); ?> Le blog du Webmaster
</a> </a>
</h1> </h1>
<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"> (généré automatiquement)
- Pas de title ! Des fonctions particulières à votre thème se trouvent dans le fichier functions.php, comme par
exemple de générer dynamiquement le <title> (c'est le cas dans webmasterblog).
- Font-awesome peut être lié via un plugin : https://wordpress.org/plugins/font-awesome/ (ne chargez pas la
compatibilité v4 pour des questions de performances). Librairie utilisée dans le thème webmasterblog
23/43 http://31-place-web.net/WordPress
Module 5 - WordPress
footer.php
<footer class="conteneur">
<div id="pied" class="flex">
<small><a href="#" target="_blank">31placeweb.net</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-->
</html>
24/43 http://31-place-web.net/WordPress
Module 5 - WordPress
sidebar.php (widgets)
Vous pouvez inclure les widgets Wordpress à l'endroit que vous voulez dans votre template. Le plus
souvant dans l'inclusion sidebar.php. La zone de widget a été travaillée au préalable dans : Apparence
> Widgets, nous pouvons l'inclure au template grâce à la fonction :
L'identifiant 'colonne'est défini dans functions.php, vous pouvez modifier les paramètres de la
fonction : webmasterblog_widgets_init().
TP31_theme_wordpress_inclusions.pdf
25/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Menus du site
Vous pouvez déclarer plusieurs menus dans functions.php 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 header.php 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') ); ?>
2- Créez ce menu en back-office (vous pouvez mettre des icônes font-awesome à la place des textes).
26/43 http://31-place-web.net/WordPress
Module 5 - WordPress
27/43 http://31-place-web.net/WordPress
Module 5 - WordPress
La boucle (loop)
Une boucle va permettre d'afficher tous les contenus du site (titres, images, catégories, blocs...)
http://codex.wordpress.org/fr:La_Boucle
Structure simple
<?php while (have_posts()) : the_post(); ?>
<!-- Pour CHAQUE article, j'affiche ça (titre, texte, auteur...) = BOUCLE -->
<?php endwhile; ?>
La boucle sera aussi bien utilisée pour afficher le contenu d'un article isolé (dans single.php) que pour
afficher la liste des derniers articles en page d'accueil (dans index.php). Elle prend en compte son
environnement (page.php, archives.php) 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... :
https://codex.wordpress.org/fr:Marqueurs_de_Modele
Nous allons voir ci-dessous l'utilisation de la boucle dans les principaux templates du thème.
28/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Templates
page.php
Ce template servira à afficher les pages du site (A propos, contact, mentions légales...).
Il n'est peut-être pas nécéssaire d'afficher l'auteur de la page, la date de publication, les commentaires
etc... sur ce type de publication
Dans le modele ci-dessous la page s'affiche par défaut sans colonne (pas d'inclusion de sidebar.php)
page.php
<div class="inter">
<?php the_content(); ?>
</div>
Dans ce cas, créer un nouveau fichier PHP template-page-colonne.php par exemple. La déclaration
de ce nouveau fichier se fait grâce au commentaire PHP Template Name en début de code
29/43 http://31-place-web.net/WordPress
Module 5 - WordPress
template-page-colonne.php
<?php
/*
Template Name: Page avec colonne (widgets)
*/
get_header(); ?>
<div class="inter">
<?php the_content(); ?>
</div>
</main>
single.php
Ce fichier va permettre de gérer l'affichage d'un article (post). Ressemble beaucoup au fichier page
mais d'autres champs possibles (catégorie, mots clés) :
http://codex.wordpress.org/Template_Tags
30/43 http://31-place-web.net/WordPress
Module 5 - WordPress
- Trouvez les templates tags à ajouter pour obtenir quelque chose ressemblant à l'image ci-dessous.
single.php
Infos :
Marqueurs : catégorie – titre de l'article - auteur (lien facultatif) – contenu - image en avant (affichage
facultatif) - étiquettes - article suivant/précedent – commentaires.
31/43 http://31-place-web.net/WordPress
Module 5 - WordPress
index.php
Page d'accueil du site.
index.php
<?php get_header(); ?>
<section id="page">
<!-- DEBUT CONDITION & BOUCLE-->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="index">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('large'); ?>
</a>
<div class="inter">
<h2>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<p class="infos">
<span><?php the_time( 'j F Y' ); ?></span>/
<span><?php the_author(); ?></span>/
<span><?php the_category(', '); ?></span>
</p>
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile; else: ?>
<!-- FIN BOUCLE-->
<p>
<?php _e("Il n'y a pas de publication ce jour."); ?>
</p>
<?php endif; ?>
<!-- FIN CONDITION -->
</section>
Infos
Il est possible de paramétrer le nombre de mots à afficher dans le résumé <?php the_excerpt(); ?>
: https://developer.wordpress.org/reference/functions/the_excerpt/ (voir en bas de page)
32/43 http://31-place-web.net/WordPress
Module 5 - WordPress
archive.php
Ce fichier affiche une liste d'articles liés à : une catégorie- category.php, un mot clé- tag.php, un
auteur- author.php, une date– date.php si ces fichiers ne sont pas présents dans le thème.
Ex : tous les articles de la catégories blog, tous les articles ayant le mot clé wordpress…
- Essayez de reproduire le modèle ci-dessous (si vous n'y arrivez pas pas vous pourrez toujours
reprendre index.php :-)
archive.php
Infos :
- Pour avoir des tailles d'images identiques (recoupées au format 16/9 par exemple), intéressez vous à
la fonction : add_image_size(); Une fois ce nouveau format défini dans functions.php et appelé dans
votre template, il faudra regénérer les images pour que cette nouvelle taille soit prise en compte. Un
plugin fait ça très bien : Regenerate Thumbnails (voir dans "outils" une fois installé)
- Pour voir si le système de pagination fonctionne (placé hors boucle pour éviter sa répétition), affectez
plus de 3 articles à la catégorie et limitez le nombre d'articles affichés dans "Réglages" > "lecture" du
back-office à 3 articles.
33/43 http://31-place-web.net/WordPress
Module 5 - WordPress
1- changez l'icone située à gauche du titre principal en fonction du type d'archive (cf "info") :
- Catégorie
- Mot clé
- Auteur
3 – Ces 2 formats de liste d'articles peuvent être insérés via 2 inclusions (dans un dossier "parts" >
liste-articles-blog.php & "parts" > liste-articles-creation.php par exemple) pour éventuellement être
appelés dans d'autres templates (accueil...).
Fonction utilisée pour l'inclusion : get_template_part();
Ne prenez pas la boucle while dans votre inclusion (vous permettra de l'utiliser quelque soit
l'environnement)
4- Trouvez sur internet le code permettant de générer dynamiquement l'attribut alt des balises img (il
reprendra le titre du site).
Info :
- Pour traiter les points 1 et 2 ci-dessus, il vous faudra faire des conditions (if / else) dans lesquelles
vous pourrez utiliser les marqueurs conditionnels prévus par WordPress :
https://developer.wordpress.org/themes/references/list-of-conditional-tags/
34/43 http://31-place-web.net/WordPress
Module 5 - WordPress
404.php
Page d'erreur, page introuvable.
(Pour l'afficher, tapez une url qui n'existe pas : /?cat=56548 par exemple)
Essayez de faire en sorte que cette page donne envie de rester sur le site (image rigolotte, animation,
question...) et qu'elle ne soit pas une "impasse" : menu visible, lien évident, recherche possible...
<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(); ?>
search.php
Page d'affichage des résultats d'une recherche dans le site.
(Pour afficher un moteur de recherche, voir le widget correpondant)
Si aucun résultat n'est trouvé, une phrase type "Désolé, il n'y a pas de résultat pour cette recherche,
mais vous pouvez en essayer une autre" et proposant un formulaire de recherche, pourra être affichée.
Info :
Récupérer le terme recherché ("lorem" ici) gràce à :
get_search_query();
35/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Personnalisations avancées
WP_Query
Afin de gérer au mieux l'affichage sur des sites complexes, il faut parfois faire des requetes élaborées =
modifier le fonctionnement "classique" de la Boucle en y passant des parametres sous forme de
tableau. Par exemple : afficher tous les articles ayant le mot clé "développement", classés par date
inverse...
Si une autre boucle doit être placée aprés celle-ci,ajouter (après <?php endwhile; ?>) :
Autre exemple :
$args= array(
'showposts' => 5, // nombre d'article
'cat' => 3, // ID de la catégorie
'orderby' => 'date', // ordre par date
'order' => 'desc', // ordre décendant
'tag' => 'voiture' // mot clé (identifiant sans accent et majuscule)
);
?>
$the_query = new WP_Query($args);
36/43 http://31-place-web.net/WordPress
Module 5 - WordPress
37/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Infos :
- La 1ere section est affichée grâce à une boucle while "simple" (titre et contenu de la page)
- La 2ieme et 3ième section (blog/créations) devra utiliser une WP_query
- Utilisez les inclusions "liste-articles-blog.php" et "liste-articles-creation.php"
Le "petit +" :
Infos :
- Vous pouvez mettre en place le système "slick carousel" : https://kenwheeler.github.io/slick/
- Pour que le slide fonctionne, il faut au moins 4 articles affichés dans la section.
- Les espacements entre blocs en CSS n'est pas facile à gérer dans slick (utilisation des flottants par
défaut). Il vous faudra utiliser des margin à compenser sur le conteneur pour garder l'alignement
global.
.slide {
margin: 0 -16px;
}
.slide .bloc {
margin: 0 16px;
}
38/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Dans functions.php
/* CUSTOM POST TYPE : WEBMASTER */
function webmasterblog_register_post_types() {
$labels = array( // Informations visibles dans le back office
'name' => 'Webmaster',
'all_items' => 'Tous les webmasters'
);
$args = array(
'labels' => $labels,
'public' => true, // pourra être affiché
'show_in_rest' => true,
'has_archive' => true, // Fonctionne comme un article, peut être groupé
'supports' => array( 'title', 'editor','thumbnail', 'excerpt' ), // Champs
'menu_position' => 5,
'menu_icon' => 'dashicons-welcome-learn-more' // voir la doc dashicons
);
register_post_type( 'webmaster', $args );
}
add_action( 'init', 'webmasterblog_register_post_types' );
Documentation : https://codex.wordpress.org/Function_Reference/register_post_type
Plugin qui permet de générer facilement le code ci-dessus :
https://fr.wordpress.org/plugins/custom-post-type-ui/
Masquer certains éléments du menu (page, articles...) : https://wpchannel.com/wordpress/tutoriels-
wordpress/masquer-menus-administration-back-office-wordpress/
39/43 http://31-place-web.net/WordPress
Module 5 - WordPress
- La page d'archive est accessible à l'adresse : mon-site.fr/webmaster (les permaliens doivent être
réglés sur titre de la publication).
40/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Custom fields
Champs personnalisés : gérer l'affichage d'informations supplémentaires dans des zones
prédéterminées.
<!-- Appel de champ dont le nom (renseigné en BO) est session -->
<p>
<strong>Session :</strong>
<?php echo get_post_meta($post->ID, "session", true); ?>
</p>
Avec un plugin
Pour gérer plus facilement la création de différents types de champs personnalisés :
https://www.advancedcustomfields.com/
41/43 http://31-place-web.net/WordPress
Module 5 - WordPress
- Posez une condition pour chaque champ afin que rien ne s'affiche si le champ n'est pas renseigné
(<li>Intitulé : </li>).
42/43 http://31-place-web.net/WordPress
Module 5 - WordPress
Travailler le CSS
Afin d'assurer un affichage correct du système d'édition de gutemberg, il faudra prévoir le CSS
correspondant aux différents type de blocs.
Vous pouvez créer un nouvel article, "Article démo" par exemple contenant les blocs les plus utilisés.
• Pour gagner du temps sur la création de blocs, passez en mode "éditeur de code"
• Inspectez pour voir les classes générées par WordPress et travaillez le CSS.
Par exemple, voici ce qui est fait dans le thème Chaplin pour les mêmes blocs :
http://loremipsum-db.alwaysdata.net/raccourcis-des-blocs-wordpress/
Au final
Il ne vous "reste plus qu'à" mettre ce site en ligne en le duplicant (voir :
https://fr.wordpress.org/plugins/duplicator/ ), installer les plugins essentiels (voir
tp26_extensions_wordpress.pdf), insérer du contenu et travailler le référencement...
43/43 http://31-place-web.net/WordPress