WordPress UNIL - Documentation publique

Au sujet de la documentation WordPress

Certains points de documentation concernant également les sites WordPress se trouvent dans la rubrique
Ressources communes pour Jahia et WordPress - Documentation publique

Présentation de WordPress

Définitions

WordPress est

wp-pub-present-edit-visit.png

Sa relative simplicité d'emploi (en comparaison d'autres systèmes de gestion de sites plus complexes) et le fait qu'il soit open source ont largement contribué à son succès.

Les principales fonctionnalités d'un CMS

Si on doit créer un site web aujourd'hui, l'utilisation d'un "content management system" est la solution la plus rapide et confortable, car elle permet d'éviter une formation longue et complexe aux langages et technologies du web.

WordPress convient pour un site ou un blog

L'une des forces principales de WordPress est sa capacité à pouvoir gérer 2 types de contenu différents :

Il permet donc aussi bien la réalisation d'un site classique avec une arborescence de pages que la réalisation d'un blog ou d'un site de type magazine.

wp-pub-present-pages-articles.png

Quand on consulte un site WordPress, selon les cas et les contenus, on voit :

Cette différence entre pages et articles est une notion de base importantes pour bien comprendre la logique de WordPress.

WordPress permet de gérer simultanément des pages et des articles, ce qui est tout à fait dans la tendance actuelle en matière de sites web. On trouve par exemple fréquemment des sites avec des pages de présentation (activités, équipe, etc.) et en complément une partie blog, avec par exemple des articles pour les actualités et nouveautés. WordPress permet de donner accès à ces deux types de contenu dès la page d'accueil.

wp-pub-present-structure-pages-articles.png

WordPress est également bien interfacé avec les réseaux sociaux. Il permet par exemple d'afficher des icônes "suivez-nous sur Twitter, Instagram, etc." ou encore des icônes "partagez ceci sur Twitter, Facebook, etc." Il génère aussi un flux RSS, qui permet à d'autres sites d'afficher une liste dynamique de vos derniers articles.

Thèmes et extensions

Le logiciel de base de WordPress ne dispose que d'un nombre limité de fonctionnalités et d'options de présentation. Grâce à l'utilisation de composants supplémentaires, on peut cependant lui ajouter des capacités et modifier l'apparence des sites:

wp-pub-present-themes-extensions.png

L'offre WordPress du Ci

En savoir plus sur WordPress

A l'UNIL

Hors de l'UNIL



Débuter avec WordPress

Editer un site WordPress sur l'hébergement web du Ci

La structure de ce document est basée sur celle du cours "Sites web avec WordPress" régulièrement organisé par le Ci. Ce cours présente la création d'un site avec plusieurs pages et articles en partant d'un site vide comportant uniquement une page d'accueil, semblable aux sites WordPress nouvellement ouverts sur nos serveurs.

Sommaire:

  1. L'interface d'administration
  2. Un site avec des pages
  3. Le menu de navigation
  4. Un blog avec des articles
  5. Les widgets
  6. Gestion de fichiers (images et PDF)
  7. Réglages généraux
  8. Les extensions
  9. Aide

1. L'interface d'administration

Si vous n'éditez pas depuis le réseau de l'UNIL, il est nécessaire d'activer le VPN UNIL, voir le point 1 sur la page questions fréquentes...

Débuter l'édition du site

  1. aller à l'adresse de connexion: ajouter /wp-admin à l'adresse de la page d'accueil du site, sur le modèle https://adresse_du_site/wp-admin (exemple fictif: https://wp.unil.ch/xyz/wp-admin )
  2. s'identifier avec votre compte edu-ID
  3. arrivée sur le tableau de bord de l'interface d'édition :
    • Articles pour créer ou modifier un article
    • Pages pour créer ou modifier une page

Mode édition et mode affichage

Passer de l'édition à l'affichage du site avec la barre d'outils :
la barre d'outils permet de passer de l'édition du site à l'affichage et inversément

image-1602778344934.png

en édition d'une page, prévisualisation ou sauvegarde + affichage:

image-1602778403224.png

Premier réglage: modifier le titre et le sous-titre du site

Pour modifier le titre et le sous-titre du site qui apparaissent dans le bandeau d'en-tête, il faut passer par l'interface de personnalisation :

  1. Apparence > Personnaliser > Identité du site
  2. modifier le titre du site et le slogan (=sous-titre), vérifier visuellement
  3. enregistrer, puis quitter l'interface de personnalisation

image-1583510140014.png


2. Un site avec des pages

Les pages sont accessibles par le menu principal

image-1587130533116.png

Créer des pages

  1. Pages > Ajouter
  2. titre de la page
  3. texte de la page
  4. enregistrer comme brouillon ou publier

image-1646047990255.png

Modifier une page publiée

  1. Pages > Modifier
  2. modifier le contenu
  3. mettre à jour pour publier les modifications

image-1583511344389.png

Edition du contenu

L'emploi detaillé de l'éditeur (mise en forme, mise en page, etc.) fait l'objet d'un chapitre séparé: l'éditeur de WordPress


3. Le menu de navigation

Le menu de navigation dans le site offre plusieurs options intéressantes. Par contre, il est seulement "semi-automatisé": il ne s'actualise pas toujours automatiquement à chaque création ou suppression de page, et il faut donc parfois le mettre à jour manuellement. La gestion du menu peut s'effectuer:

image-1587123548216.png

Par défaut, pour tous les site nouvellement ouverts sur les serveurs du Ci, un menu a été créé. 
Voir la documentation relative aux menus sur le site officiel WordPress.


4. Un blog avec des articles

Quand les articles sont affichés sous forme de liste (sur la page d'accueil ou sur une autre page) :

  1. les plus récents sont en premier

  2. si un article est long, une option permet de n'afficher que son début, avec un lien "lire la suite"

Créer des articles

  1. Articles > Ajouter
  2. titre de l'article
  3. texte de l'article
  4. enregistrer comme brouillon ou publier

Catégories

Tout article créé est automatiquement rattaché à une catégorie par défaut. Si vous créez beaucoup d'articles, il est conseillé de créer plusieurs catégories qui permettront de classer ces articles par thèmes.

L'attribution d'un article à une catégorie exsitante ou l'ajout d'une nouvelle catégorie peuvent s'effectuer dans l'éditeur de contenu. La gestion détaillée des catégories s'effectue quant à elle en allant dans Articles > Catégories.

image-1646048014068.png

Commentaires

Pendant longtemps, la fonctionnalité "Commentaires" a constitué une partie importante dans la vie des blogs. Actuellement, les commentaires dans les blogs ont été en grande partie remplacés par les échanges sur les réseaux sociaux.

Par défaut, pour tous les site nouvellement ouverts sur les serveurs du Ci, les commentaires sont désactivés. Il reste possible de les activer, soit pour l'ensemble du site ou du blog, soit pour un article en particulier.

Dans les réglages (Réglages > Discussion), plusieurs garde-fous sont disponibles pour limiter le risque élevé de spam. Malgré cela, en complément, il faut toujours activer l'extension anti-spam Akismet si on autorise les commentaires !


5. Les widgets

Les widgets sont des éléments qui permettent d'afficher certaines informations sur une ou plusieurs pages du site, voir même sur toutes les pages. Parmi les éléments proposés comme widgets, on trouve par exemple:

Autrefois la plupart des thèmes WordPress proposaient une colonne latérale à droite du contenu (la sidebar) pour afficher des widgets identiques sur toutes les pages du site. Progressivement des zones d'affichage de widgets sont également apparues dans le pied de page de nombreux thèmes. La plupart des thèmes WordPress récents proposent actuellement des zones de widgets uniquement dans le pied de page, et ne proposent plus de colonne latérale.

Exemple d'ajoute d'un widget "derniers articles" dans le pied de page :

image-1646066789310.png

image-1646066796723.png

En complément, l'éditeur de blocs permet d'afficher certains widgets directement dans la zone de contenu des pages, uniquement sur les pages où on les appelle, et non plus dans seulement dans un pied de page identique sur toutes les pages du site.


6. Gestion de fichiers (images et PDF)

Formats, taille et noms de fichiers

Formats de fichiers autorisés pour les images: jpg (photos) et gif ou png (logos ou schémas).

Les noms de fichiers doivent:

Sur nos serveurs, l'espace disponible pour les fichiers est limité 
=> surveiller son utilisation:
ne pas conserver de fichiers à double, à triple, etc. Si nécessaire, cet espace peut être augmenté sur demande justifiée au helpdesk.

image-1587051788898.png

Les fichiers volumineux (> 30 MB, par ex. vidéos) doivent être stockés sur d'autres serveurs, et appelés ensuite depuis votre site.

Les tailles d'images dans WordPress

Si on insère dans une page WordPress une image plus grande que nécessaire, WordPress va automatiquement en générer une version plus petite, adaptée à la taille de la colonne de contenu dans laquelle on effectue l'insertion.

Insérer un document PDF

image-1587133021018.png


7. Réglages généraux

En plus du réglage du titre + sous-titre du site (chapitre 1), d'autres réglages ont leur importance dans la gestion d'ensemble du site.

Réglage en mode "site" ou "blog"

On peut définir si la page d'accueil doit afficher une page de contenu (=mode site) ou les articles les plus récents (=mode blog).

image-1587053028670.png

Gestion des droits d'édition

Voir la gestion des droits d'édition dans WordPress pour savoir commant ajouter ou supprimer des droits d'édition du site pour d'autres personnes.

Langue du site

Il est possible de changer la langue du site. Dans ce cas, les intitulés gérés par le système sont traduits automatiquement (par exemple dans les articles les dates de publications apparaissent en anglais plutôt qu'en français, les liens "lire la suite" se transforment en "read more", etc.). La langue de l'interface d'administration change également.

image-1587050737553.png

Pour réaliser un site multilingue, le changemen de langue ne suffit pas => il faut demander au helpdesk l'activation de l'extension WPML.

Changer de thème

Le changement de thème permet de modifier la présentation du site. Cette opération est réversible. Pour cela, aller sous Apparence > Thèmes.

Tous les thèmes ne proposent pas les mêmes options. Tous les thèmes ne sont pas adaptables à tous les types de sites. Par exemple, certains thèmes sont spécialisés: pour un blog, un magazine, un portfolio, etc.

Lors d'un changement de thème, il faut parfois paramétrer à nouveau l'affichage de certains éléments: en-tête, menu de navigation, widgets, etc.


8. Les extensions

Les extensions permettent d'ajouter des fonctionnalités supplémentaires à un site WordPress. Cependant beaucoup d'extensions

Seules les extensions disponibles sur nos serveurs sont disponibles pour réaliser votre site. Vous n’avez pas la possibilité d’en installer d’autres par vous-même. Voir la liste de ces extensions à disposition sur nos serveurs.

image-1587049185405.png

Certaines extensions nécessitant un paramétrage préalable des administrateurs du serveur sont activables sur demande (exemple: WPML pour les sites multilingues).

Nous ne pouvons fournir aucune garantie de fonctionnement ou de disponibilité dans le long terme pour les extensions mises à disposition. Il se peut que leurs auteurs cessent de les mettre à jour dans le futur, et que nous soyons contraints de les retirer de nos serveurs.


9. Aide

Pour toute question relative aux sites web, contacter le helpdesk du Ci par email à helpdesk@unil.ch .
En cas de problème, merci de le décrire aussi précisément que possible, avec adresse de la page, capture d’écran, etc.

Documentation à l'UNIL

Documentation hors UNIL


L'éditeur de WordPress

Ce document traite spécifiquement de l'interface d'édition des pages et des articles. Si vous en êtes à vos débuts avec WordPress, nous vous conseillons de lire au préalable le chapitre débuter avec WordPress.

Introduction

Dans l'éditeur de contenu de WordPress apparu fin 2018, aussi nommé éditeur de blocs, tout élément de contenu est un bloc:

Le "bloc par défaut" est le bloc paragraphe : si on commence directement à saissit du texte sur une page, on créé par défaut un bloc paragraphe. Si on veur créer un contenu autre qu'un paragraphe, il faut cliquer sur l'icône + (dans la page ou en haut à gauche) pour choisir un autre type de bloc.

image-1623740688009.png

Voici comment créer une page avec l'éditeur de blocs:

image-1600279995290.png

Voir tous les types de blocs disponibles

Il existe 5 groupes de blocs:

Texte pour
 formater le texte
Média
insérer images, son, vidéos, etc.
Apparence
gérer la mise en page
Widgets
insérer du contenu relatif aux extensions
Contenu embarqué
insérer du contenu de sites externes

image-1600281579556.png

Prévisualiser et enregistrer

image-1623740753107.png

Structurer le texte

Si le texte est assez long, il est conseillé de le structurer avec des intertitres. Il existe 6 niveaux de titres en HTML, de H1 (le plus important, réservé au titre de page) à H6, le moins important. En général, on utilise couramment H2 et H3 pour subdiviser, rarement au-delà.

image-1600280057866.png

Insérer des liens

Dans un bloc "paragraphe", créer un lien interne (=vers une autre page du même site):

image-1600280136349.png

Dans un bloc "paragraphe", créer un lien externe (=vers un autre site):

image-1600280179357.png

Insérer des images et des documents PDF

Ce point est traité dans le chapitre débuter avec WordPress.

 

Modifier les propriétés de la page

Plusieurs propiétés concernant toute la page, et non pas un bloc en particuler, peuvent être paramétées.

image-1600280297309.png

Gérer les blocs avec la "vue liste"

Dans les cas de blocs imbriqués, comme par exemple un bloc texte dans un bloc colonne, la "vue liste" permet d'en afficher la hiérarchie, ainsi que de le déplacer

image-1646146923390.png

On peut également remonter d'un niveau dans la hiérarchie de blocs imbriqués en survolant le type d'un bloc pour faire apparaître un lien vers le bloc de niveau supérieur.

image-1600282670415.png

Groupes et blocs réutilisables

Si on souhaite gérer plusieurs blocs ensemble, afin de pouvoir par exemple leur attribuer une même couleur de fond, on peut les sélectionner pour en faire un groupe.

image-1600283499947.png

Si on souhaite ensuite faire apparaître ce groupe sur plusieurs pages, on peut le transformer en bloc réutilisable.

image-1600283944305.png

Editeur de blocs et bloc "classique"

Si on édite avec l'éditeur de blocs une page créée avec "l'ancien éditeur" proposé jusqu'en 2019, son contenu se trouve dans un bloc de type "classique" identique à l'ancien éditeur. On peut alors à choix:

image-1600284278069.png

Liens utiles

Ressources utiles sur le site officiel wordpress.org pour utiliser l'éditeur de blocs:

Thèmes sur nos serveurs WordPress

Pour des raisons de stabilité, sécurité et performance de nos serveurs WordPress, nous mettons à disposition uniquement un nombre limité de thèmes. Comme précisé dans nos conditions d'hébergement, vous n'avez pas la possibilité d'en télécharger d'autres, ni d'éditer ou modifier ceux qui sont fournis. Vous pouvez utiliser uniquement ceux qui figurent dans la liste ci-dessous.

Nous ne pouvons fournir aucune garantie dans le long terme de fonctionnement ou de disponibilité des thèmes mis à disposition : s'ils ne sont plus mis à jour par leurs auteurs ou compatibles avec les versions récente de WordPress, nous devons les retirer de nos serveurs.

Changer de thème

Le changement de thème permet de modifier la présentation du site. Tous les thèmes ne proposent pas les mêmes options. Tous les thèmes ne sont pas nécessairement adaptables à tous les types de sites.
Par exemple, certains thèmes sont spécialisés pour un blog, un magazine, etc.

Lors d'un changement de thème, il faut fréquemment  paramétrer à nouveau l'affichage de certains éléments, tel que par exemple:

Les thèmes actuellement disponibles

3-themes-wp.png

Chaplin


Twenty Twenty

Twenty Twenty-Five

Guide du thème Chaplin pour WordPress

Chaplin est l'un des thèmes proposés sur nos serveurs WordPress.
Voici des explications pour utiliser quelques unes de ses nombreuses possibilités.
Ses principales caractéristiques sont décrites dans notre liste des thèmes disponibles.

 

Modèles de page

Selon la quantité de contenu qui figurera sur la page et le type de contenu, Chaplin propose différents modèles de page. Voici où sélectionner le modèle utilisé par la page et (optionnellement) définir une image mise en avant:

image-1644505528682.png

Voici la même page affichée avec différents modèles, tout d'abord sans image mise en avant:

image-1644505624774.png

puis avec une image mise en avant:

image-1644505635721.png

 

Réglages d'affichage de l'en-tête

Dans les options de personnalisation, il est possible de choisir parmi plusieurs réglages pour l'en-tête:

image-1644526443507.png

 

Afficher le chemin d'accès aux pages

Pour les sites avec une structure en arborescence à plusieurs niveaux, il peut être intéressant d'afficher le chemin d'accès aux pages.

image-1644526545574.png

 

Insérer un logo dans le pied de page

Ensuite le logo peut être ajouté grâce à un widget de type "HTML personnalisé":

image-1644528143614.png

image-1644528156797.png

 

Images utilisées dans les exemples: © Hdim1993 | Dreamstime.com

 

Extensions sur nos serveurs WordPress

Pour des raisons de stabilité, sécurité et performance de nos serveurs WordPress, nous mettons à disposition uniquement un nombre limité d'extensions. Comme précisé dans nos conditions d'hébergement, vous n'avez pas la possibilité d'en télécharger d'autres, ni d'éditer ou modifier celles qui sont fournies. Vous pouvez utiliser uniquement celles qui figurent dans la liste ci-dessous.

De plus, nous ne pouvons fournir aucune garantie dans le long terme de fonctionnement ou de disponibilité des extensions mises à disposition : si elles ne sont plus mis à jour par leurs auteurs, nous sommes contraints de les retirer de nos serveurs.

Activer une extension

image-1582911516974.png

N'activez que les extensions nécessaires (=que vous utilisez) et désactivez celles que vous n'utilisez pas. L'utilisation d'extensions consomme de la mémoire. Un grand nombre d'extensions activées simultanément sur un site va ralentir le chargement des pages et créer une expérience utilisateur décevante pour les visiteurs.

Les extensions actuellement disponibles

Articles

Bibliographies

Formulaires

Gestion de fichiers (images et documents)

Images

Maintenance

Menus

Mise en page

Multilinguisme

Attention: 2 langues = 2 fois plus de travail !
Ces extensions sont activables sur demande à helpdesk@unil.ch .
Lire auparavant nos explications sur le multilinguisme.

Newsletters

Moteur de recherche

Référencement

Réseaux sociaux

Tableaux complexes (lorsque le bloc "tableau" ne suffit plus)



Gestion des droits d'édition dans WordPress

Les webmasters des sites WordPress hébergés par le Ci ont un rôle d'administrateur selon la terminologie WordPress. Ceci leur permet de gérer directement les droits d'accès pour les autres personnes qui doivent éditer leur site, sans passer par le Ci.
Toute personne disposant d'un rôle administrateur d'un site WordPress peut ajouter / modifier / supprimer des droits d'édition pour ce site à une autre personne qui possède un compte informatique UNIL.

Les différent rôles

Pour gérer le contenu d'un site WordPress, il existe différents rôles possibles. En voici la liste, depuis celui qui offre le moins de possibilités à celui qui en offre le plus :

rôle permet de
abonné accéder en lecture à des pages protégées
contributeur écrire des articles (sans images) et les proposer pour publication
auteur écrire, publier et supprimer ses propres articles
éditeur

  • écrire, publier et supprimer ses propres pages et articles
  • gérer toutes les pages et tous les articles
administrateur

  • gérer toutes les pages et tous les articles
  • gérer les réglages du site (en-tête, thèmes, extensions...)
  • ajouter/supprimer des utilsateurs

Ces rôles concernent l'ensemble d'un site : il n'est pas possible de donner à quelqu'un des droits d'édition uniquement pour une partie d'un site.

Se connecter à l'interface d'administration

  1. aller à l'adresse de connexion: ajouter /wp-admin à l'adresse de la page d'accueil du site, sur le modèle https://adresse_du_site/wp-admin (exemple fictif: https://wp.unil.ch/xyz/wp-admin )
  2. s'identifier avec votre compte edu-ID

Ajouter des droits d'édition

Il faut pour cela que la personne à laquelle on veut attribuer des droits possède un compte utilisateur UNIL ouvert et un compte edu-ID lié à son compte UNIL.

  1. aller dans "comptes" > "add UNIL user"
  2. indiquer l'adresse mail UNIL de la personne à laquelle on veut attribuer des droits, ainsi que le rôle souhaité

Pour ajouter des droits à une personne qui a un compte UNIL sans adresse mail UNIL, il faut indiquer l'adresse mail spécifiée dans son compte edu-ID comme associée à son compte UNIL.

ajout-droits-wp.png

Modifier les droits d'édition

Si une personne possède déjà des droits d'édition d'un site, on peut les modifier pour lui attribuer un rôle différent.

image-1607970072961.png

Supprimer les droits d'édition

On peut également supprimer les droits d'édition d'une personne.

image-1607970082137.png


Formulaires WordPress avec Gravity Forms

Découvrez la documentation détaillée de Gravity Forms sur le site de l'éditeur.
En complément à cette documentation, voici quelques remarques et conseils pratiques.


Possibilités de Gravity Forms

Gravity Forms propose par défaut beaucoup plus de fonctionnalités que Contact Form 7 utilisé sans extensions complémentaires. Mentionnons notamment:

Conseils d'utilisation

Image1.png

Pour construire le corps du formulaire, Gravity Forms offre une quantité de champs qui peuvent être glissés de la barre latérale de droite vers le formulaire.

Il est à noter que la section "Champs avancés" contient de nombreux champs utiles, tels que "Nom", "Email", "Téléphone" (pensez à sélectionner le format "international" dans les réglages du champ), etc. qui sont souvent utilisés dans des formulaires. À la différence d'une simple ligne de texte, ces champs appliquent des restrictions supplémentaires pour vérifier que l'utilisateur entre les données correctement.

Image3.png

saveoften.png

Message de confirmation

Lors de l'envoi d'un formulaire, par défaut un message de confirmation "Merci de nous avoir contactés ! Nous vous répondrons dans les plus brefs délais." s'affiche à la place du formulaire. Il est cependant assez peu visible, surtout si la page contient d'autres éléments en plus du formulaire => nous conseillons de le modifier pour le rendre plus visible:

Image2.png

Notifications administrateur

Configuration du message reçu par la personne qui gère le formulaire lorsque quelqu'un le remplit (dans l'onglet "Notifications" des réglages du formulaire):

gf_notif_config.png

Le champs "Répondre" vous permet de répondre à l'e-mail de notification, il est donc impératif de préciser l'adresse e-mail de l'utilisateur, si elle est demandée dans le formulaire.

Insertion du formulaire dans une page

Pour insérer un formulaire Gravity Forms dans une page, ajoutez un bloc "Gravity Forms". Sélectionnez ensuite le formulaire à afficher parmi la liste.

insert_in_page.png

Limite technique: on ne peut insérer qu'un seul formulaire par page. Si vous souhaitez utiliser plusieurs formulaires sur votre site, chacun devra figurer seul sur une page distincte.

Consulter les réponses

  1. Depuis l'interface d'administration de Wordpress, cliquer le menu "formulaires" (1) puis sur "entrées" (2)
  2. Sélectionner le formulaire depuis le menu déroulant en haut de page (3)
  3. La liste des réponses s'affiche directement dans le tableau de la page
  4. Il est possible de sélectionner les informations qui s'affichent sur le tableau de résumé en cliquant sur la roue crantée (4) et puis en glissant et déposant les colonnes actives dans l'ordre que vous désirez
  5. Vous pouvez consulter les informations détaillées en cliquant sur le lien en première colonne de chaque ligne
  6. Vous pouvez affiner les recherches en utilisant le champ de recherche au-dessus du tableau.

image-1643099439587.png

image-1643099820441.png

image-1643099992889.png

Vous pouvez affecter tous les résultats en cochant la boite sur la première ligne puis en utilisant le menu déroulant et en validant la sélection.

image-1643100237631.40.32.png

Supprimer les données

  1. Pour supprimer toutes les réponses, cochez la boite sur la première ligne, sélectionnez l'option "corbeille" et cliquez sur le bouton "Appliquer"
  2. En cas d'erreur, ces informations sont toujours disponibles sous l'onglet "Corbeille" (point n°1)
  3. Pour supprimer définitivement toutes les entrées de la corbeille, utilisez le bouton "Vider la corbeille" (point n°2).

Une fois la corbeille vidée, il est impossible de récupérer les informations supprimées. Nous vous conseillons d'archiver ces données avant de les supprimer.

image-1643100299971.58.09.png

Archiver / exporter

  1. Pour récupérer les informations d'un formulaire, cliquez sur Importer/Exporter (1) depuis le menu Formulaires
  2. Assurez-vous d'être sur l'onglet Exporter des entrées
  3. Sélectionnez un formulaire avec le menu déroulant (2)
  4. Sélectionnez les champs du formulaire que vous voulez exporter
  5. Sélectionnez une plage de date, si laissée vide, toutes les entrées sont exportées
  6. Cliquez sur Télécharger le fichier d'export pour récupérer toutes les données en format "CSV" (format qui peut être ouvert et édité avec Excel).

image-1643100512031.pngimage-1643100737498.png

Protection contre les spams

Les formulaires Gravity Forms sont protégés contre les spams par des captchas invisibles, ainsi que par le service Akismet. Ces protections servent à identifier les entrées frauduleuses, mais parfois peuvent classifier une entrée légitime comme du spam. Pensez donc à vérifier régulièrement l'onglet "Indésirables" sous Formulaires > Entrées, car des informations importantes pourraient s'y trouver:

gf-indesirables.png

Newsletter dans WordPress avec MailPoet

L’outil MailPoet est une extension WordPress pour créer et gérer l’envoi de newsletter. Après le réglage de l’extension par le CI, vous êtes prêt·e à l’utilisation de cet outil !

Afin de créer une newsletter, trois composants sont nécessaires :

Les abonné·e·s

Vos abonné·e·s sont absolument nécessaires, créer une newsletter sans personne à qui l’envoyer ne fait aucun sens. Il existe trois manières d’obtenir ces personnes pour votre base de données :

  1. Ajouter manuellement chaque personne, les unes après les autres
  2. Importer un fichier avec les adresses mail, nom et prénom de vos futur·e·s abonné·e·s
  3. Créer un formulaire d’inscription à la newsletter

Abonnements.png

1. Ajouter manuellement des abonné·e·s

Depuis le menu "Ajouter", vous pouvez manuellement ajouter une à une chaque personne à la liste d'abonnés. Cette méthode est à privilégier si vous souhaitez envoyer votre newsletter à un groupe restreint de personnes (jusqu'à 20).

2. Importer des abonné·e·s

Dans le menu "Importer", vous pouvez importer un fichier en format CSV avec les informations des personnes. Il est possible de demander une telle liste directement au modérateur du groupe UNIL que vous souhaitez atteindre. Si ce groupe est soumis à des changements récurrents (par ex. tous-xxx) nous vous conseillons de le réimporter avant chaque envoi de la newsletter.

Le format requis par MailPoet étant : adresse mail, prénom, nom. Les virgules sont nécessaires entre chaque champ pour que la personne soit importée dans la base de données. Pour séparer les différent·e·s abonné·e·s un retour à la ligne est nécessaire.

Vous avez également la possibilité de "Coller les données dans une boîte de texte". Cette méthode vous permet de directement copier et coller votre liste depuis Excel, ce qui peut être plus simple que l'importation d'un fichier.

3. Créer un formulaire d’inscription à la newsletter

La troisième solution concerne davantage les utilisateurs externes de l'UNIL: l'inscription à une newsletter. Cette inscription s’effectue par le remplissage d’un formulaire et donc requiert la rédaction de ce formulaire au préalable. Nous vous conseillons d'y inscrire au minimum quatre champs : adresse email, nom, prénom ainsi que la ou les listes auxquelles la personne veut s'inscrire.

Le nombre d'abonné·e·s est limité à 20'000 par site au maximum ! Lorsque cette limite est dépassée, l'envoi de newsletters est désactivé, et ce même pour des envois à des listes contenant moins d'abonné·e·s que la limite. Il est donc primordial de trier et retirer de vos listes les abonnés superflus régulièrement afin de ne pas atteindre ce plafond. Même les abonnés "inactifs" et "non confirmés" comptent pour cette limite.

Les listes

Chaque newsletter est envoyée à tous les abonné·e·s compris dans une ou plusieurs listes. Chaque liste regroupe les abonné·e·s selon un intérêt, statut, etc., par exemple "doctorant" ou "PAT". L’intérêt premier d’avoir plusieurs listes consiste à pouvoir envoyer des newsletters avec un contenu spécifique au destinataire. Ainsi, il devient aisé d’envoyer les nouvelles spécifiques aux doctorant·e·s, étudiant·e·s, partenaires institutionnels, etc.

Ainsi, un·e abonné·e peut appartenir à une ou plusieurs listes, et une newsletter peut être envoyée à une ou plusieurs listes. La sélection des informations que vous souhaitez envoyer au dentinaire final dépendra donc de la liste.

Pour plus d'informations et une marche à suivre, vous pouvez vous référer à la documentation de MailPoet : Créer une liste

Veuillez éviter d'abonner des listes de distribution préexistantes de l'UNIL (p.ex. etudiants@unil.ch) à vos newsletters. Privilégiez les listes d'abonnés de MailPoet à la place.

Les formulaires

Afin de permettre à tout un chacun de s’inscrire à votre newsletter (« Abonné·e·s », point 3), il est nécessaire de créer un formulaire à cette fin. L’intégration de ce formulaire se fera ensuite très aisément sur votre site WordPress par trois moyens différents :

Il est important de noter que chaque thème WordPress est différent, et affiche les widgets différemment. Si vous ne pouvez pas intégrer le formulaire sur le côté du site (sidebar), il est fort probable que votre thème ne contienne pas d’espace pour ceci. Par contre, vous retrouverez au minimum un espace de widget dans le pied de page (footer).

Naturellement, un nouveau formulaire demande au minimum l’adresse mail de l’individu, ainsi que la liste à laquelle il/elle souhaite s’inscrire. Nous vous recommandons vivement d'ajouter les champs supplémentaires que sont le nom et le prénom.

Vous pouvez retrouver les étapes en détail au lien suivant : Création d'un formulaire, doc MailPoet

Les e-mails

Pour MailPoet, tout envoi est considéré comme un mail. Ainsi, on en distingue trois types, que nous vous présentons par ordre de pertinence :

Le mail de bienvenue

Ce mail est envoyé automatiquement par MailPoet suite à l'inscription à l'une de vos listes. Il peut prendre plusieurs formes : la confirmation d’abonnement de la personne, directement après inscription, ou des envois multiples à des dates déterminées. Concernant les envois multiples, il vous sera nécessaire de paramétrer ces envois, avec le contenu à envoyer, ainsi que les dates d'envoi.

Les notifications de post

Si WordPress est votre site principal et que vous écrivez des articles suffisamment souvent, cet outil peut vous intéresser. Ce mail est également envoyé automatiquement par MailPoet, il consiste à envoyer, à une fréquence déterminée, un résumé de l’article ou des articles de la période. Le type de contenu à insérer se retrouve sous : Dernier contenu automatisé. Ainsi, vous pouvez tenir au courant vos abonné·e·s de vos activités. Dans les paramètres d'affichage disponibles vous pouvez déterminer si vous souhaitez :

D'autres options sont disponibles concernant le layout, avec le positionnement de l'image, du texte, etc.

Les newsletters

L’outil qui vous intéressera (et sûrement celui pour lequel vous lisez cette documentation). La newsletter permet d’envoyer, par mail à vos abonné·e·s l’information que vous souhaitez transmettre. Une newsletter peut regrouper deux types de contenu :

Style et layout

Le modèle

La première étape de la création d’une newsletter consiste à choisir un modèle. Le modèle que vous avez créé, ou qui est disponible, comprenant une identité visuelle ainsi que des éléments fixes qui se retrouvent dans vos différentes newsletters.

Choisir un modèle vide ou en reprendre un déjà existant pour le modifier peut devenir un choix épineux ; voici quelques conseils :

Le modèle vide est idéal pour une personne avec des connaissances graphiques soutenues, ainsi que des compétences créatrices. Ou alors une personne préférant garder un style très simple.

Pour une personne avec peu d’expérience graphique, ou en recherche d’idées, la reprise d’un modèle est le bon choix. Cela vous permet de reprendre une structure déjà éprouvée ainsi que d’apprendre/vous inspirer des possibilités offertes par MailPoet.

Notez que ce choix est indispensable uniquement pour la première newsletter. Vous pourrez reprendre le modèle déjà créé pour les prochaine, ou encore dupliquer un newsletter déjà envoyée en modifiant les éléments que vous souhaitez.

Style

Le style permet une uniformisation de la newsletter, ceci en choisissant la police, taille et couleur du texte et des titres. Il sera appliqué à tout le reste de votre newsletter.

Vous pouvez également choisir l’espacement des textes ainsi que la couleur d'arrière plan et du fond de contenu de la newsletter.

Le contenant (mise en page)

MailPoet vous propose plusieurs types de mise en page, de une à trois colonnes avec une répartition équivalente ou en format un tiers - deux tiers. Ces différents types de mise en page peuvent être utilisés isolément ou ensemble au sein de la même newsletter.

Le choix du nombre dépendra du style que vous souhaitez donner à votre newsletter. Pour proposer un article avec sa miniature, par exemple, on préférera le format en deux colonnes.

Le style sur une seule colonne permet une lecture plus attentive du texte, de même qu’il permet d'afficher une image qui ressemblera à une utilisation de type "bannière".

L'autre type de mise en page, celui en 2 tiers gauche / 1 tiers droite, ou son contraire, permet un contenu quelque peu différent. On l’utilisera davantage pour placer un bouton (call to action) ou encore un pictogramme. Deux autres outils vous seront précieux afin de gérer la mise en page de votre newsletter :

L'Espacement permet d’ajouter de l’espace là où vous le souhaiter, que ce soit dans un bloc regroupant des colonnes, une colonne, ou entre des blocs. Comme il n’existe pas d’alignement vertical automatique, cet outil vous permettra d’aligner le contenu d’une colonne adjacente à la deuxième.

Le Séparateur remplit la même fonction que l'Espacement, c’est-à-dire de séparer les contenus. La différence réside dans l’aspect visuel ; le Séparateur se voit par une ligne de la couleur de votre choix séparant les contenus, avec une hauteur personnalisable.

Le contenu

MailPoet vous propose 8 types de contenu qu’il est possible d’ajouter dans chaque colonne :

Texte

Principal outil de création de contenu, la boîte « Text » inclus un éditeur de type « wysiwyg ». Il vous sera donc possible de faire une mise en forme simple, avec l’italique, gras, souligné, liste à puce, etc. La possibilité supplémentaire de cet éditeur est l’inclusion de shortcodes propres à MailPoet. :

Le contenu de ces shortcodes sera automatiquement actualisé et/ou remplacé lors de l'envoi de chaque newsletter.

Image

Comme pour WordPress ou Jahia, l’outil image permet d’inclure un visuel de votre choix qui est présent dans votre bibliothèque de médias. MailPoet laisse très peu d’options, seulement la largeur de l’image, son alignement et la présence ou non d’un padding. Il est possible d'utiliser le bloc image pour créer une bannière par exemple, si celui-ci est placer dans une colonne de pleine largeur.

Bouton

Cet outil consiste à un lien cliquable visuellement amélioré. Vous pouvez définir sa couleur, l’angle de ses bords, sa taille et sa police.

Avec les différentes versions d'Outlook utilisées par les destinataires, il peut arriver que les boutons soient tronqués ou que le texte ne s'affiche pas. Les boutons dont le libellé s'étend sur deux lignes ou plus sont verticalement réduits à une seule ligne. Une solution possible est de se limiter à une ligne courte dans le bouton et à définir la largeur du bouton pour être large.

Réseaux sociaux

Cette petite boîte permet d’afficher des icônes renvoyant à vos différentes plateformes sociales, comme Facebook, Twitter, Instagram ou même votre adresse mail. Comme toutes les plateformes ne sont pas proposées par défaut, il vous est offert la possibilité d’ajouter votre propre image.

Sur Outlook 2007, 2010, 2013, 2016, et 2019, les icônes de réseaux sociaux perdent leur marge, et se retrouvent "collés" les uns aux autres. Une bonne solution à ce problème est d'utiliser les icônes de réseaux sociaux sans couleur de fond.

Articles

Si vous utilisez votre site WordPress pour produire du contenu, cet outil va vous intéresser. MailPoet permet d’inclure automatiquement le contenu d’un article ou d’une page et y ajouter un lien pour lire la suite de celui ou celle-ci. Il existe notamment des options d'affichage similaire à ceux du "Dernier contenu automatisé".

Dernier contenu automatisé

Cet outil vous permettra d’afficher automatiquement les derniers contenus du site, que ce soit des articles, pages ou médias. Vous pourrez choisir le nombre d’éléments à afficher de manière simple.

Les « Options d'affichage » sont, par contre, très riches. Il est possible de choisir :

Si ce contenu vous intéresse, regardez dans le détails toutes les options qui vous sont offertes d’afficher ces contenus.

En-tête

L’en-tête (« Header ») est un bloc de texte standard, à la différence qu’il contient de base un lien pour faire apparaître la newsletter dans le navigateur.

Pied de page

Tout comme l’outil précédent, c’est un bloc standard de texte qui incluent automatiquement deux éléments : un lien pour se désabonner (légalement obligatoire), et un lien pour gérer son abonnement.

Veuillez éviter d'abonner des listes de distribution préexistantes de l'UNIL (p.ex. etudiants@unil.ch) à vos newsletters. En effet, dans cette configuration, vous courez le risque qu'une personne de la liste préexistante clique sur "se désabonner", ce qui entraînerait le désabonnement de cette liste en entier.

Envoi

A n'importe quel moment vous pouvez prévisualiser ce à quoi ressemble votre e-mail. Pour ceci le bloc "Aperçu" vous permet de soit, vous envoyer l'e-mail directement, soit de le prévisualiser dans le navigateur sous format desktop ou mobile. Nous vous recommandons très vivement d'utiliser cette fonctionnalité avant l'envoi, ceci vous permettra de vous assurer que les dizaines, centaines ou milliers de personnes recevant votre e-mail n'auront aucun bug.

Lorsque votre e-mail est prêt (ou non), vous rendre en bas de page permettra l’apparition d’une boîte de dialogue afin de :

L'enregistrement d'un modèle vous permet de stocker cet e-mail dans votre bibliothèque de modèles, sous "Vos modèles enregistrés". L'intérêt réside dans le fait que vous puissiez le reprendre pour de futurs e-mails, en gardant une structure que vous souhaitez.

L'exportation d'un modèle diffère dans le sens où votre modèle pourra être utilisé pour un autre site.

Envoyer: Quoi ? A qui ? De qui ? Quand ?

Pour finaliser votre envoi il est nécessaire de mentionner certaines informations :

Planification-envois.png

Les réglages

Les seuls réglages que vous pouvez modifier, sans mettre en danger le fonctionnement de votre newsletter, se trouvent sous "Essentiels", "Confirmation d'abonnement" et "Avancés".

Peu de réglages vont nous intéresser ici, bien que quelques-uns peuvent être utiles. Ils concernent principalement les réglages par défaut que l’on retrouve dans les e-mails, ou encore la façon dont sont traités les nouveaux abonnés et l’affichage des newsletters sur le site WordPress ainsi que le traitement des echecs d'envois..

Onglet "Essentiels"

Comme nous l’avons vu, lors de l’envoi d’un mail il est nécessaire de paramétrer les coordonnées de la personne qui envoie celui-ci, et à qui répondre. Plutôt que de définir ce paramètre à chaque envoi, vous pouvez indiquer cette information dans ces réglages et elle sera automatiquement reprise pour chaque newsletter.

Chaque newsletter génère des statistiques, comme le nombre d’envoi réussi, le nombre d’ouverture du mail et de clics. Ces statistiques peuvent vous être envoyées à une adresse souhaitée ou complètement désactivées.

Les abonné·e·s également entraînent une notification pour chaque souscription. Vous pouvez choisir d’en être informé par mail à une adresse mentionnée dans les réglages.

Onglet "Confirmation d'abonnement"

Si l'option est activée, les abonné·e·s devront confirmer leur inscription avant de pouvoir recevoir vos newsletters.

Onglet "Avancés"

Il est important, afin de limiter les risques d'être taggué comme spammeur par différent services de messagerie ( gmail, hotmail, bluewin), de vérifier après chaque envoi de newsletter, les envois qui ont échoués. Un email d'avis d'échec est envoyé à l'adresse mail mentionnée dans Mailpoet > Réglages > Avancés > Adresse e-mail de rebond. Merci de vérifier ce paramètre avant tout envoi. Ce paramètre est global et ne peut pas être paramétré par newsletter. Vous pouvez aussi  consulter le détail des envois en cliquant sur la rubrique "Etat" de la newsletter concernée dans le menu Mailpoet > E-mails. 

Si des listes de distribution préexistantes de l'UNIL (p.ex. etudiants@unil.ch) sont abonnées à vos newsletters, il est primordial de vérifier dans les réglages avancés de MailPoet (MailPoet > Réglages > Avancés), que l'option "Suivi analytique de l’engagement" soit mis sur "basique", car elle engendre des problèmes majeurs de performance.

Affichage des newsletters sur le site

Dernièrement, mais pas le moins intéressant, il vous est possible d’afficher automatiquement vos newsletters passées sur votre site WordPress. Pour ceci, le shortcode indiqué sous « Archive page shortcode »1 doit être ajouté dans une page de votre site. Si vous utilisez l’éditeur classique un simple copié/collé suffira. Par contre, avec le nouvel éditeur Gutenberg, le shortcode doit figurer dans une boîte de « code court ». Plus en détail, la possibilité vous est offerte de filtrer les newsletters selon le type de liste, par exemple pour n’afficher que la newsletter « générale » et non pas celles plus spécifiques. La sélection de la liste provoquera un nouveau shortcode spécifique à cette liste2.

web_wp_MP_archive.png

Une seconde solution, manuelle, est également possible. Après envoi de votre newsletter, vous pouvez revenir dans le menu E-Mails de MailPoet et obtenir le lien de celle-ci sous "Aperçu" :

Web_WP_MailPoet_Apercu.png

Le lien de la newsletter sera celui de votre navigateur dans la barre d'adresse située en haut de votre écran.

 

Documentation complémentaire

En complément à notre documentation, vous pouvez également vous référer à la base de connaissances de MailPoet.

Multilinguisme facile avec TranslatePress

TranslatePress_featured.png

TranslatePress est un plugin de multilinguisme pour Wordpress, à l'instar de WPML. Il se démarque des autres extensions du genre en proposant une interface de traduction visuelle facile à prendre en main, et une configuration légère. TranslatePress permet de traduire n'importe quelle chaîne de texte visible sur votre site, y compris celles des menus, du thème, des autres extensions, ainsi que des shortcodes.

Si TranslatePress est facile à utiliser, il est aussi plus limité en fonctionnalités que WPML. Ainsi, TranslatePress est généralement préférable pour les projets de traduction simples (site entièrement traduit), et WPML pour les cas complexes (site partiellement traduit). Notre équipe peut également vous conseiller quant à la solution qui conviendrait le mieux à votre projet spécifique.

Contrairement à WPML, TranslatePress n'offre pas d'outils avancés pour la gestion des traductions, et ne permet pas de vérifier l'état global de la traduction (les chaînes de texte ou pages qu'il reste à traduire). Ces outils sont particulièrement utiles sur les sites avec beaucoup de contenu à traduire, dans quel cas WPML peut demeurer l'option à préférer.

Si vous recherchez en revanche la simplicité et la facilité d'utilisation et de mise en place, TranslatePress se présente comme la meilleure solution pour les cas courants.

Des informations complémentaires sont disponibles dans la documentation officielle de l'extension (en anglais seulement).

Installation & configuration

Afin de pouvoir utiliser TranslatePress sur votre site, il est nécessaire d'en faire la demande à helpdesk@unil.ch.

Une fois l'extension activée par notre équipe, vous pourrez accéder aux réglages de TranslatePress, sous Réglages > TranslatePress afin de définir les langues de votre site.

trp-access-settings.png

  1. Pour commencer, définissez le langage par défaut de votre site (généralement français).
  2. Choisissez les autres langues dans lesquelles vous souhaitez traduire votre site.

trp-settings-lang.png

Message d'erreur

Il est à noter qu'un message d'erreur peut s'afficher dans les réglages de Translatepress:

trp-license-message.png

Ce message n'a aucune importance, et l'extension continuera de fonctionner normalement.
L'apparition de cette notification est indépendante de notre volonté, et est liée à la configuration particulière de l'extension avec nos serveurs multi-sites, mais toutes les fonctionnalités premium restent activées.

Traduction

Avec cette extension, la traduction se fait depuis sur les pages de votre site, et non depuis une interface séparée. Vous pouvez y accéder depuis la barre d'administration, depuis le tableau de bord (dashboard), qui vous emmènera sur la page d'accueil, ou directement depuis la page que vous souhaitez traduire.

trp-access-traduction-from-dashboard.pngtrp-access-traduction-from-page.png

Interface
  1. Ce champ permet de sélectionner la langue depuis laquelle vous allez traduire.
  2. Sélectionnez la chaîne à traduire. Pour cela, vous pouvez soit survoler votre page avec la souris et cliquer sur l'icône de crayon bleu, soit à l'aide des boutons "suivant" et "précédent", ou du menu déroulant.
  3. La traduction se fait dans cette boîte, qui vous montre la chaîne sélectionnée dans la langue de départ (choisie au point 1), et vous permet de remplir les champs correspondants pour les autres langues.

trp-translation-interface.png

Avertissement: modification du texte original

Attention: à cause du fonctionnement de TranslatePress, si le texte original est modifié, les traductions des paragraphes affectés ne seront plus affichées (puisqu'elles ne correspondent plus à la chaîne de caractères originale). Elles seront remplacées par le nouveau texte dans la langue d'origine.

Il est alors nécessaire de récupérer les anciennes traductions via la mémoire de traduction, puis de leur ajouter les modifications souhaitées. Ce fonctionnement est la grande faiblesse de TranslatePress, il est donc primordial de le connaître, afin de s'éviter du travail supplémentaire. Nous conseillons de n'entreprendre la traduction du contenu qu'une fois que celui-ci est terminé et corrigé dans sa langue d'origine.  Modifier plusieurs fois un texte qui aurait été déjà traduit peut prendre beaucoup de temps.

trp-translation-memory.png

Traduction des extraits d'articles

N'oubliez pas de traduire également les extraits d'articles qui pourraient s'afficher de manière automatique sur la page "blog" de votre site, ou dans un bloc "Boucle de requêtes" !

Ceci est dû au fonctionnement de TranslatePress, qui considère que le texte original (1) et l'extrait (2) sont des chaînes de caractères différentes. Si le début du texte original est modifié, l'extrait généré automatiquement le sera aussi, et les traductions de l'extrait ne seront plus affichées, et devront être révisées.

trp-excerpt-translation.png

Cas spécial

Dans le cas où des indices ou exposants se trouveraient dans le texte à traduire, TranslatePress considère par défaut que ces indices et exposants sont des chaînes à traduire séparément. Ce comportement est problèmatique par exemple dans le cas de 1er, 2e, 3e, 4e etc. Pour TranslatePress, ces trois "e" sont une seule et même chaine, et serait traduite vers l'anglais en p.ex. 1st, 2th, 3th, 4th, ce qui n'est pas idéal. Pour pouvoir traduire chaque exposant séparément, vous pouvez cliquer sur l'icône de flèche verte qui s'affiche en survolant la chaîne de texte en question, qui permet de traduire le bloc de texte en entier.

trp-block-translation.png

Sélecteur de langage

Par défaut, le sélecteur de langage de TranslatePress se présente comme un menu flottant. Vous pouvez choisir l'apparence ou changer le sélecteur, dans les réglages de TranslatePress (voir la documentation officielle du sélecteur de langage pour plus de détails).

Un cas d'utilisation courant est la présentation du sélecteur de langues comme un élément de menu. 

trp-menu-switcher.png

TranslatePress permet de réaliser ce type de présentation. Pour ce faire, l'extension ajoute un élément "Language Switcher" dans le constructeur de menu Wordpress (Apparence > Menus). L'exemple ci-dessous permet d'obtenir un sélecteur de langage qui affiche la langue actuelle, et les autres langues dans un menu déroulant:

  1. Ajouter toutes les langues, y compris "Langue actuelle", élément de menu qui affiche la langue actuellement sélectionnée dans le menu.
  2. Organiser les éléments de menus ajoutés de telle façon que toutes les langues soient des sous-éléments du menu "Langue actuelle".

trp-menu-switcher-config2.png



Questions fréquentes sur l'édition WordPress

Quelques questions ou problèmes courants que vous rencontrerez peut-être lors de l'édition de votre site WordPress UNIL.


1. Editer un site WordPress hors du réseau UNIL: le VPN UNIL est nécessaire

Pour des raisons de sécurité, l’édition des sites web WordPress UNIL doit s’effectuer:

Important:
L’installation de l’application client Ivanti Secure Access est requise, le simple accès à la passerelle web crypto.unil.ch sans avoir installé Ivanti ne donne pas accès à toutes les fonctionnalités d’édition de WordPress.

 

Sans titre.001.png

2. Se connecter pour éditer

3. Ajouter des droits d'édition

Pour ajouter des droits d'édition à une personne qui doit pouvoir éditer votre site, merci d'utiliser cette marche à suivre: Gestion des droits d'édition dans WordPress.


4. Problèmes temporaires (seront corrigés prochainement ou dans une future version)

Galeries d'images "en colonnes"

Dans certaines galeries d'images créées avant le passage à WordPress 6.1 (=avant mi-novembre 2022), les images précédemment affichées côte à côte sont maintenant affichées sous forme d'une colonne verticale.

Pour rectifier ceci, il faut aller dans les CSS personnalisées et ajouter ce correctif:

/* WP 6.1 Gallery Bugfix */
body .is-layout-flex {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 10px;
}


Bonnes pratiques pour la gestion des médias dans Wordpress

Une gestion rigoureuse des fichiers médias permet d’améliorer les performances de votre site, de réduire l’espace disque utilisé et de limiter l’impact environnemental du Web. Ce guide présente les bonnes pratiques à adopter lors de l’importation et de la gestion d’images sur un site WordPress.

TL;DR: Une image individuelle sur le Web ne devrait généralement pas dépasser une taille de 200ko.

Pourquoi optimiser les images ?

Les images sont l’un des principaux facteurs de poids d’un site web. Lorsqu’elles sont mal optimisées (fichiers trop lourds, formats inadaptés, dimensions excessives), elles peuvent :

Bonnes pratiques générales pour les images

Pour simplifier ces optimisations, nous recommandons l’outil Squoosh : une application web gratuite, simple d’utilisation, qui permet de compresser, redimensionner et convertir les images dans des formats plus adaptés au Web. Même avec les réglages par défaut, Squoosh permet généralement de réduire considérablement le poids des images sans perte visible de qualité. Il constitue donc une excellente solution tout-en-un pour préparer vos images avant de les importer dans WordPress.

Choisir un format adapté

Compresser les images

Avant d’importer une image dans la médiathèque, il est recommandé de la compresser.

Redimensionner les images

Fonctionnement de WordPress et implications

Multiplication des versions d’images

Lorsqu’une image est téléversée, WordPress en génère automatiquement plusieurs versions à différentes tailles (miniatures, moyennes, grandes, etc.). Certains thèmes ou plugins peuvent ajouter d’autres formats personnalisés.

Images dans la corbeille

tuto_corbeille_medias_wp.png

Recommandations concrètes

Avant de demander une extension de l'espace à disposition pour votre site, nous vous recommandons de :

  1. Supprimer les fichiers volumineux inutiles ou mal optimisés

  2. Vider la corbeille de la médiathèque

  3. Optimiser les images conservées : compression, conversion au format WEBP, redimensionnement

  4. Suivre ces bonnes pratiques pour les prochaines importations

Des plugins comme Media Cleaner (nettoyage des fichiers non utilisés) et Media Deduper (suppression des doublons) peuvent aider à faire le tri, mais doivent être utilisés avec précaution. Ces plugins peuvent être activés sur votre site sur demande au helpdesk.