WPJAM Basic - 样式定制:一键自定义 WordPress 前后台和登录页面
继续 #WPJAM Basic# 插件的详细介绍,前面介绍了「优化设置」还没有看的同学,可以先看一下,今天接着介绍「样式定制」的功能,「样式定制」也是 WPJAM Basic 最早开发的功能,开发这个功能主要是为了方便自定义网站。
简单说就是「样式定制」功能让用户可以在 WordPress 前后台和登录这三个主要不同的界面的头部(head)和底部(footer)插入一些定制代码,实现对网站页面样式和前端功能进行快速的定制。
因为是给三个主要不同的界面实现定制,那我们也分三个部分来讲解吧:
前台定制

前台定制的功能管的就是前台的页面了,通过前台 Head 代码
和前台 Footer 代码
来定制前台的样式和功能。
这个功能对于有时候网站需要验证的时候有用,比如验证百度站长的时候,百度站长会给你两种选择:
- 让你在根目录上传一个 txt 文件
- 在头部的 Head 代码总加一段代码
如果不方便上传 txt 验证文件时候,直接把代码复制到这里的头部 Head 代码即可,即使方便的上传验证文件时候,把代码贴到这里也是更方便。
如果你的主题不支持暗黑模式,也可以通过把下面代码贴到这里的前台 Head 代码
,也可以实现博客暗黑模式:
<style type="text/css">
@media (prefers-color-scheme: dark) {
html, img {filter: invert(1) hue-rotate(180deg);}
html, iframe {filter: invert(1) hue-rotate(180deg);}
img {opacity: .75;}
}
</style>
此外我在新版还增加了「文章页代码」选项,本来该功能是扩展,现在我把功能增加到「样式定制」功能中,因为这里使用起来比较顺手,不过做成了开关,开启可以单独设置每篇文章 head 和 Footer 代码。
先说下该功能的主要用途,主要是因为如果某些文章的展示的时候需要引入一些的 JS 和 CSS 来实现特殊的页面效果,怎么处理好呢?如果直接内容编辑框中插入,首先不是特别方便和友好,也可能由于安全或者其他的原因而造成插入失败。
「文章页代码」功能就是为该需求实现的,它可以让大家在文章编辑页面插入文章头部代码和底部代码:

另外他还可以让大家选择是否支持在文章列表页设置,有三个选项:支持,不支持,只允许,如果可以设置,在后台的文章列表页面中就有「文章页代码」按钮,如下图所示:

点击「文章页代码」按钮,就可以通过弹窗的方式来设置文章详情页的头部和底部代码:

后台定制

如上图所示,后台定制多了两个个功能,一个就是可以上传一个 40x40 大小的图片替换后台左上角的 WordPress 图标,另外一个是「后台右下角显示内存使用和 SQL 数量」,开启之后,在后台右下角显示:

其他和「前台定制」一样,也是通过后台 Head 代码
和后台 Footer 代码
来定制后台的样式或者功能。
登录界面

登录界面也有两个额外的功能,首选是可以设置「登录之后跳转的页面」,比如可以设置网站首页,后台文章列表页面等等,另外一个是可以「屏蔽登录界面语言切换器」,这个不必多言。
其他一样可以设置 Head 和 Footer 代码,通过这两个值,可以做出自定义的登录界面。如果你懂 CSS,我们就可以自定登陆界面的 logo,甚至通过只用 CSS 就能做出非常漂亮的 WordPress 登录界面。

关于样式定制,目前就提供了这些选项,基本满足简单定制的需求,该功能虽然偏向程序员使用,但是只要懂一些 CSS 和 JS,还是可以定制出很不错的 WordPress 后台,登录界面和前台的样式和交互。