Réglages wordPress : zone Widget, zone Menu, barre sociale, RSS et connexion, langages public et privé différents

Quelques réglages utiles pour wordPress
Quelques réglages utiles pour wordPress

Voici quelques réglages personnalisés intéressants pour wordPress 4, avec le thème twentyseventeen :

  • Ajouter une zone de widgets en bas de page,
  • Ajouter un menu dans le footer,
  • Ajouter une barre d’icones sociaux et un lien de connexion,
  • Avoir des langues différentes dans les espaces public (frontend) et privé (backend).

Afin de faire cela, on définit un thème enfant du thème 2017 de wordPress. On crée un répertoire 2017-child dans le répertoire des thèmes et à l’intérieur un fichier style.css avec les commentaires suivants :

style.css

Cela suffit pour créer un thème enfant. On crée ensuite un fichier functions.php afin, pour commencer, d’intégrer les feuilles de styles du thème enfant et la feuille de style du thème parent.

functions.php

Ce code est un extrait du début d’un fichier functions.php permettant d’inclure la feuille de style du thème parent et celles du thème enfant (que l’on place dans un répertoire css) et les scripts jQuery (frontend et backend placées dans le répertoire js), ainsi que la définition des favicons et des options de l’éditeur visuel tinyMCE. Le répertoire images contient les fichiers images nécessaires au thème. Au fur et à mesure, on place dans le répertoire du thème enfant les scripts du thème parent que l’on veut modifier. Ainsi, lors d’une mise à jour du thème parent, les modifications et améliorations du thème sont préservées.

Ajouter une zone de widgets :

On ajoute cette zone en appelant register_sidebar(). On ajoute à functions.php :

Le thème parent est twentyseventeen (2017) qui dispose d’une zone de widgets dans la barre latérale et de deux zones de widgets dans le footer nommées sidebar-1, sidebar-2, sidebar-3. On nomme la nouvelle zone sidebar-4. On ajoute le paramètre 11 à add_action() pour que l’ajout du widget se fasse après les définitions de widgets du thème parent (la priorité par défaut est 10, et les fonctions du thème parent s’exécutent normalement après celles du thème enfant).

on obtient alors ceci dans l’admin des widgets :

Zone de widgets supplémentaires
Zone de widgets supplémentaires

On recopie le dossier template-parts dans le répertoire de son thème enfant et l’on modifie le script templates-parts/footer/footer-widgets.php en ajoutant sidebar-4 :

Il suffit alors d’ajouter quelques règles CSS afin de changer l’affichage. Les deux zones de widgets du thème parent 2017 sont affichées avec des règles float: right et float: left. Je choisis d’utiliser les flexbox CCS3 :

Footer 2017 enrichi
Footer 2017 enrichi

Ajouter une zone de menu :

Le thème 2017 possède deux menus : un menu en haut de la page qui se contracte sur les petits écrans, et qui reste fixe en haut de la page lors du défilement ; et un menu destiné au préalable aux icones sociaux, situé dans le bas du footer. L’objectif est donc de rajouter un emplacement de menu juste au dessus du footer.

On enregistre donc un nouveau menu dans functions.php :

Ces quelques lignes suffisent à enregistrer un nouveau menu, que l’on définit dans l’espace privé :

Menu Footer dans l'espace privé
Menu Footer dans l’espace privé

Le menu étant enregistré et défini, il suffit de le placer dans le footer de wordPress et de le styliser.

On ajoute au fichier footer.php :

Et l’on crée un fichier navigation-footer.php dans le répertoire template-parts/navigation/ et on écrit le code :

navigation-footer.php

Les classes icon-bars et xbs-toogle sont destinées à être utilisées par le responsive design. L’appel à wp_nav_menu() suffit pour mettre en place le menu.

Barre sociale et connexion :

Il s’agit d’ajouter des liens vers les réseaux sociaux du site et un bouton de connexion/deconnexion. Cette barre est placée en position: fixed, en haut à droite de la page. On pourrait utiliser la barre de menus liens sociaux déjà présente dans le thème 2017, mais je préfère disposer d’un fichier que je peux inclure dans n’importe quel thème.

Barre d'icones sociaux et de connexion
Barre d’icones sociaux et de connexion

On crée un fichier social-sign-icons.php que l’on inclut dans le fichier header.php du thème. Les classes des items de listes proviennent d’une police d’icones Fontastic. Les comptes Facebook, Twitter et Google+ sont ceux d’un utilisateur que l’on recherche. Pour mon site, je mets mon pseudo dans la recherche. Si l’on veut d’autres comptes, il suffit de créer un utilisateur avec les metas données désirées.

social-sign-icons.php :

et on include ce fichier dans header.php :

Le fichier social-sign-icons.php est placé dans le répertoire inc du thème enfant.

Les règles CSS de l’exemple capturé :

Si l’on ne désire plus le Social Links Menu de base du thème twentyseventeen, on peut compléter la fonction de création de menu du footer en désenregistrant le menu social :

Et l’on efface le menu Social Links Menu dans le backend.

Langages public et privé différents :

Depuis la version 4.1, cette fonctionnalité est incluse dans wordPress. On sélectionne la langue du site dans Settings e General, et on règle la langue de l’espace public. Pour la langue de l’espace admin, cela se fait pour chaque utilisateur. On va dans Users et l’on règle pour chaque utilisateur la langue du backend si celle-ci est différente de la langue du site. La liste de sélection propose les langages disponibles sur le serveur, et les langages à télécharger si besoin.

Et hop, quelques réglages utiles et bien intéressants pour wordPress.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *