WordPress網站除以圖片來豐富整個呈現視覺化,常常也會利用如Font Awesome、Elusive Icons、Genericons等各種圖示組(icon sets),但得額外雲端載入圖示檔案,甚至得利用外掛以方便使用圖示,加上許多外掛也常會載入自己的圖示組,也就常常會成為拖慢網站速度的主要來源之一,若能善用內建Dashicons圖示組,就有助於改善網站整體速度。

Dashicons的基本介紹

Dashicons為Wordpress核心內建的圖示組,進入後台管理介面時,就會看到功能列的各項圖示,但是在前台瀏覽時,若是未登入狀態的一般使用者,Dashicons通常不會自動載入,圖示也就無法顯示,此時可利用程式碼片段(Code Snippet)載入Dashicons,讓網站視覺更加豐富。

以下介紹在前台啟用Dashicons的作法,一旦啟用前台瀏覽載入時,在撰寫網頁時,就可直接利用Dashicons來豐富網站視覺,使用方法可參考Dashicons官方網站。

延伸閱讀》Dashicons官方網站

Dashicons的載入作法

方法一:修改布景主題

修改布景主題的functions.php檔案,在<?php後方加入以下程式碼片段,就能在前台載入Dashicons,但此類作法適合在子布景主題使用,否則容易隨著布景主題更新或更換後失效,得一再地重新設定。

add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

方法二:程式碼管理外掛

使用程式碼片段(Code Snippet)管理外掛程式,例如:Code Snippets、WPCodeBox等外掛程式,選擇加入PHP類型的程式碼片段,通常程式碼片段管理外掛會自動加入<?php,好處是設定會隨著外掛啟用,不會因為更換布景主題而失效。

<?php
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

除使用程式碼片段外,當然也可用Menu Icons by ThemeIsle等外掛可協助載入與管理圖示組,但就是得再安裝一個外掛,也容易造成網站速度拖慢或瀏覽時小問題,就曾經在使用Menu Icons外掛載入時,造成文章類別頁面的縮圖顯示出現問題。

最新文章推薦閱讀

關於愛旅誌二三事

  • 愛旅誌是由安雅與溫蒂共同經營的部落格,主要分享旅行相關資訊與體驗,2008年在5月在痞客邦開站,2013年獨立架站,2017年新增小漢堡一枚成員,共同成為旅遊伙伴。
  • 愛旅誌在Facebook開設溫蒂漢堡粉絲專頁,經營愛旅誌百貨愛住新飯店就是愛泰國等社團,您也可追蹤愛旅誌的Instagram,偶爾也發布短片在愛旅誌的Youtube
旅遊愛好者可在臉書粉絲專頁跟我們互動,也可在每篇文章下方留言。

聯絡我們

Name
Email
Message
已成功寄信聯絡愛旅誌!
送信失敗,請重新檢查欄位資料是否齊全!

網站建置

愛旅誌網站建置使用並推薦下列雲端主機平台、主題與外掛。

使用彈性高,介面友善的雲端主機服務
高訂製特質,載入快速的網站布景主題
功能極強悍,且輕量快速的代碼管理外掛