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

欢迎来到《真香,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. 顶部
    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天教程似乎要提前结束了)。

发表评论