代码更新为=添加无限边栏(JavaScript)
创建一个注册侧栏的函数,使用[register_sidebar
][1] ,从选项开始:
add_action(\'widgets_init\', \'my_custom_sidebars\');
function my_custom_sidebars() {
$sidebars = get_option(\'my_theme_sidebars\'); // get all the sidebars names
if ( ! empty($sidebars) ) {
// add a sidebar for every sidebar name
foreach ( $sidebars as $sidebar ) {
if ( empty($sidebar) ) continue;
register_sidebar(array(
\'name\' => $sidebar,
\'id\' => sanitize_title($sidebar),
\'before_title\' => \'<h1>\',
\'after_title\' => \'</h1>\'
));
}
}
}
更新:现在你必须保存一个选项
\'my_theme_sidebars\'
包含边栏名称数组的
我在这里发布了一段代码,该代码创建了一个包含10个文本输入的页面,其中添加了侧栏名称。(我将使用[add_theme_page
][2] )您可以通过向动态添加字段添加javascript来改进它点击>添加无限边栏管理页面。add_action( \'admin_menu\', \'my_sidebar_plugin_menu\' );
function my_sidebar_plugin_menu() {
add_theme_page( \'sidebar Plugin Options\', \'Add Sidebar\', \'manage_options\', \'my-sidebar-unique-identifier\', \'my_sidebar_plugin_options\' );
$nonce = filter_input(INPUT_POST, \'my_custom_sidebars_nonce\', FILTER_SANITIZE_STRING);
if ( ! empty($nonce) && wp_verify_nonce($nonce, \'my_custom_sidebars\') ) {
$sidebars = (array) $_POST[\'custom_sidebars\'];
update_option(\'my_theme_sidebars\', $sidebars);
add_action(\'admin_notices\', \'my_custom_sidebars_notice\');
}
}
function my_sidebar_plugin_options() {
wp_enqueue_script(\'jquery\');
wp_enqueue_script(\'custom_sidebar-js\', get_template_directory_uri() . \'/js/custom_sidebar.js\');
if ( !current_user_can( \'manage_options\' ) ) {
wp_die( __( \'You do not have sufficient permissions to access this page.\' ) );
}
?>
<div class="my-form">
<div class="wrap">
<h2>Add Custom Sidebars</h2>
<form id="sidebars" method="post">
<?php wp_nonce_field(\'my_custom_sidebars\', \'my_custom_sidebars_nonce\');
$saved = get_option(\'my_theme_sidebars\');
$xx=get_option(\'my_theme_sidebars\');
//print_r($xx);
$no=count($xx);
?>
<div id="append">
<p class="text-box">
<label for="box1">Sidebar-<span class="box-number">1</span></label>
<input type="text" name="custom_sidebars[]" value="<?php echo $xx[0]; ?>" id="box1" />
<a href="#" class="remove-box">Remove</a>
</p>
<?php if($no>1){
for($i=1;$i<$no;$i++){
?>
<p class="text-box"><label for="box\' + n + \'">Sidebar-<span class="box-number"><?php echo $i+1; ?></span></label>
<input type="text" name="custom_sidebars[]" value="<?php echo $xx[$i]; ?>" id="box\' + n + \'" />
<a href="#" class="remove-box">Remove</a>
</p>
<?php }
} ?></div>
<!--<a class="add-box" href="#">Add More</a>-->
<button type="button" class="add-box">Add New Sidebar</button>
</table>
<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options" value="no_of_sidebar,sidebar_names,boxes" />
<p class="submit">
<input type="submit" class="button-primary clsSubmit" value="<?php _e(\'Save Changes\') ?>" />
</p>
</form>
</div>
</div>
<?php
}
function my_custom_sidebars_notice() {
echo \'<div class="updated"><p>Sidebar(s) Updated.</p></div>\';
}
现在,您可以让用户为特定页面选择侧栏。您可以为此添加元盒。(参见[
add_meta_box
][3] 文档)。
add_action( \'add_meta_boxes\', \'my_custom_sidebar_metabox\' );
function my_custom_sidebar_metabox() {
$screens = array( \'post\', \'page\' ); // add the metabox for pages and post
foreach ( $screens as $screen ) {
add_meta_box(\'my_custom_sidebar\', \'Select a Sidebar\',\'my_custom_sidebar_box\', $screen);
}
}
function my_custom_sidebar_box( $post ) {
$sidebars = get_option(\'my_theme_sidebars\'); // get all the sidebars names
if ( empty($sidebars) ) {
echo \'No custom sidebars registered.\';
return;
}
wp_nonce_field( \'my_custom_sidebar\', \'my_custom_sidebar_box_nonce\' );
$value = get_post_meta( $post->ID, \'_custom_sidebar\', true ); // actual value
echo \'<label>Select a Sidebar</label> \';
echo \'<select name="custom_sidebar">\';
// default option
echo \'<option value=""\' . selected(\'\', $value, false) . \'>Default</option>\';
// an option for every sidebar
foreach ($sidebars as $sidebar) {
if ( empty($sidebar) ) continue;
$v = sanitize_title($sidebar);
$n = esc_html($sidebar);
echo \'<option value="\' . $v . \'"\' . selected($v, $value) .\'>\' .$n .\'</option>\';
}
echo \'<select>\';
}
然后添加保存元数据库的函数:
add_action( \'save_post\', \'my_custom_sidebar_metabox_save\' );
function my_custom_sidebar_metabox_save( $post_id ) {
// If this is an autosave, our form has not been submitted, do nothing.
if ( defined( \'DOING_AUTOSAVE\' ) && DOING_AUTOSAVE ) return;
// check nonce
$nonce = filter_input(INPUT_POST, \'my_custom_sidebar_box_nonce\', FILTER_SANITIZE_STRING);
if ( empty($nonce) || ! wp_verify_nonce( $nonce, \'my_custom_sidebar\' ) ) return;
$type = get_post_type($post_id);
// Check the user\'s permissions.
$cap = ( \'page\' === $type ) ? \'edit_page\' : \'edit_post\';
if ( ! current_user_can( $cap, $post_id ) ) return;
$custom = filter_input(INPUT_POST, \'custom_sidebar\', FILTER_SANITIZE_STRING);
// Update the meta field in the database.
if ( empty($custom) ) {
delete_post_meta( $post_id, \'_custom_sidebar\');
} else {
update_post_meta( $post_id, \'_custom_sidebar\', $custom );
}
}
这样,用户就可以为每篇文章或每页选择一个自定义侧栏。它保存在元字段\'
_custom_sidebar\'
.
要显示自定义侧栏,请sidebar.php
应包含以下内容:
// change the following according to your defaults sidebar if exists
$sidebar = \'main_sidebar\';
// if in singular post/page check for saved custom sidebar
if ( is_singular() ) {
$id = get_queried_object_id(); // get current post/page id
$custom = get_post_meta( $id, \'_custom_sidebar\', true ); // get selected sidebar
if ( ! empty($custom) ) $sidebar = $custom;
}
if ( is_active_sidebar( $sidebar ) ) {
?>
<ul id="sidebar"><?php dynamic_sidebar( $sidebar ); ?></ul>
<?php } ?>
最后,在你的页面和帖子中,只需打电话
get_sidebar();
像往常一样。
更新:为多侧栏js/custom\\u侧栏创建新的JavaScript文件。js公司
( function( $ ) {
$(\'.my-form .add-box\').click(function(){
var n = $(\'.text-box\').length + 1;
var box_html = $(\'<p class="text-box"><label for="box\' + n + \'">Sidebar-<span class="box-number">\' + n + \'</span></label> <input type="text" name="custom_sidebars[]" value="" id="box\' + n + \'" /> <a href="#" class="remove-box">Remove</a></p>\');
box_html.hide();
$(\'#append\').append(box_html);
box_html.fadeIn(\'slow\');
return false;
});
$(\'.my-form\').on(\'click\', \'.remove-box\', function(){
$(this).parent().css( \'background-color\', \'#FF6C6C\' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$(\'.box-number\').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
$(\'.clsSubmit\').click(function(){
var m = $(\'.text-box\').length;
if(m==0){alert("press OK to Reset");}
});
最后,在你的页面和帖子中,只需打电话
get_sidebar();
像往常一样。