wordpress主题设计
真香，30天做一套wordpress主题（第2天）：吃透主题设置
欢迎来到《真香，30天做一套wordpress主题》系列文章，我们的目标是（没有蛀牙！）建立一套全新的wordpress主题，花上30天的时间闭关修炼，如果你看到的第一篇文章不是《基础框架搭建》，建议你关注我们（数字江湖异志录），从该系列的第一篇开始阅读。
我们将尽量保持文章的循序渐进和通俗易懂，请确保自己已经掌握了那一篇文章的全部内容时才选择跳过，不然可能会错过关键的信息噢~
这里我们假定你已经知晓了以下基础知识，这些基础知识对理解文章内容是至关重要的：
1. HTML/CSS/JS基础
2. PHP基础
3. 如何使用Wordpress
4. 如何搭建web环境
如果你已经知晓了以上基础知识，恭喜你，本系列的任何文章内容对你而言都没有什么难度。
直奔主题新版的wordpress增加了自定义主题设置的功能，并且官方也推荐开发者把相关的设置放到主题自定义里。默认的情况下，主题会自动开启一些自定义参数（即使我们的主题还没有使用它们）：
我们在主题文件夹下建立一个functions.php文件，这个文件会影响到主题的方方面面，首先我们建立自定义的主题参数连接：
// Customizerfunction 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，然后我们在代码里把它们去除：
// Customizerfunction 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>
刷新页面，我们应该能看到这样的页面输出：
这里，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了。
总结和预告今天我们定义了一套主题的设置选项，之后我们会把所有跟主题相关的设置统统放到里面，wordpress的主题自定义设置设计得非常优雅，相对于以往的建立专门的主题设置页面而言，在自定义设置里添加相应的控制选项非常简单和直接，让我们可以对主题设定进行统一管理。
明天（第3天）我们将真正将这一套公共顶部搭建起来，并且实现页面在PC、平板、手机上的响应式布局。
如果你喜欢这个系列的文章，赶快关注我们吧，不要错过后续的更多干货噢。
真香，30天做一套wordpress主题（第8天）：首页移动端适配
欢迎来到《真香，30天做一套wordpress主题》系列文章，我们的目标是花上30天的时间闭关修炼，建立一套全新的wordpress主题，如果你看到的第一篇文章不是《基础框架搭建》，建议你关注我们（数字江湖异志录），从该系列的第一篇开始阅读。
我们将尽量保持文章的循序渐进和通俗易懂，请确保自己已经掌握了那一篇文章的全部内容时才选择跳过，不然可能会错过关键的信息噢~
这里我们假定你已经知晓了以下基础知识，这些基础知识对理解文章内容是至关重要的：
1. HTML/CSS/JS基础
2. PHP基础
3. 如何使用Wordpress
4. 如何搭建web环境
如果你已经知晓了以上基础知识，恭喜你，本系列的任何文章内容对你而言都没有什么难度。
平板适配我们先从简单的开始，适配平板，这里我们只考虑平板竖向使用的情况。我们遵循的原则就是，复用PC端的样式，然后通过媒体查询器控制元素的显示/隐藏和大小、宽度等占位属性，我们先来看看目前不做任何适配的情况下平板（竖向）的显示，这里我们直接从wordpress的主题预览取看：
我们全局使用了视口vw单位，因此平板里看上去没什么问题，我们这里就直接跳过了（这样也可以？）。
手机适配我们先来看一下目前手机端的效果：
现在这样可不行，好多东西都挤到一起去了，这里我们主要做三个工作：
1. 顶部菜单更换为点击弹出式菜单（初始状态隐藏）
2. 双栏布局改单栏布局
3. 字体、文字行高调整
我们使用媒体查询器，对移动端的定义为640px及以下，相应的CSS我们统统放到这个查询器里面。
????????????@media?only?screen?and?(max-width:?640px){????????????????.top-container?{????????????????????width:?100vw;????????????????}????????????}
这里我们需要注意的是，那些和PC端保持一致的样式，就不要重复写了，还要记得根据移动端设计图尺寸计算vw噢。
??????????????header?{????????????????????height:?33.3333vw;????????????????}????????????????.top-container?{????????????????????width:?100vw;????????????????}????????????????.title-menus-area?{????????????????????margin-top:?4.6667vw;????????????????????height:?auto;????????????????}????????????????.blog-title?{?????????????????????margin-top:?0;????????????????????margin-left:?5.3333vw;????????????????????font-size:?3.7333vw;????????????????????line-height:?3.7333vw;????????????????}????????????????.top-menus?{????????????????????display:?none;????????????????}????????????????.tagline?{????????????????????margin-top:?6vw;????????????????}????????????????.tagline-main?{????????????????????font-size:?5.0667vw;????????????????????line-height:?5.0667vw;????????????????????margin-bottom:?3.08vw;????????????????}????????????????.tagline-split?{????????????????????width:?8.8vw;????????????????????height:?0.44vw;????????????????????margin-bottom:?1.78vw;????????????????}????????????????.tagline-sub?{????????????????????font-size:?2.9333vw;????????????????????line-height:?5.1333vw;????????????????}
这里主要调整了容器宽度、字体大小和行高，现在我们的页面看起来像是这样：
可以看到，我们暂时把顶部菜单去掉了，字体大小都进行了修改，这样在移动端浏览时就不会因为文字过小而看不清楚了。
现在我们把顶部菜单加上，这里我们需要增加一个checkbox来作为菜单的展开按钮：
<input?type="checkbox"?id="header-menu-button"/>????????????????????<div?for="header-menu-button"?class="top-menus">????????????????????<?php????????????????????????wp_nav_menu(????????????????????????????array(????????????????????????????????'container'??=>?'nav',????????????????????????????????'theme_location'?=>?'primary',????????????????????????????)????????????????????????);?????????????????????>????????????????????</div>
这里的关键就在于for="header-menu-button"，这样在checkbox被点击时，我们的top-menus就可以被#header-menu-button:checked + .top-menus选择器选中，现在进行一些CSS描述，最后我们的菜单在移动端展开后看起来像这样：
然后我们来弄文章列表这部分的适配，设置好宽度，CSS进行定义就可以了，基本属于苦力活，样式就不贴了，最终效果如下：
接着弄小工具和公共底部的移动端适配，同样是苦力活，调整下和大小相关的属性就可以了：
至此，我们首页的移动端适配就基本完成了。
总结和预告今天我们完成了首页移动端的适配，使用了CSS的媒体查询器进行样式定义，相对于PC的样式，基本只修改了和大小相关的那些属性，其实我们也可以有针对性的对部分UI元素进行隐藏，只是我们这里没有这样的需求，在移动端隐藏非关键性UI是很常规的操作。
明天我们将主题的CSS样式按功能分组，抽离到独立的文件中去，然后制作主题的搜索页面，随着可复用的元素越来越多，我们的开发进度也会越来越快，敬请期待吧。
如果你喜欢这个系列的文章，赶快关注我们（数字江湖异志录）吧，不要错过后续的更多干货噢。