Wordpress 테마 커스터마이저 - 사용자가 이동하고 위젯을 구성할 수 있는 영역 추가

Wordpress 테마 커스터마이저 - 사용자가 이동하고 위젯을 구성할 수 있는 영역 추가

현재 워드프레스 테마를 개발하고 있으며, 테마 커스터마이저를 사용하여 커스터마이즈하고 있습니다만, 막혀 버렸습니다.

바닥글은 최근 게시물이나 라이브 트위터 피드 등 다양한 위젯을 작성했습니다.

사용자가 원하는 순서대로 정리할 수 있으면 좋겠는데, 방법을 알 수 없습니다.다른 테마(Zerif Lite)를 하나 더 찾았습니다(아래 이미지 참조). 하지만 코드를 모두 살펴봤지만 알 수 없었습니다. "우리의 포커스 섹션 위젯" 섹션은 추가되지 않았습니다.

마찬가지로 테마를 정리했습니다.섹션이 있는 다양한 패널이 있습니다.그 중 하나의 섹션이 포함되어 있으면 좋겠습니다.

편집:

모두가 내 문제를 이해하는 것 같지는 않아.위젯을 작성하는 방법을 알고 있습니다.

위젯을 작성하는 방법을 알고 있습니다.Teme Customizer의 영역을 사용자가 이동할 수 있도록 합니다.이 영역은 내가 만든 영역뿐만 아니라 태그 클라우드와 같은 다른 기본 영역도 필요합니다.

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

새로 업데이트된 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>',
) );

각 사이드바에는 고유한 ID가 있습니다.테마에서 위젯과 사이드바가 사용 가능한 경우 기본 '위젯' 패널은 Wordpress에 의해 커스터마이저 화면에 작성됩니다.그런 다음 각 사이드바에 대해 '위젯' 패널에 섹션을 만듭니다.그 섹션은 사이드바 ID에 기반한 ID를 가집니다.그리고 그 아이디는 이렇게 생겼고

sidebar-widgets-[sidebar-id]

여기서 sidbar-id는 각 사이드바의 ID입니다.

모든 코드는 'customize_register' 후크의 functions.php(또는 플러그인 내부)에 배치해야 합니다.

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

트웬티일레븐에는 사이드바가 5개 있기 때문에 5개 구역으로 이동합니다.

마지막으로 각 섹션의 이름은 각 사이드바의 이름과 동일합니다.섹션의 설명을 변경하려면 다음과 같이 하십시오.

$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

WordPress의 Teme Customizer는 독특한 훅 세트와 API를 갖추고 있습니다.

customize_register 후크라는 후크를 사용하여 작업을 시작합니다.

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

상당히 견고한 API가 테마 커스터마이저를 중심으로 구축되어 있습니다.이 API를 사용할 때는 다음 매뉴얼을 참조해 주십시오.

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

inside ★★★★★★★★★★★★★★★★★★★★★★.zerif_customizer.jsZerif Lite가 JavaScript를 통해 위젯 패널 섹션을 테마 커스터마이저에 추가하고 있는 것을 발견했습니다.

'제리프 라이트'라는 아이 테마로 같은 일을 하려면...

고객님의 고객명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');

언급URL : https://stackoverflow.com/questions/34003932/wordpress-theme-customizer-add-area-for-users-to-move-around-and-organize-widg