Cómo permitir que los administradores creen una barra lateral desde el administrador

2

Estoy creando un tema de WordPress y he notado que muchos temas premium permiten a los usuarios ir a Apariencia - > Barras laterales y crear una nueva Barra lateral simplemente dándole un nombre. Luego, el usuario puede ir a los widgets y asignar diferentes widgets a esta barra lateral y también agregar menús personalizados. Creo que esta es una gran característica ya que permite a los usuarios tener diferentes barras laterales en diferentes páginas.

Ahora estoy familiarizado con las opciones Tipo de publicación personalizada y Tema, y sé cómo permitiría que las personas elijan una barra lateral diferente para diferentes páginas, pero solo estoy teniendo problemas para crear el primer paso, que es permitir que las personas creen una barra lateral por su cuenta. ¿Necesito crear un CPT para esto? o hay alguna otra manera?

He buscado mucho y lo mejor que encontré fue un complemento, que tiene mucho código y muchas cosas y para el que ni siquiera puedo encontrar la información de la licencia.

Así que, por favor, dime cómo puedo crear algo como esto y muchas gracias.

    
pregunta user1981248 21.12.2013 - 14:40

2 respuestas

5

Cree una función que registre barras laterales, utilizando register_sidebar , a partir de una opción:

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

Ahora tiene que guardar una opción 'my_theme_sidebars' que contiene una matriz de nombres de barras laterales. Aquí estoy publicando el código que crea una página con 10 entradas de texto donde se agrega el nombre de la barra lateral. (Usaré add_theme_page ) Puede mejorarlo agregando javascript a los campos de adición dinámica ..

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>';
}

Ahora, has dejado que los usuarios seleccionen las barras laterales para una página específica. Puedes agregar un metabox para eso. (Consulte add_meta_box docs).

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>';
}

Luego agrega la función para guardar el metabox:

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 );
  }
}

De esta manera, sus usuarios pueden elegir una barra lateral personalizada para cada publicación o página. Se guarda en el campo meta ' _custom_sidebar' .

Para mostrar la barra lateral personalizada, su sidebar.php debería contener algo como:

// 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 } ?>

Finalmente, en sus páginas y publicaciones, simplemente llame a get_sidebar(); como de costumbre.

    
respondido por el gmazzap 21.12.2013 - 16:02
2

CÓDIGO ACTUALIZADO CON = AGREGAR BARRAS LATERALES ILIMITADAS (JavaScript)

Cree una función que registre barras laterales, utilizando [ register_sidebar ] [1], a partir de una opción:

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

ACTUALIZADO: ahora tienes que guardar una opción 'my_theme_sidebars' que contiene una matriz de nombres de barras laterales. Aquí estoy publicando el código que crea una página con 10 entradas de texto donde se agrega el nombre de la barra lateral. (Usaré [ add_theme_page ] [2]) Puedes mejorarlo agregando javascript a los campos de adición dinámica .. Agregar una página de administración de barras laterales ilimitadas.

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>';
}

Ahora, has dejado que los usuarios seleccionen las barras laterales para una página específica. Puedes agregar un metabox para eso. (Consulte [ add_meta_box ] [3] docs).

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>';
}

Luego agrega la función para guardar el metabox:

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 );
  }
}

De esta manera, sus usuarios pueden elegir una barra lateral personalizada para cada publicación o página. Se guarda en el campo meta ' _custom_sidebar' .

Para mostrar la barra lateral personalizada, su sidebar.php debería contener algo como:

// 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 } ?>

Finalmente, en sus páginas y publicaciones, simplemente llame a get_sidebar(); como de costumbre.

ACTUALIZADO: crea un nuevo archivo JavaScript para varias barras laterales js / custom_sidebar.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");}
});

Finalmente, en sus páginas y publicaciones, simplemente llame a get_sidebar(); como de costumbre.

    
respondido por el Simon Long 21.08.2015 - 03:10

Lea otras preguntas en las etiquetas