雲仙夢語
九天云外身自在,八荒宇内任逍遥

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

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

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

  1. HTML/CSS/JS基础
  2. PHP基础
  3. 如何使用Wordpress
  4. 如何搭建web环境

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

直奔主题

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

我们在主题文件夹下建立一个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 {

                width100vw;

                height18.5185vw;

                backgroundgray;

            }

        </style>

 

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

这里,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_controlnew 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了。

总结和预告

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

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

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

发表评论