小桥

404页面: 真香，30天做一套wordpress主题（第10天）

404页面 今天我们先来做404页面，像昨天做搜索页那样，我们直接从home.php复制代码到404.php里。 利用原来的顶部标语位置放置我们的404文本：                 <div class="tagline">                     <di...

阅读更多

0 3227 3

01

5 月

小桥

搜索search.php: 真香，30天做一套wordpress主题（第9天）

CSS解耦 因为AMP只允许自定义CSS写到html里，不允许外链接，现在我们的CSS行数已经超过了2k行，再不抽离解耦只怕以后就解不开了，今天我们就把它们按功能解耦。 这里我们用wordpress的公共方法get_template_part轻松搞定，首先我们建立一个CSS文件夹，将CSS样式按功能...

阅读更多

0 2504 2

01

5 月

小桥

首页移动端适配: 真香，30天做一套wordpress主题（第8天）

平板适配 我们先从简单的开始，适配平板，这里我们只考虑平板竖向使用的情况。我们遵循的原则就是，复用PC端的样式，然后通过媒体查询器控制元素的显示/隐藏和大小、宽度等占位属性，我们先来看看目前不做任何适配的情况下平板（竖向）的显示，这里我们直接从wordpress的主题预览取看： 我们全局使用了视口v...

阅读更多

0 2538 2

01

5 月

小桥

公共底部: 真香，30天做一套wordpress主题（第7天）

公共底部 今天我们来完成公共底部，这是个非常重要的区域，并且也是非常省心的区域（基本写好了之后就是全局共用的）。 这里我们分两块区域，一是底部菜单，一是版权等信息，首先我们建立好DOM结构：         <footer>             <div class="foot...

阅读更多

1 2968 0

01

5 月

小桥

侧边栏: 真香，30天做一套wordpress主题（第6天）

伟大的侧边栏 今天我们开始制作主题的侧边栏（sidebar），wordpress可以把小工具（widgets）放到侧边栏里，我们先为主题开启侧边栏功能，在functions.php里添加如下代码： function my_sidebar_registration() {     register_s...

阅读更多

0 1044 0

01

5 月

小桥

字体图标: 真香，30天做一套wordpress主题（第5天）

图标字体 我们现在为我们的主题引入iconfont（图标字体），先把图标字体准备好： 查阅AMP文档之后，我们可以了解到AMP可以直接引入字体css： <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ta...

阅读更多

0 1235 0

01

5 月

小桥

首页主体内容: 真香，30天做一套wordpress主题（第4天）

主体框架 我们把首页的主体区域划分成三个区域： 文章列表 右侧边栏 公共底部 现在我们把DOM结构建立好：         <main>             <div class="main-container">             </div>    ...

阅读更多

0 1088 0

01

5 月

小桥

公共顶部: 真香，30天做一套wordpress主题（第3天）

公共顶部 首先我们对顶部区域进行一下规划，我们简单地将其分为3块区域： 博客标题区域 标语区域（包含主标语与副标语） 菜单区域 然后根据区域划分我们把HTML DOM结构建立好：             <div class="top-container">               ...

阅读更多

0 1106 0

01

5 月