如何允许管理员从管理员创建侧边栏

时间:2013-12-21 作者:user1981248

我正在创建一个WordPress主题,我注意到许多高级主题允许用户进入外观->侧栏,只需给它一个名称就可以创建一个新的侧栏。然后,用户可以转到小部件并将不同的小部件分配给此侧栏,还可以添加自定义菜单。我认为这是一个很好的特性,因为它允许用户在不同的页面上有不同的侧栏。

现在,我熟悉自定义帖子类型和主题选项,知道如何让人们为不同的页面选择不同的侧栏,但我只是在创建第一步时遇到了问题,即允许人们自己创建侧栏。我需要为此创建CPT吗?还是有别的办法?

我搜索了很多,我遇到的最好的东西是一个插件,它有很多代码,做了太多的事情,我甚至找不到许可证信息。

所以请建议我如何创建这样的东西,非常感谢。

2 个回复
最合适的回答,由SO网友:gmazzap 整理而成

创建一个注册侧栏的函数,使用register_sidebar, 从选项开始:

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) 通过向动态添加字段添加javascript,可以对其进行改进。。

add_action(\'admin_menu\', \'my_custom_sidebars_page\');

function my_custom_sidebars_page() {
  add_theme_page(
    \'Sidebars\',
    \'Sidebars\',
    \'edit_theme_options\',
    \'my_custom_sidebars\',
    \'my_custom_sidebars_page_print\'
   );
  // save the form if submitted
  $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_custom_sidebars_page_print() {
  if (! current_user_can(\'edit_theme_options\') ) return;
  ?>
  <div class="wrap">
    <h2>Sidebars</h2>
    <form id="sidebars" method="post">
    <?php
    wp_nonce_field(\'my_custom_sidebars\', \'my_custom_sidebars_nonce\');
    $saved = get_option(\'my_theme_sidebars\');
    for ($i=0; $i<10; $i++) {
      $value = isset( $saved[$i] ) ? esc_attr($saved[$i]) : \'\';
    ?>
    <input type="text" name="custom_sidebars[]" value="<?php echo $value;?>" />
    <?php } ?>
    <p class="submit">
      <input name="submit" class="button button-primary" value="Save" type="submit">
    </p>
    </form>
  </div>
  <?php
}

function my_custom_sidebars_notice() {
  echo \'<div class="updated"><p>Updated.</p></div>\';
}
现在,您可以让用户为特定页面选择侧栏。您可以为此添加元盒。(参见add_meta_box 文档)。

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(); 像往常一样。

SO网友:Simon Long

代码更新为=添加无限边栏(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(); 像往常一样。

结束

相关推荐

Call sidebar from a template

我需要在标题中调用侧栏。我已经切换到新的“二十一二”主题,并创建了我自己的儿童主题。有了这个新主题,我决定把事情组织起来,所以我把我的小部件功能、样式表和两个新的边栏模板(一个用于页眉,一个用于页脚小部件)放在一个名为pgwidgets.这是我在标题中使用的调用<? if ( is_front_page() ) : ?> <?php get_sidebar( \'homepage\' ) ; ?> <?php endif ; ?> 这称为s