可能说的不太清楚,我说的是这里:
一、添加
我们先看效果图:
代码:
//自定义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的默认设置之一)。
暂无评论内容