Le système de gestion de contenus (CMS) utilisé s’appelle WordPress. Il vous permet de mettre à jour rapidement et simplement les contenus du site.

Pour accéder à l’interface d’administration, dans votre navigateur préféré taper :
www.uffejbretagne.net/wp-admin

Identifiant : Laurence
Mot de passe :

Possibilité de modifier votre mot de passe dans « Utilisateurs ». Cliquer sur votre profil.
Possibilité d’avoir plusieurs administrateurs avec des identifiants différents (une adresse mail différente pour chaque utilisateur).

Les rôles de chacun

  • Administrateur : Accès à toutes les fonctionnalités de l’administration WordPress
  • Éditeur : Peut publier et gérer toutes les pages et tous les articles du site
  • Auteur : Peut publier et gérer ses propres articles dans l’espace ressources. Pas d’accès aux pages.
  • Contributeur : Peut écrire et gérer ses propres articles dans l’espace ressources mais ne peut pas les publier. Pas d’accès aux pages.

PAGES

Toutes les pages du site apparaissent dans « Pages ». Vous pouvez accéder aux pages en cliquant sur leurs noms.

Onglet « modification rapide » : possibilité de sélectionner rapidement le bon modèle de page pour afficher la colonne latérale correspondante (voir plus loin) + autoriser les commentaires en bas de page.

Onglet « Mettre à la corbeille » : met la page dans une corbeille, une fois la page dans la corbeille, vous pouvez la supprimer définitivement. Pour afficher ou cacher des pages du site, jouer plutôt avec le menu.

MENU PRINCIPAL

Supprimer, ajouter, déplacer des pages du menu

« Apparence > Menus »

Cliquer sur la flèche de la page puis « supprimer ». Supprime la page du menu. Mais la page existe toujours !!
Pour ajouter une page, à gauche, cochez la page, puis « ajouter au menu ». La page se place tout en bas du menu. À vous ensuite de la déplacer au bon endroit (glisser-déposer).

Changer le nom d’une page, pourquoi ça ne marche pas ?

Chaque page a un nom et dans le menu chaque page a également un titre de navigation hérité du nom de la page. Changer le titre d’une page change le titre dans le menu, sauf si le titre de navigation dans le menu a déjà été modifié, alors ce dernier prend le pas sur le nom de la page.

TOP MENU

En plus du menu principal, vous avez le « Top Menu » qui affiche les pages en haut du site (Qui sommes-nous ?…). Le sélectionner pour le modifier de la même façon.

Vous pourrez par la suite ajouter dans le « Top Menu » un lien vers votre chaîne Viméo : copier-coller le lien viméo dans « liens personnalisés » + remplir « élément du menu ».

Toujours penser à « Enregister le menu » après une modification.

TEXTE

Mise en forme dans l’éditeur de texte (type Word)

Pour mettre en page, bien comprendre la notion de bloc. Les blocs principaux sont :

  • Les titres
  • Les paragraphes (texte seul)
  • Les photos
  • Les vidéos
  • Les galeries
  • Les paragraphes (textes + photos alignées à gauche ou à droite)
  • Le bloc pre (préformaté)
  • La citation

Les blocs s’empilent les uns au-dessus des autres.

Pour passer au bloc suivant, passer une ligne en tapant ENTRÉE.
Si vous souhaitez rester dans le même bloc mais passer à la ligne : Maj + ENTRÉE.

Dans la barre d’outils de l’éditeur de texte, cliquer sur l’icône tout à fait à droite pour afficher plus d’outils. On retrouve les outils standards d’un éditeur de texte. La balise « lire la suite » n’est pas fonctionnelle.

Copier-coller un bloc de texte

Sous mac, copiez-le d’abord dans Text edit > format > convertir au format Texte. Ça nettoiera tout le formatage superflu (sous PC, utilisez le Bloc notes). Néanmoins, le texte ainsi collé peut être interprété comme un bloc unique. Dans ce cas, supprimer et remarquer les passages à la ligne.

Mise en page, bon à savoir

Si vous constatez des espacements trop grands, à la fin de pages notamment, sélectionnez le vide après le contenu et supprimez-le.

Si vous avez un souci avec des espacements, une mise en page capricieuse, sélectionner la zone qui pose problème et utilisez l’outil « nettoyer le formatage » (gomme).

Le bloc textes + photos alignées à droite ou à gauche

Ce bloc fonctionne bien seulement si le texte « enroule » la photo. Taper une fois « ENTRÉE » doit suffire pour passer au bloc suivant, sinon il y aura des problèmes d’affichage sur les petites résolutions (espacements trop grands).

Titrage

Dans le menu déroulant, mise en forme automatique des titres :

  • Titre 2 : double-trait de la couleur de la rubrique
  • Titre 3 : couleur de la rubrique, corps plus petit
  • Titre 4 : en gras, corps plus petit
  • Titre 5 : en gras, corps plus petit
  • Pre : cadre de la couleur de la rubrique, police logo uffej couleur blanche

Possibilité d’ajouter un format « citation ».

Couleurs

Seules les couleurs des rubriques sont disponibles. Les liens s’affichent par défaut en rose, couleur des éléments de navigation du site.

Liens

  • Écrire le texte du lien
  • Sélectionnez-le
  • Cliquez sur l’outil « Insérer/modifier un lien »
  • Remplir l’adresse web complète et le champ titre (un + pour le référencement)
  • Cochez la case « Ouvrir le lien dans une nouvelle fenêtre/un nouvel onglet » si la cible du lien est située hors du site. Enfin, cliquer sur « Ajouter un lien »
  • Vous pouvez aussi choisir de faire un lien vers l’un des contenus du site, en l’occurrence une des pages en bas de la liste.

PDF

  • Cliquez à l’endroit où vous souhaitez insérer le lien vers le doc
  • Cliquez sur « Ajouter un média » en haut de la barre d’outils
  • Allez chercher le doc sur votre ordinateur : « Envoyer des fichiers »
  • Modifer le titre
  • « Insérer dans la page »

Dans les noms de fichiers, pas d’espace, d’accents ou de majuscules.

Toujours penser à « Mettre à jour » votre page après une modification.

Note : il y deux modes dans l'éditeur de texte : 
VISUEL (le vôtre) / TEXTE (HTML)
Si un jour vous ouvrez un article avec du code incompréhensible :) il vous suffit de basculer en mode visuel (en haut à droite de l'éditeur de texte).

VIDÉOS

Vous pouvez importer dans vos pages des vidéos à partir de Youtube ou de Viméo.

Pour supprimer une vidéo, cliquer dessus dans la page, puis sur la petite croix qui s’affiche. Ensuite, copier-coller l’adresse url de la vidéo. « Mettre à jour ». C’est tout !

PHOTOS

Il y a sur le site deux types de photos, les petites photos de type « icône » au format rond et les photos « de contenu ».

« photos-icônes » : voir gabarit sous GIMP en format rond / fichier de type .png (transparent) / 150px / 72 dpi.

« photos de contenu » : 800 px de large au format paysage, 800 px de hauteur au format portrait / 72 dpi. Si vous avez des photos au format « bannière », intéressant de les préparer en 1200px de large. Elles prendront toute la largeur du site si vous enlevez la barre latérale.

Possibilité de photos de contenu au format rond (cf L’Oeil Vagabond).

À partir de votre fichier, WordPress génère plusieurs tailles. Au choix.

Insérer une photo dans une page

« Ajouter un média ».

Sélectionner la photo, depuis votre ordinateur (« Envoyer des fichiers ») ou dans la bibliothèque de médias.

L’alignement

À partir de 800px, aucun alignement, la photo prendra toute la largeur. Pour les photos plus petites, aligner à gauche, au centre ou à droite.

Lier à

Lier au fichier média permet d’agrandir la photo dans une lightbox.
En-dessous de 800px, lier à « Fichier média ». Sinon Aucun.
Exception : pour les petites photos de type icône : « aucun » (pas d’intérêt à agrandir).

Possibilité d’ajouter une légende aux photos. Elle est reprise dans la lightbox au-dessus de la photo.

lier une image à un pdf

Il faut faire exactement comme si c’était du texte :

Ajouter l’image dans la page
– Cliquer sur l’image puis sur l’outil “ajouter un lien”
– Coller le lien du pdf dans la boîte de dialogue, puis « appliquer »
– Cliquer à nouveau sur l’image, puis sur le petit crayon
– Ajouter une légende : “Cliquer sur l’image pour voir le pdf”

Les galeries

Les galeries permettent de regrouper plusieurs photos d’un même thème et de les faire défiler dans une lightbox.

« Ajouter un média > Créer une galerie » > Sélectionner les photos > Créer une nouvelle galerie »

Lier à « Fichier média ».
Choisissez le nombre de colonnes.
Taille : miniature

« Insérer la galerie »

Comme les photos, une fois dans la page, les galeries sont modifiables en cliquant dessus, puis sur le petit crayon. Vous pouvez les supprimer en cliquant sur la croix.

Remplacer une photo

Pour remplacer une photo, vous n’êtes pas obligés de la supprimer et d’aller en chercher une autre. Cliquer dessus, outil crayon puis « Remplacer ».

ESPACE RESSOURCES

L’espace ressources est construit sur le modèle d’un blog. Aller dans « Articles ». Laisser le format « par défaut ». Renseigner la catégorie et les mots-clés (un + pour le référencement).

Les catégories reprennent principalement les rubriques du menu principal. Les mots clés offrent un contenu transversal, une arborescence parallèle. Éviter qu’un mot-clé soit utilisé comme catégorie.

La photo de l’article est à insérer dans « Image à la une » tout en bas à droite.

BARRE LATÉRALE

Chaque page est associée à un modèle. Ce modèle de page correspond à une barre latérale dont le contenu se situe dans « Apparence > Widgets ». Les Widgets sont des petits modules de contenu dynamique (reprenant du contenu de votre site) ou pas (du texte simple).

Ce qui est principalement utilisé, c’est le widget « MWP-Icons », le plus complet. Il vous permet de choisir dans une bibliothèque d’ icônes, d’afficher un titre, du contenu texte, un lien vers un pdf ou une adresse url. Remplir les différents champs.

Pour un lien vers un pdf, aller chercher au préalable son adresse dans la bibliothèque de médias.

Important : « Icon and button color », laisser par défaut.

Cocher « Automatically add paragraphs ». Il Prendra en compte vos passages à la ligne.

Vous pouvez faire le choix de supprimer une barre latérale. Dans « Pages > modification rapide », choisir comme modèle : « Full page ». Le site s’affiche en pleine largeur. Le contenu de la barre latérale n’est pas supprimé.

PIED DE PAGE

« Apparence > Widgets > « Footer 1, 2 et 3 »

FONCTIONS AVANCÉES

Créer une ancre

Cliquez sur le bloc titre où vous souhaitez créer une ancre. Dans le panneau de droite « Bloc », déroulez « Avancé » et remplissez le champ « Ancre html » en minuscule sans accents et sans espace.

Ensuite, allez sur le lien qui pointera vers l’ancre. Remplissez le champ lien avec le nom de l’ancre précédé d’un #. Ex : nom de l’ancre = suedage, nom du lien = #suedage.

ACCORDÉON

Aller dans Menu > Easy Accordion.
Vous y trouverez la liste de vos accordéons.
Ajouter un nouvel accordéon : “Ad new”.
Saisir le titre, il ne s’affichera pas dans le site, c’est juste pour vous y retrouver dans les différents accordéons.

Onglet “Accordion settings”

Accordion mode : choisir “All folded” (les sections sont toutes fermées à l’ouverture de la page).

Plus haut, pour ajouter des sections : Content > add new item, il ne vous reste plus qu’à renseigner titre et description.

Vous pouvez copier-coller du contenu d’une page (images et texte) pour le mettre dans une section d’accordéon.

Add new item si besoin d’une autre section.

Penser à cliquer sur Publier à droite pour enregistrer votre accordéon. Rien ne s’affiche encore à ce stade.

Pour l’affichage, tout en bas copier-coller le shortcode dans la page de votre choix (effacer au besoin le contenu existant dans la page). Une page avec juste un accordéon ne contient donc que ce shortcode.

Les images

Si vous souhaitez intégrer une image particulière, copier-coller son lien présent dans la bibliothèque.

Pour rappel, les sections d’accordéon ne peuvent pas afficher de vidéos et sont destinées à un contenu essentiellement informatif (images + texte).

Mettre à jour le lien de votre dernière newsletter

En page d’accueil, vous avez un lien vers votre dernière newsletter. Pour le mettre à jour, copier le lien de votre newsletter présent dans Mailchimp et coller-le dans Apparence > personnaliser > Call to Action > URL Button.

CALENDRIER ACCUEIL

En ajoutant un évènement, vous créerez automatiquement une nouvelle date dans la liste d’évènements en page d’accueil.

Menu principal > Évènements > Nouvel évènement.

Ajoutez un titre et du contenu.

Détails de l’évènement (en dessous du contenu)

Remplir les dates (si évènement sur une seule journée, mettre la même date de début et de fin).

Remplir les champs « horaire » et « emplacement ».

Remplir « Résumé personnalisé » en bas. C’est le texte qui apparaîtra en page d’accueil.

Pour finir, dans la colonne latérale « Évènement », définir l’image mise en avant.

Par défaut, en cliquant sur le titre de l’événement ou son image, vous arrivez sur la page de l’événement. Si vous souhaitez que l’événement cible une autre page du site, il suffit de mettre le lien dans la page de l’événement, champ : more info link. Puis de cocher à la fois « Rediriger le titre de l’évènement vers le lien plus d’informations » et « Redirect featured image to the more info link ».

L’actu principale en haut de la page d’accueil

Menu principal > Pages > À la une

Il y a un bloc Image + texte. Possibilité de remplacer l’image dans la barre d’outils en cliquant dessus.

N’oubliez pas de « Mettre à jour » pour publier ou après toute modification.

Cartographie Passeurs d’images / Cartouches ateliers

Création des pages

Chaque bloc de contenu correspond à une page.
L’ordre d’af fichage dépend de la date et de l’heure de publication. La page la plus récente
s’af fichera en premier…
Le titre de la page correspond au titre sous l’image (le porteur de projet).
Dans les attributs de la page à droite :
Page parent > « Nouvelle cartographie »
Modèle > Full page
Ordre > C’est l’ordre d’af fichage des pages dans l’administration
« Image mis en avant » en bas à droite : Une image de 600 x 390px.
Dans le corps de texte, le titre « h3 » correspond au lieu ou au nom du projet.
« Publier la page » puis repérez le numéro de la page dans la barre url :
http://uffejbretagne.net/wp-admin/post.php?post= 2983 &action=edit (Ici, c’est le numéro
2983.)

Ajout de la page à la cartographie

Menu > Content Views > All views.
Cliquez sur « Cartographie Passeurs d’images ».
Dans le champ « Include only », insérez les pages créées, en séparant leur numéro par
une virgule sans espace. L’ordre n’a pas d’importance. Puis « Enregistrer ».
Une fois la cartographie terminée, vous pourrez changer le nom de la page et l’insérer
dans le menu.

Exemple pour films d’ateliers :

Question : Je voudrais utiliser la nouvelle mise en page pour la page « films d’ateliers » dans la rubrique Ateliers.
J’ai donc créé 3 pages qui correspondent à 3 cartouches comme indiqué dans le tuto, mais quand je vais dans « content Views » je retrouve obligatoirement « cartographie passeurs d’image ».Comment fait-on pour choisir une autre page comme par exemple »Films d’Ateliers version 2″ ?
Dois-tu intervenir ou peut-on le faire nous-même et si oui comment ?

Réponse : Il faut ajouter une nouvelle “VIEWS” (« ajouter » dans le menu). Ensuite, créer une nouvelle page “Films d’ateliers” et copier le code court correspondant à ta nouvelle view dans la page ( le code court est une balise de ce type : indiqué à droite du titre de la VIEW) .

Ensuite, comme expliqué dans le tutoriel, inclure tes identifiants de pages (cartouches) dans la nouvelle view.

Ne pas oublier d’insérer la page films d’ateliers dans le menu ! 😉