Bootstrap Theme Switcher : quand tu ne sais pas quoi faire d'autre pour échapper à ce que tu dois faire..

En Juillet 2017

Visitez Mon Site
Cet article a été lu 22 fois avant toi... Il y a eu 211227 visiteurs sur le blog depuis qu'il existe.
Bootswatch

=> Ma Formation en Webmarketing

Salut,

Quand tu n'as pas envie de faire un truc important, fais un truc pas important, au moins tu auras fait quelque chose..

Donc aujourd'hui j'ai ajouté un "Bootstrap Theme Switcher" c'est à dire la possibilité de changer l'habillage graphique de mon site http://lesfameusesvideos.com que j'ai refait avec Bootstrap il y a quelques mois..

 

J'avais choisi finalement le thème Flatly parmi les thèmes gratuits disponibles sur Bootswatch..

=> Vends ces 10 Ebooks, tu peux les modifier comme tu veux !

 

Mais c'est mon choix personnel.

 

Maintenant le visiteur peut choisir son thème préféré pour habiller mon site, personne ne m'a jamais demandé cette fonctionnalité, donc c'est bien un truc vraiment pas important.

 

=> La façon la plus simple de gagner de l'argent en affiliation !

Maintenant chaque mois le thème par défaut change, donc le site aura un thème différent chaque mois pour les nouveaux visiteurs.

 

Les anciens visiteurs qui ont choisi un thème gardent ce thème dans un cookie pendant 30 jours.

 

Voilà, tu as un aperçu de comment je fais pour ne pas faire les choses utiles, importantes, je fais des conneries qui ne servent à rien, et s'il n'y avait que ce Theme Switcher ça irait... :-)

=> Le catalogue de toutes mes vidéos exclusives !

 

Mais c'est déjà quelque chose.. Un truc de fait c'est mieux que rien du tout, non ?

Le truc important que je dois faire pour ce site c'est de générer des flux RSS des nouveaux produits 1TPE pour pouvoir ensuite les mettre dans Aweber, pour qu'il envoit des emails automatiquement quand il y a X nouveaux produits 1TPE.

 

=> Des milliers de produits numériques ici !

Cela devrait certainement générer des ventes supplémentaires, donc c'est un truc important que j'aurais du faire il y a des mois voir des années déjà...

 

En attendant, voilà le résultat du truc pas important :

http://lesfameusesvideos.com/?t=cerulean
http://lesfameusesvideos.com/?t=cosmo
http://lesfameusesvideos.com/?t=cyborg
http://lesfameusesvideos.com/?t=darkly
http://lesfameusesvideos.com/?t=flatly
http://lesfameusesvideos.com/?t=journal
http://lesfameusesvideos.com/?t=lumen
http://lesfameusesvideos.com/?t=paper
http://lesfameusesvideos.com/?t=readable
http://lesfameusesvideos.com/?t=sandstone
http://lesfameusesvideos.com/?t=simplex
http://lesfameusesvideos.com/?t=slate
http://lesfameusesvideos.com/?t=spacelab
http://lesfameusesvideos.com/?t=superhero
http://lesfameusesvideos.com/?t=united
http://lesfameusesvideos.com/?t=yeti

Le theme switcher est le dernier bouton à droite dans la barre de menu, super...

=> Affiche ton lien sur toutes les pages de mes sites y compris celui-ci !

 

J'utilise bootstrap pour un de mes sites pour gérer le thème graphique.
Sur bootswatch il y a une quinzaine de thèmes dont 12 en version fond blanc.


J'ai ajouté un code pour permettre au visiteur de choisir son thème préféré.



J'ai aussi défini un thème par défaut différent pour chaque mois de l'année. On pourrait en changer plus souvent, un par semaine, par jour ou au hasard pour chaque nouveau visiteur. Mais un peu de stabilité mensuelle c'est bien aussi. :-)



Pour Wordpress il y a sans doute un plugin qui fait ça, mais comme je n'utilise pas wordpress pour mon site j'ai été obligé de mettre du code Javascript pour gérer ça, et une petite partie en PHP.

=> Mon Club Affiliation Facile pour Affiliés et Vendeurs 1TPE !



Voici donc la liste des thèmes bootswatch avec fond blanc et comment les sélectionner avec PHP en fonction du mois en cours :

 


$mymonththemes = Array("cerulean", "cosmo", "flatly", "journal", "lumen", "paper", "readable", "sandstone", "simplex", "spacelab", "united", "yeti");
$mymonththemesid = date('n') - 1;
$mytheme = $mymonththemes[$mymonththemesid];
setcookie('lfvtheme', $mytheme, time()+3600*24*30); // je prefère utiliser le cookie si possible pour la prochaine page visitée


Maintenant la partie code Javascript (jquery) qui est généré en PHP pour pouvoir placer le thème en cours d'utilisation :


 <script>
var themes = {
    "cerulean" : "http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css",
    "cosmo" : "http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cosmo/bootstrap.min.css",
    "flatly" : "http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css",
    "journal" : "http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/journal/bootstrap.min.css",
    "lumen" : "http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/lumen/bootstrap.min.css",
    "paper" : "http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/paper/bootstrap.min.css",
    "readable" : "http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/readable/bootstrap.min.css",
    "sandstone" : "http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/sandstone/bootstrap.min.css",
    "simplex" : "http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/simplex/bootstrap.min.css",
    "spacelab" : "http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/spacelab/bootstrap.min.css",
    "united" : "http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/united/bootstrap.min.css",
    "yeti" : "http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/yeti/bootstrap.min.css"
}
$(function(){
    var mytheme = Cookies.get("lfvtheme");
        // ICI le '.$mytheme.' c'est parce que ce code Javascript est dans un echo ''; en PHP.
    if (mytheme != "'.$mytheme.'") $("#themecss").replaceWith(\'<link id="themecss" rel="stylesheet" href="' + themes[mytheme] + '">\');
    
    $(".theme-link").click(function(){
        $("#themecss").replaceWith(\'<link id="themecss" rel="stylesheet" href="\' + themes[$(this).attr("data-theme")] + \'">\');
        Cookies.set("lfvtheme",$(this).attr("data-theme"), { expires: 30 });
    });
});
</script>

 


Pour la partie HTML, inclure le CSS du bon thème dans le HEAD, et aussi afficher une liste déroulante dans la barre de navigation, encore une fois c'est le PHP qui insère la bonne valeur $mytheme :


<link id="themecss" href=\"http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/'.$mytheme.'/bootstrap.min.css\" rel=\"stylesheet\">


Le code de la liste déroulante :


<ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-image"></i> <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#" data-theme="'.$mytheme.'" class="theme-link">Design du mois<br>----</a></li>
                <li><a href="#" data-theme="cerulean" class="theme-link">Cerulean</a></li>
                <li><a href="#" data-theme="cosmo" class="theme-link">Cosmo</a></li>
                <li><a href="#" data-theme="flatly" class="theme-link">Flatly</a></li>
                <li><a href="#" data-theme="journal" class="theme-link">Journal</a></li>
                <li><a href="#" data-theme="lumen" class="theme-link">Lumen</a></li>
                <li><a href="#" data-theme="paper" class="theme-link">Paper</a></li>
                <li><a href="#" data-theme="readable" class="theme-link">Readable</a></li>
                <li><a href="#" data-theme="sandstone" class="theme-link">Sandstone</a></li>
                <li><a href="#" data-theme="simplex" class="theme-link">Simplex</a></li>
                <li><a href="#" data-theme="spacelab" class="theme-link">Spacelab</a></li>
                <li><a href="#" data-theme="united" class="theme-link">United</a></li>
                <li><a href="#" data-theme="yeti" class="theme-link">Yeti</a></li>
              </ul>
      </li>
</ul>



Voilà, c'est tout ce qu'il y a en code, est-ce que quelqu'un sait s'il y a une façon plus élégante uniquement en javascript de faire la même chose ?

A+

J'aimerais bien que tu cliques sur ces boutons, parce que ça apportera plus de gens sur mon blog, merci :

Et si tu me laisses ton email, je peux t'aider avec ton blog/site...

Enfin, les commentaires Facebook si tu veux spammer ou poser une question :-)