Wiki.cerpeg : Page créée avec «  fichier:home2.png 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 a... »

2022-10-20T20:01:00Z

Page créée avec «  fichier:home2.png 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 a... »

Nouvelle page

[[fichier:home2.png]] [[Accueil|Accueil]] > [[WordPress]] > [[L'apparence du site | 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''' '''PERMA'''nent 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 ==
{|border=0
|
'''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
|-
|[[Fichier:template.png|1000 px|Thèmes WorPress]]
[[Fichier:Wp-vue.png|500 px|Apparence du site - Vocabulaire]]
|-
|'' 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===
{|border="0"
|
'''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.
|[[Fichier:front2.png|vignette|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.|
|[[Fichier:front1.png|vignette|Front office - thème "journal"]]

|}

===Widget - Pieds de page & colonne latérale===
{|border="0"
|
'''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'''.
|
[[Fichier:WIDGET1.png|vignette|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
|
[[Fichier:widget3-1.png|vignette|Widget TEXTE"]]
|}
{{#evt:service=youtube|id=https://youtu.be/NNMk2Aeinbk|dimensions=380x220}}
 

== 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===
{| border="0"
|
'''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'''.
|
[[Fichier:wpmenu1.png|vignette|500px|Organisation des menus du site"]]
|}
 
{{#evt:service=youtube|id=https://youtu.be/TQx_6w1fO2E|dimensions=380x220}}
 

=== 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...
{| border="0"
|
* '''-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
|[[Fichier:menu-exemple.png|vignette|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
|[[Fichier:wpmenu2.png|vignette|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é
|[[Fichier:wpmenu3.png|vignette|Création du menu]]
|}
|{{#evt:service=youtube|id=https://youtu.be/voEoxR_6a5U|dimensions=380x220|right}}

===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"
||
[[Fichier:LienNonCliquable.png|vignette|Menu lien non cliquable]]
|}
{{#evt:service=youtube|id=https://youtu.be/fsuyCC7NdF0|dimensions=380x220}}

===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).
{| border="0"
|
* '''-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

|[[Fichier:wpmenu4.png|vignette|300px|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
|[[Fichier:wp-accueil2.png|vignette|300px|Page d'accueil à partir de l'apparence]]
|}
 
{{#evt:service=youtube|id=https://youtu.be/vdSSRaxsgxI|dimensions=380x220|right}}

L'apparence du site - Historique des versions