Une matinée ne suffit pas pour expliquer le fonctionnement de WordPress. Il est possible de le faire en 1 journée mais la quantité d’infos a intégrer est importante avec un fort risque de saturation. J’ai donc opté pour une version plus simple et pratique. C’est plutôt la pratique régulière du site qui vous permettra d’être totalement à l’aise avec cet outil.

Présentation de WordPress

WordPress est un CMS (Content Management System) libre et Open source (le code est ouvert). Il en existe plein d’autres comme Drupal par exemple. Un CMS Sert à gérer le contenu d’un site internet avec un tableau de bord qui permet de remplir une base de donnée, dans laquelle le site – via le code PHP – ira chercher ses informations. Ce type de site est dit « dynamique » car le contenu est en base de donnée et généré à la demande. J’insiste sur le fait que WordPress et les CMS ne sont pas fait pour créer des sites. Ils sont une interface pour gérer le contenu : Texte et images.

Vous trouverez peut-être dans d’autres sites WordPress, une manière différente de fonctionner. C’est normal. Cela s’explique par le fait qu’il est possible de maintenir la version basique de WordPress. C’est ce que je fait systématiquement car comme d’autres, je pense que « le nouveau » système proposé par WordPress (appelé Gutenberg) crée une complexité de gestion en proposant aux utilisateurs de construire un site. On sort du cadre CMS. Cela implique aussi une dégradation des performances en surchargeant le site de code inutile. Voilà pourquoi j’opte pour WordPress dans sa version initiale.

Pour en savoir plus, vous pouvez lire ce petit article : Rendre WordPress plus performant

Différence entre les pages et les articles

Dans WordPress, il est possible de créer des pages ou des articles. Quelle différence entre les 2 ?

• Les articles se classent dans des catégories (par exemples « un peu d’histoire ») et vous pouvez renseigner des « tags » ou mots-clefs;
• Les pages sont uniques, autonome elles vivent sans catégorie:
  • Page accueil
  • contact
  • mentions légales
  • Biographie

Pour créer une PAGE ou un ARTICLE, allez dans la colonne principale de gauche.
Puis dans ARTICLE ou PAGE : AJOUTER UN ARTICLE ou UNE PAGE.
Renseignez le titre, le texte, la catégorie pour les articles, l’image mise en avant puis PUBLIER.
Votre article est maintenant en ligne !

Généralités pour les élements : pages, articles

Quand vous modifiez l’élement dans le tableau de bord, il y a en haut à droite un bloc PUBLIER.

• Il indique l’état de la publication: Brouillon ou publier;
• La visibilité : Publique ou privée;
• La date de publication qui peut être modifiée;
• Vous pouvez aussi supprimer l’élement.

Les articles

• doivent prendre une description car utilisée dans la présentation;
• peuvent se classer dans plusieurs catégories mais inutile d’en mettre trop évidemment;
• peuvent prendre aussi plusieurs tags/étiquettes qui favorisent la recherche des thématiques (exemple);
• si vous n’indiquez pas d’image en avant, une image par défaut sera utilisée.

Les pages

• Pas d’image en avant mais indiquez en une si vous voulez. Pour le partage sur les réseaux sociaux c’est cette image qui sera utilisée.
• peuvent prendre des modelés de page (colonne de droite) exemple : Page accueil ou contact
  J’indique l’option mais je déconseille d’y toucher car elle est déjà régler.

La page d’accueil est particulière. J’y reviendrais à la fin, car on sort du cadre WordPress étant donné que toutes les fonctionnalités de cette page ne sont pas natif de WordPress mais spécialement créées pour ce site.

Les catégories • Pour les articles et formations

Vous êtes capables de créer aussi des catégories et sous catégories pour vos articles (pas pour les pages, je rappel);
Il suffit d’aller dans Articles/Catgéorie (colonne de gauche du TDB) de déclarer un nom et éventuellement une description puis AJOUTER UNE CATEGORIE.

Les menus • Pour dispatcher votre contenu

Vos pages existent. Vos catégories existent mais comment y accéder ? Pour cela les menus.
Il peut y en avoir plusieurs. Dans votre cas j’en ai crée 3. Le principal en haut, 1 en bas de page et un autre tout en haut.

Dans la colonne de gauche du tableau de bord > APPARENCE > MENUS puis sélectionner le menu à modifier.
Sélectionner ensuite les éléments à glisser dans le menu (Pages ou catégories généralement).
Puis AJOUTER AU MENU  + ENREGISTRER MENU

Vous pouvez rentrer des éléments comme dépendant d’autres. Cf Vidéo > Vidéo – Part 01.

Les images et médias

Il est important de bien traité les images de son site pour conserver un site performant. Les images « mal traitées » sont la maladie de beaucoup de sites internet alors qu’elles sont souvent les éléments qui pèsent le plus lourd dans un site (60 ou 70%). Le poids satisfaisant se situe entre 200 et  900Ko.

Voici les bonnes pratiques a retenir : 

• Utilisez du JPEG.
• Le format PNG est fait pour la transparence et multiplie par 10 le poids des images;
• Le format d’image WEBP ? Tous les navigateurs ne le lisent pas;
• La taille ? Globalement 1920px de large pour les images communes. 1920px c’est la taille d’un grand écran d’ordinateur.
• La hauteur est automatique. Privilégiez des images en paysage. Le portrait est moins adapté au WEB.
• WordPress génère des tailles d’images à partir de votre upload. Ne cherchez pas à régler les tailles vous-même. C’est inutile.
• Avant d’uploader: Optimiser votre image dans TINY JPEG – ( ! Cela n’a rien a voir avec la taille)
• Avant d’uploader: Nommer votre image correctemment. Pas d’accent, ni de caractère spéciaux, ni de _ ou d’espace. Juste des -;
  Cela est utile pour le référencement.
  Pour en savoir plus, j’ai fait un article sur mon site : https://www.bertrand-kaernel.fr/blog/optimiser-ses-images-pour-le-web.html
• Libre à vous de ne pas respecter ces règles mais très vite votre site va devenir lent.

Pour redimensionner les images, il existe plein de site donc REDKETCHUP.

Dans la colonne de gauche vous trouverez une rubrique MEDIAS.
C’est là que vous pouvez charger des images, des docs (PDF) par exemple, des sons, des vidéos.

Pour les PDF. Je conseille de les utiliser avec modération. Un site avec de multiple PDFs n’est pas engageant et les internautes ne resteront pas.

Ce qui est possible de faire avec le composeur

Utilisez comme je l’ai fait ici tous les éléments de composition (liste à puce, citation, exergue, encadré) pour donner du rythme et casser la monotonie des blocs de texte.

N’essayez pas de faire de la mise en page avec le composeur – Cela ne sert à rien car ce que vous voyez dans le tableau de bord ne correspondra pas à ce que vous verrez en façade dans le site. Par exemple, les titres sont déjà en gras. Donc, inutile de mettre un titre en gras.

2 modes : Visuel ou texte

Dans le coin en haut à droite vous pouvez basculer sur 2 modes. C’est assez intéressant à utiliser.
N’ayez pas peur du code en mode texte.
Contrairement à notre intuition cela est plus pratique car on voit ce que l’on fait contrairement au mode visuel

Les titres – respectez la hiérarchie (Titre 3 dans ce cas)

• Un titre 1 (inutile en réalité – Oubliez le)

• Un titre 2 (Un sous-titre – Souvent utilisé)

• Un titre 3 ( C’est sous-sous-titre…)

• Un titre 4

• Un titre 5

Si vous  utilisez des TITRE 3 à la place de TITRE 2, vous allez créer une erreur HTML et de mise en page.
Le site marche mais c’est une erreur que les moteurs de recherche détectent.

On parle souvent des mots-clefs des sites internet qui seront scannés par les moteurs de recherche. En réalité c’est dans les titres que les « mots-clefs » doivent être dispacher. Pour un bon référencement, choisissez donc bien les termes qui correspondent au sujet de l’article ou de la page.

Les paragraphes

Pour tout ce qui n’est pas TITRE. C’est simple. Attention ! Un retour de ligne = un nouveau paragraphe.
Pour éviter cela : RETOUR LIGNE + MAJ

les tableaux

Dans le composeur icone tableau. Choisissez le nombre de colonne et de ligne. Pensez au mode petit écran quand vous concevez votre tableau. Les tableaux restent fixes. Mieux vaut mettre un nombre réduit de colonnes. Pour plus de contrôle, passez en mode TEXTE. Vous réglez les pourcentages. C’est plus simple.

Titre 1	Titre 2	Titre 3	Titre 4
Une valeur	Une valeur	Une valeur	Une valeur
Une valeur	Une valeur	Une valeur	Une valeur

Pour le reste

C’est comme dans les autres composeurs : texte en gras, liste à puce, lien ou encore citation

Ceci est une citation, toujours bien à dispacher dans vos textes pour casser la monotonie des blocs. Ceci est une citation, toujours bien à dispacher dans vos textes pour casser la monotonie des blocs. Ceci est une citation, toujours bien à dispacher dans vos textes pour casser la monotonie des blocs. Ceci est une citation, toujours bien à dispacher dans vos textes pour casser la monotonie des blocs. Ceci est une citation, toujours bien à dispacher dans vos textes pour casser la monotonie des blocs.

Boutons supplémentaires

• Phrase en exergue. C’est bien pour dynamiser des articles;

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

• SF: Petite fonte;

Cette phrase est en petite fonte

• EN: Bloc encadré (Il y en a plein dans cet article !);
• Vidéo YOUTUBE;
• BO : Boutons de lien.

Ceci est mon bouton de lien

Les encres – liens

Cela se fait en code HTML directement (c’est la manière la plus simple quoiqu’on en disent). Ci- dessous un exemple (Passez en mode TEXTE pour comprendre).

• Mon lien numéro un
• Mon lien numéro deux
• Mon lien numéro trois
• Mon lien numéro quatre

Mon encre numéro un

Mon encre numéro deux

Mon encre numéro  trois

Mon encre numéro quatre

Le principe est le suivant. A chaque LIEN correspond une ENCRE.
Pour les liens. Sectionnez le texte puis créer un lien avec cette adresse :  « ./#mon-encre » (mon-encre est la partie qui changera en fonction).
Pour les encres. Passez en mode TEXTE. Allez sur la cible titre et donnez lui un IDENTIFIANT (#) en ajoutant ce qui est entre crochet :  [id= »mon-encre »] directement dans votre balise html H2, H3, ou p. Placez le directement après le titre de la balise avec un espace. Exemple : h2 id= »mon-encre ».
Attention de ne pas toucher aux crochets entrantes ou fermantes des balises « < » ou « > ».

Une galerie d’images

Ajouter un média > Créer une galerie > Selectionnez vos images > Régler les colonnes > Lier à  » Fichier média » > Taille: Small ou medium si 2 colonnes

Page d’accueil

On sort ici du cadre WordPress. Pour la page accueil, vous trouverez plusieurs champs aditionnels:

• Texte de présentation
• A la une : Choisissez un article à mettre à la une. C’est le dernier article qui s’affiche d’aprés la date de publication.
• Les actualités: Les 4 dernières actualités. C’est automatique. Il n’y a aucune réglage.
• Les vidéos: Les 2 dernières vidéos.

Options du site

Dans la colonne gauche du tableau de bord. Vous trouvez une partie Site options pour vos informations:

• Logo du site en couleurs et en blanc;
• Image par défaut;
• Maintenance : ON ou OFF;
• Vos coordonnées;
• Les réseaux sociaux;
• La newsletter;
• Les liens de bas de page: Partenaires et institutions;

Plugins et fonctionnalités

WordPress est connu pour la possibilité d’ajouter des fonctionnalités (ou plugin). Cela sert aussi à WordPress a créer des sources de financement car à la base il est gratuit. Ne cédez pas aux sirènes commerciales qui vous laissent croire que vous pourrez réaliser tout ce que vous voulez. La plupart des plugins sont bridés pour créer la frustration et destiner à vous faire payer. Pas tous ! Mais beaucoup le sont.

J’ai déjà pré-installé les plugins nécessaires (CMB2 notamment). Vous pouvez en installer d’autres mais je le déconseille.

Si vous avez besoin d’autres fonctionnalités, demandez moi, je les crée. Cela peut paraître contraignant mais vous gagnerez du temps en vrai.

Les réseaux sociaux

A quoi servent les réseaux sociaux ? Originellement ces plateformes servent à grouper des infos auxquels on s’abonne. Une « time-line » affiche toutes les nouveautés qui renvoient généralement sur un site si l’article est un peu conséquent. Si il s’agit de 3 lignes évidemment un lien vers un site n’est pas approprié.

Un réseaux social n’est donc pas un site en soit mais un agrégateur de contenu – pour les professionnels en tout cas – qui va servir à ramener du monde sur son site. En faisant cela vous augmenter le référencement des moteurs de recherche. Il arrive parfois (je le constate) que le réseaux social servent comme un site sans aucun lien. C’est une grave erreur car en faisant cela vous faites baisser la fréquentation de votre site et donc votre référencement.

Il s’agit donc d’alimenter les rubriques INFOS et ACTUS par exemple puis de partager cette info en la présentant avec 3 lignes d’intro + le lien de l’article.

Conclusion

J’arrête ici sur le fonctionnement basique. Si vous arrivez a intégrer tout cela c’est déjà bien !

Des ajouts (24 Février 2025)

Sauvegarde du site

Vous pouvez faire une sauvegarde de votre site directement chez votre hébergeur (Infomaniak).
Connectez vous à votre compte pour configurer la manoeuvre.
Pour sauvegarder un site WordPress, voici les dossiers qui sont importants à conserver :

1. Le dossier wp-content (l’intégralité);
2. Le fichier wp-config.php et wp-config-sample.php;
3. Le fichier .htaccess;
4. La base de donnée.

Statistiques

Pour les statistiques, cela se passe aussi chez votre hébergeur. Connectez vous à votre compte pour voir les chiffres de fréquentation.

Création de compte

Pour créer un compte. Allez dans le tableau de bord, rubrique Comptes. Rentrez les identifiants et mot de passe. Vous pouvez aussi renseigner le rôle. L’administrateur a tous les droits. Le rédacteur en a un peu moins etc…