module 6 wordpress 531-place-web.net/img/pdf/mod6_wordpress.pdfmodule 5 - wordpress cependant, de...

Module 5 - WordPress

Module 6

WordPress 5Content Management System

1/43 http://31-place-web.net/WordPress

http://31-place-web.net/WordPress


Plan du cours

WORDPRESS ADMINISTRATION............................................................3

Qu’est-ce qu’un C.M.S ?........................................................................................3

Environnement requis.........................................................................................5

Le coeur WordPress 5..........................................................................................9

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

Extensions (plugins)...........................................................................................14

Cas pratiques......................................................................................................15

WORPRESS DEVELOPPEMENT.............................................................17

Arborescence des dossiers................................................................................17

Les fonctions PHP dans WordPress..................................................................20

Menus du site.....................................................................................................26

La boucle (loop)..................................................................................................28

Templates...........................................................................................................29

Personnalisations avancées.............................................................................36




WORDPRESS ADMINISTRATION

Qu’est-ce qu’un C.M.S ?

C.M.SContent 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.




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

C.M.S sites vitrines & blogs

Wordpress

Joomla

Drupal

SPIP

Source de l'image : http://trends.builtwith.com/cms/open-source/country/France

C.M.S site de vente en ligne

Prestashop

Magento

WooCommerce (extension WordPress)



https://woocommerce.com/#

http://www.magentocommerce.com/fr/

http://www.prestashop.com/fr/

https://www.spip.net/fr_rubrique91.html

http://drupalfr.org/

http://www.joomla.fr/

http://www.wordpress-fr.net/


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).

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

Exemple de requête SQLDELETE 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, o2switch, alwyaysdata…) ont un environnement LAMP :




Linux : système d'exploitationApache : serveur WebMySQL : serveur de base de donnéesPHP : 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 'header.php';?>

Serveur localNé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.

Pour Windows (toutes versions)

Choisissez un serveur ci-dessous pour l’installer sur votre ordinateur principal. Au moment de l’installation : désactivez votre antivirus (qui pourrait empêcher certains fichiers de s’installer) . Vérifiez par une recherche si vous n’avez pas déjà installé un Wamp une fois, sur un tuto openclassroom... ;-). Si c’est le cas et qu’il ne vous sert à rien, désinstallez-le (comme un logiciel classique) pour éviter les conflits. Installez Xampp.

+ Xampphttps://www.apachefriends.org/fr/index.htmlSolution 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...



http://www.wampserver.com/

https://www.apachefriends.org/fr/index.html


+ 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 et Linux

+ Xampphttps://www.apachefriends.org/fr/index.htmlSolution privilégiée dans ce cours, très paramétrable, stable.

Pour Mas OS

+ Mamp pour Machttps://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 localecrée par xampp : http://localhost/

MySQL – Admin vous permet de créer une base de donnée via l’interface phpMyAdmin : http://localhost/phpmyadmin/

Explorer : raccourci vers le dossier dans lequel lessites seront installés : C:\xampp\htdoc

Quit : pour arrêter l’application



http://localhost/phpmyadmin/

http://localhost/

https://www.mamp.info/

https://www.apachefriends.org/fr/index.html

https://www.uwamp.com/fr/


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).




Le coeur WordPress 5

WikiWordPress est un système de gestion de contenu libre écrit en PHP, reposant surune 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/

• Documentation technique : http://codex.wordpress.org/Version Française : http://codex.wordpress.org/fr:Accueil

• Forum d'entraide (fr) : http://www.wordpress-fr.net/support/

• Blog Wordpress (en ligne) : http://wordpress.com/Version Française : http://fr.wordpress.com/



http://fr.wordpress.com/

http://wordpress.com/

http://www.wordpress-fr.net/support/

http://codex.wordpress.org/fr:Accueil

http://codex.wordpress.org/

http://fr.wordpress.org/

http://wordpress.org/

http://fr.wikipedia.org/wiki/WordPress

http://automattic.com/


Le back-office en bref...

Accèshttp://localhost/webmaster-blog/wp-admin/

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




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

WidgetsApparence > 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

MenusApparence > 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.

UtilisateursIl 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



http://codex.wordpress.org/R%C3%B4les_et_Permissions#Super_pouvoirs_pour_le_propri.C3.A9taire_du_blog

https://codex.wordpress.org/fr:Pages


TP guidé : manipulation des blocs

1- Créez une catégorie "Blog"

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

Titre de votre article"Testons les blocs de l'éditeur WordPress"(ou trouvez mieux que ça...)

ContenuDes 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 lapage démo ci-dessus.

ThèmeSi 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.



http://loremipsum-db.alwaysdata.net/testons-les-blocs-a-coups-de-lorem/


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/

Les thèmes offrent plus ou moins d'options de configurations, par exemple : • Ocean WP - 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. 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



https://fr.wordpress.org/themes/

https://wordpress.org/themes/twentysixteen/

https://fr.wordpress.org/themes/oceanwp/

https://fr.wordpress.org/themes/browse/new/


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).

• Tous les plugins (authentifiés par Wordpress) : http://wordpress.org/plugins/

• Top plugins (fr) : http://www.echodesplugins.li-an.fr/category/top-plugins/

TP26_extensions_wordpress.pdf



http://www.echodesplugins.li-an.fr/category/top-plugins/

http://wordpress.org/plugins/


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)

TP guidé : mise en place d'un site pour la partie 2 de ce cours (WordPress developpement)

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éalisationsde ces apprentis webmasters.

Démo : http://webmasterblog-db.alwaysdata.net/



http://webmasterblog-db.alwaysdata.net/


A faire :

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

+ Allez dans réglages :• Ecriture > Catégorie par défaut des articles : Blog• Permaliens > cocher « simple » car nous sommes en local et cela peut éviter les bugs de réecriture d'URL (à modifier en ligne).• Lecture > la page d'accueil affiche : les derniers articles (par defaut, laissez ce parametre)

+ Créez des articles avec images mises en avant. 2 - 3 sont affectés à la catégorie "Céations" (réalisations en formation) et 2 -3 à "Blog" (tutos, articles surles technologies web) + quelques etiquettes.

+ Créez 3 pages :




WORPRESS DEVELOPPEMENT

Arborescence des dossiers

Organisation des fichiers sources

Dans les fichiers présents directement à la racine du site, à noter :

• index.php : 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.

Note

Dans wp-config.php, pour désactiver les révisions des articles (qui« polluent » la base de donnée en enregistrant plusieurs versions d’unmême article), copiez :

define( 'WP_POST_REVISIONS', false );

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 dossieret 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é enback-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

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)

• style.cssCe fichier contiendra le CSS de votre site. Il permet également de déclarer un thème un thème grace aubloc de commentaire actifs à placer en début de fichier (à adapter pour chaque projet.

• index.phpPage d'accueil du site. Sera également affichée si aucun autre template n'est disponible pour afficher une page demandée.

• functions.phpActive 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 :

• Page > page.php

• Article > single.php




• Categorie > category.php

• Archive (classée par date) > date.php

• Resultat de recherche > search.php

• Mot clé > tag.php

• 404 (page introuvable) > 404.php

• Auteur > author.php

Si le fichier suivant n'existe pas : category.php, tag.php, author.php, la page renvoyée sera : archive.php

• Accueil du siteLe template appelé dépend de vos configurations en back-office :

- Derniers articles > home.php

- Page statique > page.php (possibilité de définir un modèle particulier pour la page appelée)

- On peut ne pas laisser le choix et "imposer" le template > front-page.php

Voir le système de hierarchie de templates : https://wphierarchy.com/

TP30_theme_wordpress_structure.pdf



https://wphierarchy.com/


Les fonctions PHP dans 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

• Une refonte de la documentation est en cours : https://developer.wordpress.org/

• La liste des fonctions et leur utilisation (Anglais) : https://codex.wordpress.org/Function_Reference

• Développer un thème : https://developer.wordpress.org/themes/

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'); ?>

Note : Si vous utilisez l’éditeur VS Code, ajoutez le plugin WordPress Snippets qui vous fera des propositions de fonctions lorsque vous codez



https://developer.wordpress.org/themes/

https://codex.wordpress.org/Function_Reference

https://developer.wordpress.org/

http://codex.wordpress.org/fr:Accueil

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

InclusionsDans 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(); ?>

index.php après inclusions :<?php get_header(); ?>  <main class="principal conteneur flex">  <section id="page">  <article class="index">  </article>  </section>  <?php get_sidebar(); ?> </main> <?php get_footer(); ?>

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(); ?> </head>

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

<?php wp_body_open(); ?> <header class="fond"> <div class="conteneur"> <div id="entete"> <h1 class="logo">

<a href="<?php bloginfo('url'); ?>"> <?php bloginfo('name'); ?>

</a> </h1>

<p><?php bloginfo('description'); ?></p> </div> </div>  <nav id="menu"> <ul> <li><a class="actif" href="index.html">Accueil</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="zone-html5.html">Labo</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <nav id="menu-mobile"> <span class="mobileBtn"> <i class="fas fa-bars"></i> </span> <ul> <li><a class="actif" href="index.html">Accueil</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="zone-html5.html">Labo</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav>  </header>


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>(A mettre si n'est pas géré dans functions.php - Si vous utilisez [theme-base] fourni dans ce cours, vous n'avez pas à insérer cette ligne)

<title>Portfolio|Le blog du webmaster</title>

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

Documentation : https://codex.wordpress.org/Introduction_to_Blogging#Pingbacks

<head> ...<?php wp_head(); ?></head>

Très important Permet aux plugins d'insérer du code dans le <head> (css, js). Lien vers le fichier "style.css".A placer juste avant la fermeture du </head>

<h1><?php bloginfo('name'); ?></h1> <h1>Le blog du Webmaster</h1>

<h1> <a href="<?php bloginfo('url'); ?>"> <?php bloginfo('name'); ?> </a></h1>

<h1> <a href="http://localhost/webmaster-blog"> Le blog du Webmaster </a></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"> (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



https://wordpress.org/plugins/font-awesome/

https://codex.wordpress.org/Introduction_to_Blogging#Pingbacks

https://codex.wordpress.org/Introduction_to_Blogging#Pingbacks

footer.php <footer class="conteneur"> <div id="pied" class="flex"> <small><a href="#" target="_blank">31placeweb.net</a></small>  <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>  </div> <a href="#top" class="top js-scrollTo"><i class="fa-lg fas fa-chevron-up"></i></a> </footer> 

<?php wp_footer(); ?> </body>

</html>

<?php wp_footer(); ?></body>

Très importantPermet aux plugins d'insérer du code avant la fermeture de <body>

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 :

Inclusion dans la colonne droite <aside id="colonne">

<?php dynamic_sidebar('colonne'); ?> </aside>

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

Nouvelle zone de WidgetsVous 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 footer.php avec : <footer>

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

TP31_theme_wordpress_inclusions.pdf

Menus du siteVous 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).

Menu principal (+ mobile)

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

+ En dessous de ce menu pour insérer une navigation mobile :<?php wp_nav_menu( array( 'theme_location' => 'mobile', 'container_id'=>'menu-mobile' ) ); ?>

Menu pied de page+ De même, dans footer.php, pour appeler le menu pied de page :<?php wp_nav_menu( array( 'theme_location' => 'pied','container'=>'nav', 'container_id'=>'menu-pied' ) ); ?>

TP guidé: créer un menu des réseaux sociaux

1- Déclarez un nouveau menu dans fuctions.php donc l'identifiant est "reseaux"

2- Créez ce menu en back-office (vous pouvez mettre des icônes font-awesome à la place des textes).


3- Affichez ce menu dans footer.php



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(); ?> 

<?php endwhile; ?>

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

<?php endwhile; else : ?><?php endif; ?>

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.



https://codex.wordpress.org/fr:Marqueurs_de_Modele

http://codex.wordpress.org/fr:La_Boucle


Templates

page.phpCe 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

<?php get_header(); ?>

<main class="principal conteneur"> <article>

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

<h1><?php the_title(); ?></h1>

<div class="inter">

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

<?php endwhile; ?> </article></main>

<?php get_footer(); ?>

Différents gabarits de pages Il est possible d'avoir un affichage différent pour certaines pages et articles. Par exemple, un modèle depage AVEC colonne.

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




template-page-colonne.php<?php

/*Template Name: Page avec colonne (widgets)*/

get_header(); ?>

<main class="principal conteneur flex"> <article id="page"> <?php while (have_posts()) : the_post(); ?>


<div class="inter"> <?php the_content(); ?> </div>

<?php endwhile; ?> </article>

<?php get_sidebar('colonne') ?>

</main>


Il est possible d'utiliser ce tempate dans les pages, articles, produits :<?php/*Template Name: Modèle avec colonne (widgets)Template Post Type: post, page, product*/?>

single.phpCe 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



http://codex.wordpress.org/Template_Tags#Post_tags


TP guidé : réaliser l'affichage du template d'articles

- Reprenez la structure de page avec colonne et copiez-là dans single.php (enlever commentaires de haut de page)

- 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.



http://codex.wordpress.org/Template_Tags

index.phpPage d'accueil du site.

index.php<?php get_header(); ?>

<main class="principal conteneur flex">

<section id="page">  <?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: ?>  <p> <?php _e("Il n'y a pas de publication ce jour."); ?> </p> <?php endif; ?>  </section> <?php get_sidebar(); ?></main>


InfosIl 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)



https://developer.wordpress.org/reference/functions/the_excerpt/


archive.phpCe 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…

TP guidé : réaliser l'affichage du template archive

- 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 afficher le titre de la catégorie : single_tag_title();

- 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.




- Les "petits +" :

1- changez l'icone située à gauche du titre principal en fonction du type d'archive (cf "info") : - Catégorie

- Mot clé

- Auteur

2 – Changez la présentation de liste d'articles d'une catégorie. Pour l'isoler, vous pouvez créer un fichier contenant l'id de votre catégorie, sous la forme category-3.php OU faire une condition dans archive.php (cf "info")

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/



https://developer.wordpress.org/themes/references/list-of-conditional-tags/


404.phpPage 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.phpPage d'affichage des résultats d'une recherche dans le site.(Pour afficher un moteur de recherche, voir le widget correpondant)

TP guidé : réaliser l'affichage des résultats de recherche

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();




Personnalisations avancées

WP_QueryAfin 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...

Exemple : afficher le titre et texte d'une page (identifiant=4)<?php

$the_query = new WP_Query(array('page_id' => 4));

while ($the_query->have_posts()) : $the_query->the_post();

?>


<?php the_content();?>

<?php endwhile; ?>

<?php wp_reset_postdata(); ?>

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

<?php wp_reset_postdata(); ?>

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);

Liste des paramêtres possibles pour la fonction WP_Query :

https://developer.wordpress.org/reference/classes/wp_query/#parameters



https://developer.wordpress.org/reference/classes/wp_query/#parameters


TP guidé : Travailler la page d'accueil du siteNous allons travailler l'affichage de la page d'accueil. Pour cela :

1- Créez un template de page personnalisé : template-page-accueil.php. Affectez ce template à une page "Accueil" créée en back-office.

2- Appelez cette page "accueil" en accueil du site.

3- Travaillez le template-page-accueil.php pour avoir l'affichage suivant




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 +" :

Affichez ces articles dans un slide

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;}



https://kenwheeler.github.io/slick/


Custom Post TypesCréer de nouveaux objets éditoriaux

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/



https://wpchannel.com/wordpress/tutoriels-wordpress/masquer-menus-administration-back-office-wordpress/

https://wpchannel.com/wordpress/tutoriels-wordpress/masquer-menus-administration-back-office-wordpress/

https://fr.wordpress.org/plugins/custom-post-type-ui/

https://codex.wordpress.org/Function_Reference/register_post_type


TP guidé : créer un nouvel objet éditorial "Webmaster"

Chaque "article" correspondrait à un nouveau profil. Par défaut le template utilisé est "single.php" maison va vouloir modifier l'affichage ici :

- Copiez/collez single.php et renommez le single-webmaster.php

- Pour le sous-titre, vous pouvez appeler the_excerpt()

- La page d'archive est accessible à l'adresse : mon-site.fr/webmaster (les permaliens doivent être réglés sur titre de la publication).

- Le template appelé pour l'affichage de l'archive est : archive-webmaster.php



Custom fieldsChamps personnalisés : gérer l'affichage d'informations supplémentaires dans des zones prédéterminées.

Dans WordPress (limité)Infos : https://wordpress.org/support/article/custom-fields/



<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/



https://www.advancedcustomfields.com/

https://wordpress.org/support/article/custom-fields/


TP guidé : créer des champs personnalisés

- Créez dans ACF un groupe de champs "formation" qui sera affecté à webmaster

- Appelez ces champs dans un <aside class="inter">...</aside> à l'interieur de <article id="page">...</article> du template webmaster-single.php afin d'avoir un affichage de ce type :

- Posez une condition pour chaque champ afin que rien ne s'affiche si le champ n'est pas renseigné (<li>Intitulé : </li>).




Travailler le CSSAfin 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"

• Copiez/collez le code suivant afin d'avoir rapidement des blocs à styliserhttp://31-place-web.net/doc/modele-blocs.txt

• 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 finalIl 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...



https://fr.wordpress.org/plugins/duplicator/

http://loremipsum-db.alwaysdata.net/raccourcis-des-blocs-wordpress/

http://31-place-web.net/doc/modele-blocs.txt

module 6 wordpress 531-place-web.net/img/pdf/mod6_wordpress.pdfmodule 5 - wordpress cependant, de...

Documents