WordPress Dashicons：如何在 WordPress 網站中使用它們

已發表: 2022-10-14

您是想學習如何在 WordPress 中使用 Dashicons 的初學者嗎？

Dashicons 是每個 WordPress 安裝附帶的圖標字體（類似於 FontAwesome）。它是輕量級的，包含的圖標足以讓大多數用戶避免安裝第三方圖標集。

默認情況下，Dashicon 僅在後端加載。但是，您可以使用簡單的代碼輕鬆地將 Dashicon 添加到前端。

現在每個主題開發人員都更喜歡使用 WP Dashicons 而不是圖像，因為圖標加載速度更快。

在本指南中，我們將向您展示如何在 WordPress 中使用 Dashicons。

什麼是 WordPress Dashicon？

Dashicons 是 WordPress 的官方圖標字體，在 3.8 版本中首次引入。如果您在您的網站上使用這些字體，它們看起來會很棒。它們是高質量的 SVG 文件，可以縮放到任何大小而無需像素化。

由於 WordPress 團隊開發了它們，它們具有原生 WordPress 支持，並且可以在沒有額外腳本的情況下使用。大約有 350 種圖標字體可用，您可以在官方 WordPress 開發人員資源中找到這些字體。

您可以在以下位置使用這些圖標：

WordPress 管理儀表板
導航菜單
頁面和帖子
元數據
自定義插件和主題
前端設計

您可能已經註意到我們將 Dashicon 稱為“字體圖標”而不是“圖標”。這是因為字體圖標和常規圖標之間存在差異。

圖像圖標和字體圖標有什麼區別？

字體圖標和圖像圖標具有相同的用途。唯一的區別是它們是如何保存在服務器上的。

圖像圖標是您放置在網站各種元素上的微小圖像。字體圖標是瀏覽器轉換為矢量圖像的代碼片段。

為什麼使用 Dashicon？

出於多種原因，您應該使用字體圖標 (Dashicons) 而不是圖像圖標。

它們默認是可擴展的，就像您的 WordPress 網站上的文本一樣。這意味著無論用戶的屏幕有多大，它們都會看起來不錯。
Dashicons 也很輕巧。這意味著您的 WordPress 網站性能將比使用圖像圖標更快。
Dashicons，因為它們是文本，可以使用 CSS 進一步定制。您可以添加陰影、漸變色、動畫等效果。
Dashicons 對於保持 HTTP 請求盡可能低也很有用，因為它們與其他字體同時加載。如果您在網站上使用大量圖像，則必鬚髮出大量請求才能獲取它們，這會增加頁面加載時間。

如何在 WordPress 中使用 Dashicon？

不用擔心。使用 Dash 圖標不需要高級編碼技能。按照以下步驟操作，您很快就會在您的 WordPress 網站上擁有 Dashicon。

在前端啟用 WordPress Dashicons

在使用 WP Dashicons 之前，您必須首先為您使用的主題啟用它們。這是通過在functions.php文件中添加一個小代碼片段來完成的。

首先，您需要從 WordPress 管理儀表板轉到外觀 » 主題編輯器。

現在，從右側的文件列表中查找functions.php文件。

接下來，向下滾動到 functions.php 的底部並添加以下代碼：

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

在編輯 functions.php 之前，我們建議創建一個子主題。如果您直接編輯主題文件然後更新主題，更新將覆蓋您對functions.php 所做的任何更改。因此，有一個兒童主題總是更好。

而已！您現在已準備好開始使用 WP Dashicons。接下來，我們將向您展示如何獲取 Dashicons HTML 和 CSS 代碼。

如何獲取 Dashicons HTML 和 CSS 代碼

WordPress.org 有一個 Dashicon 庫，您可以在其中獲取每個圖標的 CSS 和 HTML 代碼。

只需轉到 WordPress 開發人員資源頁面。在這裡，您將看到可用 Dashicon 的列表。

接下來，單擊您可能要用於您的站點的圖標。

然後，根據您的需要，選擇Copy HTML或Copy CSS 。

單擊後，將出現一個帶有代碼的彈出窗口。只需將代碼複製到剪貼板即可。

現在，當您啟用 Dashicons 並複制代碼時，您只需決定在 WordPress 儀表板上的何處使用 Dashicons 圖標。例如，您可以在主題、元數據、導航菜單等上使用圖標。

如何將 WordPress Dashicons 用於特定目的

您已經了解瞭如何在您的網站上使用 Dashicon，現在我們將展示如何將它們用於特定目的。

將 Dashicons 添加到 WordPress 頁面和帖子

要將 Dashicons 圖標添加到 WordPress 頁面或帖子，首先，複製您要使用的圖標的 HTML 代碼。

之後，您必須將 HTML 代碼放入 HTML 呈現簡碼中。如果您使用古騰堡編輯器，大多數頁面構建器使用自定義 HTML 短代碼或自定義 HTML 塊。請記住，對於經典編輯器用戶，這意味著將 HTML 代碼粘貼到編輯器的文本選項卡中。

此外，您可以在自定義 HTML 小部件中使用相同的 HTML 代碼將 Dashicons 圖標添加到小部件區域。

要添加圖標，請打開頁面或帖子並將自定義 HTML 塊插入其中。您可以將復制的代碼直接粘貼到塊中，也可以用 HTML 代碼將其包圍。

插入 HTML 代碼後，發布頁面/帖子並從前端預覽以查看結果。

使用 WP Dashicons 導航菜單

要將 WP Dashicons 添加到 WordPress 導航菜單，首先，複製您要使用的圖標的 HTML 代碼。

之後，返回您的 WordPress 儀表板並單擊外觀 » 菜單。

然後，選擇要編輯的菜單並單擊要添加圖標的菜單項。

接下來，在展開的菜單項部分下查找導航標籤選項。您需要將 HTML 代碼直接粘貼到該區域內。您可以在現有菜單項的標籤之前或之後插入代碼。添加 HTML 代碼後，單擊保存菜單按鈕以保存更改。

然後，訪問您網站的前端，看看您選擇的圖標是如何顯示的。

在管理菜單中添加 Dashicons

要將自定義帖子類型添加到您的 WordPress 網站，首先，使用register_post_type()函數進行註冊。此函數接受幾個參數，其中之一是menu_icon 。它使您可以選擇管理儀表板的自定義帖子類型菜單選項旁邊顯示的圖標。

要使用 Dashicons，請在調用register_post_type()函數時將menu_icon參數設置為圖標的完整名稱（例如，dashicons-format-video）。

例如，我們註冊了一個名為 movie 的自定義帖子類型，其菜單部分旁邊帶有dashicons-format-video圖標。

我們使用wp_cpt()函數註冊了電影帖子類型，該函數連接到這個小代碼片段中的 init 動作掛鉤。

現在訪問您的 WordPress 儀表板，看看我們使用的代碼結果如何。

使用自定義創建的 Dashicons 簡碼

您可以使用簡碼快速將 Dashicons 添加到您的網站。如果您正在為其他人創建網站並希望確保網站所有者可以輕鬆地在他們的網站上插入所需的圖標而不必弄亂 HTML，那麼這是一個很好的解決方案。

這是您需要添加到functions.php文件中以使用短代碼 Dashicons 的代碼：

然後，您可以在帖子和頁面上使用這樣的簡碼：

請記住，必須在您網站的前端加載 Dashicons 樣式表才能使短代碼正常工作。

請在編輯 functions.php 文件之前備份您的網站。這樣，如果出現問題，您可以輕鬆恢復您的網站。

結論

在本指南中，我們將解釋 WordPress Dashicon 是什麼以及如何在 WordPress 中使用它們。我們還介紹了將 Dashicon 添加到 WordPress 網站的多種方法。無論您想將它們添加到您網站的前端還是後端，都有多種選項可供選擇。

雖然您可以尋找允許您添加 Dashicon 和自定義功能的 WordPress 插件或主題，但您可以使用這些指南完全自行添加它們。有了我們介紹的信息，您應該可以按照我們描述的步驟自己完成。

閱讀更多有用的文章

將 SVG 文件上傳到 WordPress
將網站圖標添加到 WordPress
隱藏除管理員以外的所有用戶的 WordPress 管理欄