WordPress Theme wp_customize 的使用

2019年12月13日05:22:28 发表评论 热度442 ℃

在制作 Crazy uncle 的wordpress主题的时候,不想加入复杂的设置选项。。。因为这个wordpress主题实在是太过简单了。。。于是就从wordpress的外观自定义来着手了!需要学习的是wp_customize的使用,下面就直接贴代码吧,方便以后使用!

  1. //自定义logo
  2. function puma_customize_register( $wp_customize ) {
  3.     $wp_customize->add_section('header_logo',array(
  4.         'title'     => '博主头像',
  5.         'priority'  => 50
  6.     ) );
  7.     $wp_customize->add_setting( 'header_logo_image', array(
  8.         'default'   => '',
  9.         "transport" => "postMessage",
  10.         'type'      => 'option'
  11.     ) );
  12.     $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'header_logo_image', array(
  13.          'label'     => '博主头像',
  14.          'section'   => 'header_logo'
  15.     ) ) );
  16. }
  17. add_action( 'customize_register', 'puma_customize_register' );
  18. //自定义博主描述
  19. function ms_customize_register( $wp_customize ) {
  20.     $wp_customize->add_section('header_bzms',array(
  21.         'title'     => '博主描述',
  22.         'priority'  => 50
  23.     ) );
  24.     $wp_customize->add_setting( 'header_bzms', array(
  25.         'default'   => '',
  26.         "transport" => "postMessage",
  27.         'type'      => 'option'
  28.     ) );
  29.     $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_bzms', array(
  30.          'label'     => '逼格首页的描述文字',
  31.          'section'   => 'header_bzms'
  32.     ) ) );
  33. }
  34. add_action( 'customize_register', 'ms_customize_register' );
  35. //自定义地址
  36. function dz_customize_register( $wp_customize ) {
  37.     $wp_customize->add_section('header_dzzb',array(
  38.         'title'     => '地址坐标',
  39.         'priority'  => 50
  40.     ) );
  41.     $wp_customize->add_setting( 'header_dzzb', array(
  42.         'default'   => '',
  43.         "transport" => "postMessage",
  44.         'type'      => 'option'
  45.     ) );
  46.     $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_dzzb', array(
  47.          'label'     => '逼格首页的地址坐标',
  48.          'section'   => 'header_dzzb'
  49.     ) ) );
  50. }
  51. add_action( 'customize_register', 'dz_customize_register' );

调用就简单了,直接

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

下面对wp_customize做个延伸科普:

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 (静态首页)

Controller Class

  • 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() – 创建顶部背景图片选择器

瓜皮猪

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: