Nous allons mettre en place un système d’initialisation d’objet javascript automatiquement en fonction du template hierarchy de WordPress, ou pour le dire plus simplement en fonction de la page sur laquelle on se trouve.
Par exemple si les objets javascript existent, peuvent être appelés automatiquement Single.init(), PageTemplatePageAccueil.init(), Postid50.init(), LoggedIn.init(), …
Le script se base sur les class css renvoyée par la fonction get_body_class, il faut donc impérativement utiliser ce petit bout de code dans votre header :
Passons au Javascript et commençons par récupérer les class du body sous forme de tableau
//On récupère le noeud dom <body>
var bodyDom = document.getElementsByTagName('body')[0];
//On récupère les class sur le body
var htmlClass = bodyDom.className;
//On coupe au niveau des ' '
htmlClass = htmlClass.split(' ');
On parcoure ensuite les différents class css contenu dans notre tableau et on instancie nos objets.
//Pour chaque valeur (IE9+)
htmlClass.forEach(function(element,index,array) {
//On instancie un objet avec la string
var currentObject = window[element];
//Si cet objet existe
if(currentObject != undefined){
//Alors on l'initialie
currentObject.init();
}
});
Vous êtes maintenant capable d’instancier les objets nécessaires à chaque de vos pages, par exemple la page d’accueil :
var home = new (function()
{
// Accès à l'objet
var that = this;
//Initialisation de l'objet
this.init = function(){
console.log('home init OK');
};
});
Pour aller un peu plus loin, on va regrouper créer un objet Bootstrap et utilisé du camelCase (c’est plus joli ! /troll).
/**
* Pour la home page
*/
var Home = new (function()
{
// Accès à l'objet
var that = this;
//Initialisation de l'objet
this.init = function(){
console.log('Home init OK');
};
});
/**
* String Helper
*/
var StringHelper = new (function(){});
/**
* Camelize string
* @param string str
* @return string
*/
StringHelper.camelize = function(str)
{
return (str + "").replace(/-\D/g, function(match) {
return match.charAt(1).toUpperCase();
});
};
/**
* Capitalize first letter
* @param string str
* @return string
*/
StringHelper.capitaliseFirstLetter = function(str)
{
return str.charAt(0).toUpperCase()+str.slice(1);
};
/**
* Boostrap
*/
var Bootstrap = new (function()
{
// Accès à l'objet
var that = this;
//Init
this.init = function()
{
//Appel d'objet dynamic
that.dynamicClassCall();
},
/**
* Appel d'objet dynamique
*/
this.dynamicClassCall = function ()
{
//On récupéere le noeud dom <body>
var bodyDom = document.getElementsByTagName('body')[0];
//On récupère les class sur le body
var htmlClass = bodyDom.className;
//On camélise
htmlClass = StringHelper.camelize(htmlClass);
//On coupe au niveau des ' '
htmlClass = htmlClass.split(' ');
//Pour chaque valeur
htmlClass.forEach(function(element,index,array) {
//On capitalize la première lettre
var value = StringHelper.capitaliseFirstLetter(element);
//On instancie un objet avec la string
var currentObject = window[value];
//Si cet objet existe
if(currentObject != undefined){
//Alors on l'initialie
currentObject.init();
}
});
};
});
//Initialisation du bootstrap
Bootstrap.init();
A vous d’organiser toussa dans des fichiers distincts, compiler, tester, minifier, …
Pour savoir comment bien démarrer avec le theme builder Divi, voir ici.
Nous utilisons des cookies pour vous garantir une expérience optimale sur notre site. Si vous continuez à naviguer sur notre site, nous supposerons que vous en êtes satisfait.Ok
