Partie #01
Comprendre son site web
créé avec WordPress
objectif : Comprendre le choix de la solution WordPress et connaître les rubriques importantes.
Votre site web
est créé avec WordPress
Qu'est-ce que ça veut dire ?
Points clés :
- En 2017, 30 % des sites web sont créés avec WordPress soit 1 site sur 3.
- 2004 création de WordPress par l'agence Auttomatic
- Communauté WordPress mondiale exponentielle.
- Mise à jours régulières du CMS qui contribuent à l'amélioration de la solution.
- Les langages utilisés sont le PHP et le système de gestion de bases de données MySQL.
- Le CMS est disponible en plusieurs langues dont le français.
Un CMS, qu'est-ce que c'est ?
Wordpress est un CMS (= Content Management System ou Système de gestion de contenu)
Les CMS permettent de travailler de façon distincte le contenu des pages : texte, médias, menus de navigation et la mise en forme générale, notamment avec l’utilisation d’un template (= thème).
CMS = c'est une famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d'applications multimédia.
source : wikipédia
WordPress ressemble à cela :
Comment ça se passe concrètement ?
le front-end (= ce que nous voyons : médias, textes... )
le back-end (= les actions que nous faisons pour renvoyer les média et textes sur le front)
Vous allez jouer entre...
Template
Extensions (= plugins)
Le monde de WordPress...
L'un ne va pas sans l'autre.
Les Templates sont très largement utilisés dans la conception
de site web avec le CMS WordPress.
Template WordPress
Les contenus de texte, la typographie, les médias ainsi que la charte graphique sont personnalisables pour chaque template.
De plus ils ont été conçus responsives pour s'adapter à tous les supports (Desktop, Tablettes et smartphones)
Un template (= thème) est un modèle de site web.
C'est un moyen de dissocier le contenu rédactionnel (contenu textuel)
de la forme (la manière dont il est présenté).
En 2 mots : Efficacité & Performance
définition :
Il existe des templates gratuits et des Templates Premiums
Un template gratuit :
Un template Premium :
Marketplace Premium : https://wordpress.org/themes/
- Templates toujours gratuits soit 0 euro
- Design moderne et personnalisable. Pas de thématiques spécifiques.
- Fonctionnalités limitées
- Pas de support
- Veillez aux mises à jours (un site gratuit ne peut garantir des mises à jour régulières et donc ne peut être compatible avec les nouvelles versions du CMS).
- Template payant soit le prix d'achat d'une licence d'exploitation ( Prix entre 39 et 59 $)
- Design moderne et customisables via un Theme Option complet. Le template a été désigné pour répondre à des activités et des problématiques variées.
- Fonctionnalités larges et adaptées à son activité
- Support personnalisé et accès à la communauté d'utilisateurs
- Garanties de mises à jours pour être compatible avec les dernières versions
Listes des templates gratuits : https://wordpress.org/themes/
Exemples de Templates gratuits
Par exemple le template gratuit ci-dessous est
Twenty Seventeen par WordPress.org (Template par défaut)
les informations à droite sont à prendre en compte :
- Version : 1.6
- Dernière mise à jour : 17 mai 2018
- Installations actives : + 1 million
- Evaluation : 71 utilisateurs ont mis 5 étoiles
en savoir plus : https://fr.wordpress.org/themes/twentyseventeen/
Par exemple le template gratuit ci-dessous est
Sidney par athemes
Les informations à droite de l'illustration sont à prendre en compte :
- Version : 1.45
- Dernière mise à jour : 13 février 2018
- Installations actives : 200 000 +
- Evaluation : 242 utilisateurs ont mis 5 étoiles
en savoir plus : https://fr.wordpress.org/themes/sydney/
Par exemple le template gratuit ci-dessous est
OceanWP par oceanwp
Les informations à droite de l'illustration sont à prendre en compte :
- Version : 1.5.15
- Dernière mise à jour : 18 mai 2018
- Installations actives : 100 000 +
- Evaluation : 341 utilisateurs ont mis 5 étoiles
en savoir plus : https://fr.wordpress.org/themes/oceanwp/
Exemples de Templates Premium
Hotel WordPress Theme | Sailing par Thimpress est un template Premium destiné au secteur d'activité Hôtelière.
en savoir plus : https://themeforest.net/item/hotel-wordpress-theme-sailing/13321455
Les informations à droite sont à prendre en compte :
- Sales : 2,273 licences achetées
- Item Ratings : moyenne de 4.49 étoiles sur 5
- Compatible : IE11, Firefox, Safari, Opera, Chrome...
- Software Version : WordPress 4.9.x (dernière version)
-...
MyListing - Directory & Listing WordPress Theme par Elite Author est un template Premium qui permet de paramétrer une plateforme de mise en One to One / B to C.
Les informations à droite sont à prendre en compte :
- Sales : 3,534 licences achetées
- Item Ratings : moyenne de 4.92 étoiles sur 5
- Compatible : IE11, Firefox, Safari, Opera, Chrome...
- Software Version : WordPress 4.9.x (dernière version)
-...
The7 - Multi-Purpose Website Building Toolkit for WordPress par Dream-Theme est un template Premium qui permet de créer et personnaliser tous types de sites pour répondre à des problématiques variées.
Les informations à droite sont à prendre en compte :
- Sales : 112,612 licences achetées
- Item Ratings : moyenne de 4.77 étoiles sur 5
- Compatible : IE11, Firefox, Safari, Opera, Chrome...
- Software Version : WordPress 4.9.x (dernière version)
-...
Bridge - Creative Multi-Purpose WordPress Theme par QODE est un template Premium qui permet de créer et personnaliser tous types de sites pour répondre à des problématiques variées.
Les informations à droite sont à prendre en compte :
- Sales : 99,896 licences achetées
- Item Ratings : moyenne de 4.78 étoiles sur 5
- Compatible : IE11, Firefox, Safari, Opera, Chrome...
- Software Version : WordPress 4.9.x (dernière version)
-...
Chaque template Premium offre un "Theme Option" (= option de théme) pour configurer et personnaliser son thème
avec des options avancées.
- couleurs
-Typographie (police, taille, épaisseur...)
- Intégration du logo
- Agencement de la barre de navigation
- Gestion des "barres latérales" (= Sidebars)
- Gestion des éléments UI
- Présentation des articles de blog
- ...
Extensions WordPress
C'est un programme qui va permettre de rendre votre site plus fonctionnel en y ajoutant
une fonctionnalité propre à vos attentes et ainsi vous aider dans votre gestion de votre activité sur le web.
Une extension (= ou plugin) est une fonctionnalité que vous
intégrez à votre CMS WordPress pour attrribuer une action spécifique à votre site.
définition :
en savoir plus : https://fr.wordpress.org/plugins/
Par exemple
Vous souhaitez ajouter un planning sur votre site web
Tapez dans la barre de recherche : Planning
Listes des extensions relative à la recherche "planning" : https://wordpress.org/plugins/tags/planning/
Autre exemple
Vous souhaitez ajouter un planning sur votre site web
Tapez dans Google : Planning WordPress Plugin
Lien de la page cliquée : https://wordpress.org/plugins/tags/planning/
Vous atterissez sur la page des extensions répertoriées dans la catégorie "planning"
Nous allons découvrir plus en détails les
extensions dans la partie #02 :
https://slides.com/blueweb/extensions-wordpress/fullscreen
Les commandes WordPress à connaître
Tout d'abord, nous devons nous connecter en tant qu'Administrateur
https://votrenomdedomaine.com/wp-login.php
La Barre d'administrateur
une fois connecté vous avez accès à cette barre horizontale située tout en haut de votre site,
elle est disponible uniquement aux personnes qui se connecte au site.
Cette barre permet de passer du front au back et/ou du back au front et ainsi d'accéder
aux différentes parties de votre site rapidement.
Par exemple
Vous êtes sur votre page d'Accueil (= Front) et vous voulez souhaiter accéder à votre Tableau de bord (= Back)
Faîtes glisser votre curseur sur le nom de votre site web, un fichier déroulant s'ouvre, cliquez sur Tableau de bord
Pour retourner sur la partie visuelle, je clique à nouveau sur le nom du site et sur le lien "Aller sur le site"
La barre latérale de gauche du Tableau de bord
Cette barre vous permet d'entrer dans toutes les rubriques de votre site, c'est le menu de navigation de l’administration. Il reprend les différentes fonctionnalités qui vont vous permettre d’effectuer des actions. Lorsque vous cliquez sur une fonctionnalité, celle-ci s’ouvrira pour faire apparaitre d’autres fonctionnalités qui lui sont dépendantes.
Mises à jour = permet de mettre à jour automatiquement la nouvelle version de WordPress, ses extensions et ses thèmes.
Articles = permet de rédiger des articles (pages "dynamiques"), les publier, les rendre privés, planifier leur date de publication, les mettre en brouillon, en attente de relecture ou à la corbeille.
Médias = permet d'ajouter de nouveaux médias (images, videos, pdfs...) et de les stocker dans la bibliothèque de médias pour ensuite les afficher sur les articles et pages.
Pages = permet de créer des pages à contenu "statique". Elles sont en général utilisées pour la page d’accueil, de contact, etc… Les pages sont accessibles accède via le menu de votre site web.
Apparence = dans Apparence se trouvent les rubriques Thèmes, Widgets, Menus et Editeur.
Extensions = permet d'installer, d'activer ou de désactiver des extensions (= plugins)
Réglages = permet de configurer les informations de son site web en fonction du réglage Général , de l'Ecriture, de la Lecture, de la Discussion, des Médias, des Permaliens et de la Confidentialité.
Utilisateurs = permet d'ajouter de gérer ses comptes en tant qu'administrateur et aussi d'en créer. Plusieurs statuts sont disponibles : Abonné, Contributeur, Editeur, Auteur, Administrateur...
Zoom sur la rubrique Apparence
La rubrique Apparence est une partie clé du site car c'est que nous trouvons
des fonctionnalités indispensables pour la mise en page du site web.
Thèmes = permet de télécharger, installer son ou ses thème(s) et activer son Child-theme.
Personnaliser = offre une zone de travail divisée en 2 partie (Back et Front) ce qui nous permet de modifier sa page et de visualiser le résultat en même temps.
Widgets = Un widget WordPress est similaire à un plugin mais qui s'ajoute dans les différentes sidebars de votre site.
Une sidebar (= barre latérale) est une colonne latérale présente sur les pages et articles de votre site dans laquelle sont ajoutés des Plugin Pages de Facebook ou Twitter par exemple ou un bouton call-to-action...
Notez bien que de plus en plus de Themes proposent de créer son pieds de pages dans la zone de Widgets.
Menus = permet de créer un menu personnaliser en le nommant puis d'y insérer les pages créées que vous souhaitez faire apparaître dans la barre de navigation.
Zoom sur la rubrique Utilisateurs
Par la création de votre site web avec WordPress, vous êtes administrateur du site. Vous pouvez tout gérer et même ajouter de nouveaux utilisateurs et leur attribuez un rôle spécifique pour qu'ils vous aident à la gestion de votre site.
Pour ajouter un utilisateur WordPress, il faut aller dans « Utilisateurs » → « Ajouter » dans la barre latérale de votre administration.
Entrez-y l’identifiant (sans espace et sans accent), l’adresse mail, le mot de passe.
Si vous cochez « Envoyer le mot de passe ? », un mail comprenant les informations du profil sera envoyé à l’adresse que vous avez entré dans « adresse mail ».
Attribuez un rôle à votre nouvel utilisateur.
Voici les rôles principaux de celui qui a le moins de droits à celui qui en a le plus :
- Abonné : il peut juste modifier son profil.
- Contributeur : il peut écrire ses propres articles et les modifier mais ne peut pas les publier.
- Auteur : il peut écrire ses propres articles, les modifier et les publier.
- Editeur : il peut écrire des articles et des pages, gérer les sien(ne)s et ceux/celles des autres utilisateurs.
- Administrateur : il a tous les droits et a accès à toutes les fonctionnalités de l’administration WordPress.
WordPress vous offre la possibilité d’ajouter des utilisateurs ayant des rôles différents. Le rôle correspond aux droits qu’un utilisateur a sur le site : publier, écrire, modifier, supprimer, etc.
Zoom sur la rubrique Réglages
Détaillons la rubrique Réglages
Général = permet d'intégrer le Titre et le slogan du site web, l'adresse de messagerie par défaut qui se connecter au formulaire de contacter, paramétrer l'URL de WordPress et personnaliser l'URL du site web et gérer le statut des nouveaux utilisateurs.
Écriture = permet de configurer les catégories par défaut des articles, les formats des articles (Galeries, liens, images...), configurer l'envoi d’article par e-mail et un service de mises à jour automatique du site quand une nouvelle page ou un article est créé.
Lecture = permet de configurer sa page de blog et sa page d'accueil. Par défaut le blog (les derniers articles) s'affichera sur la page d'accueil, le nombre d'articles à afficher, gérer le flux RSS et choisir d'être visible ou pas sur les moteurs de recherche.
Discussion = permet gérer les commentaires postés par les visiteurs du site et les pings qui sont des notifications de liens. Vous pouvez choisir de laisser les commentaires libres ou de laisser le visiteur s'enregistrer pour pouvoir commentaire. De plus vous pouvez être avertit par message dès qu'un nouveau commentaire est posté, vous pourrez les modérer et aussi "blacklister" certains visiteurs. Enfin vous pouvez régler l'affichage des avatars par défaut.
Zoom sur la rubrique Réglages (suite)
Médias = Permet de paramétrer la taille des images : pour les miniatures, la taille moyenne et les grandes taille. Ces formats s'adaptent pour les visuels de certains éléments par exemple un affichage d'articles. Toutefois vous êtes libre de télécharger l'image à la taille que vous souhaitez dans votre bibliothèque de Médias et l'utiliser avec sa taille originale.
Permaliens = Permet de créer une structure personnalisée pour son URL. Vous pouvez sélectionner l'URL simple, avec date et titre, mois et titre, numérique, avec le nom de la page ou de l'article ou encore la personnalisée en y ajoutant les variables souhaitées.
Confidentialité = La version 4.9.6 de WordPress propose une page de conseil et aide à la mise en forme de la politique de confidentialité pour être conforme à la réglementation RGPD.
La barre latérale de gauche du Tableau de bord
Pour aller plus loin : http://deligraph.com/tuto-wordpress/tableau-de-bord-wordpress/
Modifier une page spécifique
Toutes les pages visibles apparaissent sous forme de liens sur la barre de navigation
Les différents mots présents sur la barre de navigation font références au titre des pages.
Note : Mais aussi, ils peuvent être matérialisés par des icônes, en l'occurrence les petits drapeaux permettent à l'utilisateur de passer de choisir une version traduite du site.
Modifier une page spécifique
Cliquez sur le lien d'une page visible sur la barre de Navigation.
Ce lien renvoit sur la page désirée.
Pour modifier cette page, cliquez sur le lien "Modifier la Page" tout en haut sur la barre d'Admin
Modifier une page spécifique (suite)
Sur le back de la page en question, vous pouvez modifier son contenu.
Sauvegardez les modifications, puis mettez à jour la page.
Le résultat des modifications sera effectif si vous retournez sur le Front de la page en pressant voir la page.
Faire des Mises à jours
Wordpress a besoin de faire des mises à jour régulières
Vous atterrissez sur la page des Mises à jour du Core de WordPress et de ses extensions
cochez les cases ou apparaissent Compatibilité avec WordPress 4.8 : 100% (selon l'auteur)
si Inconnue attendez quelques jours que le statut change
Pressez le bouton "Mise à jour des extensions"
Attendez bien la fin de la mise à jour pour changer d'action.
OK
OK
Stop : attendons quelques jours pour voir l'évolution
et prendre la décision de lancer ou pas la mise à jour
Dans l'exemple suivant :
Pour la mise à jour de WordPress soit la nouvelle version du CMS,
une notification vous le signale en haut des pages de votre Tableau de bord.
En cliquant sur le lien "Veuillez faire la mise à jour maintenant" vous atterrissez sur la page des Mises à jour
puis faire une mise à jour automatique. Toutefois vous pouvez attendre quelques avant de la lancer pour avoir des retours (bugs, problémes, compatibilité...) De plus une sauvegarde est conseillée pour prévenir une erreur durant la mise à jour...
Si vous ne faites pas les mises à jour de Wordpress,
vous recevrez un email vous attestant de la mise à jour automatique à la nouvelle version.
Pourquoi la mise à jour se fait automatiquement ?
Des nouvelles versions de WordPress sont fréquentes. Le fait de passer à la version supérieure automatiquement est une nécessité car des changements et des fonctionnalités majeures ont été développées dans la nouvelle version.
Fin de cette partie