Sites web avec WordPress

Transcription

1 Sites web avec WordPress sur l'infrastructure du Centre informatique de l'unil Version mars WordPress Sommaire 1. Interface d'administration 2. Un blog avec des articles 3. Les widgets 4. Un site avec des pages 5. Médias (images et documents) 6. Menu de navigation 7. Extensions 8. Réglages avancés 9. Aide

2 1. Interface d'administration 3 Débuter l'édition du site 1. aller à l'adresse de connexion: exemples: s'identifier: nom d'utilisateur + mot de passe 3. arrivée sur le tableau de bord de l'interface d'édition: - articles pour créer ou modifier un article - pages pour créer ou modifier une page - réglages divers 4

3 Mode édition et mode aperçu La même page d'un site WordPress vue par la personne qui édite le site et par les visiteurs 5 Passer de l'édition à l'aperçu avec la barre d'outils la barre d'outils permet de passer de l'édition du site à l'aperçu et de l'aperçu à l'édition 6

4 Alternative: afficher l'édition et l'aperçu dans 2 onglets pour passer alternativement de l'interface d'édition à l'aperçu du site tel que le verront les visiteurs: 1. cliquer avec le bouton droit sur aller sur le site 2. dans le menu contextuel, choisir ouvrir le lien dans un nouvel onglet 3. l'interface d'édition est alors visible dans un onglet et l'aperçu du site dans un autre onglet 7 4. bouton actualiser du navigateur pour rafraîchir l'affichage d'une page du site que l'on vient de modifier Premier réglage: modifier le titre et le sous-titre du site - le titre du site - le slogan (=sous-titre) sont modifiables titre et slogan valider 8

5 2. Un blog avec des articles 9 Par défaut, WordPress est configuré en mode blog affichage des articles en page d'accueil: article du 21 février article du 20 février article du 19 février 10

6 Ecrire et publier un article 1. articles > ajouter 2. titre de l'article 3. texte de l'article 4. publier 11 Modifier un article publié 1. articles 2. modifier 3. modifier le contenu 4. mettre à jour pour publier les modifications 12

7 Editeur de texte: commandes de base gras, italique, couleur, listes, centrage,... se passent d'explications insérer un lien hypertexte insérer un lien lire la suite afficher la 2ème ligne d'icônes annuler la dernière opération saut de ligne = touches [majuscules] + [entrée] coller du texte importé depuis Word ou PDF (sans mise en forme) ou depuis une autre page web (avec mise en forme) insérer un caractère spécial 13 Dépublier un article sans l'effacer en utilisant le mode brouillon

8 Commentaires: principe exemple extrait de: 1 article 35 commentaires 15 Commentaires: réglages réglage général pour autoriser ou non les commentaires réglages complémentaires pour limiter les commentaires 16 Toujours utiliser l'extension anti-spam Akismet si on autorise les commentaires! (code d'activation à demander au helpdesk)

9 Catégories et mots-clés catégories mots-clés on peut créer des catégories et des motsclés, que l'on peut attacher aux articles - catégories = thèmes généraux - mots-clés = classification précise on pourra ainsi proposer un accès par catégorie ou par mot-clé, via les widgets Les widgets 18

10 Gestion des widgets La gestion des éléments des colonnes latérales s'opère par les widgets (affichés dans les colonnes latérales ou le pied de page) faire glisser les widgets dans la zone souhaitée pour les activer, et inversement pour les désactiver 19 Plusieurs widgets sont proposés par WordPress. Par exemple: - liste de catégories - liste d'articles récents - moteur de recherche - bloc de texte - etc. Les widgets activés vont (sauf exception) apparaître sur toutes les pages utilisant un modèle avec colonne latérale. 20

11 3. Un site avec des pages 21 Les pages sont accessibles par le menu principal 22

12 Créer et gérer des pages 1. pages > ajouter 2. titre de la page 3. texte de la page 4. publier 23 Liens internes ou externes dans le contenu 1. sélectionner texte du futur lien 2. icône de l'éditeur de lien 3. saisir (ou coller) l'adresse du lien 4. valider en plus des liens externes, l'éditeur de liens permet de créer des liens internes, vers les autres pages ou articles du site 24

13 Définir des sous-titres dans la page Il est possible de structurer une page en sections et sous-sections à l'aide d'intertitres, en niveaux décroissants numérotés de 3 à 6 1. sélectionner le texte sélectionner un niveau de titre: 3, 4, ou 5 éviter 1 et 2, réservés au titre du site et aux titres de pages 25 Mode "site" ou "blog": réglage de la page d'accueil On peut définir si la page d'accueil doit afficher une page de contenu comme (mode site) ou les articles les plus récents (mode blog) 1. réglages > lecture 2. choisir la nouvelle page d'accueil option: pour afficher des articles ailleurs que sur la page d'accueil, nous conseillons de créer une page vide, à sélectionner ensuite pour y afficher ces articles 26

14 5. Médias (images et documents) 27 Gestion de fichiers (images, PDFs) Les noms de fichiers doivent: - être suivis d'une extension (bilan.pdf, photo.jpg, etc.) L'espace disponible pour les fichiers est limité => surveiller son utilisation (ne pas conserver de fichiers à double, etc.). - éviter les accents et les caractères spéciaux ("-" et "_" sont autorisés). Formats de fichiers autorisés pour les images: - jpg (photos) - gif (logos ou schémas) - png (photos, logos ou schémas). Si nécessaire, il peut être augmenté sur demande (justifiée) au helpdesk Les fichiers volumineux (> 30 MB, par ex. vidéos) doivent être stockés sur d'autres serveurs, et appelés ensuite dans votre site. 28

15 Insérer une image redimensionnée (=plus petite que l'original) 1. placer le point d'insertion à l'emplacement souhaité 2. glisser-déposer le fichier depuis votre poste de travail régler les paramètres: - légende sous l'image (facultatif) - alignement par rapport au texte - lien vers l'image originale - choisir taille (miniature ou moyenne) 4. valider 30

16 Insérer une image non redimensionnée (=taille originale) 1. début identique à l'insertion d'une image redimensionnée 2. régler les paramètres: - pas de lien - taille originale 3. valider 31 Insérer un document PDF Premières étapes identiques à celles de l'insertion d'image, puis au besoin, modifier ce texte qui sera l'intitulé du lien éviter les formulations génériques du type "pour en savoir plus", car tous vos PDFs apparaîtront sous ce nom dans la bibliothèque de médias! 32

17 Ne pas stocker sur le serveur plusieurs exemplaires identiques d'images ou documents! Lors de l'insertion dans un article d'une image ou d'un PDF déjà présent sur le serveur, il faut passer par bibliothèque de médias pour le réutiliser, et non pas le charger une seconde fois (but: éviter les doublons). pour faire le ménage dans la bibliothèque de médias 33 Créer une galerie d'images sélectionner les images souhaitées créer la galerie 5. choisir media file insérer la galerie dans la page

18 6. Menu de navigation 35 Menu personnalisé Le menu par défaut ne permet pas le tri des pages => nous conseillons de créer manuellement un menu personnalisé, proposant en outre des options (catégories, liens externes). 1. créer un menu 2. y ajouter des éléments: - pages - catégories - liens externes 3. trier les éléments par glisser-déposer 4. choisir son emplacement dans le thème cocher pour ajout automatique des nouvelles pages de 1er niveau (autres pages: à ajouter manuellement)

19 7. Extensions 37 La liste des extensions à disposition sur nos serveurs est consultable sur le site unil.ch/infowp. Seuls les extensions installées sur nos serveurs sont disponibles pour réaliser votre site. Vous n avez pas la possibilité d en installer d autres par vous-même. Veuillez nous contacer pour en discuter si une extension vous fait défaut. Nous ne pouvons fournir aucune garantie de fonctionnement ou de disponibilité dans le long terme pour les extensions mises à dipsosition. Il se peut que leurs auteurs cessent de les mettre à jour dans le futur, et que nous soyons contraints de les retirer de nos serveurs. 38

20 Activer ou désactiver des extensions activation d'une extension extension déjà activée les pages suivantes présentent quelques extensions parmi les plus utilisées 39 Resize on upload permet de limiter la taille en pixels des images lors de leur chargement dans la bibliothèque de médias ==> optimise la vitesse d'affichage des pages ==> gère efficacement l'espace à disposition pour la bibliothèque de médias ci-dessus: si souhaité, il est possible de modifier le réglage par défaut (1200 x 800 = laptop 13"), mais inutile d'aller au-delà de 1980 x 1200 (full HD) 40

21 MCE Table Buttons permet d'ajouter à l'éditeur une fonctionnalité de gestion de tableaux 1.insérer un tableau 3. en option, régler les propriétés des cellules, lignes ou colonnes 2. ajouter du contenu dans les cellules 41 Contact Form 7 permet de créer des formulaires qui pourront être insérés dans des pages par un "shortcode" shortcode à recopier dans la page qui doit afficher le formulaire consulter le mode d'emploi sur le site unil.ch/wpinfo 42

22 WP jquery Lightbox permet d'obtenir un effet lightbox pour les galeries d'images de taille "moyennes" ou "vignettes" agrandissables 2. activer le réglage "réduire les grandes images" pour un affichage correct sur les mobiles 1. fonctionnera uniquement si l'image de taille moyenne ou vignette est liée à l'image originale (=media file) 43 Akismet filtre anti-spam INDISPENSABLE pour les sites qui décident d'autoriser les commentaires des visiteurs sur les articles clé d'activation à demander au helpdesk 44

23 8. Réglages avancés 45 Les astuces cachées de l'interface les options de l'écran permettent de modifier des réglages d'affichage, comme par exemple: le nombre de pages affichées dans la liste des pages l'activation ou la désactivation des commentaires pour un article 46

24 Langue du site Possibilité de changer la langue du site (disponibles: fr / all / eng) Dans ce cas, les intitulés gérés par le système sont traduits 47 Exemples d'utilisation du widget "texte" Le widget "texte" permet d'afficher un contenu sous forme de texte ou de code HTML exemple avec affichage de texte cette option permet de prendre en compte les sauts de ligne 48

25 exemple: avec utilisation de code HTML, pour afficher un logo qui fonctionne comme un lien 49 pour cela, il faut: 1. insérer le logo dans une page en spécifiant l'adresse du lien souhaité ( 3. afficher le code source HTML et copier la partie qui correspond à l'image et son lien puis aller la coller dans un widget texte 50

26 Changer de thème Le changement de thème permet de modifier la présentation du site. Cette opération est réversible. Tous les thèmes ne sont pas adaptables à tous les types de sites. Par exemple, certains thèmes sont spécialisés: pour un blog, un magazine, un portfolio, une boutique en ligne, etc. certains thèmes proposent des options: insertion de logo, nombre de colonnes, couleurs, etc. 51 Utilisateurs et rôles Il est possible d'ajouter ou supprimer des utilisateurs. Tous doivent cependant posséder un compte utilisateur UNIL rôles possibles: - abonné peut laisser des commentaires - contributeur peut écrire des articles et les proposer pour publication - auteur peut écrire, publier et supprimer ses propres articles - éditeur peut écrire des pages et des articles, et gérer toutes les pages et tous les articles nom d'utilisateur UNIL - administrateur peut gérer les thèmes, extensions, widgets 52

27 Rendre le site public Quand un site nouvellement créé est prêt à être rendu public, il faut le rendre visible par les moteurs de recherche: décocher la case "discourage search engines..." Ensuite, pour les sites avec adresse - wp.unil.ch/abc - ou asso-unil.ch/abc : quand le nouveau site a été rendu public, écrire à helpdesk@unil.ch pour demander qu'il soit mis en production. Après réception de votre demande, dans un délai de quelques jours: 1) nous activons également les statistiques de consultation pour le nouveau site 2) pour les sites avec adresse de type wp.unil.ch/abc, nous créons un alias (variante de l'adresse) sur le modèle 53 Les zones de widgets sont souvent différentes d'un thème à l'autre, ce qui peut entraîner la désactivation de certains widgets lors du changement de thème. Il faut alors aller les rechercher dans les widgets désactivés pour pourvoir les activer à nouveau. 54

28 9. Aide 55 Besoin d aide? Contacter le helpdesk du Centre informatique en décrivant le problème aussi précisément que possible (messages rencontrés, captures d écran): helpdesk@unil.ch Documentation unil.ch/infowp site de documentation WordPress, spécifique à l'hébergement sur l'infrastructure du Centre informatique unil.ch/ci/web sur le site du Centre informatique: documentation générale sur l'offre web, accès aux statistiques pour en savoir plus sur WordPress en général 56