Gérer la colonne latérale (sidebar) d’Astra et Astra Pro

La structure des conteneurs et la sidebar

Le thème WordPress Astra et son plugin Astra Pro utilisent une maquette faite ainsi :

• un conteneur général contient
  • l’en-tête (qui contient 3 en-têtes)
  • le conteneur « primary« 
  • le pied de page (qui contient 3 pieds de page)
• le conteneur « primary«  contient
  • un  conteneur de contenu (qui affiche le contenu des pages, des articles, des produits, des catégories, des étiquettes)
  • et une colonne latérale ou sidebar, facultative

Le constructeur de colonne latérale

Pour définir la colonne latérale, on se rend sur une des pages de son site WordPress, en étant connecté, et on clique sur Personnaliser dans la barre d’administration du haut.

On arrive dans l’outil de personnalisation, qui s’appelle Customizer en anglais.

Puis on clique sur Colonne latérale dans le menu de gauche, et on arrive à l’outil de personnalisation de la colonne latérale.

Ou plutôt, des colonnes latérales car on constate aussitôt que l’onglet Général permet justement de gérer l’affichage ou pas de la colonne latérale sur chaque type de page :

• mise en page par défaut : c’est le réglage global par défaut, qu’on pourra ensuite changer selon le type de page : par exemple on choisit de toujours l’afficher sauf sur les articles de blog, ou de ne jamais l’afficher sauf sur les pages produit
• sur les « pages » à proprement parler, dans le vocabulaire de WordPress
• sur les articles de blog
• sur les « archives » (ce terme désigne en fait les catégories et les étiquettes, pages de taxonomie qui sont susceptibles d’être paginées)
• sur « WooCommerce » (en fait, sur les catégories de produit)
• sur « produit seul » (en fait, sur les pages produit de WooCommerce)

En bas de ce menu, on a une option pour définir la largeur de la colonne latérale quand on a choisi de l’afficher sur tel type de page.

Insérer des widgets dans une colonne latérale

Pour ajouter des éléments dans une colonne latérale, on doit ajouter des widgets.

Comme la barre latérale est un emplacement dont les contenus varient, Astra définit en réalité plusieurs widgets de colonne latérale.

On peut gérer ces widgets avec trois méthodes :

• avec l’outil de personnalisation de la barre latérale :
  • on navigue sur une page du type de celle dont on veut modifier la colonne latérale, par exemple un article de blog, une catégorie de produit, ou la page d’accueil
  • on va dans le menu Colonne latérale et on l’active pour ce type de page
  • on voit qu’une colonne latérale apparait
  • on clique sur l’icône « crayon » de cette colonne
  • cela fait apparaitre une zone dans le menu de gauche dans laquelle on peut intégrer un des blocs de WordPress, par exemple une liste de catégories, ou d’avis, ou les derniers commentaires, etc
• avec l’outil de personnalisation des widgets :
  • on va dans le Customizer
  • on clique sur Widgets
  • on navigue jusqu’à une page où s’affiche la colonne latérale
  • on voit s’afficher un nouvel item dans le menu de gauche, comme par exemple « Colonne latérale principale »
  • on clique dessus et on ajoute les widgets qu’on veut 
• ou avec l’interface classique de WordPress :
  • dans l’administration : Apparence > Widgets
  • on sélectionne une des barres latérales qu’on veut customiser
  • on ajoute les widgets
  • on sauve

L’onglet Design

Dans l’outil de personnalisation, dans le menu Colonne latérale, on clique sur l’onglet Design.

Il permet de définir

• la couleur de fond,
• les couleurs du titre et du contenu,
• les paramètres des polices de caractère des titres et du texte,
• et enfin les marges interne et externe (padding et margin en CSS).

Exemples de barres latérales

Vous pouvez aller voir mes démos de sites pros, j’y utilise souvent une barre latérale, notamment dans les pages blog :

• Création de site Internet pour architecte / décoratrice d’intérieur
• Création de site Internet pour expert-comptable
• Création de site Internet pour prof, enseignant, formateur, école

Conclusion

Voilà, vous maîtrisez maintenant la sidebar d’Astra.

Si vous avez des questions, s’il vous plait posez-les en commentaire.