Limita il numero di widget nelle barre laterali


17

Se utilizzo un'area widget personalizzata (ad esempio piè di pagina) in cui esiste solo un numero limitato di spot per widget (in base alla progettazione), posso limitare il numero di widget che l'utente può includere in quella specifica area widget? Non importa se la soluzione è nel backend o nel front-end. Grazie.

Risposte:


10

Ho risolto questo problema in Javascript. Se vuoi prevenirlo completamente, dovresti farlo anche sul lato server, perché puoi modificare i widget con Javascript disabilitato (provalo!).

Le diverse barre laterali vengono controllate quando si rilasciano widget su di essi o lontano da essi. Se diventano pieni, il colore di sfondo cambia e non è più possibile rilasciare oggetti su di essi. Se, all'avvio, la barra laterale è già più che piena (perché hai ristretto la restrizione), il colore di sfondo diventa rosso. È comunque possibile trascinare i widget lontano dai widget completi per renderli nuovamente vuoti.

Una barra piena e una più della barra laterale completa

Prova questo codice per trovare modi per aggiungere o rimuovere widget che mi sono perso. La "magia" nel codice jQuery proviene da Aman , che ha risposto a una domanda Stack Overflow che ho pubblicato al riguardo .

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 per caricarli:

$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'] ) );
    }
}

Un tentativo di controllo lato server (probabilmente non ancora completo):

$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
    }
}

wow +1 ... cosa manca alla funzione lato server? Non l'ho provato, ma sono interessato.
Kaiser

Volevo qualcosa di più di un lato server, ma quando ci penso, forse hai ragione. questo deve essere limitato da JS. Proverò a pensare a una soluzione più solida, forse impedendo del tutto la caduta di widget tramite JS
Jukov,


4

per aiutarti con la tua domanda, ho un suggerimento. Usiamo il first-footer-widget-areapresente nel sidebar-footer.phpfile modello predefinito Twenty Ten come un esempio.

Come buona pratica e sicuro, innanzitutto esegui il backup per evitare mal di testa.

Il codice originale del modello Twenty Ten per la presentazione del widget del primo piè di pagina è:

<?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; ?>

Cambiamo, aggiungendo un po 'di codice con condizionali per limitare il numero di widget consentiti in quell'area.

<?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; ?>

Cosa fa questo codice modificato:

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

conta il numero di widget nella barra laterale e stabilisci un limite consentito (stabilito da te).

...
<?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 }; ?>
...

Se è stato raggiunto il limite consentito per i widget in quell'area, verrà visualizzato un messaggio di avviso che indica il limite, altrimenti verrà visualizzato il widget.

Quindi spero di aver aiutato con la tua domanda.


0

Interessare D. Non ho scoperto molto in una breve occhiata, ma ecco un'ipotesi: print_r( $GLOBALS['wp_registered_sidebars'] );o print_r( $GLOBALS['sidebars'] );oppure print_r( $GLOBALS['sidebars_widgets'] );...


0

Puoi fare le cose di seguito per determinare il conteggio dei widget.

Funzione:

$mysidebars = wp_get_sidebars_widgets() - ti darà l'elenco delle barre laterali e dei widget utilizzati su quelle barre laterali.

$total_widgets = count( $mysidebars['my-sidebar-id'] ); - ti darà il conteggio dei widget totali in my-sidebar-id

Spero che questo risolva i tuoi dubbi.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.