APEL Saint-Joseph Rennes Comment paramétrer le site Internet de l école Site hébergé sous WordPress v1.0 Philippe ARZUR 04/01/2011
Historique des versions Version Date Auteur Objet 1.0 04 Jan 2011 Philippe ARZUR Création du document Sommaire 1. Introduction... 3 2. Un site créé avec WordPress... 3 2.1. Connexion à l interface d administration... 4 2.2. Présentation rapide de l interface d administration... 5 3. Architecture du site de l école... 6 3.1. Barre de menu... 7 3.1. Contenu des pages... 8 4. Comment paramétrer le site?... 9 4.1. Gérer les pages... 9 4.1. Gérer les articles... 11 5. Les possibilités courantes de WordPress... 12 5.1. Contenu d une page ou d un article... 12 Fonctionnalités d un traitement de texte standard... 12 Lien hypertexte... 13 Emplacement des éléments multimédia... 14 Insérer une image depuis votre ordinateur... 15 Insérer une image depuis la bibliothèque du serveur du site de l école... 17 Insérer une image à partir du web... 17 Insérer une vidéo YouTube à partir du web... 20 Insérer un document PDF à partir de votre ordinateur... 21 Paramétrer le corps d une page ou d un article avec plusieurs colonnes... 21 Gérer les redirections de pages... 22 5.2. Gestion des utilisateurs... 24 5.3. Gestion des commentaires des utilisateurs... 25 2
1. INTRODUCTION Ce document a pour objectif de donner les clefs pour administrer le site Internet de l école Saint-Joseph à Rennes. Il présente dans un premier temps dans les grandes lignes la gestion d un site créé avec l outil WordPress. Ensuite il décrit l architecture proposée pour le site de l école, explique la manière de le paramétrer et enfin donne de l information sur les différentes possibilités courantes avec WordPress. Ce guide vous permettra j espère une prise en mains rapide et en douceur du site Internet de l école Saint-Joseph. 2. UN SITE CRÉÉ AVEC WORDPRESS WordPress est un système de gestion de contenu libre et reposant sur une base de données. WordPress est surtout utilisé comme moteur de blog, mais ses fonctionnalités lui permettent également de gérer n'importe quel site Web. Il est distribué selon les termes de la GNU GPL. Un blog ou blogue est un site Web constitué de billets agglomérés au fil du temps et souvent classés par ordre antéchronologique (les plus récents en premier). Chaque billet (appelé aussi «note» ou «article») est à l'image d'un journal de bord ou d'un journal intime un ajout au blog. La blogueuse/le blogueur (i.e.: la personne s'occupant du blog) y délivre un contenu souvent textuel, enrichi d'hyperliens et d'éléments multimédias, sur lequel chaque lecteur peut généralement déposer des commentaires. Pour le site Internet de l école, WordPress est utilisé à la fois comme un site Web avec un ensemble de pages informatives (localisation, cantine, sorties scolaires,...) et comme un blog (billets annonçant un événement, une information nouvelle). WordPress est un outil possédant deux volets : l affichage du site lui-même et une interface d administration qui permet l enrichissement du site par un utilisateur identifié et dûment autorisé. 3
Dans les chapitres suivants, vous allez découvrir comment est construit le site Internet de l école avec l interface d administration WordPress. 2.1. Connexion à l interface d administration À partir du site http://www.ecole-saint-joseph-rennes.fr, cliquer sur le lien «Connexion» dans le chapitre «Administration» ou en saisissant cette adresse dans le navigateur http://www.ecole-saint-joseph-rennes.fr/wp-admin. L écran de connexion suivant est affiché. Rentrer l identifiant et le mot de passe qui vous ont été attribués et cliquer sur «se connecter». En cas d oubli du mot de passe, vous avez la possibilité de vous faire envoyer à votre adresse mail définie précédemment un nouveau mot de passe. Ce mot de passe doit être temporaire et WordPress vous invite ensuite à le modifier dans l interface d administration. 4
Il faut savoir que les mots de passe sont enregistrés de façon cryptée dans WordPress. Il n est en aucun cas possible, pour des raisons de sécurité, de vous indiquer quel est votre mot de passe actuel. 2.2. Présentation rapide de l interface d administration Lors de la connexion à l interface d administration, le tableau de bord est affiché par défaut. Sur la gauche, un menu permet de sélectionner les concepts à manipuler via cette interface. Chaque concept est décrit dans les chapitres suivants. Tableau de bord Gestion des articles (billets) Bibliothèque des éléments importés (images, documents PDF, ), Gestion des liens sur des sites Internet externes Gestion des pages statiques du site Commentaires sur les billets ou sur les pages Changement de l apparence du site (ne pas utiliser) Extensions WordPress (ne pas utiliser) Gestion des utilisateurs et de leurs droits Outils pour gérer le site, et notamment les redirections Réglage du site (ne pas utiliser) Paramètres du thème WordPress «Choco» utilisé pour le site (ne pas utiliser) 5
3. ARCHITECTURE DU SITE DE L ÉCOLE Bandeau Le site Internet de l école est composé de plusieurs parties, comme le montre l écran cidessous : Barre de menus Menus et sousmenus Zone de recherche Corps Liens divers Chaque page créé est affichée dans le corps du site lorsqu elle est sélectionnée. Chaque page est également présente dans un menu de la barre des menus. Les pages sont ordonnées en menus et sous-menus. À droite, une barre de liens propose une zone de recherche de contenu du site ainsi que des liens divers (classement des articles par mois, catégories des articles, autres sites internet et administration du site). 6
3.1. Barre de menu Comme dit précédemment, l ensemble des pages créées forment la barre de menus ainsi que les sous-menus. Les menus ne sont pas affichés par ordre alphabétique mais ordonnées selon le souhait de l administrateur. Dans l interface d administration, il est possible de numéroter l ordre des pages afin de gérer leur disposition dans la barre de menus et dans les sous-menus. Conseil : ordonner les pages de 10 en 10 afin de permettre d intercaler d autres pages facilement si besoin. Disposition de la barre de menu (exemple non définitif) - Accueil (0) - Agenda (10) - École (20) o Localisation (10) o Règlement (20) o Cantine (30) - Événements (30) - Sorties Scolaires (40) o Sorties Musée (10) o Sortie Odorico (20) o 2009-2010 (30) Sortie Puy du fou (10) - Administration (50) o Documentation Process (10) - À Propos (60) Pour une meilleure ergonomie pour utilisateur, certaines pages ne doivent pas afficher de contenu mais être redirigée vers une autre page. Par exemple, la page École doit être redirigée directement vers la page Localisation. Cela s appelle une redirection, nous verrons cette fonctionnalité plus loin. Un cas particulier existe sur ce site : le menu Administration (lié à la page éponyme) n apparaît que si l utilisateur est identifié comme administrateur du site. 7
3.1. Contenu des pages Chaque page est modifiable par l administrateur. Seule la page d articles est gérée automatiquement avec les articles créés affichés de façon antéchronologique. Les pages et les articles peuvent contenir du texte, des liens hypertexte (lien vers une autre page ou vers un autre site Internet), des images, des vidéos, des animations, du texte multi-colonnes Quelques exemples : Carte géographique Lien hypertexte, Vidéo YouTube Image, multi-colonnage 8
Les pages et les articles utilisent ce que l on appelle des modèles, c est-à-dire une forme particulière de présentation. Ces deux types d éléments utilisent généralement toujours les mêmes modèles pour assurer la cohérence du site. Toutefois, il existe des modèles particuliers, qui ont été créés par le concepteur du site de l école (moi ) afin de personnaliser l affichage. La page Agenda utilise un modèle très particulier car elle affiche les jours du mois sélectionné contenant les événements présents, avec aussi la possibilité d ajouter, de modifier ou de supprimer ces derniers. La page Localisation intègre de façon spécifique une carte géographique localisant l école. Nous verrons l utilisation des modèles plus loin. 4. COMMENT PARAMÉTRER LE SITE? Ce chapitre présente pas à pas la manière de paramétrer le site de l école. Avec la gestion des pages et des articles, vous pouvez déjà commencer à remplir le contenu du site. 4.1. Gérer les pages Ce chapitre décrit la façon de créer ou modifier une page et de l ordonner au sein des menus. Pour cela, connectez-vous à l interface d administration (cf. 2.1 Connexion à l interface d administration) et cliquez sur le bouton Pages. La liste des pages du site apparaît alors. On peut voir l arborescence des pages parentes en enfants (menus et sous-menus) grâce aux tirets. Un clic sur le nom de la page permet d éditer cette dernière afin de la modifier. Le bouton Ajouter permet de créer une nouvelle page. 9
Chaque page a un nom modifiable (ne pas modifier la page Administration qui a un traitement spécial de confidentialité). Une zone texte permet de saisir de l information et de gérer les styles comme dans un logiciel de traitement de texte. Page déjà publiée en modification Page en cours de création Vous avez la possibilité de prévisualiser la page telle qu elle apparaîtra dans le site. Il est possible aussi d enregistrer une page en cours de création en mode brouillon pour la terminer plus tard. La notion de visibilité permet d afficher la page à tous, de la garder pour le créateur ou de restreindre son accès par mot de passe. Cliquez sur Publier ou Mettre à jour pour rendre la page disponible aux utilisateurs, selon les restrictions énoncées plus haut. 10
Les attributs de la page permettent de gérer la hiérarchie des menus. Ici, la page Localisation est la fille de la page École. Cela signifie que cette page sera un élément du menu École. L ordonnancement s effectue en saisissant un numéro d ordre d apparition (ici 10). Enfin, on applique le modèle de page que l on souhaite lui attribuer. 4.1. Gérer les articles La gestion d un article s effectue de la même façon que celle d une page, en plus simple. Il n y a pas d ordonnancement à gérer, ni de modèle, ni de hiérarchie. Par contre il est possible de gérer les catégories et les mots clefs d un article. Les catégories permettent de classer les articles par thèmes. Les mots-clefs permettent de définir les mots pertinents pour qualifier un article. Ces deux fonctionnalités permettent à l utilisateur de retrouver les articles parlant d un sujet précis lorsqu il utilise la fonction de recherche du site. La gestion des catégories et des mots clefs s effectue respectivement via le menu Articles->Catégories et Articles->Mots-clefs. 11
5. LES POSSIBILITÉS COURANTES DE WORDPRESS Ce chapitre présente les possibilités courantes de l outil WordPress. Si une fonctionnalité n existe pas nativement dans l outil WordPress, on peut compter sur la communauté mondiale de cet outil pour mettre à disposition des extensions permettant de répondre au besoin. Dans les descriptions, le nom des extensions est mentionné lorsque le cas se présente. Certaines extensions n existent qu en anglais dans l interface d administration, mais leur utilisation est très intuitive et ne transparaît pas sur le résultat final du site. Toutes les fonctionnalités décrites ci-dessous sont disponibles pour le site Internet de l école. Si vous trouvez qu il y a un manque fonctionnel, vous pouvez toujours me contacter pour trouver l extension adéquate, la tester et l installer sur le site. 5.1. Contenu d une page ou d un article Ce chapitre présente les possibilités de gestion du contenu d une page ou d un article. Fonctionnalités d un traitement de texte standard La barre d outils du traitement de texte se présente sous la forme suivante : Dans ce chapitre, nous ne verrons que les fonctionnalités standard d un traitement de texte tel que Word. La plupart des autres fonctionnalités sont décrites dans des chapitres à part. Le tableau ci-dessous décrit ces fonctionnalités : Mettre en gras Mettre en italique Souligner Barrer Liste à puces Cadrer le texte à gauche Centrer le texte Cadrer le texte à droite Justifier le texte Liste numérotée 12
Bloc de citation Coller du texte simple Enlever la mise en forme Indenter le texte Annuler Langue du texte Changer la couleur du texte Insérer un caractère particulier Coller du texte au format Word Mode plein écran Desindenter le texte Rétablir Changer le format du texte Lien hypertexte Il est souvent pratique pour l utilisateur de cliquer sur un lien hypertexte pour naviguer dans le site. Par exemple, lorsqu un article parle de la mise à disposition des nouveaux menus pour la cantine, l expression «nouveaux menus de la cantine» peut être cliquable et renvoyer à la page Cantine. De même, un lien peut envoyer sur un autre site Internet. Dans ce dernier cas, il est préférable que la page de l autre site Internet s ouvre dans une nouvelle fenêtre. Pour les liens sur un autre site, il faut utiliser les icones associer ou dissocier un lien hypertexte au texte sélectionné. pour respectivement Pour les liens sur les pages ou les articles du site de l école, il est préférable d utiliser l icone qui permet de rechercher facilement un article ou une page (extension Link to Post). Commencez par sélectionner un mot ou un groupe de mot et cliquer sur l icône dialogue suivant s affiche :. Le La cible du lien est l adresse de la page du site que vous souhaitez référencer. La cible doit être paramétrée avec «Nouvelle fenêtre» afin qu un nouvelle page s affiche lors de la sélection de ce lien. Le titre est le message qui s affiche lorsque vous passez la souris sur le lien avant de cliquer. 13
Cliquez ensuite sur Insérer. Affichage dans l éditeur de texte Affichage sur le site de l école L icône sert à supprimer le lien inséré sur le texte sélectionné. Pour lier un article ou une page du site, cliquez sur l icône dialogue suivant s affiche : (extension Link to Post). Le Si vous souhaitez lier un article, cliquez sur l onglet Article, pour une page, cliquez sur l onglet Page. Dans la zone Contenu, saisissez un mot-clef ou une expression permettant de retrouver l information. Dans l exemple, on recherche une page qui parle de «cantine». Dans la zone résultat, la page Cantine apparaît après avoir lancé la recherche. Sélectionnez la page en cliquant sur le lien. Le lien hypertexte est inséré à l emplacement du texte sélectionné. Dans le site de l école, si vous cliquez sur ce lien, la page Cantine s affiche. Emplacement des éléments multimédia Les éléments multimédia (image, photo, vidéo, musique, animation, ) peuvent être présents sur le site de l école. Les éléments sont soit hébergés sur le site, soit sur un autre site sur lequel un lien est établi. Exemple : une photo peut être stockée sur le site de l école 14
ou bien vous pouvez faire un lien vers une vidéo d un clip musical sur le site de stockage vidéo YouTube. Les photos ou images présentes sur votre ordinateur doivent être envoyées dans la Gallerie du site de l école : c est un espace de stockage qui recense tout ce qui a été envoyé sur l ordinateur qui héberge le site de l école. Une vidéo YouTube reste sur le serveur YouTube, vous devez uniquement faire un lien pour l insérer dans une page ou un article. Insérer une image depuis votre ordinateur L image en question se trouve sur votre ordinateur. Pour l insérer dans un article par exemple, votre image devra être au préalable transférée sur le site de l école (ben oui, personne n a accès à votre ordinateur!). Pour cela, cliquez sur le bouton Ajouter une image Le dialogue suivant s affiche. Par défaut, l onglet Depuis votre ordinateur est sélectionné. 15
Cliquez sur le bouton Parcourir pour sélectionner l image qui se trouve sur votre ordinateur. Sélectionnez le fichier représentant l image souhaitée et le dialogue suivant s affiche : Le dialogue affiche la miniature de l image que vous avec sélectionnée depuis votre ordinateur. Le titre est l information qui permettra de retrouver cette image plus tard dans la bibliothèque. Le texte alternatif est le texte qui s affiche lorsque les utilisateurs ne souhaitent pas afficher les images à l écran (c est plutôt rare maintenant, ne rien renseigner). La légende est le texte qui s affiche sous l image sur le site. La description, optionnelle, donne des indications sur l image. Ce n est pas utilisé sur le site. La cible du lien est l endroit dans la bibliothèque du site où l image est stockée. Laisser la valeur par défaut. L alignement est un choix de positionnement de l image dans la page ou l article. La taille permet d afficher l image en taille réelle ou réduite. Par exemple, la taille réelle dans une page et l image en miniature dans l article qui annonce la page. Une fois les informations renseignées, cliquez sur Insérer dans l article. L image apparaît alors avec les options choisies. Notez que l image est désormais présente dans la 16
bibliothèque sur le serveur qui héberge le site Internet de l école. Vous pouvez à tout moment la réutiliser sans avoir à la sélectionner à partir de votre propre ordinateur. Insérer une image depuis la bibliothèque du serveur du site de l école Pour réutiliser une image déjà présente dans la bibliothèque du serveur du site Internet de l école, cliquez à nouveau sur le bouton Ajouter une image. Choisissez l onglet Bibliothèque. Les images de la bibliothèque s affichent. Vous pouvez rechercher une image particulière en saisissant un mot dans la zone de texte et en cliquant sur Chercher parmi les médias. Dans l exemple suivant, on recherche les images dont le nom contient «vacan». L image «vacances» a été trouvée. Si vous souhaitez ajouter l image vacances dans une page ou un article, cliquez sur Afficher. Les détails de cette image apparaissent. La marche à suivre pour insérer cette image dans la page ou l article est identique à celle vue précédemment. Insérer une image à partir du web Imaginons que vous souhaitiez insérer une photo de Norah Jones sur votre site, parce qu elle vient se produire lors de la prochaine kermesse de l école. Vous chercher «norah jones» sur Google, puis cliquez sur «images» en haut à gauche. Là, vous trouvez une photo d elle qui vous plait, vous cliquez dessus. Un site Internet s affiche : musicmoz. 17
Un clic droit avec la souris et demandez Affiche l image. L image seule s affiche et l adresse de cette image est disponible dans la barre d adresse. C est cette photo que vous souhaitez afficher sur le site. Sélectionnez et copier l adresse de cette photo. Cliquer une nouvelle fois sur le bouton Ajouter une image. 18
Le dialogue suivant s affiche : Sélectionner l onglet Depuis le Web. Coller l adresse dans la zone Adresse web de l image. Renseignez les autres champs comme vu plus haut et cliquez sur Insérer dans l article. Le résultat est le suivant dans l éditeur de texte : 19
Une fois l article enregistré, la photo s affiche sur le site : Il est toujours possible de modifier ou supprimer cette photo. Pour ce faire, cliquez sur la photo. Le symbole permet de modifier la photo et celui-ci de la supprimer. Insérer une vidéo YouTube à partir du web Pour insérer une vidéo YouTube, le procédé est plus simple et tout aussi efficace. Allez sur le site YouTube, choisissez votre vidéo et copier l adresse de cette dernière. Coller-là dans la page ou l article et remplacez «http://» par «httpv://» (ajouter la lettre «v» - extension Smart Youtube). Dans l article ou la page, seul le lien apparaît. Sur le site, la vidéo est affichée et vous pouvez même la lancer directement tout en restant sur le site. 20
Le résultat est le suivant dans l éditeur de texte : Une fois la page enregistrée, la vidéo s affiche sur le site : Cool, non? Insérer un document PDF à partir de votre ordinateur Procédez comme pour une image. Paramétrer le corps d une page ou d un article avec plusieurs colonnes Plusieurs possibilités de présentation en colonne existent. Nous allons voir un exemple, à vous ensuite d essayer les autres combinaisons. Pour gérer les colonnes, le site utilise l extension Page Columnist (en anglais). Cette extension se base sur l option saut de page que l on obtient en cliquant sur le bouton (à ne pas confondre avec le bouton balise «more». 21
Entrez du texte comme montré dans l exemple ci-dessous : Chacune des 4 lignes est séparée par un saut de page. À droite se trouve le paramétrage de l extension Page Columnist. Sélectionnez l option Interior as Columns pour obtenir les lignes 2 et 3 sur deux colonnes. La page du site s affiche comme demandé. Vous avez le choix entre plusieurs présentation, de 2 à 6 colonnes. Gérer les redirections de pages Il est utile de rediriger une page vers une autre dans plusieurs cas. Le site de l école gère deux cas de redirection : 22
- La page Accueil n a pas de contenu, elle est redirigée vers la page des articles. - Les certains titres de menus sont composés d une page vide ; cette dernière est redirigée vers le premier élément de menu disponible. Menus/sous-menus Redirections existantes Accueil Pointe vers la page des articles Agenda École Pointe vers la page Localisation - Localisation - Règlement - Cantine Événements Sorties Scolaires Pointe vers la page Sorties Musée - Sorties Musée - Sortie Odorico - 2009-2010 Pointe vers la page Sortie Puy du fou - Sortie Puy du fou - Administration Pointe vers la page Documentation Process - Documentation Process À Propos La gestion des rediections est assurée par l extension Redirection. Son accès est disponible via le menu Outils->Redirection. 23
L écran suivant s affiche alors avec la liste des redirections : La page 2009-2010 des sorties scolaires est redirigée vers la page Sortie Puy du Fou. On remarque que ce sont les codes des pages qui sont utilisés et non pas leur nom affiché. Pour trouver le code de la page, ouvrez la page désirée et visualisez son Permalien (c'est-à-dire son URL pour y accéder depuis un navigateur). Sur cette page, on visualise bien la différence entre le nom de la page et son permalien. Attention! Si vous changez le nom de la page, le permalien n est pas modifié. Veillez à changer le permalien vous-même dans ce cas. 5.2. Gestion des utilisateurs Ce chapitre présente la manière de gérer les utilisateurs. Pour visualiser les utilisateurs déjà créés, cliquez dans le menu Utilisateurs, puis dans l élément Utilisateurs. Cliquez sur un utilisateur pour modifier ses propriétés. En tant 24
qu administrateur, vous avez la possibilité de modifier tous les utilisateurs, voire même les supprimer. Attention à ce que vous faites dans ce cas! C est à cet endroit également que vous pouvez changer votre mot de passe. Pour rappel, le mot de passe sera stocké de façon cryptée et ne pourra pas vous être communiqué ultérieurement. L identifiant est l information qui vous sert à vous connecter à l interface d administration. En fonction de ce qui est saisi (nom, prénom, pseudo), un menu vous permet de choisir le nom qui va s afficher publiquement, lors de la création d articles ou de commentaires. L adresse e-mail est obligatoire et doit être valide. En tant qu administrateur, vous allez recevoir des mails lorsqu un commentaire a été saisi sur un article par un Internaute. Ce mail sert également à recevoir les informations nécessaires lorsque vous avez oublié votre mot de passe pour vous connecter à l interface d administration. Cette information est donc importante. 5.3. Gestion des commentaires des utilisateurs Les Internautes peuvent laisser des commentaires sur les articles du site de l école. Ces commentaires sont «modérés», c'est-à-dire qu un modérateur (administrateur) doit valider le commentaire avant qu il ne soit affiché publiquement sur le site. C est une sécurité pour éviter les dérives possibles. Les commentaires rédigés par un administrateur du site ne sont pas modérés ; ils sont donc immédiatement rendus publics. On considère qu un administrateur est un modérateur et donc une personne de confiance. 25
Exemple de commentaire laissé par un Internaute (moi, non identifié en tant qu administrateur) au sujet de l article Documentation du site : L utilisateur a saisi son nom, son adresse email et son commentaire. Une fois enregistré, le commentaire apparaît pour l utilisateur courant, mais pour personne d autre tant que le commentaire n est pas approuvé par un modérateur. En tant qu administrateur, vous allez recevoir un mail qui indique qu un commentaire a été laissé sur le site concernant cet article. 26
Le sujet du mail contient le titre de l article concerné. Le contenu du mail affiche le commentaire. À partir de ce mail, vous pouvez approuver, supprimer ou isoler le commentaire. Une autre façon plus complète de gérer les commentaires est de se connecter à l interface d administration et de choisir le Tableau de bord. Il affiche notamment les commentaires en attente de modération. Pour accéder aux commentaires en attente, cliquer sur En attente. Pour chaque commentaire, vous pouvez l approuver (le commentaire est validé et visible par tous), le modifier avant de l approuver, le rendre indésirable (il ne sera pas affiché sur le site mais conservé) ou le supprimer. Vous pouvez aussi répondre au commentaire, la réponse sera alors affichée sur le site. 27