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é.

PAGE D’ACCUEIL

ACTU PRINCIPALE

Image de l’actu principale : 1140 x 235 px / 72 dpi. Gabarit sous GIMP (calque de couleur #e53078, au-dessus de la photo, en mode fusion produit).

Pour la changer : « Apparence > Personnaliser > Home tagline ».

Ainsi que le texte au dessus (Tagline Text).

Le contenu de l’actu se trouve dans la page « Accueil ».
Modifier le lien en le sélectionnant puis outil crayon.

ACTUS SECONDAIRES

« Apparence > Widgets > Home Page Section »

« Icon and button color » : choisir la rubrique associée pour avoir la tâche de la bonne couleur. Possibilité d’ajouter des icônes.

PIED DE PAGE

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

FONCTIONS AVANCÉES (mode texte ou html)

Créer une ancre

Positionner l’ancre dans la page en mode « Texte ».

Exemple d’une ancre à l’endroit de mon Titre 2 « Trucage » :

Regarder en mode texte !

Trucages

Insérer dans le menu du haut de page le lien vers l’ancre « Trucages » :

Écrire « Trucages », sélectionner le lien, insérer un lien et mettre dans l’adresse web : « #trucages ».
Entre chaque lien du menu, il y a un caractère spécial à insérer, un rond (« bullet »).

Insérer dans la page un bouton de type « Téléchargez »

En mode « Texte », cibler le lien que vous voulez transformer.

Regarder en mode texte !

Exemple de lien : Mon lien

Ajoutez ceci : class=«btn default» :

blabla

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

Attention : code à copier sur la page « actualités de l’Uffej » pour activer le calendrier

En ajoutant un événement, vous créerez automatiquement une nouvelle date dans la liste d’événements en page d’accueil. Cet événement pointera selon votre choix, soit vers une page de descriptif de l’événement, soit vers une des pages du site.

Menu principal > M.E Calendrier > Ajouter un événement.

Cela fonctionne comme un article lambda. Ajoutez un titre et du contenu.

À droite, vous pouvez associer votre événement à une couleur qui apparaîtra sous forme de pastille en page d’accueil. Cliquez sur « Sélectionner une couleur » et entrez la référence de votre choix :

Références couleurs

Ateliers & diffusions : #dddf4b
L’Oeil Vagabond : #f07d00
Formations : #e72d78
Outils & Ressources : #f5f5f5
École & Cinéma : #6e358c
Collège au cinéma : #5dc4e1
Lycée Savina : #3b7696
Passeurs d’Images : #009a93

Définir une image à mettre en avant (en bas à droite). Elle apparaîtra en haut de votre page d’événement et dans l’actualité principale de la page d’accueil quand son tour arrivera ! (j’y reviendrai :). Il faudra une image d’au moins 800px de large en mode paysage.

Détails de l’événement (en bas de la zone de texte principale)

• Entrez une date de début et une date de fin
• Cochez « masquer l’heure de début », « masquer l’heure de fin »

Menu de Détails à gauche > Liens

Vous pouvez mettre n’importe quelle page du site vers laquelle l’événement en page d’accueil pointera. À remplir dans le champ Lien de l’événement. Si vous ne remplissez rien, l’événement pointera automatiquement vers une page de descriptif de l’événement.

Dans le champ Plus d’infos, vous pouvez ajouter également un lien vers une des pages du site, lien qui apparaîtra dans la colonne latérale de la page de descriptif de l’événement. Possibilité de modifier le libellé « Plus d’infos ».

Dans le cas d’un événement qui dure sur plusieurs jours, semaines, mois…

Exemple : l’Oeil Vagabond, Inscriptions à Collège au cinéma

Menu de Détails à gauche > Événement récurrent

• Cochez « Événement récurrent »
• Récurrence quotidienne ok
• Fin de l’événement, entrez une date de fin
• Cochez « Afficher uniquement une occurence pour cet événement »

Au lieu d’avoir le même événement indiqué tous les jours et de rallonger la liste en page d’accueil, l’événement n’apparaîtra qu’une fois et changera automatiquement de date quotidiennement. Pratique !

Dans le cas d’un événement qui a lieu sur plusieurs jours mais non consécutifs.

Exemple : atelier les 5, 16 et 29 juin

Créez un événement en date du 5 juin, dupliquez-le autant de fois que nécessaire dans la liste d’événements et changez juste les dates.

L’actu principale en page d’accueil

L’actu principale est ajoutée automatiquement. Il s’agira de la prochaine à venir. Dans le cas de deux événements qui ont lieu à la même date, vous pouvez choisir lequel apparaîtra en actu principale.

Allez dans votre événement > Menu Détails > Date et heure

Mettez l’heure la plus proche pour l’événement que vous souhaitez mettre en avant (même si les heures sont masquées).

Si vous souhaitez faire figurer en actu principale une info autre qu’un événement issu du calendrier, rendez-vous dans Pages > Les actualités de l’UFFEJ. Supprimez le code :

et ajoutez du texte. Le bandeau-image est toujours possible. Pour rappel : 1140 x 235 px. Pour afficher le bandeau : Apparence > Personnaliser > Home tagline.
Vous voulez remettre le prochain événement du calendrier ? Recollez le code :

12

juin

Ecole Les Pensées

lundi

Intervention en classe

Ecole Les Pensées | Meslin

En savoir plus

.

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

_________________________________

Vous pouvez décider du nombre maximun d’événements à faire figurer sur la page d’accueil :

Menu > M.E Calendrier > Shortcodes > Liste des événements page d’accueil, modifiez le champ « Nombre maximun ».

 

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 ! 😉