la FAQ – Infos Pages Professionnelles

les FAQs :

Questions :

Réponses :

Définitions

quel est l’outil de gestion de contenu utilisé sur ce nouveau site :
- l’outil est WordPress
- c’est un CMS, qui vous permet de gérer des contenus (des « pages web ») depuis n’importe où, du moment que vous avez un accès internet, grâce à une interface d’administration à laquelle vous accédez avec votre authentification classique.
- vous ne saisissez que la partie utile de la page (le corps de page), c’est l’outil qui mettra en forme, ajoutera les menus ou assurera diverses tâches d’administration.
- il est installé avec une option spécifique dite multi-utilisateurs ou WordPress MU (on parle aussi de WordPress multi-sites) :
  - un super-administrateur crée les nouveaux sites et donne un rôle d’administrateur à son propriétaire. Il associe au site un certain nombres d’éléments (thèmes, extensions) que l’administrateur pourra manipuler.
  - l’administrateur (vous) peut ajouter et modifier des contenus, intervenir sur des réglages de thèmes ou d’extensions, mais ne peut pas ajouter de nouveau thème ou d’extension (en cas de besoin, il pourra faire une demande au super-administrateur)
- WordPress permet à chaque administrateur de site de modifier directement ses contenus via une interface d’administration accessible en mode connecté (authentification CAS). Vous pouvez donc mettre à jour votre site depuis n’importe quelle connexion Internet.
- la particularité de notre installation est qu’elle permet aussi l’accès à un espace statique
à quoi correspondent les éléments qui apparaissent dans mon tableau de bord wordpress :
- il y a plusieurs familles d’éléments représentées dans le menu d’administration :
  - les Contenants : ce sont les formats de données (ou contenus) que vous allez saisir pour construire votre site. Il y a plusieurs façons de structurer un contenu ou d’y donner accès. Chaque Contenant correspond à un besoin spécifique, il faut bien les différencier (voir leurs définitions plus loin) avant de sélectionner celui qui va correspondre au contenu à saisir : Articles, Pages, Médias (les 3 Contenants par défaut de wordpress), mais aussi les Menus (dans Apparence > Menus), et les autres formats définis par des extensions comme Text Blocks, Formulaires (dans Contact), qui sont rendus accessibles par des shortcodes dans les contenants principaux.
  - les Thèmes (accessibles dans Apparence) : le thème (parfois appelé skin) définit l’apparence de votre site à l’aide de templates (programmes qui génèrent le code de votre page web) et de feuilles de style (CSS) qui implémentent les définitions de style du template. Par défaut seuls les thèmes validés par le super-admin sont accessibles. Ce sont des thèmes modifiés et adaptés, qui vous autorisent cependant certains réglages (via l’option Apparence du menu)
  - les Extensions : aussi appelées plugins dans les versions anglaises, les extensions ajoutent des possibilités ou des formats de contenus à votre interface
qu’est-ce qu’un contenu :
- on appelle contenu les données qu’un rédacteur saisit dans l’interface d’administration, qui seront enregistrées dans la base de données et qui seront restituées dans un contenant de la page par l’intermédiaire d’un slot.
- selon le type de champ de formulaire que vous remplissez dans l’interface d’administration, le contenu correspondra donc au corps de la page (le plus souvent : Page, Article,…), à la barre latérale (si elle est active sur la page : Widget, Text Block, Map,…) ou à la construction d’un menu (Catégories, …)
- les champs titres des pages principales figureront généralement à la fois dans un slot du corps de la page et dans un slot de type Menu.
qu’est-ce qu’un contenant :
- un contenant est un modèle de page décrit dans votre Thème : il est caractérisé par un Template, code PHP qui génère de l’HTML en insérant des Contenus issus de la base de données dans des Slots prévus à cet effet (slot menu, slot barre latérale, slot pied de page, etc.).
- on dispose généralement de plusieurs types de contenants : Page pleine largeur, Page avec bande latérale, Collection d’articles,…
quels Contenants (ou formats de contenus) puis-je manipuler avec WordPress :
- le plus important pour bien prendre en main l’administration d’un site WordPress est de bien distinguer les Contenants qu’on peut y insérer.
- comme on l’a vu plus haut, chaque Contenant se manipule à partir d’un onglet spécifique du menu d’administration : après avoir choisi le Contenant, on peut lister les éléments existants, les modifier, les supprimer ou en ajouter de nouveaux.
- les Contenants classiques :
  - un des premiers concepts à appréhender avec WordPress est la différence entre les Articles et les Pages :
  - la Page : élément de base d’un site web, la Page WordPress est un contenu généralement indépendant du temps et de la chronologie de l’édition. Elle contiendra typiquement des informations statiques telles que votre CV, des informations de contact, vos publications, ou une présentation de vos travaux et de votre équipe. Une page correspond au contenu principal de ce qu’on appelle communément « page web », débarassé des éléments secondaires (menus, barre latérale,…) et identifié sur le web par une URL.
  - l’Article : les Articles sont des éléments d’édition plus marqués dans le temps, et que vous souhaiterez présenter à la file, dans un ordre antéchrologique de leur date de publication : c’est le principe de la page de blog. Vous utiliserez ces éléments pour décrire une actualité (séminaire, conférence,…) ou des billets d’humeur. Sur votre site, dans le modèle proposé 1.0, nous vous proposons 2 blogs :
    - la page d’accueil fait défiler tous vos articles marqués par la catégorie « Professionnel »
    - dans le menu « Perso », la sous-rubrique « Mon blog personnel » affiche tous les articles marqués par la catégorie « Personnel ».
  - le Média : il s’agit des éléments de type image, vidéo, PDF; archive zip, etc., que vous pouvez normalement uploader sur
  - le Commentaire : c’est un élément classique dans WordPress, mais c’est aussi celui qui pose le plus de problèmes de sécurité ! (il permet à un utilisateur extérieur de réagir à vos publications). Nous l’avons donc complètement désactivé sur ce site, c’est pour cela que l’option n’apparait même pas dans votre menu d’administration…
- à cela s’ajoute une multitude de nouveaux Contenants, apparus dans les dernières versions de WordPress ou introduits par des Extensions, et pas toujours gérés de façon très cohérente :
  - le Menu :
  - le Text-Block :
  - le Formulaire : vous pouvez créer des formulaires pour permettre aux lecteurs de votre site d’entrer en contact avec vous. Une fois le formulaire créé, vous pouvez l’utiliser dans n’importe quelle page grâce à un shortcode
  - la Map :
  - d’autres extensions permettent de gérer des contenus internes (par exemple l’extension TeachPress ajoute des tables à votre base WordPress pour gérer vos publications et vos cours) ou externes (l’extension HAL-Inria construit dynamiquement des pages avec vos publications à partir d’une simple requête au site haltools que vous aurez stockée dans une page)
qu’est-ce qu’un thème :
- le thème (ou skin en anglais) décrit l’apparence de la mise en pages du site.
- il est composé de templates et de feuilles de style (CSS).
- il constitue un gabarit, non modifiable par le rédacteur, qui n’aura plus qu’à saisir les différents éléments (enregistrés dans la base de données) à insérer automatiquement dans les slots du template.
- il permet de séparer le contenu rédactionnel (extrait de la base de données) de sa mise en forme et de sa présentation.
qu’est-ce qu’un template :
- un template décrit la structure d’une page de votre site.
- les différents éléments de l’architecture d’une page (par exemple : l’en-tête, le menu, le corps de page, le pied de page,…) vont prendre place dans votre template sous forme d’un code HTML prédéfini, qui définira des balises et des classes de style à caractériser dans la feuille de style.
- certains de ces éléments seront figés dans le template, d’autres sont destinés à accueillir des contenus variables (dynamiques) issus de la base de données : on les appelle des slots.
qu’est-ce qu’une feuille de style (ou CSS) :
- …
qu’est-ce qu’un slot :
- …
qu’est-ce qu’un widget :
- …
qu’est-ce qu’une extension (ou plugin) de WordPress :
- …
qu’est-ce qu’un shortcode :
- …
qu’est-ce qu’un blog :
- le blog : définition
- gérer le blog par défaut de la page d’accueil
- le blog de catégorie
- l’extension ACE
qu’est-ce qu’un catégorie :
- …
qu’est-ce qu’un tag :
- …

Prise en main

comment puis-je accéder à l’interface d’administration de mon site ?
- tant que vous n’avez pas désactivé le plugin WP Maintenance qui présente aux utilisateurs non connectés une page « en travaux » avec un bouton de connexion, pas de souci : il suffit de cliquer sur « Connexion », et vous serez redirigés sur le CAS de l’Inria pour vous authentifier et accéder à votre Tableau de Bord WordPress.
- par contre, une fois le site activé, vous n’avez plus de lien direct sur le CAS dans le modèle proposé (nous avons préféré ne pas rendre ce service trop voyant).
- il est cependant facile de se souvenir de l’URL du connecteur : il suffit de rajouter wp-admin à la suite de votre URL de base.
- Par exemple, pour l’utilisateur dont le site est identifié par https://members.loria.fr/PNom/, l’adresse https://members.loria.fr/PNom/wp-admin/ renverra soit sur le CAS si sa session n’est pas encore ouverte, soit sur son tableau de bord WordPress si une session CAS existe déjà pour le même navigateur.
sur mon interface d’administration, la barre de menu de gauche apparait sans les libellés. Comment puis-je l’étendre pour avoir l’aspect vu dans infodoc ?
- ce problème peut apparaitre si vous utilisez un navigateur différent ou si vous avez cliqué de manière inopinée sur le bouton de réduction du menu
- pas de panique, un petit clic sur le bouton représentant une flèche tout en bas du menu de gauche permet d’étendre à nouveau le menu :
  
  => =>


	=>		=>

Réglages

comment WordPress adresse-t-il ses pages sur le web :
- par défaut, WordPress produit des URLs (adresses web) avec un point d’interrogation suivi d’une suite de chiffres impossibles ) mémoriser.
- l’option Réglages > Permaliens de votre Tableau de bord permet cependant de modifier ce réglage pour produire des adresses plus lisibles.
- nous avons pré-réglé les Options de permaliens sur Nom de l’article, ce qui produit des URLs faciles à lire et à mémoriser, et cohérentes entre les différents types de contenus (articles, pages, catégories,…).
- Attention : ne modifiez pas ce paramètre une fois que vous avez diffusé des adresses, celles-ci seraient alors rendues invalides.
comment activer/désactiver le mode Maintenance :
- l’extension « WP Maintenance Mode » permet de bloquer votre site en lecture en affichant une « page de maintenance«
- elle est utile dans 2 cas de figure :
  - lorsque vous faites des modifications importantes sur le site
  - lorsque le Superadmin (webmaster) détecte un problème sur votre site, il peut également réaliser l’opération : par exemple si des contenus litigieux sont trouvés sur le site. Dans ce cas, vous pourrez vous-même désactiver le mode Maintenance lorsque le problème aura été corrigé.
- quand un site est en mode Maintenance, une page spéciale s’affiche pour l’utilisateur non connecté.
- pour modifier les options du mode Maintenance, il faut d’abord vous connecter à votre site, puis dans le Tableau de bord, il faut se rendre sur la page Réglages > WP Maintenance Mode
- cette page comporte 3 onglets : Général, Design, et Modules.
  - sur l’onglet Général, vous pouvez activer/désactiver le mode Maintenance, avec diverses options. L’utilisation est triviale. N’oubliez pas de cliquer sur le bouton Save settings en bas de page pour valider vos modifications.
  - l’onglet Design vous propose de modifier le contenu et l’aspect de la page de maintenance : attention, vous pouvez bien sûr utiliser l’éditeur en mode Texte pour formater votre texte avec des balises HTML, mais le template du site (et donc la feuille de style) n’est pas chargé, et le contenu est limité à un cadre en milieu de page.
  - enfin l’onglet Modules propose quelques options supplémentaires

Apparence

comment modifier le titre de mon site :
- Le champ Titre de WordPress est positionné dans le thème choisi (Sparkling) dans le bandeau du haut, à gauche du menu :
- Pour modifier ce titre, dans votre Tableau de Bord, sélectionnez Réglages > Général
- Les 2 premiers champs sont Titre du site et Slogan.
- Dans notre modèle, nous avons rempli par défaut ces 2 champs avec vos prénom et nom.
- Modifiez le premier, puis cliquez sur Enregistrer les modifications
- Remarque : le champ Slogan n’est pas visualisé dans le thème actuel.
comment modifier la couleur de fond du bandeau haut de la page :
- Vous avez un tutoriel sur le sujet du « relooking » de votre site. Vous ne pouvez pas modifier les templates du thème, par contre vous pouvez écrire votre propre feuille de style qui viendra écraser les directives de style précédemment définies.
- Important : dans les feuilles de style chargées en amont, beaucoup de directives sont marquées de l’attribut « !important » (voir ici si vous ne maitrisez pas la signification de cet attribut). Pour être sûr que ce sont bien vos définitions qui vont être prises en compte par le navigateur, je vous conseille donc de les marquer toutes avec l’attribut « !important ».
- Une fois que vous avez accédé à votre feuille de style personnelle, voici un bout de code CSS pour changer la couleur de fond du bandeau haut et des éléments du menu :
```
#masthead, .navbar, .navbar-header, .navbar-header .navbar-brand, .site-navigation-inner { background-color: red!important ; }
.navbar-nav > li.menu-item > a { color: #000000!important; }
.navbar-nav > li.menu-item > a:hover { color: #00ffff!important; }
.navbar-nav > li.active > a { color: #0000ff!important; }
```
comment gérer le Menu horizontal du haut de page :
- c’est un point qui a été sérieusement remanié dans les dernières versions de WordPress et qui n’est pas toujours bien géré au niveau des thèmes.
- avec le thème choisi (sparkling), il faut faire 2 choses :
  1. lorsque vous créez vos pages, dans Pages > Ajouter, pensez à toujours bien les positionner dans la hiérarchie des pages (attribut « Parent » de la page)
  2. dans Apparence > Menus, vous pouvez créer des éléments de menu de 4 types (Pages, Articles, Liens ou Catégories). Déroulez le type pour choisir l’élément, et cliquez « Ajouter au menu ». Puis dans la partie droite (Structure du menu), glissez-déposez l’élément pour le positionner à sa place. Pour en faire un sous-élément de l’élément précédent, décalez simplement l’élément vers la droite (prenez exemple sur l’élément déroulant Contact du modèle fourni.
- voir ici pour un mode d’emploi en images :
  /infodoc/manips/ajoutmenu/
comment ajouter un glyphicon dans le Menu horizontal du haut de page :
- un petit « effet sympa » du modèle de site que nous vous avons proposé, c’est les petites icones qui apparaissent à gauche de chaque item du premier niveau du menu horizontal : on les appelle des « glyphes » ou « glyphicons ».
- la librairie de glyphicons installée est visible ici : http://getbootstrap.com/components/
- pour modifier un glyphicon, ou en ajouter un à un nouvel élément de menu, il suffit de dérouler les options de l’élément de menu en cliquant sur le petit triangle tout à droite de l’élément.
- vous devez alors voir un champ « Attribut du titre ».
- Point important : si vous ne voyez pas ce champ, c’est qu’il manque un petit détail à votre configuration ! Pour modifier cela, en haut à droite de la fenêtre des menus, cliquez sur « Options de l’écran ».
  Et sur la 2ème ligne d’options qui apparaissent (« Afficher les propriétés avancées du menu »), cochez « Attribut de titre ». Vous devriez maintenant voir le champ de saisie qui nous intéresse.
- allez sur le site getbootstrap et repérez le glyphe qui représentera votre nouvel élément de menu.
- copiez le code qui figure sous le glyphe (par exemple « glyphicon glyphicon-euro » pour un symbole d’euro), et collez le dans le cadre.
- sauvegardez et rechargez la page. Votre glyphicon doit apparaitre dans le menu à gauche du titre de l’élément.
pourquoi l’option habituelle Discussion n’apparait-elle pas dans le menu Réglages de mon panneau d’administration :
- cette option Discussion sert à paramétrer l’usage des contenus de type Commentaires
- pour des raisons de sécurité, nous avons complètement interdit cette option : il est en effet facile pour un usager extérieur de détourner l’usage des commentaires pour introduire des contenus illicites dans la base de données
- c’est une extension spécifique activée sur tout le réseau de sites qui se charge de bloquer les commentaires
comment visualiser les feuilles de style associées à ma page ? :
- vous trouverez beaucoup d’outils pour vous aider à développer ou à analyser du code HTML (visualisation du DOM, de la hiérarchie des feuilles de style, etc.)
- la plupart des navigateurs web proposent aussi ces fonctionnalités, souvent en option (plugins et autres extensions à télécharger en complément du package standard)
- il est difficile de maintenir à jour une documentation sur l’utilisation de ces outils, car ils évoluent constamment
- nous prendrons ici en exemple Safari, dans sa version 9.1.2
  - dans sa version courante, Safari ne présente aucune aide aux développeurs
  - mais il est très facile d’activer un menu supplémentaire : Développement
  - pour cela, ouvrez les Préférences de l’application, onglet Avancées, et cochez l’option « Afficher le menu Développement dans la barre des menus »
  - à partir de là vous êtes parés pour retravailler votre thème WordPress !

Contenus et contenants

les Articles :
1. qu’est-ce qu’un Article :
  - les Articles sont des éléments de contenu généralement marqués dans le temps, soit pour décrire un actualité, soit pour exprimer un billet d’humeur par exemple.
  - ils sont généralement peu structurés :
    1 Article = 1 Titre + 1 Paragraphe
  - dans WordPress, ils sont affichés à la suite dans un contenant spécifique (le « blog« ), que l’on met souvent en page d’accueil : en tête de liste figure le dernier article saisi, et les articles plus anciens sont au fur et à mesure refoulés vers le bas de page.
  - cela permet d’avoir un affichage dynamique et renouvelé de sa page d’accueil (c’est le principe du blog).
  - un Article peut être associé à des Catégories et des Tags.
2. comment est stocké l’Article dans WordPress :
  - le contenu de l’article est stocké dans une base de données MySQL, pas dans un fichier (contrairement au Média).
3. comment limiter l’affichage d’un Article dans le blog ? (insertion de la mention « lire la suite ») :
  - Quand un article dépasse 5 ou 6 lignes, ou nécessite l’insertion de plusieurs images ou schémas, il est souvent intéressant d’en limiter la taille sur la page de blog, en ne présentant que l’accroche des premières lignes, et de renvoyer vers une page qui affiche l’article dans son intégralité.
  - Pour cela, il suffit de saisir l’article complet, puis de positionner le curseur à l’endroit où vous voudrez voir apparaitre la coupure et la mention « lire la suite », puis de cliquer dans l’éditeur sur le bouton « more ».
  - WordPress insérera automatiquement le bouton « lire la suite » (ou « more » si vous avez choisi la version anglaise).
  - N’oubliez pas de sauvegarder avant de voir votre page de blog !

les Pages :
1. qu’est-ce qu’une Page :
  - les pages sont des éléments moins « datés » que les articles, ils correspondent à des informations que l’on voudra toujours afficher de la même façon et de manière individuelle et différenciée au visiteur du site.
  - elles sont généralement très structurées, et utilisent pour cela toute la batterie des balises HTML prévues à cet effet ou accessibles dans l’éditeur en mode Visuel : niveaux de titres, paragraphes, énumérations, etc.
  - l’accès à la page se fait par l’intermédiaire d’un Menu, essentiellement le Menu haut avec notre choix de thème, ou par un simple Lien que vous aurez placé dans une page de sommaire par exemple.
  - le traitement de la Page est similaire à celui de l’Article : vous pouvez ajouter une nouvelle page, la modifier avec l’éditeur, et la supprimer.
  - comme un article, une Page a un titre et un contenu.
  - les pages ne peuvent pas être associées à des Catégories ou des Tags
  - le contenu de la page est stocké dans une base de données MySQL, pas dans un fichier.
2. comment administrer sa hiérarchie de pages :
  - dans WordPress, la Page est l’élément de construction privilégié d’un site hiérarchique (site classique, arborescent).
  - vous disposez pour cela de plusieurs outils :
    - les Menus
    - les Liens
    - les pages d’Index
3. comment supprimer la barre latérale sur une page :
  - la barre latérale (contenant des widgets comme le Text Block identité ou un calendrier par exemple) fait partie du modèle par défaut de pages. Un autre modèle (Full-width) permet d’avoir le texte principal en pleine largeur. Pour passer de l’un à l’autre :
    - aller sur Pages > Toutes les pages
    - choisissez la page et cliquez sur Modifier
    - dans la barre à droite, vous avez l’option Modèle avec un menu déroulant qui propose 2 options : Modèle par défaut et Full-width (no sidebar)
    - sélectionnez l’option désirée et cliquez sur Mise à jour
    - vous pouvez contrôler l’opération en cliquant sur Voir la page dans le bandeau de boutons en haut de page.
4. comment modifier l’URL d’une page :
5. comment est stockée une Page :
6. …

les Médias :
1. qu’est-ce qu’un Média :
2. comment est stocké un Média
  - le contenu du média est stocké dans un fichier, pas dans la base de données MySQL.
3. …

les Commentaires :
1. qu’est-ce qu’un Commentaire :
  - Sur la plupart des blogs ou autres outils de « réseau social », chaque article peut-être ouvert à commentaires, de manière à permettre à ses lecteurs d’exprimer leurs réactions.
  - Avec WordPress, cette possibilité peut être paramétrée de manière à offrir de nombreuses options de modération.
  - Malgré tout, c’est par ce biais que la plupart des abus sont constatés sur ce genre de sites.
  - Nous avons donc préféré bloquer complètement les commentaires sur vos sites professionnels.
2. puis-je autoriser les commentaires sur mon site :
  - Non, actuellement les tables de commentaires sont désactivées dans la base de votre site.
3. …

les Text Blocks :
1. qu’est-ce qu’un Text Block :
2. …

Extensions

Généralités
1. comment faire installer une nouvelle extension :
  - un utilisateur simple-admin de site ne peut pas installer lui-même une extension sur un réseau de sites wordpress (ou wordpress multi-sites)
  - c’est le super-admin du réseau qui est en charge de cette opération
  - …
2. comment :
  - …
Text Blocks :
1. à quoi sert un Text Block :
  - un Text Block est un élément de contenu réutilisable : vous le saisissez une fois (avec ses directives de formattage CSS) et vous pouvez le réutiliser autant de fois que vous le souhaitez dans des pages, des articles, ou des widgets inclus dans le template. C’est particulièrement intéressant pour définir des blocs répétés sur toutes les pages (barre de logos, …) ou sur un sous-ensemble de pages.
  - lorsque vous saisissez un Text Block, vous lui donnez un nom. Il suffit ensuite d’appeler ce nom à l’aide d’un shortcode spécifique pour insérer le Text Block dans la page.
2. quels sont les Text Blocks disponibles par défaut :
  - pour mettre en place certains éléments répétés du modèle, et vous permettre de les modifier facilement, nous avons pré-défini quelques Text Blocks :
    - Adresse Mail
    - Téléphone
    - Adresse postale
    - Logo
    - Sidebar_identité
3. comment modifier/ajouter un Text Block :
4. comment utiliser un Text Block :
SKT Skill Bar :
1. quels types de graphiques sont disponibles :
  - il y a 3 types de graphiques disponibles dans la version actuelle
    - les barres de progression :
    - les camemberts :
    - les demi-camemberts :
2. comment modifier l’aspect des graphiques :
  - comme pour d’autres éléments, vous pouvez surcharger les définitions de style des éléments de SKT Skill Bar par vos propres définitions dans Apparence > Options du thème > Autres (voir …)
  - les styles définis dans nos modèles sont détaillés ci-dessous. Pour les modifier (ici on change les couleurs en niveaux de gris), notez l’usage de la propriété !important :
```
.skillbar-title span{
height:           20px    !important;
line-height:      20px    !important;
}
.skillbar {
height:           20px    !important;
background-color: #eeeeee !important;
}
.skillbar-title {
font-size:        12px    !important;
background-color: #656565 !important;
}
.skillbar-bar {
height:           20px    !important;
background-color: #c9c9c9 !important;
}
.skill-bar-percent {
line-height:      20px    !important;
height:           20px    !important;
}
```
Inria HAL :
1. quoi :
TeachPress :
1. quoi :
Papercite :
1. quoi :
WordPress Google Maps :
1. quoi :
Contact Form 7 :
1. quoi :