一些约定 本教程默认WordPress安装在本地.如果你把WordPress安装到了其他位置,请讲下文提及的网址中的localhost改为你的网站地址.同时,本教程的样例网站名称叫做TrucoTest,出现不同的网站名实属正常. 如果有不清晰的地方,欢迎留言. 主题在哪里 WordPress是一个非常强大的CMS(Content Management System, 内容管理系统),于是它的结构也比较复杂. ├── index.php ├── wp-admin | |── ... ├── wp-config.php ├── wp-content | |── index.php | |── plugins | | |── ... | |── upgrade | | |── ... | |── upload | | |── ... | |── themes | | |── ... ├── wp-cron.php ├── wp-includes | |── ... |── ... └── xmlrpc.php 上面就是WordPress的目录,我们并不需要修改全部文件,所有的主题全部位于wp-content/themes里面,每一个主题都放在一个文件夹里面. 在WordPress的控制面板(仪表盘)中,我们可以看到在外观 -> 主题(Apperance -> Themes)中看到现在安装的所有主题,默认的主题是2019(twenty nineteen). 添加主题 既然所有主题都放在wp-content/themes里面,那是不是在那里创建一个新的文件夹就行了呢?答案是不行.因为WordPress并不是靠文件夹来辨别主题的.WordPress靠的是文件夹里的style.css文件获取主题的版本、作者等信息的. 在wp-content/themes目录下创建一个名叫FirstTheme,并在FirstTheme中创建style.css和index.php两个文件文件.目录结构如下: wp-content └── themes └── FirstTheme |── index.php └── style.css 在style.css中写入以下内容: /* Theme Name: FirstTheme Author: truco Description: My first wordpress theme Version: 0.0 */ 保存后再次在仪表盘中打开外观 -> 主题,看到以下画面即为成功. 写在style.css的信息还可以包括: - Author URI: 作者的网站 - License和License URI: 使用的协议和协议的网址 - Tags: 主题的标签,即表示主题与哪些风格相关 - ... 点击主题,可以看到我们刚刚在Description中输入的字段. 点击启用,然后访问http://localhost,——可以看到,网页一片空白.这是因为我们在index.php中没有写任何东西,所以网页自然是空的. 子主题 从头编写一个主题需要很多的时间,但有时候我们只是想在其他主题的基础上做一些小修改,我们就可以编写一个子主题. 想要让WordPress知道我们编写的主题是另外一个主题的子主题,就要更改style.css的头部(前几行).假设我们要做TwentyNineteen的子主题,只需要把style.css改为以下的内容: /* Theme Name: FirstTheme Author: truco Description: My first wordpress theme Version: 0.0 Template: twentynineteen */ 细心的同学可能已经发现:相比之前的style.css,只是加多了一行Template: twentynineteen而已.事实上,WordPress使用Template字段来判断父主题是哪一个,所以Template中的名称一定要与父主题的名称相同,并且区分大小写. 再次打开http://localhost,发现还是什么都没有...这是因为我们之前创建的index.php覆盖(override)了父主题的index.php,所以WordPress默认采用子主题的index.php,也就是我们创建的空的那个.把index.php删除,再次刷新. 由于子主题中存在style.css,WordPress认为我们把style.css重写了,于是采用了我们编写的style.css(而不是父主题的那个),然而我们并没有定义任何样式,所以可以看到内容全都在,但是样子完全不同. 那么怎样引用父主题的样式呢?我们可以用CSS中的import方法.在style.css中加入以下内容: @import url(../twentynineteen/style.css); 再次刷新网页,可以发现已经恢复正常. 现在我们为子主题添加一些样式.在style.css中加入以下代码: body { background-image: url(https://i.pinimg.com/736x/5b/13/dd/5b13ddd922f54cd5f210f08a050c411f.jpg); background-repeat: no-repeat; background-position: top left; background-attachment: fixed; background-size: cover; } #page { background-color: rgba(255,255,255,.5); max-width: 1200px; margin: auto; } 其他样式可以随意设置. 总结 这篇文章讲到了: - 如何新建一个主题 - WordPress如何检测主题 - 如何新建一个子主题 下一篇文章开始,将会从基础的部分开始,一步一步讲如何开发一个WordPress主题.