WordPress 主题修改经验

新手一般不知道,踩了很多坑……

  • 子主题很鸡肋
  • 不要直接改CSS,添加额外CSS来覆盖
  • 不要直接改PHP,用JavaScript来取代
  • 用好浏览器开发者工具

至于子主题为什么鸡肋,见WordPress 子主题能干什么以及不能干什么
额外CSS怎么用,见不要再傻乎乎地通过主题编辑器style.css修改主题样式了
JS如何取代PHP见本篇。浏览器开发者工具轻度使用指南正在整理中……

之所以不推荐直接改CSS和PHP,是因为更新时会被覆盖。而额外CSS和JavaScript不会被覆盖。目前我已实现所有改动在主题更新后依然保留了,哇哈哈哈哈哈……

JS还有一个好处,就是可以保留外部CDN资源引用。因为PHP不能重定义函数,JavaScript允许重复定义函数,后定义的同名函数覆盖之前的。

举个栗子,回顶图标的修改,这个图标的类是在PHP里定义的,新手可能会简单粗暴地去改PHP,然后每次主题更新的时候再手动去改一次。其实通过JS可以修改某个元素的class,一劳永逸。可以把JS代码添加在页尾脚本里。

<!--回顶图标修改--><script>
$("#fabtn_back_to_top > span > i").removeClass("fa fa-angle-up");
$("#fabtn_back_to_top > span > i").addClass("fa fa-arrow-up");
</script>

至于怎么定位到元素,用浏览器开发者工具很容易获取。

Image

先用鼠标定位到元素,然后在开发者工具中相应元素上右键,Copy=>Copy selector,你就会得到document.querySelector("#fabtn_back_to_top > span > i"),然后就能很方便地改它的CSS或者添加JS操作了。

小提示:您还可以点击下方 [ 标签 ] 阅读相关文章。您可以通过 RSS 订阅本站文章更新,订阅地址:https://crowya.com/feed

评论

  1. Image
    Shine
    Windows Chrome
    北京市丰台区 联通
    1 年前
    2024-11-19 14:48:26

    您好,页尾脚本是指哪个文件?

    • Image
      alin
      Shine
      Windows Edge
      山东省烟台市 移动
      1 年前
      2024-12-18 12:41:24

      同问

      • Image
        博主
        alin
        Android Chrome
        上海市 电信
        1 年前
        2024-12-18 13:09:14

        页尾脚本是一个HTML区域,不一定是哪个文件,很多插件或主题都能改,例如argon主题后台就有页尾脚本这个设置项,他相当于一个中介会帮你插入到HTML,还有个Snippets插件好像也可以,不管什么途径,只要最终能插入到这个位置都可以

        • Image
          alin
          鸦鸦
          Windows Edge
          山东省烟台市 移动
          1 年前
          2024-12-18 13:15:32

          多谢回复,我已找到 Image

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇