wordpress主题修改技巧及实战

wordpress主题修改技巧及实战

  • 零弈社区
    管理员

    1,首先要非常确定地知道缓存工作机制,你的wordpress如果有缓存插件,你应该确保你修改之后文件缓存被清空,否则你修改了,缓存没刷新,你测试时看不到效果。
    2,CSS文件会被大多数浏览器缓存,你必须进入浏览器高级设置里清空缓存,才能看到刷新的效果。
    3,如果你要修改的问题之发生在移动设备上,你要确定你的主题是不是根据显示尺寸自适应的,如果不是,是不是有单独的移动页面主题。其实这个年代如果你的主题还不是自适应的,说明是垃圾主题,赶紧换一个。
    4,尽量不要污染核心代码,如果你的主题以后会自动更新,你应该在子主题修改,而不是污染核心代码。如果你的主题千疮百孔,或者你像老王一样,打算以后彻底重写这个主题,不会让它自动更新,那么直接修改即可。
    5,大多数BUG分散各处,有时候你只需要修改特定的问题,这个问题可能是因为CSS文件太多,有些时候代码调用冲突,导致某些属性没发挥出来,你只需要将你的修改放到主题文件sytle.css里,强制覆盖出问题的属性即可,不用到处打补丁。
    5,使用谷歌Chrome或者谷歌换皮浏览器,Firefox都可以很好地调试主题。下面以我刚刚修复的一个BUG举例:

    我们可以看到成员列表的两个头像挨在一起,这是手机显示页面,非常大不好看。我们是不可能在手机上调试BUG的,因为手机屏幕太小,浏览器也没有审查元素的基本功能。我们需要打开谷歌浏览器,将画面尺寸调整到手机显示的尺寸,就是调整窗口宽度,主题会自适应显示的。调整好之后,我们找到出问题的地方,右键审查元素,查看HTML CSS代码:

    在各级标签之间一定鼠标,切换找问题,锁定出问题的是哪个标签,我们会看到以下界面:

    在右侧的属性栏里找到出问题的CSS代码,我看到,padding-right属性失效了:

    由于CSS文件太多,交错加载,我们很难知道问题出在哪里,而且在源文件(buddypress.min.css)中修改,可能会导致其他的冲突,产生新的问题,我们要把问题消灭在这里,就通过几个联合条件,强制设置这里的属性即可,复制打绿色圈圈的那段CSS代码到主题的style.css中去,在padding-ringht:3.4%后面颊上!important即可,代码如下:

    #members-list.members-group-list li.item-entry {
    width: 22.4%;!important;
    margin-right: 3.4%!important;/*this is the reason*/
    margin-bottom: 3.4%;!important;
    }

    因为这里是最终执行条件,几个元素的联合属性,此修改只会影响到这个页面,不会影响到其他地方,可以放心使用。修改完毕清空浏览器缓存,在手机和PC都可以看到,工作正常。

    强迫症是不是治愈了?

正在查看 1 个帖子:1-1 (共 1 个帖子)

哎呀,回复话题必需登录。

首页门户导航动态群组
论坛首页创业帮自媒体挨踢协会
墓志铭疯人院中年危机搜索