WPJAM Basic - 样式定制：一键自定义 WordPress 前后台和登录页面

继续 WPJAM Basic 插件的详细介绍，前面介绍了「优化设置」还没有看的同学，可以先看一下，今天接着介绍「样式定制」的功能，「样式定制」也是 WPJAM Basic 最早开发的功能，开发这个功能主要是为了方便自定义网站。

简单说就是「样式定制」功能让用户可以在 WordPress 前后台和登录这三个主要不同的界面的头部（head）和底部（footer）插入一些定制代码，实现对网站页面样式和前端功能进行快速的定制。

因为是给三个主要不同的界面实现定制，那我们也分三个部分来讲解吧：

前台定制

前台定制的功能管的就是前台的页面了，通过前台 Head 代码和前台 Footer 代码来定制前台的样式和功能。

这个功能对于有时候网站需要验证的时候有用，比如验证百度站长的时候，百度站长会给你两种选择：

1. 让你在根目录上传一个 txt 文件
2. 在头部的 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 后台，登录界面和前台的样式和交互。