Créer un site widgetisable pour votre client

Il y a plusieurs facons de concevoir un thème wordpress pour soi ou pour un client.

Soit on code la plupart des éléments en dur, en partant d’une base html css, que l’on remplit au fur et à mesure, et que l’on agrémente de fonctions wordpress pour dynamiser le tout.

Typiquement sur une home page, on créerait la page home.php, la page home dans le backoffice, on choisit comme modèle de page « home ».A l’intérieur on coderait nos blocs, un slider en ramenant les images grace  à une boucle, on aurait des blocs coordonnées ou autre codés en dur dans le footer, une sidebar spécifique donc codée en dur dans une page sidebar.php.Bref le tout serait un mélange de code et de fonctions php classiques mélangé à du code, des marqueurs de modèle ou template tags wordpress..

L’avantage est de pouvoir styliser le tout plus facilement car tout est plus ou moins concu à la mano.L’avantage est de pouvoir appliquer une maintenance au client, en disant le moindre changement c’est du travail donc de l’argent.

Créer un site à partir des widgets

Une home page

L’idéal pour un client, c’est justement de pouvoir intervenir lui meme sur tous les changements visuels du site.Annuler des sections, remplacer les blocs dans les sections etc.

Ici on va simplement voir comment on peut créer tout un site, ou du moins la structure d’une page à partir des widgets.L’idée est de permettre à l’utilisateur de créer ses pages à partir de l’onglet widget du backoffice, comme le font énormément de thème prémium qui vendent des thèmes sur ce principe et qui dispose de leur propre page builder avec tout un tas de widget à mettre en place pour structurer une page.C’est le meme principe.
Il faut imaginer par exemple une one page avec section.l’intérieur des sections serait constitué d’un ou de plusieurs widgets,  que l’utilisateur aurait le choix de retirer ou remplacer ou modifier.
Dans notre page on veut afficher un  slider et bien sur l’utilisateur doit pouvoir le supprimer ou le remplacer

function copiercoller_widgets_init() {
 register_sidebar(array(
        'name' => __('Home Slider', 'copiercoller'),
        'id' => 'home-slider',
        'description' => __('Appears in home first section', 'copiercoller'),
        'before_widget' => '



<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>


',
        'before_title' => '',
        'after_title' => '',
    ));

}

Dans functions.php, je crée donc un nouvel espace widget: dans mon backoffice, j’ai un nouvel emplacement widget appelé Home slider

sidebar

J’ai téléchargé un plugin de slider qui marche aussi avec les widgets.Si le plugin génére un shortcode mais pas de widget, comme on sait que wordpress par défaut n’accepte pas les shortcodes dans les widgets, on doit appliquer une fonction pour que ca marche

Maintenant que j’ai crée ce nouvel espace pour y mettre des widgets, je dois indiquer à wordpress ou je veux le placer.Dans ma page home.php, je décide donc de l’afficher tout en haut, dans un container qui prend toute la largeur, j’appelle donc ici ma sidebar, ou widget, ou emplacement de widget(!!)

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('home-slider')) : dynamic_sidebar('home-slider'); endif; ?>

Ainsi, le slider n’apparaitra que la ou vous avez appelé le widget.Il ne reste plus qu’a styliser les balises générées.On va prendre un autre exemple.Le footer.

Le footer

Celui ci est très généralement composé de blocs, coordonnées, une carte, des logos, un texte…
Pour donner à l’utilisateur la possibilité de modifier le texte, les images, les logos, les intervertir ou que sais je, cette solution des widgets est idéale;
Voici un exemple de création de nouveaux emplacements de widgets, pour mon footer:
A l’intérieur de ma fonction de création de widgets, dans functions.php, je crée trois nouveaux emplacements:

                          register_sidebar(array(
        'name' => __('About coordonnées', 'ecommerce'),
        'id' => 'about-coordonnes',
        'description' => __('Appears in footer section', 'ecommerce'),
        'before_widget' => '

<br />
<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>
',
        'before_title' => '
<h3 class="widget-title">',
        'after_title' => '</h3>
',    ));
    register_sidebar(array(
        'name' => __('About Map', 'ecommerce'),
        'id' => 'about-map',
        'description' => __('Appears in footer section', 'ecommerce'),
        'before_widget' => '
<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>


',
        'before_title' => '




<br />
<h3 class="widget-title">',
        'after_title' => '</h3>
<p>




',
    ));
    register_sidebar(array(
        'name' => __('About right', 'ecommerce'),
        'id' => 'about-right',
        'description' => __('Appears in footer section', 'ecommerce'),
        'before_widget' => '

<br />
<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>
<p>


',
        'before_title' => '




<br />
<h4 class="widget-title">',
        'after_title' => '</h4>
<p>




',
    ));

Dans ma page footer.php j’appelle mes différents emplacements de widgets crées:

<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="section-heading">Nous sommes ici, contactez nous</h1>
<div class="col-xs-12 col-lg-4 col-lg-push-4 col-md-12" data-sr>
                    <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('about-map')) : dynamic_sidebar('about-map'); endif; ?>
</div>
<div class="col-xs-6 col-lg-4 col-lg-pull-4 col-md-6" data-sr>
                    <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('about-coordonnees')) : dynamic_sidebar('about-coordonnees'); endif; ?>
</div>
<div class="col-xs-6 col-md-6 col-lg-4" data-sr>
                    <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('about-right')) : dynamic_sidebar('about-right'); endif; ?>
</div>
</div>
</div>
</div>
</section>

Dans le backoffice je retrouve mes nouveaux emplacements de widgets:

coord

abot

je les affiche ouverts volontairement, on voit ainsi qu’on peut y mettre ce qu’on veut.Dans  mon emplacement about Map, j’y ai collé dans un widget texte, le code d’un map google, dans about right un widget catégorie et un menu personnalisé, et dans about coordonnées, un simple widget texte, avec dans le widget, le images des icones sociaux dans un <a href= » »>

Et voici un renducoordd

Et donc de cette manière, vous pouvez continuer à créer toute une page, à section ou non.Dans la fonction de création de widgets on peut, comme on le voit plus haut, appliquer soit des div, des balises aside, y coller les classes qu’on veut et c’est sur ces classes que l’on va agir en css pour styliser le tout.
Dans le code, on a intégré nos différents emplacement de widgets dans des container ou des sections.Rien ne nous empeche d’entoure ces blocs ou sections de conditions, avec un if{….} de facon à ce que s’il n’y a pas de widget, on n’affiche pas la section.
De cette facon l’utilisateur va pouvoir carrément retirer des sections entières et vraiment avoir l’impression de créer lui meme la page avec des éléments et informations de son choix

Pour une section comme celle ci:

presta

on pourrait très bien aussi concevoir de créer cette section grace à des widgets.On crée nos emplacements dans functions.php, on les place dans un fichier.php en appelant nos différents emplacements, puis dans le backoffice on remplit ces emplacements avec les widgets de notre choix.Ici en l’occurence, ce serait des widgets texte qu’on devrait ensuite styliser pour qu’à chaque nouveau widget texte, on aie toujours le même rendu.Les widgets devraient etre cadrés dans des blocs qui s’alignent les uns après les autres..En codant avec boostrap, ca peut aller très vite..

 

 

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.