WordPress Theme Customizer – добавление области для перемещения пользователей и организации виджетов

zerif_customizer.js , я обнаружил, что Zerif Lite добавляет разделы панели виджетов в пользовательский zerif_customizer.js темы через JavaScript.

Чтобы сделать то же самое в дочерней теме Zerif Lite …

В файле functions.php :

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

Затем поместите новый файл JavaScript в вашу тему, где имя файла и путь должны соответствовать второму параметру из приведенной выше функции:

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

Конечно, panel_mysection уже существует в соответствии с чем-то вроде этого:

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

И sidebar-mysection виджета sidebar-mysection должен уже существовать:

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

Я экспериментировал с недавно обновленной темой Twenty Eleven.

В функции.php были зарегистрированы некоторые боковые панели:

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

У каждой боковой панели есть свой уникальный идентификатор. Если в вашей теме включены виджеты и боковые панели, тогда панель «Виджеты» по умолчанию создаст WordPress на экране настройки. Затем для каждой боковой панели будет создан раздел, размещенный в панели «widgets». В этом разделе есть id, основанный на идентификаторе боковой панели. И этот идентификатор выглядит так

 sidebar-widgets-[sidebar-id] 

Где sidebar-id – идентификатор соответствующей боковой панели.

Весь ваш код должен быть помещен в файл functions.php (или внутри плагина) в hook 'customize_register'

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

Итак, в основном, нам нужно создать новую панель

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

В Двадцать Одиннадцать есть пять боковых панелей, поэтому мы перемещаем пять секций.

Наконец, имя каждого раздела совпадает с именем соответствующей боковой панели. Чтобы изменить описание раздела, вы можете сделать что-то вроде этого.

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

К сожалению, документации по get_section мало, но вот ссылка на codex: https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/get_section

То, с чем вы хотите работать, – это Theme Customizer в WordPress, который имеет уникальный набор крючков и API вокруг него.

Начните с работы с этим крюком, hookize customize_register:

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

В настройках темы был создан довольно надежный API, и вы можете обратиться к этому руководству для документации при работе с ним:

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