Créer un site d école avec WORDPRESS Décembre 2009 sebastien.delsinne@ac-amiens.fr Pour compléter ce guide, voici plusieurs ressources consacrées à Wordpress : Un tutoriel en vidéos : http://www.videonoob.fr/tutoriel-wordpress.html D autres tutoriels ici : http://www.infos-du-net.com/actualite/dossiers/81-blog-wordpress-tuto.html http://codex.wordpress.org/user:thegreypilgrim/fr:mainpage Un blog plein de conseils et d astuces pour utiliser au mieux Wordpress : http://wordpress-tuto.fr/ Un manuel consacré à Wordpress au format PDF est téléchargeable ici (août 2008) : http://spectacu.la/wp-content/uploads/wordpress-2_6_manuel-dutilisation.pdf Imaginons le scénario suivant : vous souhaitez créer un site-blog pour votre école, l Ecole Paul Ochon (25 rue Tabaga, 99 999 SAINT-HURE) ; cette école compte 3 classes, chaque classe correspondant à un des cycles de l école primaire. Votre site comptera une partie «blog» qui présentera la vie de l école et de ses classes au moyen d articles, ainsi qu une partie «menu» composée de pages statiques (une page pour le menu de la cantine, une autre pour l APPEL, une autre pour des renseignements pratiques et administratifs ). Votre adresse mail est prête, vous avez bien réfléchi à ce que pourra contenir votre site, vous avez mis de côté quelques photographies de votre école sur votre disque dur ou une clef USB, vous pouvez désormais ouvrir gratuitement un compte chez Wordpress. Si vous n avez pas d adresse mail, vous pouvez en créer une en deux minutes chez Gmail : http://mail.google.com/mail/signup Il vous est en effet possible de créer et d héberger gratuitement un site-blog avec Wordpress, sans publicité. Cette offre vous alloue 3 Go d espace disque, ce qui est largement suffisant pour un site d école. Pour accéder à cette offre, munissez-vous d une adresse mail valide, et suivez ce lien : http://fr.wordpress.com/signup/ 1
Remplissez les champs : Cliquez sur «Suivant» pour obtenir cette page : 2
Le «Domaine du blog» vous indique quelle sera l adresse de votre site ; pour l exemple choisi ici, ce sera : http://ecolepaulochon.eklablog.com, ce qui est surligné en jaune correspond à l identifiant choisi plus haut. Renseignez le titre de votre blog, il s affichera en haut de sa page d accueil. Cliquez sur «S inscrire». Ne répondez pas au mail qui vient de vous être envoyé, contentez vous de suivre le lien : Votre compte est activé, votre site installé : Vous pouvez le visiter, ou accéder à son panneau d administration. Pour accéder à ce panneau d administration, vous pouvez mémoriser cette adresse dans vos favoris : https://fr.wordpress.com/wp-login.php Vous accédez alors à cette page : 3
Renseignez l identifiant et le mot de passe (choisi lors de l inscription), cliquez sur «Se connecter». Le panneau d administration s affiche ; plusieurs modules le composent : 1 3 2 4 4
Cliquez sur l onglet «Réglages» (module 3) : Vous accédez aux options générales ; vous pouvez remplacer le slogan par l adresse de votre école, choisir le format de la date et de l heure. N oubliez pas d enregistrer les modifications : Le fait d avoir cliqué sur l onglet «Réglages» a ouvert un menu déroulant : 5
Nous y jetterons un œil ultérieurement. Visitons plutôt votre site pour la première fois ; pour cela, cliquez sur «Aller sur le site» (en haut à gauche) : Vous accédez à la page d accueil de votre site ; ouvrez cette page dans un nouvel onglet, ce qui vous permettra de jongler entre votre panneau d administration et votre site sans avoir à les fermer et les ouvrir à chaque fois : Le nom de votre école apparaît en entête, suivi de son adresse. La partie principale est celle où s afficheront les pages et les articles. En ce moment un article y est affiché, intitulé «Hello world!», il a été rédigé dans la catégorie «Uncategorized». Le module «Pages» sera rebaptisé «Menu» prochainement. Le module «Catégories» accueillera le «Blog de l école» et prendra ce nom. On y trouvera donc les articles triés par catégories (cycles 1, 2 et 3). A ce propos, il convient de bien différencier «page» et «article». Une page présente un contenu statique, par exemple une page de présentation de l école avec photos, plan d accès, adresse ou une page de formulaire de contact. Généralement, les pages ne contiennent pas d éléments 6
nouveaux fréquemment ajoutés au site. L article contient des informations classées sémantiquement et chronologiquement, par exemple un récit de la sortie piscine des cycle 3 de la semaine dernière. La structure sémantique des articles est définie à l aide des catégories et marqueurs pour faciliter, notamment, la navigation des internautes et l identification des occurrences par les moteurs de recherche (Spectacu.la). Pour commencer, nous expliquerons ici la mise en place d un module «Menu» qui contiendra les pages suivants : accueil renseignement pratiques et administratifs menu de la cantine. Votre site compte déjà une page statique, elle s intitule «About» ; jetez un œil à cette page depuis votre site : Nous allons rebaptiser cette page «Accueil» ; retournez au panneau d administration, cliquez sur l onglet «Pages» du module 2 : Cliquez sur «Modifier» : 7
Remplacez «About» par «Accueil», remplacez le contenu par un texte de votre choix. Quand les modifications sont effectuées, cliquez sur «Mettre à jour» (en haut à droite) : Avant cette mise à jour, vous pouvez utiliser plusieurs options de mise en page, elles apparaissent après un clic sur cette icône : Merci à Spectacu.la pour ce schéma. Pour insérer une photo, cliquez sur cette icône : La fenêtre pop-up suivant s ouvre : 8
La photo peut être se trouver sur votre ordinateur (disque dur, clef USB, CD-ROM ), cliquez alors sur «Parcourir» ; sélectionnez le fichier puis cliquez sur «Envoyer» : La fenêtre qui vient de s afficher permet de positionner la photo, de régler sa taille, de renseigner sa description Quand ces réglages sont faits, il suffit de l insérer dans la page. 9
La page «About» est donc transformée en page «Accueil», mais cette page n est pas celle qui apparaît quand les visiteurs arrivent sur votre site. C est encore un article qui s affiche dans ce cas. En effet, après avoir tapé http://ecolepaulochon.wordpress.com dans la barre d adresse du navigateur, voici ce que l on obtient : Un petit réglage s impose. Cliquez sur «Réglages» (module 3 du panneau d administration, puis sur «Lecture» dans le menu qui vient de se dérouler : Choisissez la deuxième option, puis la page «Accueil» en page d accueil. Ce ne sont donc plus les derniers articles du blog qui apparaissent quand on arrive sur votre site. Pensez à enregistrer les modifications (icône tout en bas de la page). Nous allons maintenant ajouter les autres pages prévues. Dans le module 2, cliquez sur «Pages» puis sur «Ajouter» : 10
Renseignez le titre de la page, le contenu, cliquez sur «Publier» (en haut à droite). Votre page est désormais présente sur votre site dans le menu : Procédez de même pour les autres pages. Rebaptisons à présent le module «Pages» «Menu». Dans la partie administration, cliquez sur l onglet «Apparence» du module 3. Un menu déroulant apparaît, cliquez sur l onglet «Widgets» : Il vous est alors possible d ajouter, enlever, rebaptiser des modules («widgets») qui apparaîtront en permanence sur votre site, que l on soit sur une page statique ou sur un article : 11
De nombreux modules sont proposés, testez-les à volonté, quelques uns sont indispensables, d autres ne sont que des gadgets. Pour installer un module la technique du glisser-déposer est requise : positionnez le pointeur de la souris sur le module choisi, maintenez le bouton gauche enfoncé et déplacez le module dans la «Colonne latérale» (en haut à droite) : Procédez ainsi pour le module «Pages». Quand le module est installé, ce panneau s ouvre : 12
Choisissez un titre pour le module, décidez si vos pages apparaissent dans l ordre alphabétique («Titre de la page») ou de la plus ancienne à la plus récente («Ordre de la page»). Cliquez sur «Enregistrer». Retournez sur la page d accueil de votre site : tous les modules ont disparu, sauf le module «Menu». Il faut donc installer les autres avec la technique du glisser-déposer et les rebaptiser si besoin. Installez le module «Catégories» et renommez-le «Blog de l école», cochez le premier onglet pour économiser de la place en page d accueil (des pages trop chargées découragent les visiteurs), et enfin enregistrez. D autres modules sont bien utiles à vos visiteurs : «Recherche» (pour effectuer une recherche sur votre site à partir de mots-clés), «Liens», «Articles récents» Voici un exemple de configuration : 13
Le blog est installé, profitons-en pour paramétrer les catégories d articles et commencer à publier. Observez votre menu sur la page d accueil du site vous remarquerez qu un premier article a été publié automatiquement lors de la création du site, il s intitule «Hello Word!», il est classé dans la catégorie «Uncategorized». Vous accédez à l article en cliquant sur son titre : Nous allons maintenant remanier les catégories, et garder cet article pour le modifier. Dans le module 2 du panneau d administration, cliquez sur «Articles» puis «Catégories» : 14
Les catégories du site s afficheront les unes sous les autres. Placez votre pointeur sur la catégorie «Uncategorized», puis cliquez sur «Modifier» : Conformément au scénario présenté au début de ce guide, rebaptiser la catégorie «Cycle 1», puis cliquez sur «Mettre à jour la catégorie». En se rendant sur le site on constate que la catégorie «Cycle 1» est en place dans le menu déroulant du blog : L article «Uncategorized» est donc rangé dans cette catégorie. Nous le modifierons toute à l heure. Créons les catégories «Cycle 2», «Cycle 3» et «Ecole» (des articles peuvent en effet ne concerner qu un seul cycle correspondant à une classe dans notre scénario -, ou toute l école à la fois). Cliquez sur «Catégories» dans l onglet «Articles du module 2 : 15
Remplissez le champ «Nom de la catégorie» puis cliquez sur «Ajouter une catégorie», pour chaque nouvelle catégorie. A présent modifions l article «Uncategorized». Cliquez sur «Articles» puis «Modifier». La liste des articles publiés dans le blog apparaît (cette liste ne compte qu un seul article pour l instant) : Cliquez sur «Modifier», cette fenêtre traitement de texte s affiche : Modifiez comme bon vous semble, puis cliquez sur «Mettre à jour» (en haut à droite). Un commentaire se trouve déjà sous l article, détruisez-le en cliquant sur «Trash» en bas de page : Publions un article dans la catégorie «Ecole» : Cliquez sur «Articles» puis «Ajouter». Choisissez un titre, rédigez le contenu, insérer des images (soit à partir d une url, soit en la téléchargeant dans votre bibliothèque de médias : la procédure est la même que celle suivie lors de la rédaction d une page). 16
Quand l article est prêt, cochez la catégorie qui lui correspond, puis publiez-le : Dans le menu déroulant du blog, sur votre site, n apparaissent que les catégories «Ecole» et «Cycle 1». Les autres sont en sommeil, elles apparaîtront quand des articles y seront publiés et classés. Vous savez désormais gérer le fond de votre site, vous maîtriser son volet éditorialiste (vous êtes en effet capable de publier des pages et des articles, de créer des catégories, de gérer les commentaires) et son contenu (création ou suppression des modules), bravo! Modifions maintenant la forme de votre site. Le thème graphique définit le «look» de votre site. Vous pouvez en changer, celui installé par défaut étant un peu triste. Cliquez sur «Apparence» (en haut du module 3) : 17
Le thème actuel apparaît en haut à gauche de cette fenêtre. Près de 80 thèmes sont proposés, testez-les, certains faisant disparaître quelques «widgets». Quand un thème vous plaît, testez le avec la fonction «Aperçu», ou sélectionnez-le en cliquant sur «Activer» : Avec cette formule hébergée de Wordpress, les réglages graphiques sont limités, mais choisir la formule blog, c est privilégier la fonction éditorialiste de ce type de site, en mettant au second plan la création graphique. Et en illustrant ses pages et articles, vous rendrez votre blog attrayant! Bonne création avec Wordpress! J espère que ce petit guide vous sera utile. Pour des renseignements supplémentaires, vous pouvez me contacter par mail : sebastien.delsinne@ac-amiens.fr 18