Limiter le nombre de widgets dans les barres latérales

17

Si j'utilise une zone widgetisée personnalisée (par exemple le pied de page) où il n'y a qu'un nombre limité de spots pour les widgets (par conception), puis-je limiter le nombre de widgets que l'utilisateur peut inclure dans cette zone widgetisée spécifique? Peu importe que la solution soit au niveau du backend ou du front end. Je vous remercie.

Jukov
la source

Réponses:

10

J'ai résolu cela en Javascript. Si vous voulez l'empêcher complètement, vous devez également le faire côté serveur, car vous pouvez modifier les widgets avec Javascript désactivé (essayez-le!).

Les différentes barres latérales sont vérifiées lorsque vous leur déposez des widgets ou en les éloignez. S'ils sont pleins, la couleur d'arrière-plan change et vous ne pouvez plus y déposer d'éléments. Si, au démarrage, la barre latérale est déjà plus que pleine (car vous avez resserré la restriction), la couleur d'arrière-plan devient rouge. Vous pouvez toujours faire glisser les widgets loin des widgets complets pour les rendre à nouveau vides.

Une barre latérale pleine et une de plus que pleine

Veuillez tester ce code pour trouver des moyens d'ajouter ou de supprimer des widgets que j'ai manqués. La "magie" dans le code jQuery vient d' Aman , qui a répondu à une question Stack Overflow que j'ai postée à ce sujet .

Javascript:

jQuery( function( $ ) {
    var sidebarLimits = {
        'sidebar-1': 2,
        'sidebar-2': 2,
    };
    var realSidebars = $( '#widgets-right div.widgets-sortables' );
    var availableWidgets = $( '#widget-list' ).children( '.widget' );

    var checkLength = function( sidebar, delta ) {
        var sidebarId = sidebar.id;
        if ( undefined === sidebarLimits[sidebarId] ) {
            return;
        }

        // This is a limited sidebar
        // Find out how many widgets it already has
        var widgets = $( sidebar ).sortable( 'toArray' );
        $( sidebar ).toggleClass( 'sidebar-full', sidebarLimits[sidebarId] <= widgets.length + (delta || 0) );
        $( sidebar ).toggleClass( 'sidebar-morethanfull', sidebarLimits[sidebarId] < widgets.length + (delta || 0) );

        var notFullSidebars = $( 'div.widgets-sortables' ).not( '.sidebar-full' );
        availableWidgets.draggable( 'option', 'connectToSortable', notFullSidebars );
        realSidebars.sortable( 'option', 'connectWith', notFullSidebars );
    }

    // Check existing sidebars on startup
    realSidebars.map( function() {
        checkLength( this );
    } );

    // Update when dragging to this (sort-receive)
    // and away to another sortable (sort-remove)
    realSidebars.bind( 'sortreceive sortremove', function( event, ui ) {
        checkLength( this );
    } );

    // Update when dragging back to the "Available widgets" stack
    realSidebars.bind( 'sortstop', function( event, ui ) {
        if ( ui.item.hasClass( 'deleting' ) ) {
            checkLength( this, -1 );
        }
    } );

    // Update when the "Delete" link is clicked
    $( 'a.widget-control-remove' ).live( 'click', function() {
        checkLength( $( this ).closest( 'div.widgets-sortables' )[0], -1 );
    } );
} );

CSS:

.sidebar-full
{
    background-color: #cfe1ef !important;
}

.sidebar-morethanfull
{
    background-color: #c43 !important;
}

PHP pour les charger:

$wpse19907_file = $plugin;
add_action( 'admin_enqueue_scripts', 'wpse19907_admin_enqueue_scripts' );
function wpse19907_admin_enqueue_scripts( $hook_suffix )
{
    if ( 'widgets.php' == $hook_suffix ) {
        wp_enqueue_script( 'wpse-19907', plugins_url( 'wpse-19907.js', $GLOBALS['wpse19907_file'] ), array(), false, true );
        wp_enqueue_style( 'wpse-19907', plugins_url( 'wpse-19907.css', $GLOBALS['wpse19907_file'] ) );
    }
}

Une tentative de vérification côté serveur (probablement pas encore terminée):

$wpse19907_sidebars_max_widgets = array(
    'sidebar-1' => 2,
);

add_action( 'sidebar_admin_setup', 'wpse19907_sidebar_admin_setup' );
function wpse19907_sidebar_admin_setup()
{
    if ( ! isset( $_POST['action'] ) || 'save-widget' != $_POST['action'] || empty( $_POST['add_new'] ) ) {
        return;
    }

    // We're adding a new widget to a sidebar
    global $wpse19907_sidebars_max_widgets;
    $sidebar_id = $_POST['sidebar'];

    if ( ! array_key_exists( $sidebar_id, $wpse19907_sidebars_max_widgets ) ) {
        return;
    }

    $sidebar = wp_get_sidebars_widgets();
    $sidebar = isset( $sidebars[$sidebar_id] ) ? $sidebars[$sidebar_id] : array();

    if ( count( $sidebar ) <= $wpse19907_sidebars_max_widgets[$sidebar_id] ) {
        die( 'mx' ); // Length must be shorter than 2, and unique
    }
}
Jan Fabry
la source
wow +1 ... qu'est-ce qui manque avec la fonction côté serveur? Je ne l'ai pas essayé, mais j'ai été intéressé.
kaiser
Je voulais quelque chose de plus côté serveur, mais quand j'y pense, vous avez peut-être raison. cela doit être limité par JS. Je vais essayer de penser à une solution plus robuste, peut-être en interdisant complètement les gouttes de widgets via JS
Jukov
Il y a une question sur votre code à Limiter le nombre de widgets dans les barres latérales - bug .
Charles Clarkson
5

pour vous aider avec votre question, j'ai une suggestion. Utilisons le first-footer-widget-areaprésent dans le sidebar-footer.phpfichier modèle Twenty Ten par défaut comme un exemple.

En tant que bonne pratique et sécurisé, sauvegardez-le d'abord pour éviter les maux de tête.

Le code de modèle Twenty Ten original pour présenter le widget de premier pied de page est:

<?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) : ?>
       <div id="first" class="widget-area">
        <ul class="xoxo">
            <?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
        </ul>
       </div><!-- #first .widget-area -->
<?php endif; ?>

Modifions, en ajoutant du code avec des conditions pour limiter le nombre de widgets autorisés dans cette zone.

<?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) : ?>
    <div id="first" class="widget-area">
    <?php
           $mysidebars = wp_get_sidebars_widgets();
           $total_widgets = count( $mysidebars['first-footer-widget-area'] );
           $limit_allowed=2;
    ?>
        <ul class="xoxo">
            <?php  if ($total_widgets > $limit_allowed) {
                echo 'Your '.$total_widgets.' added widgets goes over the allowed limit: <strong>'.$limit_allowed.'</trong>';
                } else { ?>
            <?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
          <?php }; ?>
        </ul>

        </div><!-- #first .widget-area -->
<?php endif; ?>

À quoi sert ce code modifié:

$mysidebars = wp_get_sidebars_widgets();
$total_widgets = count( $mysidebars['first-footer-widget-area'] );
$limit_allowed=2;

comptez le nombre de widgets dans cette barre latérale et fixez une limite autorisée (définie par vous).

...
<?php  if ($total_widgets > $limit_allowed) {
            echo 'Your '.$total_widgets.' added widgets goes over the allowed limit: <strong>'.$limit_allowed.'</trong>';
       } else { ?>
            <?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
<?php }; ?>
...

Si la limite autorisée pour les widgets dans cette zone a été atteinte, un message d'avertissement s'affichera pour indiquer que le widget sera affiché autrement.

J'espère donc avoir aidé votre question.

Hans Zimermann
la source
0

Intéressant Q. Je n'ai pas découvert grand-chose d'un coup d'œil, mais voici une supposition: print_r( $GLOBALS['wp_registered_sidebars'] );ou print_r( $GLOBALS['sidebars'] );ou print_r( $GLOBALS['sidebars_widgets'] );...

kaiser
la source
0

Vous pouvez faire les choses ci-dessous afin de déterminer le nombre de widgets.

Une fonction:

$mysidebars = wp_get_sidebars_widgets() - vous donnera la liste des barres latérales et des widgets utilisés sur ces barres latérales.

$total_widgets = count( $mysidebars['my-sidebar-id'] ); - vous donnera le nombre total de widgets dans my-sidebar-id

J'espère que cela résoudra vos doutes.

Todd
la source