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

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

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

1. HTML/CSS/JS基础

2. PHP基础

3. 如何使用Wordpress

4. 如何搭建web环境

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

CSS解耦

因为AMP只允许自定义CSS写到html里，不允许外链接，现在我们的CSS行数已经超过了2k行，再不抽离解耦只怕以后就解不开了，今天我们就把它们按功能解耦。

这里我们用wordpress的公共方法get_template_part轻松搞定，首先我们建立一个CSS文件夹，将CSS样式按功能进行分类：

1. 全局(global.php)

2. 顶部

2.1 常用 (head-common.php)

2.2 菜单 (head-menu.php)

3. 左侧内容区(main-body.php)

4. 右侧侧边栏(main-sidebar.php)

5. 底部(footer-common.php)

接下来把CSS分门别类迁移到这些文件里就可以了，get_template_part('css/head','common')，这样就能获取head-common.php文件的内容。最后我们的style里就剩下这些：

????????<style?amp-custom>

<?php?get_template_part("css/global")??>

<?php?get_template_part("css/head",'common')??>

<?php?get_template_part("css/head",'menu')??>????????????

<?php?get_template_part("css/main",'body')??>??

<?php?get_template_part("css/main",?'sidebar')??>??

<?php?get_template_part("css/footer",?'common')??>

????????</style>

同样我们可以把一些比如公共底部和侧边栏这样的HTML文件也抽离，总之就是尽可能地保持单一文件的简单性，对UI区域进行解耦。

搜索页面

现在我们来根据之前的积累建立搜索页的主题文件，让我想想，10分钟够不够？

我们首先直接从home.php复制全部内容到search.php里，搜索一下看看，居然直接能用？

我们来做一点调整，去掉右侧边栏，列表调成单栏模式，然后在原标语位置加上一个搜索框。

调整列表页的时候，只要把它居中然后宽度增加一些就可以了。

我们在head上添加一个搜索框，还记得我们写的搜索小工具吗，跑到function.php里直接把相关代码复制过来。

<form?target="_top"?role="search"? method="get"?class="search-form"?action="/">

????????????????????<input?type="text"?class="search-field"?placeholder="<?php?echo?esc_attr_x(?'Search?…',?'placeholder'?)?>"?value="<?php?echo?get_search_query()?>"?name="s"?/>

????????????????????<button?type="submit"?class="search-submit"></button>

</form>

还是这个配方，还是这个味道，只是现在缺了样式描述有点丑：

耐心的读者能看到这一章，相信样式什么的已经是随手捏来了：

然后我们简单地做一下移动端适配：

这样，我们今天的任务就完成了（下课有点早呃）。

总结和预告

今天我们对主题的CSS样式进行了解耦，用了10分钟的时间制作了主题的搜索页面，因为大多数UI都可以复用，所以这个页面非常简单地完成了

明天我们制作主题的存档页(archive.php)和404页，难度应该和今天差不多（糟糕，这样子的话说好的30天教程似乎要提前结束了）。