如何魔改本主题(或许对其他主题也适用)

文章目录[x]
  1. 主题目录结构
  2. 添加看板娘模型
  3. 添加文章的按钮
  4. 主题集成插件
  5. 新建模板界面
  6. 修改样式
  7. 添加别人网页的效果
  8. 添加设置
  9. wordpress滤器钩子函数
  10. wordpress其他的函数
  11. 一些js文件
主题更新后给自己挖了个坑,现在该把它填上了。这篇文章写一下如何重度魔改我的主题吧,在这里我说一下,我也是个小白,很多东西都一知半解,所以很多错误还请大佬多多指出,废话不多说,直接开始吧

主题目录结构

前面那个inc文件夹放的是一些扩展以及函数,后面我们会多次用到这个文件夹。

language是语言文件夹,里面主要放了一些其他语言,主要是用于主题多语言功能。

pages是放模板页面的地方,主题所有的模板页面都放在这里。

static主要用于存放静态的东西,比如图片,js文件,css文件,字体文件。如果需要修改主题样式的可以到这里修改。

404.php是404时显示的页面。

comments.php用于显示评论区

footer.php用于显示页脚,主要就是主题最下面那块黑色的区域,主要用来添加一些自己定义的脚本和引用js文件(看板娘和音乐播放器都在这里)

functions.php用于存放函数的文件,这个也是很重要的,这里存放的函数全局都可以调用,还可以配合wordpress的函数使用来实现各种功能(这个主题有好几个函数文件,后面会具体说一下)

header.php显示页眉,就是网页的head标签那部分,对应主题的头图那部分,引入css文件一般在这里进行

index.php这个是显示主页的(不能完全说是主页,主要是显示文章目录那部分的内容,比如各种分类页面都是在这里显示的)

options.php显示我们主题设置的地方,如果自己想添加新的主题设置,可以修改这里。

page.php是显示页面的,就是wordpress里面的那个页面

sugnle.php是显示文章的,和上面那个类似

style.css是主题选择页面主题展示的内容,主要包括主题的名字和作者的一些信息

下面这个是inc文件夹下的内容

buttons主要放了我们写文章时显示的按钮图片(比如网易云音乐按钮那个图片)

content-templates这个是内容模板,就是在主页显示文章时显示的模板(就是下面这个模板)

live2d这个就是和看板娘相关的文件,如果大家不需要看板娘,可以把这个文件夹给删掉,同时看板娘的配置文件都在这里

QPlayer这个是主题集成的音乐插件的目录,其中css样式和js文件以及获取网易云音乐解析的都在这个文件夹里

single-templates这个是文章显示的模板,就是进入文章后显示的样式和内容都在这里

theme-options这个是主题设置的核心文件,主题设置的框架都在这里,一般建议不要修改

avatars.php这个是实现头像本地上传功能的PHP文件

core.php这个是主题函数的核心文件,主要放有一些杂七杂八的函数(比如站点地图功能就在这个文件里)

imgcfg.php这个和图片有关的函数,比如我们首页文章背景图片随机显示的功能就是在这里实现的,还要从url添加图像到媒体库也是在这里实现的

logincfg.php这个是和登录相关的函数,后台登录相关的内容都在这里

myfunction.php这个是后面我自己加的一个函数文件,后面自己添加的一些功能我都会放在这里

OwO.json这个是评论表情的json文件,如需添加表情可以到这里添加

post.php这个是文章处理的一些函数,比如我们的表情在这里就可以转换成图片,还有那个需要密码才能阅读的功能也是在这里实现的

share.php这个是分享功能的函数,文章分享的功能是在这里实现的

shortcode.php这是把我们编辑器添加的一些短代码替换成真正需要显示的内容,比如我们的网易云音乐插件在这里就会被替换成网易云音乐的HTML嵌入代码

smtp.php这个是邮件通知功能的后台代码,如果有人评论了就会通过这个发送邮件给站主

ua.php这个是评论区ua的显示代码,主要用于显示操作系统,浏览器,IP地址等功能

widgets.php这个是侧边栏工具显示的代码,和侧边栏工具相关的函数都在这里

上面就是对主题各个文件的详细介绍,如果你想修改什么,就自己去找对应的文件进行修改即可,下面说一些常用的操作

添加看板娘模型

很多人或许觉得看板娘模型还是不够多,想自己在加几个上去,那我就说一下添加的方法,请大家自行添加

首先我们需要下载模型(这里推荐一个live2d的资源网站:梦象

然后会得到以下几个文件

首先我们第一部就是要把model.json文件改成index.json(不改的话无法识别json文件)

然后进入model.2048文件夹(不同的模型这个文件夹一般不同,主要特征就是这个文件夹里面有图片)

进入文件夹后我们需要把图片名字里面的texture去掉(别问我为什么,因为这个会影响api接口的返回参数,当初我卡了半天后面看了api数据才发现这个原因)

比如改成我这样的,后面我们还需要修改json文件,把图片的文字给换掉(这个json文件主要是存放图片的地址和其他一些模型的地址)

下面就是修改后的结果

改好后我们就需要把模型上传了,这里建议大家上传到model/other里面,我后面的都加在这里了。

上传后我们还需要修改live2d-api文件夹下的model_list.json文件,就照我这样修改

然后自己可以在浏览器调一下api接口看一下返回的数据

添加文章的按钮

想自己定制按钮,这个也很简单,因为这个已经有框架了,我们照着添加就可以了

先到images添加图标,然后进入more.js

下面我都以哔哩哔哩这个按钮来进行说明

直接照着添加就可以了,注意修改名字和图片,如果需要参数的可以按照哔哩哔哩的格式来添加

添加好后我们到inc目录下的shortcode.php下进行转义和添加到主题操作

这个是转义函数,把短代码转换成bilibili的html代码。

extract(shortcode_atts(array("cid"=>'0'),$atts));

这个用于获取标签内的参数,没有获取到就会使用后面的默认值,$content就是标签内的内容大家照着改就行了。

然后把我们的按钮加到数组里面,下面还有一个register_button_b,这个是显示在工具栏的按钮

然后在添加js文件

这里直接照着添加就可以了。

然后还有下面这个

这里添加的话就会在下面这里显示

主题集成插件

这个我也是看的别人的教程,并不一定对所有的插件都适用,请大家谨慎使用。

首先我们需要下载插件,这里以我添加的Qplayer为例,下载好自己把文件夹放在inc目录下就可以了

然后我们需要把这个文件加到我们主题里面,这里需要在wordpress的function里面进行添加,我是在myfunction.php中进行添加的。

这里因为这个是同级目录,所以照着这样引入就可以了

然后我们还需要修改QPlayer.php文件(不同的插件不一样,不过一般都是和插件同名的文件)

大家需要修改一下插件的路径

不同的插件修改方法可能不一样,但是都是差不多的,比如下面这个插件就是修改这里

新建模板界面

模板界面都是在pages文件夹里面,下面会以我的那个哔哩哔哩追番界面来作为介绍

如果自己想新建模板界面,需要加上page-这个前缀。

我们进入这个界面看一下

前面那个template name其实就是模板界面的名字,这个名字就是在新建界面时显示的提示文字。

界面需要我们自己加上get_header();来获取我们主题的头部以及get_footer(); 来获取我们主题的尾部。然后中间就是我们需要显示的页面了。

这里获取B站的追番数据都被我封装到一个文件里面了,需要使用的话就直接使用哪个类就可以了,后面我这里是通过获取到的数据遍历打印出来。

大家也可以多多利用模板来生成各种有趣的界面

修改样式

这里我推荐配合开发者工具来使用,在你需要修改的地方点一下右键->检查就可以定位到具体内容

左边就是网页详细内容,右边就是样式,样式右上角是样式的文件名字,这里可以修改样式并可以实时预览修改后的结果,修改的差不多后就可以进入相关的css文件,搜索样式修改即可

这样就定位到了源css文件,到时候只需要修改里面的内容即可,这里推荐使用PHPstorm,可以远程连接我们的服务器并修改文件,是改源码的得力助手。

添加别人网页的效果

我们可能会在网上找到一些不错的网页效果,那么怎么引入呢?个其实也很简单。大家只要记住一点,如果是样式的话,尽量加在头部header.php里。如果是脚本的话,就加到footer.php里面。

比如我们的网页点击显示文字的效果,就是直接加载footer文件夹里面的。

看板娘就加在这个代码的上方。

一般这个照着别人的说明添加即可。

添加设置

如果大家想添加自己的一些设置,可以到options.php文件里面进行添加

这里以我自己后面加上的设置为例,前面第一个是我们自己新建设置的标签。有需要的可以自行添加

后面那个就是具体的设置,name是设置的名称,id是后面我们调用设置时会用到的东西。std是默认值,type是设置的类型比如这里是一个单项框。

其他的地方也是差不多类似的比如下面这个,desc是显示的提示内容,text是类型,这里就是一个编辑框。

设置好之后我们如何调用呢?

这里其实很简单,主题原作者已经帮我们把这些东西封装在一个函数里面去了,我们只需要把id传进去就可以获得内容了

这个就实现了显示昵称的功能。

 

wordpress滤器钩子函数

add_filter() 是wordpress中一个比较重要的函数,本主题的文章过滤,章节目录,头像随机显示都用到了这个函数。我们可以通过此函数在程序运行时修改各种类型的内部数据。

过滤钩子函数主要是下面这种形式

function example_callback( $example ) {
    // Maybe modify $example in some way.
    return $example;
}
add_filter( 'example_filter', 'example_callback' );

前面一个挂载回调函数的过滤器名称。

后面一个是过滤器应用时调用的回调函数。

还有两个可选参数,一个是指定与特定操作关联的函数的执行顺序,另一个是add_filter() 过滤器可接受的参数个数。

这里拿随机头像显示作为例子:

这里我们是挂改了头像过滤器,这里会传进来5个参数,它这里会进行判断,如果用户注册了,那么就id号就不为0,如果没有注册那么id号为0,如果没有注册就随机显示头像,注册了就显示原有头像,这样就实现了头像随机显示的功能。

关于这个函数的用法还有很多,这里就不一一举例了,比如我们文章目录显示那里就把输出的内容进行了替换。

wordpress其他的函数

PHP还有几个函数是和内容有关的,比如输出文章作者,写文章的时间,站点连接,标签。。。。等等,wordpress很多内容都是靠这几个函数来进行输出的,这也就使得我的的主题可以任意修改,内容只需要调用函数即可。

这里我之前写过一篇关于wordpress函数的文章,有感兴趣的可以去看看(传送门

用法我就不多说了,直接调用函数就可以输出相应的内容。

一些js文件

主题还有很多内容是靠js来实现的,所以我们也可以修改相应的js来实现我们需要的效果

比如这个主题的侧边栏其实是通过js来实现的(当初我找这个找了半天)

这里就是点击后会执行不同的函数,通过js来改变效果。这里如果你对js不熟悉的最好不要乱改。我这里就不多说。

小总结

修改主题是要有一定的html,css,js知识的。如果需要自己实现某种功能,还需要会一点PHP,如果不会的话最好不要乱修改,这里我只是提供了一些思路,说了一下主题文件的构成,大家只要理解了这个主题的构成,就可以修改主题的任何地方,当然重要的是想象。

当然,我现在也只是稍微了解一点而已,有不对的地方还请大佬多多指出来,还有什么漏了的可以在下面留言哦!希望大家也可以改造出自己独一无二的主题!

 

点赞
  1. Change-Tsai说道:

    标题抬头那个,红色伞的(≧ω≦)/

    1. 小游 小游说道:

      那个啊?好像没有红色伞 :bilibili7:

  2. Change-Tsai说道:

    请问这个主题的插画图片是出自哪里的?

  3. buvidcai说道:

    在原有主题上直接更改的风险十分大,这意味很难再使用原主题的更新,得完全由自己维护。是一件很累的事情。

    1. 小游 小游说道:

      后面我会想办法把我这个主题的个性化功能做丰富一点,也会加上一个更新主题的功能,现在的确有很多问题,也有很多bug,目前我也在不断的修改。所以非常抱歉 :bilibili34:

      1. buvidcai说道:

        请不要抱歉,你做的是非常有帮助的事情。请稍微为自己骄傲一下吧。

        1. 小游 小游说道:

          嗯嗯,谢谢理解 :zhihu8:

  4. buvidcai说道:

    关于live2D板块的.waifu所占的空间是不是太宽了,离人物老远鼠标的样式就变了。
    而且不把人物去掉我甚至发不了评论。

    1. 小游 小游说道:

      你可以修改看板娘的,后面我也会想办法解决这个问题

      1. buvidcai说道:

        似乎是原有数据缓存的问题,清除缓存后live2D人物就跑右边去了。为什么又突然移到右边呢?

        1. 小游 小游说道:

          我最刚改的,因为在左边会挡住目录模块,但是在主页会显示在右边,这个算是一个妥协的方案把

发表评论

电子邮件地址不会被公开。必填项已用 * 标注

Title - Artist
0:00