如何在WordPress前台瀏覽啟用Dashicons內建圖示組?

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外掛載入時,造成文章類別頁面的縮圖顯示出現問題。

文章對你有幫助嗎?

喜歡文章的話…

歡迎追蹤我們的動態!

遺憾文章未能幫助你!

請提供建議給我們

Follow Us On Instagram

最新文章推薦閱讀

關於愛旅誌二三事

網路訂房問答精選

聯絡我們

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

最優惠的預訂平台

使用線上酒店、機票與車票預訂平台,享有保證最低價、免費取消、累積點數等優惠。

最實用的行程預訂

完成訂房後,善用 kkday/klook 線上預訂平台,行前打造自己的專屬行程。

景點門票
觀光行程
戶外活動
交通票卷
景點門票
套裝行程
在地體驗
住宿專案
返回頂端