Guide de. L utilisateur. LYcée ampère. Lycée des métiers AndrÉ AmpÈre. LYcée ampère. Nicolas Hanzel

Transcription

1 LYcée ampère LYcée ampère Lycée des métiers AndrÉ AmpÈre VENDÔME Nicolas Hanzel

2 Sommaire 1. Présentation du site p Wordpress? p L espace d administration p Ajouter un article p Modifier - Ajouter une page p Page formation p Page diverses p Gestion du menu p Outils pratiques p. 18 Annexe1 : WP Slider p. 19

3 1.présentation du site Le site à été développé et conçu dans le but de redonner une identité visuelle au Lycée des métiers André Ampère. De par cette mission, le lycée ampère dispose d un nouveau logotype : LYcée ampère Le logotype ci-dessus a été réalisé pour persister dans le temps, les couleurs employées sont contemporaines et dynamiques. Le code couleur (#RVB) est le suivant : #F29324 # #CCCCCB Le site internet est construit avec l utilisation du CMS Wordpress. 3

4 2.Wordpress? Wordpress est un CMS (Content Management System - Système de gestion de contenu en français). C est un outil permettant de propulser le site internet de façon dynamique. Les pages du site ne sont pas statiques et sont toutes modifiables via une partie d administration du site (appelé back office). Pour y accéder, il faut rentrer dans l url du site wp-admin ce qui donne comme adresse : ( La particularité de Wordpress est en premier lieu sa communauté active sur internet. Cette dernière fournit constamment de l aide et des outils tel que des extensions ( diaporama, thème ). Pour vous aidé à mieux comprendre les fonctionnalités de Wordpress, rendez vous à la page suivante : net/faq/ Avec un peu de pratique, l administration et la mise à jour du site se fait très rapidement. 4

5 3.L espace d administration Guide de Comme cité précédemment, le site possède un espace d administration. ( Une fois l identifiant et mot de passe renseigné vous arriverez sur le tableau de bord du back office. 5

6 Le menu de navigation du back office se trouve dans la colonne de gauche. Tableau de bord : Fournit un aperçu du site ; le nombre de page du site, ses articles, etc. Cette page ne sera que très peu utilisée. Articles : Cette page regroupe les articles du site ( les actualités ). Médias : Les médias sont les images, les PDF du site. Ils sont représentés sous forme de bibliothèque. Liens : Fonction non exploitée du site. cette partie permet d ajouter des liens sous forme de liste. Pages : Toute les pages du site se regroupent ici (formation etc.) Commentaires : Fonction non exploitée du site. Les commentaires sont modérés dans cette section avant d être publiés. WP Slider : Extension installée sur le site. Son utilisation est expliqué en Annexe 1 Apparence : L apparence du site : on y retrouve le thème, les menus et les Widgets 1 utilisés. Les options du thème permettent de modifié notamment le texte de la page d accueil. Extensions : On retrouve ici les extensions installés sur le site. cette partie a été configurée, vous n aurez pas à la modifier. Utilisateurs : Se regroupe ici la liste des utilisateurs du site. Les utilisateurs peuvent être des auteurs, des éditeurs et administrateurs. Outils : La partie qui sera intéressante se trouvera dans le sous menu Exporter, cette page permet la sauvegarde des pages et des articles du site. Pratique si une erreur a été faite sur des pages! car dans la section Importer : il faut juste joindre le fichier généré avec Exporter. Réglages : Ici se trouve la configuration de base du site. Comme les extensions : cette partie a été configurée, vous n aurez pas à la modifier. Fa lite : Extension. Utilisez pour l affichage des actualités. cette partie a été configurée, vous n aurez pas à la modifier. Widget 1 : Les widgets sont des blocs spécifiques insérés dans l architecture du site. Pour le lycée Ampère, les widgets sont en bas de page, et sont des blocs de texte HTML et PHP. 6

7 Cette partie du guide présentera les étapes principales que vous serez amené à effectuer pour la mise à jour du contenu du site. 3.1 Ajouter un article Rendez vous ici : Article > Ajouter. Voici la page d édition d un article (quasi identique à celle des pages) 7

8 Tout d abord renseignez le titre de l article. Ensuite vous pouvez rédiger son contenu. Wordpress fournis un éditeur WYSIWYG ( What You See Is What You Get). Cet éditeur permet de publier un article avec une mise en page spécifique sans avoir de connaissances en HTML. N hésitez pas à tester toute les options de l éditeur. Vous pouvez voir 2 onglets en haut à droite Visuel et HTML. la partie HTML montre la version HTML de votre contenu. AJOUTER UNE IMAGE Pour ajouter une image dans votre éditeur : il suffit de cliquer sur Envoyer/Insérer (en haut à gauche). Une fenêtre apparaît : Il faut alors «Uploader» votre image ( la transférer sur le serveur ).Glissez/déposez votre image dans l encadré ou bien cliquez sur Sélectionner les fichiers. (Il faut éviter que l image ne soit trop lourde : privilégiez une largeur de 1000px maximum) 8

9 Renseignez le champ titre ( 3 mots maximum sur ce que représente l image ) Par défaut, Wordpress ajoute un lien sur l image, retirez le en cliquant sur Aucun. Vous pouvez modifier l alignement par rapport au texte de votre image, également sa taille. Une fois les champs correctement renseignés, cliquez sur «Utiliser comme image à la une» ( ceci permet d utilisez l image dans la page actualité du site! ) puis finalement, cliquez sur Insérer dans l article. Votre image est alors bien présente dans l éditeur : elle est positionné la ou votre curseur se trouvait. ( si vous survolez l image, vous pouvez modifier les options configurés ci-dessus) 9

10 Avant de publier l article, dans les blocs de droite, il faut renseigner sa catégorie ( une seule pour le lycée Ampère ) actualités. Le bloc discussion : Wordpress coche par défaut les cases ci-dessus, le site n utilise pas les commentaires ni les rétroliens et pings. Il faut alors les décocher. Une fois l article prêt : cliquez sur Publier. Vous venez d ajouter un article! Vous pouvez toutefois désactiver sa publication dans la page Article. 10

11 3.2 Modifier - Ajouter une page Rendez vous ici : Page > toutes les pages. Nous allons modifier une page simple : la page «La maison des lycéens» Exactement comme les articles, nous retrouvons la même architecture. Il faut aussi décocher les cases du bloc «Discussions». Par contre un bloc «Attributs de la page» est présent. Parent : pour les sous pages (idéal pour catégoriser les pages. exemple la page Service est la page parente des pages règlements, Aides et Bourses etc..). Si vous savez ajouter un article, vous n aurez aucun problème pour les pages. Attention : la page créée n est pas publier sur le site, il faut l ajouter dans Apparence>Menu vous verrez plus tard comment gérer l affichage des pages. 11

12 3.2.1 Page Formation Les pages «formation» sont spécifiques. Elles comportent du code HTML qui n est pas utilisable avec l éditeur de contenu. Éditer la page Bac Professionnel Maintenance des Matériels. Passer l éditeur en HTML ( onglet en haut à droite de l éditeur ). Analysons le code HTML : [slider id= 586 name= Bac MdM ] : Ceci est un Shortcode 1 utilisé par l extension WP Slider ( Son utilisation est expliqué en Annexe 1 ). Shortcode 1 : Les shortcode sont des expressions intégrées dans le contenu des articles, pages. ils sont utilisés par les extensions Wordpress. 12

13 Les balises ci-dessus utilisent des classes définit dans la configuration du site. Elles sont utilisées pour mettre en forme le titre et le sous titre de la page. la balise <div class= clear ></div> est obligatoire après les titres. (pour des raisons de mise en page) Pour obtenir ces onglets, le site utilise du Javascript. ce dernier analyse le code HTML présent dans la page et renvoie aux visiteurs une mise en page par onglets. Reprenez le code de la page précédente. On remarque une <div class= tabs >. C est cette balise qui va englober le contenu avec onglet. Tout d abord, il y a une liste <ul> avec les titres des onglets <li>. Chaque titre possèdent un href= #tabs-{numéro}. C est cet attribut qui fera le lien entre le titre et son contenu. le contenu se trouve juste après la liste. Il faut préciser son id pour le lier à son titre. Une fois les balises de contenu renseignées, il faut fermer la <div class= tabs > en écrivant </div> La modification des pages spécifiques requiert quelques bases en HTML. vous trouverez des notions en suivant ces liens : - (Notion) - (Base) - (Avancé) 13

14 Les pages formations possèdent également un bloc Champs personnalisés. Ce bloc est indispensable pour que la recherche par domaine fonctionne! La recherche utilise les valeurs de ces champs pour ses résultats. Il faut donc utiliser les valeurs diplome et domaine pour chaque page formation! Il faut respecter la casse (majuscule/minuscule). Voici les différents domaines : Maintenance Automobile Maintenance des matériels Production automatisée Bois Voici les différents diplome : CAP Brevet Professionnel Baccalauréat Professionnel BTS Métiers de la sécurité Commerce Restauration 14

15 3.2.2 Page diverses Voici une liste des pages spécifiques liées au site du Lycée Ampère. (comportant du code HTML qu il faut saisir à la main et non en utilisant l éditeur) les formations Matériels Métiers de la Sécurité Recherche par formations Recherche par metier (identique domaine) Diaporama Liens utiles Infos pratiques Attention lorsque vous les mettrez à jour! 15

16 3.3 Gestion du menu Rendez vous ici : Apparence > Menus. Le menu est géré de la façon suivante : une liste d élément. Un élément peux être mis sous un autre en effectuant un Glisser/déposer de ce dernier sous l élément parent. C est le cas pour les formations et les Services. Pour ajouter une page au menu, il faut développer le bloc de la colonne de gauche appelé Page. 16

17 Sélectionnez la page que vous souhaitez intégrer au menu. Puis cliquez sur Ajouter au menu. Cette action crée un nouvel élément dans le menu! A vous de le positionné ou bon vous semble. Attention à ne pas mettre trop d élément au 1er niveau (sans parent) car le menu risque d être trop large et de casser la mise en page du site! Les éléments existants dans le menu sont modifiables en les développant. Il se peut qu un élément possède une classe CSS (comme les formations) il ne faut surtout pas la changer car cette classe permet d avoir un rendu spécifique. 17

18 4 Outils pratiques Vous pouvez utilisez Word pour la création de tableau. Sous Word, créez un tableau. Sélectionnez le et copier coller le dans l éditeur de contenu de Wordpress. le tableau est affiché dans l éditeur. Vous pouvez ajouter des images et plus dans les différentes cases. (regardez par exemple la page Nos formations. Vous devez avoir toutefois des compétences de bases en HTML! Des logiciels comme Dreamweaver sont des générateurs de balises HTML. Vous pouvez très bien créer votre contenu sur un tel logiciel et copier coller son format HTML dans l éditeur de contenu de Wordpress. Les médias La bibliothèque de médias peut comporter des PDF (comme la page règlements) il faut les importer et récupérer leurs adresses URL ( Adresse web du fichier ) lorsque vous modifiez un média. Puis les insérez sous forme de liens dans votre page/article. Ce guide prends fin ici, n hésitez pas à consulter la communauté Wordpress pour d éventuelles informations sur Wordpress. N oubliez pas que des bases de langages HTML sont un plus pour la création de contenu. 18

19 Annexe 1 : WP Slider L extension WP slider permet de généré des diaporamas et les intégrés sous forme de Shortcode dans les pages du site. Rendez vous ici WP Slider. Et cliquez sur Bac MdM pour voir comment fonctionne l extension. Survolez un «Slide Label» et cliquez sur «Edit Slide» C est ici que vous pouvez modifier une image du diaporama. Si vous cliquez sur Add Slide (figure ci dessus), vous ajouter une image au diaporama. urvolez un «Slide Label» et cliquez sur «Delete Slide» vous supprimer une image Dans la colonne à droite (une fois le diaporama mis à jour ou créé) vous avez le Shortcode à copier coller dans l éditeur de contenu! 19