Wordpress | Dompter Astra

Astra est le thème imposé pour l’examen E5B de l’épreuve technique du BTS NDRC. Il a bien des qualités comme le fait d’être ultra personnalisable mais bien des défauts aussi : les options vraiment sympa sont payantes (quelqu’un au ministère de l’Education Nationale doit avoir des stocks options chez l’éditeur pour l’avoir imposé dans ces conditions) et les options gratuites sont assez pénibles à paramétrer. Maintenant que je vous ai bien donné envie, on fait le tour de ce qu’il faut retenir pour s’en sortir sans trop de mal.

Attention, cet article part du principe que vous commencez avec un blog « tout neuf ». Si vous avez déjà créé des éléments avant l’installation d’Astra, épargnez-les des suppressions demandées dans la seconde partie (pages et menus).

Plan de l’article :

Installer le thème Astra
Enlever les ajouts automatiques
Personnaliser Astra
Vers l'épreuve E5B

Installer le thème Astra

Apparence > Thèmes > Ajouter un thème
trouver Astra dans la liste des thèmes proposés (ou taper « Astra » dans le moteur de recherche)
Cliquer sur Installer

Cliquer sur « Activer«

Un choix supplémentaire apparait dans le bandeau principal du tableau de bord de votre backoffice.

En développant le choix « Astra« , on constate que le thème propose 4 sous options : Un tableau de bord qui permet d’accéder aux principales fonctionnalités (et de vous montrer celles que vous ratez en restant sur le plan gratuit), une personnalisation qui permet d’accéder à toutes les commandes comme dans tous les autres thèmes, un constructeur automatique de site (mais nous ne pourrons rien y faire vu que c’est réservé au plan payant) et, enfin, Spectra, une invitation à installer ce plug-in que nous verrons dans un autre article.

Vous l’aurez compris, c’est surtout depuis le menu « Personnaliser » que nous pourrons adapter le thème. Mais commençons par faire un peu de ménage pour enlever l’affreuse page d’accueil ajoutée et les deux menus qui, en plus, ne respectent aucune règle de ce que l’on peut mettre dans un menu.

Enlever les ajouts automatiques

a) Enlever les pages auto générées

A moins que vous ne soyez fan du violet criard, supprimons d’urgence la nouvelle page d’accueil qu’Astra vient de nous imposer

Pages > toutes les pages
cocher « page d’exemple » et « Politique de confidentialité«
Action Groupée > mettre à la corbeille
Appliquer

Ce n’est pas fini. Il va falloir laisser Astra définir une page d’accueil pour pouvoir la supprimer …

Astra > personnaliser
Publier
Cliquer sur la croix en haut à gauche pour fermer l’éditeur de personnalisation.

Retournons maintenant sur Pages pour constater qu’une nouvelle page est apparue :

cocher « Accueil«
Action Groupée > mettre à la corbeille
Appliquer

Ca y’est, cette fois, nous sommes débarrassés de cette affreuse erreur de gout !

b) Supprimer les menus auto-générés

Apparence > Menu

Deux menus ont été auto générés par Astra : Principal et principal2

Observez au passage qu’il est composé de pages dont certaines n’ont jamais existé ! C’est du super boulot !

Cliquer sur supprimer (quel que soit celui des deux affiché)

Observez que WordPress demande une confirmation (cette opération est irréversible).

Cliquer sur OK
Répéter l’opération avec le second menu

Vous devriez normalement voir une invitation à créer votre premier menu :

Bon, on a perdu dix minutes à faire le ménage mais notre thème est enfin « propre »

Rassurez-vous, pour l’épreuve, vos examinateurs auront déjà fait le ménage pour vous.

Personnaliser Astra

En retournant dans Astra > Personnaliser, on constate dans l’aperçu de droite que le site est désormais en affichage générique : les derniers articles

N’oubliez pas, dans la suite de l’article, de publier à la fin de vos manipulations afin de les appliquer réellement. Ce que vous voyez dans le panneau de droite n’est qu’un aperçu du résultat si vous le validez.

a) Global

Le sous-menu global se décompose en 8 options (et ce n’est qu’un des 11 sous-menus !). Courage !

Typographie, comme son nom l’indique, va permettre de choisir les polices de présentation de votre blog.

A noter qu’il est possible de prérégler les typographies des niveaux de headers, ce qui est un plus !

Couleurs permet de définir une palette.

En cliquant sur le « style guide » (à côté de la croix », vous obtenez un aperçu plus détaillé des différents objets que vous pouvez utiliser afin d’avoir un aperçu de l’effet de vos modifications

Il faudra procéder à de nombreux essais dans vos choix avant d’obtenir laborieusement à un résultat qui soit convenable.

Conteneurs vous permet de modifier le cadre global de la zone large de votre site, selon que vous destinez votre site à des écrans de Desktop ou des mobiles.

Vous disposez aussi de curseurs pour un réglage au pixel près.

L’intérêt est discutable pour un CMS comme WordPress qui est déjà responsive.

Boutons permet de régler l’apparence (texte, fond, bordure) de vos boutons

Vous avez deux niveaux de boutons (sans rapport avec l’état Repos- Pointé – Cliqué) et il est conseillé d’activer l’affichage « style guide » pour observer les résultats de vos tests.

Rappel : N’oubliez pas de publier à la fin de vos manipulations afin de les appliquer réellement.

Retour en haut est une option très utile qu’il faut activer. Elle permet au visiteur de revenir en haut de page (et d’y retrouver votre menu).

C’est le cas sur ce site (voyez en bas à droite). Ce bouton de retour vous suit au fur et à mesure que vous descendez dans l’article.

Accessibilité est une personnalisation de la surbrillance et des encadrements disponibles quand les options d’accessibilité de votre OS sont activées (personnes handicapées visuelles).

Editeur de blocs permet de modifier le réglage de la proximité entre les éléments de votre blog.

Ce peut être pratique quand vous voulez compacter vos contenus (les paragraphes, notamment) mais un réglage trop serré peut nuire à l’affichage correct sur certains navigateurs.

Divers permet d’activer « le défilement doux vers les ID »

Les ID sont des balises comme des tags ou des signets. Le scroll peut alors être « ralenti » pour ne pas provoquer un glissé trop brut. Bon, c’est un peu gadget, en fait, d’autant que cela ne sera pas du gout des processeurs graphiques des ordis de vos visiteurs.

Bon, la bonne nouvelle, c’est que les autres sous-options de personnalisation ne comportent pas elles-mêmes de sous-rubriques, comme Global.

b) Entête

Il faut soigner au mieux cette section car le Header de votre Blog est le premier élément que vont voir vos visiteurs.

Entête > Eléments > titre du site & logo

Observez à droite les éléments prédisposés sur le header, que vous pouvez déplacer ou supprimer, voire remplacer par d’autres.

Pour la création de votre logo, utilisez votre logiciel de création graphique préféré ou, si vous êtes en panne d’inspiration, je vous conseille un créateur en ligne comme Free Logo D e sign qui fera l’opération pour vous en quelques instants.

Tapez le nom de votre enseigne
Cliquez sur « Get Started«
Choisissez une catégorie qui correspond à votre activité
Explorez les propositions de logos de Free Logo Design

Cliquez sur celui qui vous correspond le mieux et costumisez-le.

terminez par un Imprim écran pour sauvegarder votre œuvre (ce qui vous évitera de laisser votre mail pour vous inscrire).

Il vous faudra un format .jpg ou .png et une image de moins de 2 Mo si vous voulez qu’elle soit acceptée par votre blog (ce sont les paramètres par défaut de la plupart des plateformes).

changer le logo > téléverser > parcourir les fichiers de votre ordinateur pour sélectionner votre création
Recadrez votre logo et validez
De retour dans l’interface de personnalisation, agissez sur le sélecteur de taille « largeur de logo » pour obtenir les dimensions que vous souhaitez

Pour ma part, je vais modifier légèrement la couleur du thème (dans Design) pour la faire correspondre à celle de mon logo

J’obtiens ce résultat :

Ajoutez aussi le titre de votre site ainsi que son slogan
Design > modifiez éventuellement la taille et la couleur des éléments

Vous pouvez aussi définir un favicon (mini logo qui apparaitra sur l’onglet du navigateur

Pour que cela fonctionne, il faut que votre image soit petite et carrée. Idéalement 150 X 150 pixels.

Je ne reprends pas le titre « Mediast9ph » dans ce favicon (il serait de toute manière illisible). C’est pour la même raison que je déconseille de placer le slogan dans votre logo.

Le favicon permet de repérer facilement vos onglets et constitue un plus.

Rappel : N’oubliez pas de publier à la fin de vos manipulations afin de les appliquer réellement.

c) Le fil d’Ariane

Le fil d’Ariane, inspiré de celui du labyrinthe de la mythologie (voir l’article sur Wikipédia) est, sur un site web, un développement du plan en ligne afin que le visiteur puisse comprendre à quel niveau il se situe et puisse remonter facilement l’arborescence de votre blog.

Accueil » WordPress | Dompter Astra

Ci dessus, un fil d’Ariane inséré dans cet article avec le bloc « fil d’Ariane Yoast« . Il permet au lecteur de visualiser à quel niveau il se situe sur le blog St9ph et de revenir facilement à l’accueil. Il concourt aussi au maillage interne, important pour votre bon référencement.

Thème > Astra > personnaliser >Fil d’Ariane
Définir si vous le voulez en entête (en choisissant « à l’intérieur«

C’est le plus simple. Ainsi, le fil d’Ariane est toujours visible au même endroit sans que vous ayez besoin de l’insérer dans vous différentes articles et pages comme je l’ai fait pour cet article quelques lignes plus haut

Définissez le type de séparateur de niveau

Le 4ème [/] vous permet de personnaliser avec le symbole de votre choix

Choisissez avec les boutons radions à quels endroits de votre blog le fil d’ariane doit apparaitre automatiquement.

C’est quoi une page 404 ?

C’est une page de remplacement quand le lien de rebond d’une page de votre site conduit vers une page qui n’existe plus ou qui ne fonctionne pas. En général, elle indique que la page demandée est introuvable, propose des excuses et donne un lien pour revenir à l’accueil du site. Son nom vient du code erreur informatique correspondant à cette situation.

Rappel : N’oubliez pas de publier à la fin de vos manipulations afin de les appliquer réellement.

d) le blog

Vous paramétrez ici l’apparence générale du site, surtout en termes de gabarit. Parcourez les onglets pour les détails

Archive
Publication seule

Il faut comprendre par archive la vue globale avant que le visiteur ait choisi un de vos articles

Définissez les différentes options d’apparence du conteneur (cadre de vos éléments affichés) en observant les effets sur l’aperçu à droite. Vous pouvez régler :
- la mise en page du conteneur (attention : « étroit » et « pleine largeur » suppriment l’affichage de la colonne latérale
- les styles (la différence entre « ouvert » et « encadré » n’est pas flagrante si vous n’avez pas un Design très contrasté)
- la mise en page de la colonne latérale (à maitriser pour l’examen)

C’est en effet ici que vous devrez sans doute choisir de l’afficher ou de la basculer de l’autre coté. Rappelez-vous que si vous avez un conteneur réglé sur « étroit » ou « pleine largeur », ce réglage sera inopérant !

la mise en page du blog (comment seront vignettés vos listes d’articles quand un visiteur les aura choisi dans une catégorie depuis votre menu)
Les éléments de publication (ce qui apparait dans vos contenus) comme, par exemple, d’afficher l’extrait ou le contenu intégral d’un article dans la page qui les liste tous.
Les métas, c’est-à-dire les éléments complémentaires qui renseignement sur vos contenus (date, auteur, mots clés associés …)
Réglez également les éléments de Design si besoin

Ce sont les réglages de disposition une fois que le visiteur a choisi un article ou une page.

A observer principalement :

publications similaires qui propose d’autres articles ressemblant en rebond en fin de lecture (basé sur les mots clés communs)
L4affichage ou non des commentaires
les options de conteneur comme dans l’onglet précédent, mais, cette fois, pour la page ou l’article lui-même

Rappel : N’oubliez pas de publier à la fin de vos manipulations afin de les appliquer réellement.

e ) Pages

Comme pour la section Blog (voir d), il s’agit de réglages de conteneur et de design, cette fois pour vos pages (et plus pour vos articles) ainsi que la page de résultats de recherche.

f) colonne latérale

Idem, que pour le blog et les pages, se sont des options d’apparence.

A noter tout de même la possibilité d’épingler la colonne latérale pour qu’elle s’affiche tout le temps (comme le header et le footer).

g) Pied de page

C’est ici que vous pourrez insérer vos éléments de footer. (à maitriser)

Il ne s’agit pas d’une règle mais plutôt d’une coutume : On place souvent en footer des informations légales (cgu, politique de confidentialité, auteur et moyens de le contacter, ainsi que la barre de réseaux sociaux)

Sur ce blog, le footer propose tous ces éléments.

En cliquant sur le + d’une des zones du footer, vous pouvez insérer des blocs ou des liens à votre convenance

Astra vous facilite les choses en vous proposant de rappeler un menu secondaire que vous auriez préparé à cet effet ou les icones de vos réseaux sociaux

Vous pouvez même personnaliser le message mais pensez bien alors à afficher le libellé.

g) les menus

Il faut avoir au préalable construit vos catégories.

Ce sont vos catégories qui contiennent vos articles. En insérant vos catégories dans vos menus vous permettez ainsi à vos lecteurs de choisir les contenus qu’ils préfèrent parmi vos créations. Il s’agit en fait d’un filtre !

Cliquez sur « créer un nouveau menu«
Donnez lui un nom
Cochez « menu principal«
Cliquez sur Suivant
Cliquez sur « Ajouter des éléments« , un bandeau se développe
Développez « Catégories«
Cochez toutes vos catégories et cliquez sur « Ajouter«
Cliquez sur « organiser«
Mettez vos rubriques dans l’ordre souhaité avec les flèches verticales (la plus à gauche du menu en haut de la liste)
Décalez à droite les sous catégories avec la flèche droite afin d’indiquer que ce sont des sous-menus.

Rappel : N’oubliez pas de publier à la fin de vos manipulations afin de les appliquer réellement.

Vous serez surement obligé(e) de relooker l’apparence de ce menu. Par défaut le thème est gris claire sur fond blanc pour les sous rubriques :

Cliquez sur le petit crayon au dessus du menu (visible si vous pointez dessus).

Cliquez sur l’onglet Design de Personnalisation > menu principal
Modifiez la palette des éléments de texte Normal – au Survol – actif jusqu’à obtenir quelque chose de lisible.

Vous pouvez aussi vous aider à rendre le texte plus lisible en jouant avec l’arrière plan.

j’ai voulu ce tour d’horizon le plus bref possible mais j’ai bien conscience qu’il y’a déjà beaucoup de choses à retenir.

N’hésitez pas à revenir au plan en utilisant la flèche de remontée du footer et focalisez vous sur les éléments un par un. C’est par la pratique que vous deviendrez coutumier(e) de ce thème un peu délicat à dompter.