Rozwiązałem to w JavaScript. Jeśli chcesz całkowicie temu zapobiec, powinieneś to zrobić również po stronie serwera, ponieważ możesz edytować widżety przy wyłączonym Javascript (wypróbuj!).
Różne paski boczne są sprawdzane, gdy upuszczasz do nich widżety lub z dala od nich. Jeśli się zapełni, kolor tła zmienia się i nie można już na nie upuszczać przedmiotów. Jeśli podczas uruchamiania pasek boczny jest już więcej niż pełny (ponieważ zaostrzyłeś ograniczenie), kolor tła staje się czerwony. Nadal możesz przeciągać widżety z pełnych widżetów, aby ponownie je opróżnić.
Przetestuj ten kod, aby znaleźć sposoby dodawania lub usuwania widżetów, które przegapiłem. „Magia” w kodzie jQuery pochodzi od Amana , który odpowiedział na postawione przeze mnie pytanie dotyczące przepełnienia stosu .
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, aby je załadować:
$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'] ) );
}
}
Próba sprawdzenia po stronie serwera (prawdopodobnie jeszcze nie zakończona):
$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
}
}