WordPress Theme Customizer — Добавить область для пользователей, чтобы перемещаться и организовывать виджеты
В настоящее время я разрабатываю тему WordPress, используя настройщик тем, чтобы позволить пользователям настраивать ее, но я застрял.
Для нижнего колонтитула я создал различные виджеты, содержащие разные вещи, такие как Недавние сообщения или Live Twitter Feed.
Я хочу, чтобы пользователи могли организовывать их в том порядке, в котором они хотят, но я не могу понять, как это сделать. Я нашел еще одну тему (Zerif Lite), которая позволяет вам сделать это (см. Изображение ниже), однако я прошел весь код и не смог разобраться, что они сделали, но ничего не было, добавив раздел «Наши виджеты раздела фокуса» ,
Я организовал свою тему аналогичным образом, существуют различные группы с разделами, и я хочу, чтобы один из этих разделов содержал ее.
РЕДАКТИРОВАТЬ:
Кажется, не все понимают мою проблему. Я ЗНАЮ, как создавать виджеты
Я знаю, как создавать виджеты. Я хочу, чтобы область в настройщике тем для пользователей переместить их, не только те, которые я создал, но и другие по умолчанию, такие как облако тегов.
РЕДАКТИРОВАТЬ 2: @Codeartist, я использую WordPress 4.3.1, а вот мой код в 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' );
Решение
Посмотрев внутрь zerif_customizer.jsЯ обнаружил, что Zerif Lite добавляет разделы панели виджетов в Theme Customizer через 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 Раздел виджета уже должен существовать:
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.
В function.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 на экране настройщика будет создавать панель по умолчанию «виджеты». Затем для каждой боковой панели будет создан раздел, размещенный на панели «виджеты». Этот раздел имеет идентификатор на основе идентификатора боковой панели. И этот идентификатор выглядит так
sidebar-widgets-[sidebar-id]
Где sidebar-id — это идентификатор соответствующей боковой панели.
Весь ваш код должен быть помещен в functions.php (или внутри плагина) в хуке ‘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';
В Twenty Eleven есть пять боковых панелей, поэтому мы перемещаем пять секций.
Наконец, имя каждого раздела совпадает с именем соответствующей боковой панели. Чтобы изменить описание раздела, вы можете сделать что-то вроде этого.
$wp_customize->get_section( 'sidebar-widgets-sidebar-1' )->description= __('New description', 'codeartist');
К сожалению, документации по get_section не так много, но вот ссылка на кодекс: https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/get_section
То, с чем вы хотите работать, это Theme Customizer в WordPress, который имеет уникальный набор хуков и API вокруг него.
Начните работать с этим хуком, хуком customize_register:
https://developer.wordpress.org/reference/hooks/customize_register/
Вокруг настройщика темы был построен довольно надежный API, и вы можете обратиться к этому руководству за документацией при работе с ним:
https://developer.wordpress.org/themes/advanced-topics/customizer-api/