CSS解耦

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

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

1. 全局(global.php)
2. 顶部
   1. 常用 (head-common.php)
   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 &hellip;', 'placeholder' )?>" value="<?php echo get_search_query()?>" name="s" />

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

</form>

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

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

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

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

总结和预告

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

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