欢迎访问晨星博客!

  • 当前位置: 首页 站长分享 正文

    关于使用仿雷锋网主题的看法和完善过程

    文章目录
    1. 原版问题定位:
    2. 我的修改进行时:

    相信大家都知道这款主题是由小兽开发的,不得不说,做的确实不错我也是被前台的UI布局给迷恋了很久决定用这款主题做我的博客站,但是 主题虽好有些地方还是要按我自己的意愿修改美化一下的,作为一个爱折腾的站长这个是必不可少的。相信大家在做网站的时候也花了很大的时间在网站模板上面。这个就不多说了,下面说说我的主题美化计划吧,其中有我认为这款主题中有个别地方美中不足,当然全是我自己的个人见解,大家有不同的看法可以吐槽我!

    原版问题定位:

    1. 小兽的原版主题导航是不带个性字体图标的,现在非常流行,而且主题已经集成了图标字体不用是浪费呀;
    2. 然后还有一个问题就是导航悬浮用的是js控制顶部导航的隐藏和悬浮导航的显示,这在我看来有一个弊端就是前台的源代码中会出现两个导航模块内容并且是完全一样的,细心的朋友知道WP自带的菜单功能读取数据库的次数偏多,而且重复的内容尽量不要存在的好;
    3. 导航上还有一点BUG就是二级菜单的输出,原版的二级菜单用的是灰色的背景而且页面不在顶部的时候显示不出来;
    4. 并且全站只能添加一个二级菜单,这个BUG一直没有得到改善,无奈自行动手了;
    5. 二级菜单的后面没有带下拉三角,为了美化总感觉缺点什么,也自己动手吧;
    6. 幻灯片没有单独的上传框,这个可能会对幻灯片的清晰度和尺寸上造成不便;
    7. 手机版没有相关文章的显示,对于手机浏览无遗是个遗憾呀;
    8. 使用小兽修改过的点赞插件,会加载一份多余的css和头部css代码,这份css小兽已经集成到主题了,你修改也没用,不用加载反而可以减少一次请求;
    9. 前台的登陆框感觉有些多余,对于一个博客站而言,为了前台的一个登陆框添加那么多的代码,但是没有会员中心感觉有些鸡肋了;
    10. 底部的位置有3个灰色的图标,我感觉有点大,还是随便改一下,看着心情舒爽些;
    11. 前台的css和js加载的太多,需要适当合并减少请求;
    12. 这个是SEO上的问题,分类不能设置单独的标题和描述;

    目前就发现了这11个需要修改和美化的项目,下面看看我美化后的效果吧!全程只用了一个js合并插件,其他全部代码搞定;现在把我的修改方法公布一下,用这款主题的朋友有需要的话可以修改一下。

    我的修改进行时:

    1. 首先是个性字体,我是本着不用插件的目的去添加功能的,为了把代码集成到主题在网上也翻了很久的教程,但是遇到了一个问题,代码版的有但是都是针对主题没有引入个性字体文件的方面,但是这款主题已经集成了个性字体,如果用这些代码而不引入字体css文件的话会报错,无奈还是自己动手吧,经半小时对插件核心代码做提取终于搞定,从一个几百K的插件中把核心的2KB集成到了主题完成了个性导航的修改。
    2. 对导航代码做精简,并修改js的控制方法,当滚动条超过头部时自动修改为定位顶部的css,返回头部时自动恢复,这时就可以把多出来的那一份重复导航删除了。
    3. 导航BUG这个首先要查找到小兽原来用于导航二级代码的js代码,用搜索功能轻松搞定,然后把这一段做了完善,并修改了css样式,就出现了我现在的导航二级菜单的效果了,黑色的下拉框,橙色的边框和主题导航完美融合。
    4. 二级导航后面的下拉三角,这个用了一个:after伪类轻松搞定,而且还用了主题自带的个性字体图标没给主题增加什么负担。
    5. 对文章发布页面新增一个图片上传的自定义字段,用于幻灯片处的调用,就是你如果要把文章显示到幻灯片就上传一下图片,主题会优先使用这里上传的图片作为幻灯片的大图。
    6. 对小兽发送的wp-zan再次优化,删除没用的设置代码和css代码,并且把js只引用到文章页,之前在首页也有加载,简直是浪费,首页根本用不到点赞。
    7. 我的站用不到前台登陆,这个在header.php中把表单代码清除,然后到functions.php把控制控制提交的代码删除(文件中有标注的)最后就是js了,这个必须清除项目,这个也在functions.php中的最后是css代码清理。
    8. 分类不支持自定义标题和描述这个只能通过代码添加自定义字段了,代码一大片就不提供了。需要的话可以联系我。修改完成后,站内用短标题,然后title用的是自定义标题和描述还有关键词,完全可以把分类做成单独的频道去优化。对关键词的覆盖非常重要。
    9. 合并css和js这个因为涉及到了缓存,所以用插件去解决吧,我用了WP Minify这个合并插件,用的时候有一点需要注意,主题中有几个js是不能合并的要不然会出错,有这个需要的朋友可以联系我。看效果的话直接看我的源代码就好了。
    10. 底部的三个灰色图标当然是在css中完成,很简单,搜索一下div的class 定位到文件,原来好像是font-size:5em 我给修改成3em 就是我现在主题显示的大小了。
    11. 关于手机端没有相关文章的显示,之恩那个增加一个模块了,因为小兽没有对相关文章做响应式优化,显示在手机端会错位。

    OK大功告成,主题修改已完结,还有一点 忘记说了,我在我的主题集成了本地头像上传功能,用了这个可以让头像加载的更快,而且没有上传头像的用户还是从多说调用,这个只是调整了一个调用的优先级。主要是让管理员方便修改自己的头像的。不得不说这款主题做的非常漂亮,也感谢小兽仿制雷锋网的主题,让我的博客小窝焕然一新!

    声明:原创文章请勿转载,如需转载请注明出处!

    • 共 2 条评论

    请登陆后再发表您的观点吧!

    最新评论

    1. 周晓龙

      确实是很不错,也支持原创作者

    2. 疯狂是病

      改的很好,喜欢你这个版本,小兽的这些问题都没解决!

    账号登陆

    快捷登陆