L'apparence du site

Accueil > WordPress > L'apparence du site

Vocabulaire indispensable

• PAGE Une page contient du contenu intemporel et en général statique. La page est raccrochée au menu du site contrairement à l'article. Une page peut avoir un thème ou template personnalisé. À l'affichage, il n'y a aucune différence entre un article et une page.
• ARTICLE Un article détient du contenu identifié par une date, il est mis en avant jusqu'à ce qu'un autre article plus récent le remplace. Il est intégré à un blog d'une catégorie. Cette catégorie peut être raccrochée au menu. Un article ne se raccroche pas au menu même s'il est possible de le faire techniquement.

• CATÉGORIE Les catégories permettent à un article d'être classé. Il est possible pour chaque catégorie de créer des sous-catégories.
• ÉTIQUETTES Une étiquette appelée aussi TAG est un mot clé permettant aux moteurs de recherche de trouver facilement la page. Les étiquettes font parties du référencement du site. Une étiquette est transversale contrairement à la catégorie. Par exemple, la catégorie 'fruits' contient tous les fruits. Il est possible de mettre un TAG/Étiquette pour les fruits à pulpe ou les fruits rouges. Ainsi, si l'on recherche les fruits 'rouges', il suffit de cliquer sur le mot clé 'fruits_rouges'.
• MEDIA Il s'agit des fichiers audio, vidéo, image ou même pdf intégrés dans des pages ou articles du site. Lors de l'intégration, il est essentiel de choisir le bloc correspondant sans quoi le fichier n'apparait pas puisqu'il la balise html sélectionnée ne correspond pas au fichier.
• PUBLIER La publication entraine l'affichage sur le site. Un article non publié reste en brouillon, il n'est pas visible de l'internaute.
• URL Uniform Resource Locator OU "localisateur uniforme de ressource" Il identifie une page internet existante. Sa structure est normalisée. Protocole http:// nom du serveur (ou nom de domaine) www.cerpeg.fr chemin d'accès à la page /ressources
• PERMALIEN Il s'agit d'un LIEN PERMAnent conçu pour pointer vers un élément d'information .
• PARENT / ENFANT hiérarchisation notamment des catégories. Par exemple, catégorie PARENT 'les fruits' à pour sous-catégories ENFANTS 'fruits à noyau', 'fruit à pépin', 'agrumes', etc.

La configuration de l'apparence du site

APPARENCE Avant de commencer à garnir le contenu du site, il faut penser son ergonomie en fonction des informations qu'il va contenir. Il faut prendre le temps de choisir le template qui répondra au besoin du site (style, disposition des informations, possibilité de changement, etc.). WordPress propose des thèmes qu'il est possible de prévisualiser avant d'installer. Le FrontOffie : Site tel qu'il est vu par les internautes Le BackOffice : Accès en Administrateur/Contributeur/Auteur/Éditeur du site

Il s'agit de l'élément au-dessus. Par exemple, une catégorie "VOYAGE" peut contenir une sous-catégorie "EN EUROPE". Le parent de "EN EUROPE" est la catégorie "VOYAGE". "EN EUROPE" est l'enfant.

Thème

APPARENCE / Thème Choisir un thème dans la bibliothèque ou en installer un Le thème choisit dépend du site à mettre en avant. Ici, il s'agit du journal du lycée. Le thème retenu est "Mission News". Il est toujours possible de prévisualiser un autre thème avant de le choisi pour le site.

thème Mission News

APPARENCE / Personnalisé Identité du site -1: logo, slogan, favicon (icône du site) Couleur : choisir l'une des couleurs proposées par le template (thème) Média de l'en-tête - HEADER - : image (Slider) ou vidéo Menu -2- : définir les pages ou catégories l'article du menu principale Widget - vignette interactive ou mini-logiciel 3- : positionner un ou plusieurs widget en colonne dans le blog ou en pied de page (FOOTER). Exemple : calendrier, galerie d'images, images, flux RSS, derniers articles, etc. Réglage de la page d'accueil : définir le type de page pour la page d'accueil. Elle peut être une page statique (le contenu est figé) ou un blog derniers articles (affichage des derniers articles rédigés. Options du thème : apparence variable. Mise en page 1 ou 2 colonnes et sélection de pages à mettre en avant dans la page d'accueil.|

Front office - thème "journal"

Widget - Pieds de page & colonne latérale

APPARENCE / Widget Les widgets 1 permettent de personnaliser le site en ajoutant des informations : carte Google dynamique, articles récents, calendrier, réseaux sociaux, etc. La disposition des widgets dépend du thème choisi mais en général nous trouvons la colonne latérale, le pied de page 1 et 2 3. L'ajout d'un widget se fait par un clic-glisser du widget vers la position choisie 2.	Ajout de Widget"
Exemple d'insertion d'un Widget TEXTE en pieds de page -1- Sélectionner le widget TEXTE -2- Choisir son positionnement (ou clic-glisser) -3- Déplier le pieds de page 2 -4- Inscrire le contenu du texte	Widget TEXTE"

La gestion du menu

  La particularité d'un CMS est qu'il n'est pas possible de créer un menu si les pages, les articles et les catégories ne sont pas créés. 
  L'arborescence requière la création de ces éléments avant la création du menu.
  * limiter le nombre d'éléments dans le menu, créer des sous-menus si nécessaire
  * nom : clair et concis
  * choisir un nombre raisonnable de sous-menus pour ne pas perdre l'internaute

   À RETENIR: 3 clics de l'internaute pas plus. Au-delà, l'internaute quitte le site ou ne va pas au bout de l'action

Modification du menu

APPARENCE / Menu Le menu est déjà créé, il suffit de raccrocher les éléments souhaités (pages-catégories...) 2 Sélection de l'élément à afficher dans le menu : Pages 2-3 ou Catégorie d'article 4-5. Un article ne s'accroche pas à un menu ! 3-5 Une hiérarchisation des pages / articles / catégories est possible par un clic-glisser sur la vignette. Suppression La suppression se fait en déroulant la vignette et en cliquant sur retirer.

Organisation des menus du site"

Création du menu

APPARENCE / Menu
Le menu n'existe pas lors du paramétrage de base d'un WordPress. Il faut le créer !

   Nous pouvons imaginer l'articulation d'un menu...

-1- Accueil : page statique définie dans RÉGLAGES / LECTURE / La page d'accueil. Il s'agit ici d'une page statique mais elle pourrait très bien être reliée à une catégorie d'articles pour la rendre dynamique -2- Actualités : affichage des articles de la catégorie "catégorie3" (voir vidéo pour mieux comprendre la problématique catégorie/page). -3- Page-INFO1 - statique - : lien vers 3 pages statiques -4- Page-INFO2 -dynamique, blog -  : lien vers des catégories d'articles	Exemple de menu"
La création d'un menu principal
-1- Donner un nom au menu pour l'identifier dans la base -2- Régler l'affichage. Si vous voulez l'affichage d'un menu TOP, vous devez cocher "Menu supérieur". -3- Enregistrer le menu	Création du menu"
-3- menu : ajouter les pages et catégories souhaitées. Il n'est pas conventionnel d'ajouter un article à un menu même si techniquement c'est possible. -4- Page : ajouter une page en déroulant les éléments -5- Sélectionner la page PAGE3 en la cochant -6- Ajouter au menu l'élément sélectionné	Création du menu

|

Création d'un menu parent non cliquable

Une page de menu est toujours cliquable même si elle est parent d'autres pages enfants. Si nous ne souhaitons pas afficher de contenu à la page "PAGE-INFO1" en cliquant dessus, il faut rendre le menu parent non cliquable. Ce menu devient un lien personnalisé, et n'a plus lieu d'exister en tant que page puisqu'elle est vide.

-1- Liens personnalisés Remplacer la page existante du menu "PAGE INFO1" par un lien personnalisés sans URL. -2- URL Saisir # pour renseigner le champs sans y coller une URL -3- Texte du lien Saisir le nom du menu parent "PAGE INFO1" -4- Ajouter au menu le lien personnalisé Conseil supprimer la page vide "PAGE-INFO1"

Menu lien non cliquable

Création de la page d'accueil

   La page d'accueil à ce stade n'est toujours pas affichée dans le menu. La gestion de cette page se fait dans les réglages du site ou dans 
   l'apparence du thème.

RÉGLAGES / Lecture / Options de lecture -7-
Les options de lecture permettent l'affichage de la page d'accueil. Ainsi, la page peut être définie en page statique ou en page d'articles (style blog).

-8- Sélection du comportement de la page d'accueil -9- Sélection de la PAGE1 définie comme page d'accueil dans notre exemple	Page d'accueil à partir des réglages
APPARENCE / Personnaliser/ Réglages de la page d'accueil -7- -8- La page d'accueil affiche... Sélection du comportement de la page d'accueil -9- Liste des pages disponibles Sélection de la PAGE1 définie comme page d'accueil dans notre exemple	Page d'accueil à partir de l'apparence