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
address
city
state
zip
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
