夜间模式暗黑模式
字体
阴影
滤镜
圆角
主题色

Category: Wordpress

2 篇文章

thumbnail
小试牛刀–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). 添加主题 既然所有主题都放在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主题.
thumbnail
前言–WordPress主题开发教程(00)
写在前面 这是一篇WordPress主题开发教程.当初建立这个博客的时候一直找不到合适的主题(可能是我不会找),但是对HTML、CSS和JS都不熟,所以这个想法被搁置了.最近学习了这三部分以后又重新有了这个想法,于是开始学习WordPress主题的开发. 由于PHP和CSS的关系不大,加上我的CSS一般,所以本教程相对来说更加注重HTML的部分而非CSS. 我还是个学生,可以用来学开发的时间本来就不多,用来写博客的时间要更少一些,所以只能尽力更新,不能保证更新频率.另外,我对WordPress的了解不是很深入,所以在教程中出现的错误还请包涵,有什么问题可以在留言处支出,我会尽快更改. 最后,谢谢光临我的小站. 开始之前 阅读本教程需要的条件: - 熟悉HTML、CSS、和JavaScript - 对PHP有初步的认识 - 已经安装NMP环境和WordPress 上面所说的"熟悉"并没有一个准确的定义,但是如果你已经能够独立写出一个漂亮的网页,那么一定满足第一个条件. 对PHP的了解不需要太过深入,但至少了解PHP的变量和函数这些基础的东西. 相比之下,第三个条件并不难达到,喜欢折腾的朋友可以看看这篇教程,不喜欢折腾的也可以轻松地使用XAMPP来搭建LNMP环境,然后下载WordPress并解压到htdocs目录即可,这里不多加赘述. 环境 本教程在以下环境中编写: - Wordpress 5.0.3 声明 本教程于2019年1月开始编写,部分API可能在以后的版本中更改,而本教程同步更新. 本教程中的所有文章适用于知识共享 署名-相同方式共享 3.0协议 本文中的图片来源包括: - https://pixabay.com - https://burst.shopify.com