wordpress主题的自定义设置开发

可能说的不太清楚,我说的是这里:

图片[1]-wordpress主题的自定义设置开发 - KEKC博客-KEKC博客

一、添加

我们先看效果图:

图片[2]-wordpress主题的自定义设置开发 - KEKC博客-KEKC博客

代码:

//自定义logo
function puma_customize_register( $wp_customize ) {
    $wp_customize->add_section('header_logo',array(
        'title'     => '博主头像',
        'priority'  => 50
    ) );
    $wp_customize->add_setting( 'header_logo_image', array(
        'default'   => '',
        "transport" => "postMessage",
        'type'      => 'option'
    ) );
    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'header_logo_image', array(
         'label'     => '博主头像',
         'section'   => 'header_logo'
    ) ) );
}
add_action( 'customize_register', 'puma_customize_register' );
//自定义博主描述
function ms_customize_register( $wp_customize ) {
    $wp_customize->add_section('header_bzms',array(
        'title'     => '博主描述',
        'priority'  => 50
    ) );
    $wp_customize->add_setting( 'header_bzms', array(
        'default'   => '',
        "transport" => "postMessage",
        'type'      => 'option'
    ) );
    $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_bzms', array(
         'label'     => '逼格首页的描述文字',
         'section'   => 'header_bzms'
    ) ) );
}
add_action( 'customize_register', 'ms_customize_register' );
//自定义地址
function dz_customize_register( $wp_customize ) {
    $wp_customize->add_section('header_dzzb',array(
        'title'     => '地址坐标',
        'priority'  => 50
    ) );
    $wp_customize->add_setting( 'header_dzzb', array(
        'default'   => '',
        "transport" => "postMessage",
        'type'      => 'option'
    ) );
    $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_dzzb', array(
         'label'     => '逼格首页的地址坐标',
         'section'   => 'header_dzzb'
    ) ) );
}
add_action( 'customize_register', 'dz_customize_register' );

二、移除

以官网移除颜色部分为例,我们可以这样写:

function wpdocs_deregister_section( $wp_customize ) {

	$wp_customize->remove_section( 'colors' );
}
add_action( 'customize_register', 'wpdocs_deregister_section', 999 );

三、调用

<?php echo get_option('header_bzms'); ?>

四、WordPress默认的Section

title_tagline – Site Title & Tagline (网站标题和描述)
colors – Colors(颜色)
header_image – Header Image (顶部图片)
background_image – Background Image (背景图片)
nav – Navigation (导航菜单)
static_front_page – Static Front Page (静态首页)

五、其他扩展

一个很好的开发插件:https://github.com/devinsays/customizer-library

WP_Customize_Control() – 创建一个允许用户输入纯文本的控制器,也是下面要介绍的class的parent class
WP_Customize_Color_Control() – 创建一个允许用户从色轮中选择颜色的颜色选择器
WP_Customize_Upload_Control() – 创建允许用户上传媒体文件的控制器
WP_Customize_Image_Control() – 创建上传图片或从媒体库中选择图片的控制器
WP_Customize_Background_Image_Control() – 创建背景图片选择器
WP_Customize_Header_Image_Control() – 创建顶部背景图片选择器

示例:带有基本控件的定制器示例

function themename_customize_register($wp_customize){

    $wp_customize->add_section('themename_color_scheme', array(
        'title'    => __('Color Scheme', 'themename'),
        'description' => '',
        'priority' => 120,
    ));

    //  =============================
    //  = Text Input                =
    //  =============================
    $wp_customize->add_setting('themename_theme_options[text_test]', array(
        'default'        => 'value_xyz',
        'capability'     => 'edit_theme_options',
        'type'           => 'option',

    ));

    $wp_customize->add_control('themename_text_test', array(
        'label'      => __('Text Test', 'themename'),
        'section'    => 'themename_color_scheme',
        'settings'   => 'themename_theme_options[text_test]',
    ));

    //  =============================
    //  = Radio Input               =
    //  =============================
    $wp_customize->add_setting('themename_theme_options[color_scheme]', array(
        'default'        => 'value2',
        'capability'     => 'edit_theme_options',
        'type'           => 'option',
    ));

    $wp_customize->add_control('themename_color_scheme', array(
        'label'      => __('Color Scheme', 'themename'),
        'section'    => 'themename_color_scheme',
        'settings'   => 'themename_theme_options[color_scheme]',
        'type'       => 'radio',
        'choices'    => array(
            'value1' => 'Choice 1',
            'value2' => 'Choice 2',
            'value3' => 'Choice 3',
        ),
    ));

    //  =============================
    //  = Checkbox                  =
    //  =============================
    $wp_customize->add_setting('themename_theme_options[checkbox_test]', array(
        'capability' => 'edit_theme_options',
        'type'       => 'option',
    ));

    $wp_customize->add_control('display_header_text', array(
        'settings' => 'themename_theme_options[checkbox_test]',
        'label'    => __('Display Header Text'),
        'section'  => 'themename_color_scheme',
        'type'     => 'checkbox',
    ));

    //  =============================
    //  = Select Box                =
    //  =============================
     $wp_customize->add_setting('themename_theme_options[header_select]', array(
        'default'        => 'value2',
        'capability'     => 'edit_theme_options',
        'type'           => 'option',

    ));
    $wp_customize->add_control( 'example_select_box', array(
        'settings' => 'themename_theme_options[header_select]',
        'label'   => 'Select Something:',
        'section' => 'themename_color_scheme',
        'type'    => 'select',
        'choices'    => array(
            'value1' => 'Choice 1',
            'value2' => 'Choice 2',
            'value3' => 'Choice 3',
        ),
    ));

    //  =============================
    //  = Image Upload              =
    //  =============================
    $wp_customize->add_setting('themename_theme_options[image_upload_test]', array(
        'default'           => 'image.jpg',
        'capability'        => 'edit_theme_options',
        'type'           => 'option',

    ));

    $wp_customize->add_control( new WP_Customize_Image_Control($wp_customize, 'image_upload_test', array(
        'label'    => __('Image Upload Test', 'themename'),
        'section'  => 'themename_color_scheme',
        'settings' => 'themename_theme_options[image_upload_test]',
    )));

    //  =============================
    //  = File Upload               =
    //  =============================
    $wp_customize->add_setting('themename_theme_options[upload_test]', array(
        'default'           => 'arse',
        'capability'        => 'edit_theme_options',
        'type'           => 'option',

    ));

    $wp_customize->add_control( new WP_Customize_Upload_Control($wp_customize, 'upload_test', array(
        'label'    => __('Upload Test', 'themename'),
        'section'  => 'themename_color_scheme',
        'settings' => 'themename_theme_options[upload_test]',
    )));

    //  =============================
    //  = Color Picker              =
    //  =============================
    $wp_customize->add_setting('themename_theme_options[link_color]', array(
        'default'           => '#000',
        'sanitize_callback' => 'sanitize_hex_color',
        'capability'        => 'edit_theme_options',
        'type'           => 'option',

    ));

    $wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'link_color', array(
        'label'    => __('Link Color', 'themename'),
        'section'  => 'themename_color_scheme',
        'settings' => 'themename_theme_options[link_color]',
    )));

    //  =============================
    //  = Page Dropdown             =
    //  =============================
    $wp_customize->add_setting('themename_theme_options[page_test]', array(
        'capability'     => 'edit_theme_options',
        'type'           => 'option',

    ));

    $wp_customize->add_control('themename_page_test', array(
        'label'      => __('Page Test', 'themename'),
        'section'    => 'themename_color_scheme',
        'type'    => 'dropdown-pages',
        'settings'   => 'themename_theme_options[page_test]',
    ));

    // =====================
    //  = Category Dropdown =
    //  =====================
    $categories = get_categories();
	$cats = array();
	$i = 0;
	foreach($categories as $category){
		if($i==0){
			$default = $category->slug;
			$i++;
		}
		$cats[$category->slug] = $category->name;
	}

	$wp_customize->add_setting('_s_f_slide_cat', array(
		'default'        => $default
	));
	$wp_customize->add_control( 'cat_select_box', array(
		'settings' => '_s_f_slide_cat',
		'label'   => 'Select Category:',
		'section'  => '_s_f_home_slider',
		'type'    => 'select',
		'choices' => $cats,
	));
}

add_action('customize_register', 'themename_customize_register');

通常,$wp_customize 对象只有 4 种方法需要在customize_register钩子内与之交互。

WP_Customize_Manager:add_setting()这会向数据库中添加新设置。

WP_Customize_Manager:add_section()这会将一个新部分(即类别/组)添加到主题定制器页面。WP_Customize_Manager:add_control()这将创建一个 HTML 控件,管理员可以使用该控件来更改设置。这也是您为控件在其中显示的节的位置。

WP_Customize_Manager:get_setting()这可用于获取任何现有设置,以防您需要修改某些内容(例如WordPress的默认设置之一)。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享