如何通过修改具体代码来修订知更鸟Begin主题?

知更鸟Begin主题是WordPress里面非常好用知名度很高的一个主题,不得不佩服作者技术功底之深刻。

这个主题是用PHP语言编写的,我们在使用这个主题的时候有时候往往会遇到这种情况,比如说我们打开公告面板,却发现由于我们修改了主题的背景,把背景换成了一张图片,而这个图片是深色背景的,这个时候就会出现原本在白色背景下正常显示的黑色文字,在新的背景下变得看不见了:

如何通过修改具体代码来修订知更鸟Begin主题?

如上图中公告的发布时间,黑色的字体与深色的背景冲突了。这个时候我们发现,主题选项里面并没有提供修改公告时间颜色的功能。同样的问题还有,比如上图公告栏的背景颜色是白色的,而我想要把他们都修改成黄色,该主题目前同样没有提供该功能选项。那么这个时候我们要如何是好呢。

要么就是给作者留言等待主题下一次更新添加这个功能,要么就只能手动地通过手动修改这个主题的代码的形式来修订主题了。下面介绍的方法是我个人解决问题的思路,方法有些笨,不过可行,当然需要有一定的编程基础。


首先要准备好以下东西:

1、知更鸟Begin主题的源文件包;

2、以及MyeEclipse(用来通过某段代码判断该代码在源文件中的哪个位置,不限于MyEclipse,只要有相应功能的都可以,Dreamweaver是最好的选择。因为我个人是从事Java开发的所以习惯用MyEclipse);

3、相应的用来连接服务器的软件(我用的是阿里云服务器,使用xftp连接服务器);

4、火狐留言器(其他能实现相关功能的浏览器均可)


正文

知更鸟Begin主题是个很优秀的主题,当然它的代码量更是巨大的,如果要一字一句地研究哪段代码是实现哪个功能的,恐怕要花上很长很长的时间。要如何快速地判断我们要修改的某个部分的实现代码是在哪里呢,我们可以通过搜索功能实现。在这里我们就以修改上述公告发布时间的背景颜色为例。

1、用火狐浏览器打开公告页面并右键选择“查看元素”

如何通过修改具体代码来修订知更鸟Begin主题?

弹出开发者工具窗口,这个窗口显示了该页面的布局,我们就是通过这个工具来找到具体的某个元素是属于哪个部分,进而找到修饰它的外观的代码的。我们需要一点一点地寻找排查,直到正确地定位到我们要修改的公告时间所在的代码片段。如下:

如何通过修改具体代码来修订知更鸟Begin主题?

我们找到了<span class="data">2017年05月</span>这一行并确定这一行就代表了我们要修改的那个公告发布时间,然后我们就可以在右边查找到修饰它的CSS代码,当然这里需要有前端编程的基础知识。然后为了确认是否修改这段CSS代码就可以修改颜色,我们可以直接在右边CSS代码的空白处点击添加测试代码,我这里就添加了修改颜色的代码,把文字颜色改成黄色,如下:

如何通过修改具体代码来修订知更鸟Begin主题?

可以看到,通过修改这段代码真的就达到了修改文字颜色的目的,所以这就是我们要找的代码,这是我们的线索代码,接下来只要在主题的源文件中找到这段代码所在的地方,然后修改就可以了。

因为这段CSS代码是内联的,所以看不到这段代码具体是在哪个CSS文件出现的,我们可以进去看看

如何通过修改具体代码来修订知更鸟Begin主题?

如何通过修改具体代码来修订知更鸟Begin主题?

我们可以认为这段代码必定出处于左侧这几个CSS文件中的,具体在哪里不好说,需要我们用工具去搜索。这个时候我们打开MyEclipse软件,通过MyEclipse的全篇搜索功能搜索代码。当然,如果会用Dreamweaver的话更方便了,直接就可以找到,我不太擅长Dreamweaver所以就使用MyEclipse了,有点舍近求远的意思,不过这篇文章我只是讲下我的思路,具体要怎么做各位有自己更好的办法。

打开MyEclipse,把知更鸟Begin主题源文件包导入到MyEclipse项目中,然后点击Search-->Search,然后在File Search中将线索代码片段输进去全文检索,如下:

如何通过修改具体代码来修订知更鸟Begin主题?

如何通过修改具体代码来修订知更鸟Begin主题?

如何通过修改具体代码来修订知更鸟Begin主题?

通过比对我们发现源文件中有两个文件里面出现了我们的线索代码(category-line.php和taxonomy-notice.php),通过查看属性我们可以确定它们都处于同个目录,我这里是处于/wp-content/themes/begin4.4/begin里面,然后使用xftp连接到服务器,找到这两个文件,打开文件然后定位到线索代码处,因为我们现在不确定是哪个,所以逐个修改看看修改哪个文件会使公告时间颜色变成黄色,就是在原来的CSS代码后面添加了“color:YELLOW;”,通过对比我们发现,修改taxonomy-notice.php这个文件里面的线索代码才会把公告时间颜色变成黄色,所以只要修改这个文件,然后将修改后的文件重新上传到服务器覆盖掉原来的文件就可以了。

如何通过修改具体代码来修订知更鸟Begin主题?

至此解决问题的思路就介绍完了,当然中间使用了笨方法,因为我本人只会用这个工具,技术不到家呀,所以舍近求远了,如果有更方便的方法顺便教下我。

接着如果还要修改公告栏的背景颜色,可以通过同样的思路,找到修改公告栏样式的CSS代码(也是在刚才的taxonomy-notice.php文件里面,.timeline-content{..background:...}这段代码便是目标代码),然后把公告栏背景颜色background改成黄色,如下:

如何通过修改具体代码来修订知更鸟Begin主题?

如何通过修改具体代码来修订知更鸟Begin主题?


原文链接:http://www.wpblog.gtlleon.com/2017/06/08/如何通过修改具体代码来修订知更鸟begin主题?

转载请注明出处。

光太狼Leon

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: