網站最後更新日期:2018年8月29日
歡迎大家來到暢想資源 AREFLY.COM! 個人網站 更多聯絡方式
×

給WordPress添加「加載中」動畫

今天教大家一個在你WordPress網站訪問有點慢時,可以提高用戶體驗的純CSS加載中」動畫

外掛(外掛)版

一、添加CSS動畫代碼

1、這是最主要的一個步驟,用處時來顯示加載中的動畫

2、把下列代碼添加到你主題的「樣式表 (style.css)」文件內添加下列代碼就可以啦

二、添加顯示代碼

1、這一步的用處是把前面的CSS代碼顯示出來

2、在主題內的「頁首 (header.php)」文件的 <body> 後同樣添加下列代碼

三、添加jQuery漸隱效果

1、這個步驟是用於在網頁加載完成後是加載動畫漸漸消失,而不是一直不停地轉動

2、在「頁尾 (footer.php)」內的 </body> 前添加下列代碼就完咯

預覽

本頁左下角會永遠旋轉「加載中」動畫

wordpress-loading-preview

參考

WordPress頁面載入時顯示旋轉的圓圈

總結

1、完成以上步驟後要清空快取才能顯示效果 :razz:

2、有問題可以回覆 :mrgreen:

覺得這篇文章有用嗎?分享一下讓更多人受益吧!

© 版權聲明:本文章採用「姓名標示-非商業性-相同方式分享 4.0 國際(CC BY-NC-SA 4.0)」於「」發布,轉載時須以相同方式發布並註明「原文鏈接」!

本文固定鏈接:https://www.arefly.com/zh-tw/wordpress-loading/

本文章由「超級efly」於2013年07月18日發表於「WordPress」分類

你可以發表評論,並在保留原文地址及作者的情況下引用到你的網站

轉載請註明:給WordPress添加「加載中」動畫 | 暢想資源

關鍵字:, ,

給WordPress添加「加載中」動畫:目前有 45 條留言
訪客以 25:20 大幅領先博主

評論載入中,請稍等……
  1. 14樓
    feiyaj China Google Chrome Windows

    感謝 一下就成功了

    [回復]
  2. 13樓
    西貝部落格 China Safari Mac OS

    哈哈,這個還挺好玩的,炫炫的。

    [回復]
  3. 12樓
    小憶 China Mozilla Firefox Windows

    好文章 對我很有幫助

    [回復]
    • 小憶 China Mozilla Firefox Windows

      隨便問一下 進入頁面的前幾秒有 後面就消失了

      [回復]
  4. 11樓
    四弦 China Google Chrome Windows

    博主同志,經查,你的外掛不支持HHVM
    在我的伺服器上你的外掛導致我部落格直接白掉。。。

    [回復]
    • 其實並不只是我的外掛的問題,而是HHVM對PHP的支持始終不是很好,所以如果外掛無法使用,推薦使用純代碼方式自行添加,謝謝! :razz:

      [回復]
      • 四弦 China Google Chrome Windows

        哎……HHVM快是快,就是支持不是很好……
        我原來的主題也不支持,只能棄主題保HHVM

        [回復]
        • 其實速度真的並沒有這麼重要,整體網站的外觀、內容才是最重要的,而且現在PHP也不是很慢吧? :?:

          [回復]
  5. 10樓
    我就有 China Google Chrome Windows

    很喜歡這個,很酷,我把他改了永久轉! :mrgreen:

    [回復]
    • 我個人覺得永久轉實在太奇怪了~老覺得像是沒加載完成 :grin: :grin:

      [回復]
  6. 9樓
    e杯咖啡 Taiwan; Republic of China (ROC) 楓樹極速瀏覽器 Windows

    我一直在想是要加在主題CSS好還是安裝外掛好?
    安裝外掛會導致頁面加載變慢?
    但是寫在主題的話,換了主題之後全部都要重弄,好糾結阿 :crazy:

    順便問問博主您側邊欄的"部落格統計"怎麼弄得?
    今天簽到啦!時間:上午10:51:11(使用Arefly評論框自動簽到)

    [回復]
    • 如果你經常換主題的話,就應該使用外掛(現在外掛對速度的影響已經幾乎可以忽略不計了) :razz: 而如果你是打算一直使用同一個主題,還是就添加代碼至主題內較好 :mrgreen: :mrgreen:
      本站右側的部落格統計是使用外掛「Site Analytics Widget」(還是我自己做的 :grin: )達成的~~ :razz: :razz:

      [回復]
  7. 8樓
    ysam China Mozilla Firefox Windows

    mark
    找時間折騰~

    [回復]
  8. 7樓
    Carter Japan Google Chrome Windows

    添加了隱藏代碼,還是不生效(已經刷新了N次了 :cry:

    [回復]
    • 確定你的頁面加入了jQuery麼?這段代碼一定需要jQuery才能工作的~

      [回復]
      • Carter Japan Google Chrome Windows

        怎麼弄啊!我不太會弄,求教

        [回復]
        • 將下方代碼添加到「header.php」中,然後點擊 更新檔案 就行啦! :razz:

          [回復]
      • Carter Japan Google Chrome Windows

        還有,你顯示我的這個系統是錯的耶!我是Windows 8.1

        [回復]
        • 呃。。是因為這個外掛還暫時不支持Windows 8.1。。。 :oops: :oops:

          [回復]
        • 現在支持Windows 8.1啦~~ :laugh: :laugh: :laugh:

          [回復]
  9. 6樓
    百賴小生 China 搜狗瀏覽器 Windows

    這個不錯的說。去試試了,謝謝博主寫的這麼吸納關係。。 :mrgreen:

    [回復]
  10. 它不消失啊怎麼辦?

    [回復]
    • 可能是你的SCRIPT代碼沒有加對位置,你再去檢查一遍看看 :razz:

      [回復]
      • 可是你說不用加SCRIPT會立馬消失,加了只是緩慢消失呀。。。

        [回復]
        • 額。。。說錯了。是一定要加,不加就不會消失。。。 :oops:

          [回復]
      • 你的這段消失代碼可能有問題,我自己寫了個解決問題了,望替換

        [回復]
        • 我的代碼應該沒問題,我自己就用的是我寫的那個代碼啊。。。

          [回復]
      • scrip t沒顯示出來,被博主屏蔽了

        [回復]
  11. 4樓
    小刀 China Google Chrome Windows

    添加漸隱代碼也不消失是怎麼回事

    [回復]
    • 有時候刷新可能不會出現漸隱,但大部份時候還是會的,你多刷新幾次試試看呢? :razz:

      [回復]
  12. 地板
    可可豆 China Google Chrome Windows

    看過很多回但從不知道這個是正在載入中的意思~~

    [回復]
  13. 板凳
    Lan Tian Reserved Google Chrome Mac OS

    還有你這個國家怎麼顯示不出來,我什麼事都沒幹啊

    [回復]
    • 現在可以了,前面獲取IP的方式出錯了。。。

      [回復]
  14. 沙發
    Lan Tian Reserved Google Chrome Mac OS

    這是從小蔣部落格弄來的吧,也不寫轉載

    [回復]
    • 呃,我這個是從「經驗公式」那看到的,在「參考」那 :saynothing:

      [回復]
    • 小蔣也不是原作者的啦。。。 :mrgreen:

      [回復]
      • 對呀,這種網上到處都有,根本找不到誰是原作者 :idea:
        PS:不知道為什麼這條評論都要審核 :?:

        [回復]

發表評論



微笑 調皮 偷笑 可愛 大笑 壞笑 詭計 贊 疑問 HI~ 愛 抱歉 對不起 頭暈 驚訝 帥 努力 勞累 瘋狂 難過 大哭 差 豬 邪惡 無言 憤怒 流汗 擦汗


快捷鍵:Ctrl+Enter