WordPress : Barres latérales WordPress illimitées

Publié par Jean-Michel le

Je me demandais juste si quelqu’un pouvait me donner des conseils sur la façon de créer des barres latérales illimitées pour un thème WordPress.

Donc, fondamentalement, je cherche à ajouter une boîte méta sur les publications et les pages avec une liste déroulante de toutes les barres latérales disponibles, où l’utilisateur peut ensuite sélectionner une barre latérale spécifique pour n’importe quelle publication ou page. J’ai compris cette partie, mais je voudrais également ajouter une fonctionnalité ici pour permettre aux utilisateurs de créer des barres latérales personnalisées pour n’importe quel article ou page. Ainsi, essentiellement, l’utilisateur peut choisir n’importe quelle barre latérale pour n’importe quel article ou page ou créer de nouvelles barres latérales pour n’importe quel article ou page qui pourraient ensuite être remplies de widgets sur la page des widgets.

Je suis à moitié là, mais je ne sais pas comment créer la fonctionnalité pour créer de nouvelles barres latérales.

Solution n°1 trouvée

Donner aux utilisateurs la possibilité de choisir une barre latérale est bien, mais je ne pense pas que ce soit une bonne idée de leur donner la fonctionnalité de créer leurs propres barres latérales. Vous entrerez rapidement dans le problème où vous aurez des tonnes de barres latérales dans votre zone de widgets chacune pour un message différent.

Cependant, si j’étais dans votre situation, j’aurais créé une seule barre latérale, puis ajouté dynamiquement des widgets à cette barre latérale en fonction du message affiché. Pour l’utilisateur final, les deux se ressembleront. Quoi qu’il en soit, il n’y a pas de bonne ou de mauvaise réponse ici, cela dépend de la façon dont vous voulez aborder la situation.

Solution n°2 trouvée

Il y a moyen de le faire mais c’est un peu long.

Créer un contrôle de personnalisation pour ajouter plusieurs barres latérales

Le moyen le plus simple consiste simplement à prendre le contrôle personnalisé appelé champ Multi Input à partir d’ici. Assurez-vous également d’ajouter ce contrôle personnalisé et toutes les fonctionnalités jQuery qui vont avec (dans le fichier .js).

Avec cela, ajoutez à votre fichier de personnalisation (ou si vous n’avez pas de fichier de personnalisation dédié, à votre functions.phpfichier)

if(!function_exists('yourtheme_text_sanitization')){
    function yourtheme_text_sanitization($input){
        return wp_kses_post( force_balance_tags($input) );
    }
}


/**
------------------------------------------------------------
SECTION: Sidebars
------------------------------------------------------------
**/
$wp_customize->add_section('section_sidebars', array(
    'title'     => esc_html__('Sidebars', 'yourtheme'),
    'priority'  => 0,
));


    /**
    Sidebars
    **/
    $wp_customize->add_setting('sidebars', array(
        'default'     => '',
        'sanitize_callback' => 'yourtheme_text_sanitization',
    ));
    $wp_customize->add_control(new Multi_Input_Custom_control($wp_customize, 'sidebars', array(
        'label'         => esc_html__( 'Sidebars', 'yourtheme' ),
        'description'   => esc_html__( 'Add as many custom sidebars as you need', 'yourtheme' ),
        'settings'      => 'sidebars',
        'section'       => 'section_sidebars',
    )));

La première fonction est la fonction de nettoyage pour le rappel de nettoyage de votre personnalisateur.

Alors maintenant, vous devriez avoir des « Barres latérales » dans votre menu Apparence > Personnaliser.

Créer des barres latérales dynamiquement

Mais maintenant, vous devez ajouter vos barres latérales. Si vous avez un fichier de barre latérale dédié comme l’ sidebars.phpendroit où vous enregistrez vos barres latérales de thème, vous pouvez le mettre là, ou dans votre functions.phpfichier

if ( function_exists( 'register_sidebar' ) ) {
    $sidebars=get_theme_mod('sidebars','');
    if($sidebars!=''){
        $sidebars = explode('|', $sidebars);
        $i = 0;
        foreach($sidebars as $sidebar){
            $i++;
            register_sidebar(array(
                'name'=>$sidebar,
                'id' => 'sidebar-'.$i,
                'before_widget' => '<div id="%1$s" class="widget %2$s">',
                'after_widget' => '</div>',
                'before_title' => '<div class="sidebar-widget-heading"><h3>',
                'after_title' => '</h3></div>',
            ));
        }
    }
}

C’est le minimum dont vous avez besoin pour pouvoir ajouter plusieurs barres latérales dans le thème, et elles doivent apparaître dans Apparence > Widgets.

Ajouter la métabox de la barre latérale

Maintenant, ajouter une métabox pour les afficher est relativement facile. Dans votre functions.phpfichier , ou un fichier séparé où vous ajoutez des métaboxes aux publications/pages/CPT, ajoutez

// Add metabox
add_action('admin_init', 'yourtheme_post_add_meta');
if ( ! function_exists( 'yourtheme_post_add_meta' ) ){
    function yourtheme_post_add_meta(){
        add_meta_box('post-sidebar', esc_html__('Select Sidebar', 'yourtheme'), 'yourtheme_post_sidebar_meta_box', 'post');
    }
}

//Metabox
if ( ! function_exists( 'yourtheme_post_sidebar_meta_box' ) ){
    function yourtheme_post_sidebar_meta_box( $post ){
        $values = get_post_custom( $post->ID );
        $custom_sidebar = (isset($values['custom_sidebar'][0])) ? $values['custom_sidebar'][0] : '';
        wp_nonce_field( 'my_meta_box_sidebar_nonce', 'meta_box_sidebar_nonce' );
        ?>
        <p>
            <select name="custom_sidebar" id="custom_sidebar">
                <?php
                global $wp_registered_sidebars;
                $sidebar_replacements = $wp_registered_sidebars;
                if(is_array($sidebar_replacements) && !empty($sidebar_replacements)){
                    foreach($sidebar_replacements as $sidebar){
                        echo "<option value='{$sidebar['name']}'".selected($sidebar['name'], $custom_sidebar, false).">{$sidebar['name']}</option>";
                    }
                }
                ?>
            </select>
        </p>
        <?php
    }
}

//Save Metabox
add_action( 'save_post', 'yourtheme_post_save_sidebar_meta_box' );
if ( ! function_exists( 'yourtheme_post_save_sidebar_meta_box' ) ){
    function yourtheme_post_save_sidebar_meta_box( $post_id ){
        if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ){
            return;
        }
        if( !isset( $_POST['custom_sidebar'] ) || !wp_verify_nonce( $_POST['meta_box_sidebar_nonce'], 'my_meta_box_sidebar_nonce' ) ) {
            return;
        }
        if( !current_user_can( 'edit_pages' ) ) {
            return;
        }
        if( isset( $_POST['custom_sidebar'] ) ){
            update_post_meta( $post_id, 'custom_sidebar', wp_kses( $_POST['custom_sidebar'] ,'') );
        }
    }
}

Et ça devrait être ça. Un peu long, mais un moyen d’ajouter autant de barres latérales à votre thème que vous le souhaitez 🙂

J’espère que cela aide.

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

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