夜间模式暗黑模式
字体
阴影
滤镜
圆角
主题色
小试牛刀–WordPress主题开发教程(01)

一些约定

本教程默认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).
Wordpress仪表盘的图片

添加主题

既然所有主题都放在wp-content/themes里面,那是不是在那里创建一个新的文件夹就行了呢?答案是不行.因为WordPress并不是靠文件夹来辨别主题的.WordPress靠的是文件夹里的style.css文件获取主题的版本、作者等信息的.

wp-content/themes目录下创建一个名叫FirstTheme,并在FirstTheme中创建style.cssindex.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: 作者的网站
LicenseLicense 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主题.

暂无评论

发送评论 编辑评论


				
上一篇
下一篇