真香,30天做一套wordpress主题(第2天):吃透主题设置

欢迎来到《真香,30天做一套wordpress主题》系列文章,我们的目标是(没有蛀牙!)建立一套全新的wordpress主题,花上30天的时间闭关修炼,如果你看到的第一篇文章不是《基础框架搭建》,建议你关注我们(数字江湖异志录),从该系列的第一篇开始阅读。

我们将尽量保持文章的循序渐进通俗易懂,请确保自己已经掌握了那一篇文章的全部内容时才选择跳过,不然可能会错过关键的信息噢~

这里我们假定你已经知晓了以下基础知识,这些基础知识对理解文章内容是至关重要的:

1. HTML/CSS/JS基础

2. PHP基础

3. 如何使用Wordpress

4. 如何搭建web环境

如果你已经知晓了以上基础知识,恭喜你,本系列的任何文章内容对你而言都没有什么难度。

直奔主题

新版的wordpress增加了自定义主题设置的功能,并且官方也推荐开发者把相关的设置放到主题自定义里。默认的情况下,主题会自动开启一些自定义参数(即使我们的主题还没有使用它们):

真香,30天做一套wordpress主题(第2天):吃透主题设置

我们在主题文件夹下建立一个functions.php文件,这个文件会影响到主题的方方面面,首先我们建立自定义的主题参数连接:

// Customizer

function my_customize_register($wp_customize) {

};

add_action( 'customize_register', 'my_customize_register' );

相关的主题设定我们都会写到my_customize_register里,我们先来了解三个基本概念:

1. Section

2. Settings

3. Control

为了方便理解,我们可以把section当成设置的一级菜单,control是菜单里的设置控件,settings则是存储设置的容器。

通过查阅wordpress文档,我们找出了那些默认开启的section的唯一id,然后我们在代码里把它们去除:

// Customizer

function my_customize_register($wp_customize) {

// remove default section

$wp_customize->remove_section('title_tagline');

$wp_customize->remove_section('custom_css');

$wp_customize->remove_section('static_front_page');

};

然后我们添加自己的section、control、settings,这里我们先盘点一下目前的需求,我们需要对页面的公共顶部进行设置,公共顶部含有以下元素:

1. 博客标题

2. 主标语(slogan/tagline)

3. 副标语

那么我们在functions.php里实现代码是像这样的:

 $wp_customize->add_section( 'header_setting' , array(

'title' => __( 'Header Setting'),

'priority' => 10,

) );

$wp_customize->add_setting( 'blog_title' , array(

'default' => get_bloginfo('name'),

'transport' => 'refresh',

) );

$wp_customize->add_setting( 'main_tagline' , array(

'default' => 'Free the Internet',

'transport' => 'refresh',

) );

$wp_customize->add_setting( 'sub_tagline' , array(

'default' => 'Across the Great Wall we can reach every corner in the world',

'transport' => 'refresh',

) );



$wp_customize->add_control(

'input_blog_title',

array(

'label' => __( 'Blog Title'),

'section' => 'header_setting',

'settings' => 'blog_title',

'type' => 'text',

)

);

$wp_customize->add_control(

'input_main_tagline',

array(

'label' => __( 'Main tagline'),

'section' => 'header_setting',

'settings' => 'main_tagline',

'type' => 'text',

)

);

$wp_customize->add_control(

'input_sub_tagline',

array(

'label' => __( 'Sub tagline'),

'section' => 'header_setting',

'settings' => 'sub_tagline',

'type' => 'textarea',

)

);

这里我们用到了三个方法:

1. add_section

2. add_settings

3. add_control

对应section、settings、control的添加,需要注意的是,我们在设置文本的title输出那里用到了魔术方法__(),这是为后期主题的国际化做准备,魔术方法__()和魔术方法_e()都是为了主题多语言而存在的,它们之间的不同就是__()返回字符串,而_e()直接把文本在页面里输出,当然,它们都是根据当前系统设定的语言找到对应的语言包输出的,主题国际化的相关内容我们在本系列的后期进行展开。

这样设定之后,我们就可以在主题的任意位置调用这些设置好的内容,现在我们把它们在home.php里显示出来看看。

 <body>

<header>

<?php echo get_theme_mod('blog_title') ?>

<?php echo get_theme_mod('main_tagline', 'Free the Internet') ?>

<?php echo get_theme_mod('sub_tagline', 'Across the Great Wall we can reach every corner in the world') ?>

Header Area

</header>

</body>

这里我们用到的内置方法是get_theme_mod,我们传两个参数给它,一个是主题设置的settings id,一个是默认值。

还记得我们在第1天建立框架时有添加的style amp-custom吗,我们在里面添加一段css,让我们的header凸显出来:

 <style amp-custom>

header {

width: 100vw;

height: 18.5185vw;

background: gray;

}

</style>

刷新页面,我们应该能看到这样的页面输出:

真香,30天做一套wordpress主题(第2天):吃透主题设置

这里,Hhacker's blog是我的blog名称,其它的就是刚才我们设定的主标语和副标语的默认值了。

我们在主题自定义那里设定这些settings并点击发布时,页面里对应的部分就会发生变化了。

接下来我们顺便把主题的favicon参数也实现了吧,favicon是显示在浏览器标签页上的小图标,我们按照之前的方法,建立一套settings和control,并绑定到我们的section里:

 $wp_customize->add_setting( 'favicon' , array(

'default' => '',

'transport' => 'refresh',

'sanitize_callback' => 'absint',

) );

$wp_customize->add_control( new WP_Customize_Site_Icon_Control( $wp_customize, 'set_favicon',

array(

'label' => __( 'Favicon' ),

'description' => __( 'Favicon is what you see in <strong>browser tabs</strong>, bookmark bars'),

'section' => 'header_setting',

'settings' => 'favicon',

'width' => 32,

'height' => 32,

)

) );

这里我们直接使用了wordpress的内置控件WP_Customize_Site_Icon_Control,这个控件可以直接对图片进行上传和裁剪。

然后我们在header.php公共头里使用使用这个favicon:

<?php

if ($icon = wp_get_attachment_url(get_theme_mod('favicon'))) {

echo '<link rel="shortcut icon" href="'.$icon.'">';

}

?>

这里需要注意的是我们直接get_theme_mod取到的内容是一个数字id,我们需要使用wp_get_attachment_url获取图片id对应的url路径。

这样我们刷新页面 ,就能在标签页上看到我们设置好的的favicon了。

真香,30天做一套wordpress主题(第2天):吃透主题设置

总结和预告

今天我们定义了一套主题的设置选项,之后我们会把所有跟主题相关的设置统统放到里面,wordpress的主题自定义设置设计得非常优雅,相对于以往的建立专门的主题设置页面而言,在自定义设置里添加相应的控制选项非常简单和直接,让我们可以对主题设定进行统一管理。

明天(第3天)我们将真正将这一套公共顶部搭建起来,并且实现页面在PC、平板、手机上的响应式布局。

如果你喜欢这个系列的文章,赶快关注我们吧,不要错过后续的更多干货噢。

未经允许不得转载:WPCS » 真香,30天做一套wordpress主题(第2天):吃透主题设置

赞 (1) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏