Colorlib

Colorlib.com est un site en langue anglaise qui propose des thèmes WordPress gratuits ou payants. Dans cette article je vais m’attacher à vous expliquer comme corriger une erreur d’affichage dans leur thème phare Sparkling.

Le thème sparkling

Sparkling est un thème en Flat Design gratuit disponible directement sur le répertoire WordPress.org. Ce thème est développé à l’aide du framework Bootstrap 3, il est donc optimisé pour tous les appareils mobiles tels que iPad, iPhone, Android et Windows Phone. De plus, un slider conçu à partir de FlexSlider agrémente la page d’accueil et met le contenu le plus important en avant. Ce thème est facilement personnalisable grace au customizer de wordpress.

Défaut d’affichage du menu sous IE et Edge

Mais malgré tous ces atouts le thème a un problème d’affichage sous IE et Edge. En effet le menu principale du header présente un défaut et ne s’affiche pas correctement. Après avoir cherché pendant longtemps la solution, jusqu’à ce que le thème soit mis à jour, je la partage avec vous ici.

La pseudo class :focus-within

Le thème créé par Colorlib présente un problème de conception majeur : il utilise dans sa dernière version la pseudo class :focus-within. Cette pseudo-classe s’applique lorsqu’un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu’on clique sur un champ d’un formulaire). Cette pseudo-classe s’applique également aux descendants de l’élément ciblé.
Pour plus d’information sur cette pseudo classe je vous conseille la lecture de cet article : La Pseudo Classe :Focus-within.

Comme vous pouvez le constater à la fin de l’article, cette pseudo classe pose un problème de compatibilité avec Edge et IE qui ne fournissent aucun support pour le moment.
Le problème ne serait pas important si IE et Edge se contentaient de pas interpréter le seul sélecteur qui utilise cette pseudo classe. Malheureusement, IE et Edge n’interprètent tout simplement pas le bloc entier des sélecteurs où :focus-within est présent.

Les correction à apporter au thème

La seule solution pour régler le problème d’affichage est donc de séparer le bloc de sélecteur en deux partie, une partie que IE et Edge interprèteront et une autre qui contiendra la pseudo classe :focus-within qu’ils refuseront d’interpréter. Pour cela il faudra créer un thème enfant au thème Sparkling en reprenant dans le fichier styles.css tous les blocs contenant la pseudo classe :focus-within et en les divisant en deux.

Si vous ne savez pas comment créer un thème enfant je vous recommande la fiche explicative de wordpress.org. Mais voici à quoi devra ressembler le fichier fonctions.php

Voici maintenant le fichier style.css avec tous les éléments repris.

Le truc en plus : meilleur gestion des polices Google

Comme vous pouvez le constater, le thème Sparkling fait appel à des polices Google Fonts en bonus voici comment améliorer le temps d’affichage de votre site (vous pouvez utiliser cet outil gratuit pour mesurer votre score : GTmetrix). En effet si vous mesurez votre score sur PageSpeed Insights de Google, vous remarquerez que l’une des recommandation est de « s’assurer que le texte reste visible pendant le chargement des polices Web ». Les polices du thème Sparkling sont chargées par le fichier fonctions.php du thème parent et plus particulièrement par la function sparkling_scripts (lignes 308 à 316 du fichier functions.php)

Voici comment ne pas charger les scripts du thème parent et les remplacer par les scripts du thème enfant en ajoutant au chargement des polices Google le paramètres display=swap. Si vous souhaitez en savoir plus à ce sujet je vous conseille la lecture de cet article concernant le paramètre display des polices en CSS.

Téléchargement du thème enfant

Si vous le souhaitez, vous pouvez télécharger ici les fichiers du thème enfant de Sparkling complet. N’hésitez pas à me laisser vos remarques en commentaires.

Dans un précédent article je vous avais parlé du fichier theme.json.
Le fichier theme.json de votre thème Business Directory est le seul fichier obligatoire.

Mais votre thème peut contenir d’autre sortes de fichier, d’abord le fichier styles.css qui contiendra vos styles CSS pour modifier l’aspect du plugin, et pour ce qui nous intéresse aujourd’hui plus particulièrement : des fichiers javascript et/ou un fichier theme.php afin d’initialiser des routines ou des hook wordpress.

Dans cet exemple je vais vous montrer comment créer un thème BD avec un affichage en onglets pour les commentaires et le formulaire de contact de la page d’annonce seule.

Il est important de noter que pour introduire du javascript ou jQuery dans Business Directory la création d’un thème est obligatoire.

Afin que ce thème fonctionne correctement, vous devrez cocher les options « Inclure les formulaire de commentaires sur les pages annonces ? » et « Activer le formulaire de contact sur la page d’annonce ? » dans l’administration des options du Plugin Business Directory pour WordPress.

Je vous rappelle, que ma traduction FR et complète à 100% du plugin est en vente dans la boutique : Traduction FR pour Business Directory.

L’arborescence du thème pour Business Directory

Ici notre thème s’appelle tout simplement « onglets » donc notre dossier de départ également :

onglets/
onglets/theme.json
onglets/theme.php
onglets/thumbnail.png
onglets/assets/
onglets/assets/styles.css
onglets/assets/vendor/tabs.js
onglets/templates/
onglets/templates/single.tpl.php

Le fichier theme.json

Pour créer nos onglets nous aurons besoin d’indiquer dans le fichier theme.json que nous allons utiliser les fichiers tabs.js et styles.css pour l’apparence de nos onglets :

"assets": {     
   "css": [ "styles.css" ],     
   "js": ["vendor/tabs.js"] 
}

Nous devrons également indiquer dans le fichier theme.json que nous allons utiliser les variables de thème à un autre endroit que celui prévu à l’origine par le plugin.

Voici la liste des variables de template supportées par le plugin :

NomDESCRIPTION
contact_formCode HTML formulaire pour envoyer un message privé au propriétaire de l’annonce
commentsCode HTML liste des commentaires de l’annonce. Utilise le template comments_template().
googlemapsCode HTML pour afficher la Google Map associée à l’annonce.
reviewsCode HTML pour afficher les critiques de l’annonce et le formulaire pour poster une nouvelle critique.

Dans notre exemple, nous allons nous servir des variables contact_form et comments qui sont utilisées par la version gratuite du plugin (Alors que googlemaps et reviews sont elles utilisées par des add-on payants). Nous voulons les afficher dans des onglets sur la vue détaillée d’une annonce et donc les appeler dans le fichier single.tpl.php de notre thème :

"template_variables": {
     "single": ["comments", "contact_form"]
     }

En résumé, voici comment construire le fichier theme.json :

{
     "name": "Glink Onglets",
     "description": "Thème avec Onglets, classic et élégant",
     "version": "1.0.0",
     "author": "Glink.fr",
     "author_email": "contactez-moi@glink.fr",
     "author_url": "https://www.glink.fr",  
     "template_variables": {
     "single": ["comments", "contact_form"]
     },
     "requires": "4.0",
     "assets": {
         "css": [ "styles.css" ],
         "js": ["vendor/tabs.js"]
     },
     "suggested_fields": []
 }

Le fichier theme.php

La fonction du fichier theme.php est d’initialiser des routines ou des hook dans wordpress ou Business Directory. Actuellement 2 sortes de hook sont supportés :

  • init: appelé quand le système du thème a été initialisé.
  • enqueue_scripts: appelé quand les ressources pour la page courante sont mises en queue.

Dans notre cas nous auront besoin du fichier theme.php pour appeler le script jQuery jquery-ui-tabs qui permet d’afficher les onglets (Ce script est déjà inclus dans WordPress, il suffit de l’appeler). Voici comment construire le fichier theme.php :

<?php
 function wpbdp_themes__onglets_enqueue_scripts() {
     wp_enqueue_script( 'jquery-ui-tabs' );
 }

Notez bien la construction du nom de la fonction : wpbdp_themes__lenomdemontheme_enqueue_scripts()

Notez aussi que nous ne fermons pas la balise php à la fin du fichier.

Le fichier single.tpl.php

Dans certains cas il vous faudra créer un modèle de page spécialement pour la page d’affichage de BD dans votre thème wordpress afin de ne pas afficher 2 fois les commentaires et/ou cocher l’option « Inclure les commentaires BD appelé » dans les options BD :

Le fichier styles.css

Notez que je ne partage avec vous que le CSS des onglets. Pour obtenir un thème complet premium pour Business Directory rendez-vous dans la boutique ou commandez le sur la page de contact.

Le fichier tabs.js

Exemple de rendu HTML

Téléchargez le thème Onglets

TELECHARGEZ ICI GRATUITEMENT LE THEME BD ONGLETS

Conclusion

À présent, vous savez comment incorporer du javascript ou des fonctionnalités jQuery à votre thème Business Directory.

N’hésitez pas à me contacter si vous avez des questions.

Voici divers codes à ajouter à votre fichier function.php de votre thème pour personnaliser la partie administration de votre site sans aucun plugin

1. Personnaliser le pied de page de la partie administration de votre blog :

2. Une favicon pour la partie administration du site :

3. Personnaliser le logo de la partie administration :

4. Comment personnaliser sans plugin le logo de la page login du site :

5. Changer le numero de version de WP en bas à droite de la partie admin :

6. Ajouter un widget dans le tableau de bord :

7. Supprimer des widgets du tableau de bord :

8. Modifier le menu « aide » de l’administration :

Dans un précédent article je vous avez parlé du plugin Business Directory pour WordPress. Dans ce nouvel article je vais revenir plus en détail sur la façon de personnaliser l’apparence du plugin.

Il y a plusieurs façons de personnaliser l’aspect du plugin Business Directory pour WordPress.
Les concepteurs de BD proposent des themes et des modules premium payants mais vous pouvez vouloir le faire par vos propres moyens.
Vous pouvez tout d’abord le faire de façon ponctuelle avec un fichier CSS et/ou l’écrasement des templates de base.
Il ne s’agit pas d’écraser les fichiers directement dans les répertoires source du plugin BD (changements qui seraient perdus à chaque mise à jour du plugin), mais de placer les nouveaux fichiers à des endroits spécifiques afin qu’il soient chargés par défaut par le plugin.

Personnaliser les styles CSS :

Pour écraser les styles CSS du theme BD actif, vous devrez nommer le fichier qui écrasera les styles

wpbdp.css

Vous devrez ensuite le placer dans un des emplacements suivants :

wp-content/plugins/
wp-content/themes/votre theme WP actif/
wp-content/themes/votre theme WP actif/css/

Je reviendrai plus en détails sur les Styles CSS utilisés pour l’affichage du plugin BD dans de nouveaux articles.

L’écrasement des template:

L’écrasement de template est également un moyen de modifier le comportement d’un fichier template qui se trouvent pour les templates de base dans:

wp-content/business-directory-plugin/templates

ou pour les themes premium dans:

wp-content/businessdirectory-themes/theme BD Actif/templates/

ou pour les themes par défauts gratuits dans:

wp-content/business-directory-plugin/themes/theme BD Actif/templates/

Repérez le fichier que vous souhaitez substituer ces fichiers sont reconnaissables à leur extension : .tpl.php

Vous devrez ensuite placer ce fichier non pas dans le répertoire du plugin BD mais un sous-dossier business-directory/ de votre theme WP actif qui devra être créé de cette façon :

wp-content/themes/votre theme WP actif/business-directory/nom du fichier template.tpl.php

Vous pouvez maintenant modifier ce fichier à votre guise.

Créez votre theme:

Vous pouvez aussi vouloir créer votre theme BD personnalisé complet pour y incorporer du javascript par exemple. Les themes se trouvent dans un répertoire spécifique du plugin BD :

wp-content/plugins/business-directory-plugin/themes/

de base, le plugin contient 2 themes :

defaut
no-theme

Vous pouvez vous baser sur l’un ou l’autre de ces theme pour créer le votre ou partir de zéro.
Voila un exemple des fichiers que peut contenir un theme :

nom-du-theme/theme.json
nom-du-theme/theme.php
nom-du-theme/thumbnail.png
nom-du-theme/assets/styles.css
nom-du-theme/templates/single.tpl.php
nom-du-theme/templates/excerpt.tpl.php
nom-du-theme/templates/field_social-twitter.tpl.php

Un seul de ces fichiers est obligatoire :

theme.json

Ce fichier contient les informations essentielles pour le bon fonctionnement du theme :

« name »: le nom du theme
Requis
exemple:

"name": "Glink",

« description »: courte description du theme
optionnel
exemple:

"description": "Theme du site GLink.",

« version »: version du theme
Requis
exemple:

"version": "1.0.3",

« author »: le nom de l’auteur
Requis
exemple:

"author": "Glink",

« author_email »: email pour contacter l’auteur
Requis
exemple:

"author_email": "contactez@glink.fr",

« author_url »: l’url du site de l’auteur
optionnel
exemple:

"author_url": "https://www.glink.fr",

« requires »: quelle version de BD minimum est requise pour que le theme fonctionne correctement
optionnel
exemple:

"requires": "4.0",

« assets »: les fichiers css et Javascript qui doivent être inclus pour faire fonctionner le theme
optionnel
exemple :

"assets": {
        "css": [ "styles.css","reset.css" ],
        "js": ["vendor/cooltabs.js"]
    },

« suggested_fields »: les champs recommandés pour un bon fonctionnement du theme
les tags autorisés sont :

phone
fax
email
address
city
state
zip
twitter
website

exemple :

"suggested_fields": ["phone", "address"],

« template_variables »: ce sont des variables definies par BD directement ou par des modules premium qui sont utilisées à des endroits spécifiques des fichiers template. Pour les utiliser à d’autres endroits du fichier vous devrez le specifier ici.
Par exemple vous pourrez vouloir afficher un formulaire pour contacter l’auteur après l’affichage de l’annonce d’un site, pour cela vous devrez spécifier dans « template_variable » que vous allez l’afficher ailleurs que dans son block par défaut:

"template_variables": {
		"single": ["contact_form"]
	}

le code de theme.json ressemblera donc à ça :

{
    "name": "Glink",
    "description": "Theme du site GLink.",
    "version": "1.0.3",
    "author": "Glink",
    "author_email": "contactez@glink.fr",
    "author_url": "https://www.glink.fr",
    "requires": "4.0",
    "assets": {
        "css": ["styles.css"],
        "js": ["javascript.js"]
    },
    "suggested_fields": ["phone", "address"],
    "template_variables": {
		"single": ["contact_form"]
	}
}

Je reviendrai plus en détail très bientôt sur la création de theme pour BD. En attendant n’hésitez pas à me poser vos questions en commentaire de cet article.

Articles de référence en anglais :
http://docs.businessdirectoryplugin.com/themes/customization.html
http://docs.businessdirectoryplugin.com/themes/creating-themes.html