Personalizzatore tema Wordpress - Aggiungi area per consentire agli utenti di spostarsi e organizzare i widget

Question

Attualmente sto sviluppando un tema Wordpress, utilizzando il Customizer tema per consentire agli utenti di personalizzarlo, ma mi sono bloccato.

Per il piè di pagina, ho creato vari widget, contenenti cose diverse come Messaggi recenti o Feed di Twitter.

Desidero che gli utenti siano in grado di organizzarli, nell'ordine desiderato, ma non riesco a capire come farlo. Ho trovato un altro tema (Zerif Lite), che ti permette di fare questo (vedi immagine sotto), comunque ho passato tutto il codice e non ho potuto capire che lo hanno fatto, non c'era nulla aggiungendo la sezione "I nostri widget della sezione focus" .

Ho organizzato il tema in modo simile, ci sono vari pannelli, con sezioni, e voglio una di quelle sezioni per contenerlo.

EDIT:

Non tutti sembrano per ottenere il mio problema. IO SO come creare widget

So come creare widget. Voglio un'area nella Personalizzazione tema per gli utenti a spostarli attorno allo, non solo a quelli che ho creato, ma anche a quelli di default come Tag Cloud.

EDIT 2: @Codeartist, sto usando Wordpress 4.3.1, e qui è il mio codice in functions.php

function widgets_init_mysite() { 
    register_sidebar(array(
     'name' => __('Main Sidebar', 'twentyeleven'), 
     'id' => 'sidebar-1', 
     'before_widget' => '<aside id="%1$s" class="widget %2$s">', 
     'after_widget' => '</aside>', 
     'before_title' => '<h3 class="widget-title">', 
     'after_title' => '</h3>', 
    )); 
} 

add_action('widgets_init', 'widgets_init_mysite'); 

function mytheme_customizer($wp_customize) { 

    $wp_customize->add_panel('panel_for_widgets', array(
     'priority'  => 70, 
     'title'   => __('Panel for widgets', 'codeartist'), 
     'capability'  => 'edit_theme_options', 
    )); 

    $wp_customize->get_section('sidebar-widgets-sidebar-1')->panel = 'panel_for_widgets'; 

} 

add_action('customize_register', 'mytheme_customizer'); 

Answer 1

Dopo aver guardato dentro zerif_customizer.js, ho scoperto che Zerif Lite è l'aggiunta di sezioni del pannello di widget per il tema Personalizzazione tramite JavaScript.

Per fare la stessa cosa in un tema figlio di Zerif Lite ...

Nel functions.php File:

function mytheme_customizer_live_preview() { 
    wp_enqueue_script( 
     'mytheme-themecustomizer',         //Give the script an ID 
     get_stylesheet_directory_uri() . '/js/theme-customizer.js', //Point to file 
     array('jquery'),           //Define dependencies 
     true              //Put script in footer? 
    ); 
} 
add_action('customize_controls_enqueue_scripts', 'mytheme_customizer_live_preview'); 

poi mettere un nuovo file JavaScript nel tema, in cui il nome del file e il percorso deve abbinare il secondo parametro della funzione di cui sopra:

jQuery(document).ready(function() { 
    /* Move our widgets into the widgets panel */ 
    wp.customize.bind('ready', function() { 
     wp.customize.section('sidebar-widgets-sidebar-mysection').panel('panel_mysection'); 
     wp.customize.section('sidebar-widgets-sidebar-mysection').priority('2'); 
    }); 
}); 

Naturalmente, panel_mysection deve essere già esistente come da qualcosa di simile a questo:

$wp_customize->add_panel('panel_mysection', array(
    'priority' => 33, 
    'capability' => 'edit_theme_options', 
    'title' => __('Mysection section', 'mytheme') 
)); 

E la sezione widget di sidebar-mysection deve già esistere:

class zerif_mysection extends WP_Widget { 
    public function __construct() { 
     parent::__construct(
      'ctUp-ads-widget', 
      __('Zerif - Mysection widget', 'zerif-lite') 
     ); 
    } 
} 
function mytheme_register_widgets() { 
    register_widget('zerif_mysection'); 
    register_sidebar(
     array (
      'name'   => 'Mysection section widgets', 
      'id'   => 'sidebar-mysection', 
      'before_widget' => '', 
      'after_widget' => '' 
     ) 
    ); 
} 
add_action('widgets_init', 'mytheme_register_widgets'); 

Answer 2

stavo sperimentando su appena aggiornato tema Twenty Eleven.

In function.php ci sono state registrate alcune barre laterali:

register_sidebar(array(
    'name' => __('Main Sidebar', 'twentyeleven'), 
    'id' => 'sidebar-1', 
    'before_widget' => '<aside id="%1$s" class="widget %2$s">', 
    'after_widget' => '</aside>', 
    'before_title' => '<h3 class="widget-title">', 
    'after_title' => '</h3>', 
)); 

register_sidebar(array(
    'name' => __('Showcase Sidebar', 'twentyeleven'), 
    'id' => 'sidebar-2', 
    'description' => __('The sidebar for the optional Showcase Template', 'twentyeleven'), 
    'before_widget' => '<aside id="%1$s" class="widget %2$s">', 
    'after_widget' => '</aside>', 
    'before_title' => '<h3 class="widget-title">', 
    'after_title' => '</h3>', 
)); 

register_sidebar(array(
    'name' => __('Footer Area One', 'twentyeleven'), 
    'id' => 'sidebar-3', 
    'description' => __('An optional widget area for your site footer', 'twentyeleven'), 
    'before_widget' => '<aside id="%1$s" class="widget %2$s">', 
    'after_widget' => '</aside>', 
    'before_title' => '<h3 class="widget-title">', 
    'after_title' => '</h3>', 
)); 

register_sidebar(array(
    'name' => __('Footer Area Two', 'twentyeleven'), 
    'id' => 'sidebar-4', 
    'description' => __('An optional widget area for your site footer', 'twentyeleven'), 
    'before_widget' => '<aside id="%1$s" class="widget %2$s">', 
    'after_widget' => '</aside>', 
    'before_title' => '<h3 class="widget-title">', 
    'after_title' => '</h3>', 
)); 

register_sidebar(array(
    'name' => __('Footer Area Three', 'twentyeleven'), 
    'id' => 'sidebar-5', 
    'description' => __('An optional widget area for your site footer', 'twentyeleven'), 
    'before_widget' => '<aside id="%1$s" class="widget %2$s">', 
    'after_widget' => '</aside>', 
    'before_title' => '<h3 class="widget-title">', 
    'after_title' => '</h3>', 
)); 

Ogni barra laterale dispone di un proprio ID univoco. Se i widget e le barre laterali sono abilitati nel tuo tema, il pannello predefinito 'widget' verrà creato da Wordpress sullo schermo di personalizzazione. Quindi per ogni barra laterale verrebbe creata la sezione collocata nel pannello 'widget'. Quella sezione ha id in base all'ID della barra laterale. E questo id è simile a questo

sidebar-widgets-[sidebar-id] 

Dove sidebar-id è un ID della rispettiva barra laterale.

tutto il codice deve essere posto in functions.php (o all'interno plugin) in gancio 'customize_register'

add_action('customize_register', 'codeartist_customize_register'); 
function codeartist_customize_register($wp_customize) { 
    //Put your code here 
} 

Quindi, in pratica, quello che dobbiamo fare è creare nuovo pannello

$wp_customize->add_panel('panel_for_widgets', array(
    'priority'  => 70, 
    'title'   => __('Panel for widgets', 'codeartist'), 
    'capability'  => 'edit_theme_options', 
)); 

E quindi spostare in quel pannello tutte le sezioni che rappresentano le barre laterali.

$wp_customize->get_section('sidebar-widgets-sidebar-1')->panel = 'panel_for_widgets'; 
$wp_customize->get_section('sidebar-widgets-sidebar-2')->panel = 'panel_for_widgets'; 
$wp_customize->get_section('sidebar-widgets-sidebar-3')->panel = 'panel_for_widgets'; 
$wp_customize->get_section('sidebar-widgets-sidebar-4')->panel = 'panel_for_widgets'; 
$wp_customize->get_section('sidebar-widgets-sidebar-5')->panel = 'panel_for_widgets'; 

In Twenty Eleven ci sono cinque barre laterali, quindi spostiamo cinque sezioni.

Infine, il nome di ogni sezione è lo stesso del nome della rispettiva barra laterale.Per cambiare la descrizione della sezione puoi fare qualcosa di simile.

$wp_customize->get_section('sidebar-widgets-sidebar-1')->description= __('New description', 'codeartist'); 

Purtroppo, non c'è molto documentazione su get_section, ma ecco il link al codice: https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/get_section

Answer 3

Quello che stai cercando di lavorare con la Customizer tema in WordPress, che ha un unico insieme di ganci e un'API attorno ad esso.

Cominciate a lavorare con questo gancio, il gancio customize_register:

https://developer.wordpress.org/reference/hooks/customize_register/

Un API abbastanza robusto è stato costruito intorno al customizer tema, e si può fare riferimento a questo manuale per la documentazione quando si lavora con iT:

https://developer.wordpress.org/themes/advanced-topics/customizer-api/