Module DevWeb Zoomacom - Wordpress

Objectifs: découvrir le CMS Wordpress et créer rapidement un site web sommaire.

Prérequis: avoir suivi la session précédente Installer un serveur en local et en disposer sur l'appareil utilisé.


Wordpress: prise en main de l'interface

Action Temps Limite
Intro 20 mn 9h30
Prise en main
  • Découverte de l'interface générale (Tableau de bord)
  • Découverte de l'interface Article
  • Reproduire un article du blog de Zoomacom
 1h00 10h45
Pause 15 mn 11h
Thèmes et Greffons 1h30mn 12h30

Création d'un site Wordpress

Action Temps Limite
Pratique numérique 1h30mn 15h00
Pause 15 mn 15h15h
Pratique numérique 1h25 mn 16h40
Conclusion/Évaluation 20 mn 17h00


Tâches


9h - 10h45 - Prise en main

1- Lancez votre serveur XAMPP
Installé lors de la session précédente.

2- Connectez-vous à votre Wordpress
localhost/wordpress


3- Créez deux utilisateurs :
  • 1 avec le statut d'éditeur
  • 1 avec le statut d'administrateur

4- Reproduisez cet article : https://www.zoomacom.org/a-lassaut-de-la-cite-interdite-dans-le-quartier-manufacture-de-saint-etienne/

Téléchargez les photos sur votre ordinateur. Faites des copiés-collés du texte.

L'idée est de travailler les éléments de mise en page. (titres, paragraphes, images et galeries d'images)

Vous êtes libre sur la couleur et le reste du thème.

5- Structurer une page d'accueil comportant
  • le dernier article
  • une partie fixe avec des informations
  • un menu bas (footer) avec les mentions légales du site.

Découverte et test du système de thèmes et de greffons (plug-in, extensions...)

11h - 11h45 - Thèmes Wordpress

11h à 11h45, chercher et installer et tester au moins 3 thèmes différents et voir ce qu'il se passe à chaque fois.

Sur le bloc note collaboratif: notez les noms et faire des retours sur les conséquences éventuelles du changement de thème.

Thème 1 = Dark Shadows
Installé sur (thème précédent Pretty Lights) => conséquences visibles

11h45 - 12h30 - Plug-in Wordpress

11h45 à 12h30 Installer des extensions et les configurer dans leur interfaces respectives.

Sur le bloc note collaboratif: faire des retours sur les difficultés rencontrées, les questions posées.

WP PROTECT ADMIN (ou équivalent) pour cacher la page wp-admin

WP LIMIT LOGIN ATTEMPT pour éviter les bruteforce Eventuellement

JETPACK (un pack complet de sécurité)

Elementor qui est un page builder

13h30 - 16h40 - Créer un site internet

Créez un site wordpress de présentation d'une structure

À partir de recherches faites sur le web et de publications sur Facebook de cette structure suivante, construisez le site vitrine autonome de la structure Le Tipi des Possibles.

Note: certaines sections sont standards et même, pourrait-on dire, obligatoires (et sont d'ailleurs parfois déjà créées par Wordpress):
  • page d'accueil
  • Qui sommes-nous/À propos
  • Page Contact
  • Mentions légales
  • une page "Événements" (programmation, programme...)
  • au moins trois articles qui s'affichent d'une manière ou d'une autre dans une "section" Actualités
  • au moins deux Catégories qui affichent du contenu
  • [Optionel] Créer une page affichant un agenda dont les données proviennent de https://openagenda.com/transition?lang=fr

Vous pouvez utilisez le plug-in Elementor.

En fin de séance vous présenterez rapidement (2mn) au groupe votre réalisation.

Ressources:

(page wiki) Mettre son site internet en conformité avec le RGPD
Toutes les pages taguées "Wordpress" sur ce wiki:

Boîte à outils

Générateur de faux texte: https://www.faux-texte.com/lorem-ipsum-1.htm
Générateur de mentions légales gratuit (modèle d’infos légales) https://www.subdelirium.com/generateur-de-mentions-legales/

Convertisseur Majuscules-Minuscules: https://convertcase.net/fr/

Nettoyeur de code: https://html-cleaner.com/

Créateur de visuels, (image+texte), simple et rapide: https://pablo.buffer.com/

Recherche d'images en CC en fonction des couleurs: http://labs.tineye.com

Extensions néavigateurs pour extraire des couleurs:
  • Firefox: ColorZilla
  • Famille Chrome: Color Picker

Générateur de palette de couleurs: https://paletton.com

Couteau suisse pour republier un article ou un événement d’agenda sur internet (article Zoomacom): https://www.zoomacom.org/couteau-suisse-pour-republier-un-article-ou-un-evenement-dagenda-sur-internet/

Raccourcis clavier Wordpress (Korben): https://korben.info/gagner-temps-utilisant-wordpress.html