首頁 > 文章 > CMS教程 > 在 WordPress 中使用 Dashicons：綜合指南

在 WordPress 中使用 Dashicons：綜合指南

WBOY原創: 2023-09-20 09:49:011692瀏覽

Dashicons 是一組與 WordPress 捆綁在一起的字體圖標，提供了一種向 WordPress 網站添加圖標的簡單方法。自從該專案首次推出以來，它已發展成為一種寶貴的資源，包括豐富的 300 多個獨立圖標！

在 WordPress 中使用 Dashicons：综合指南

#Dashicons 易於使用，涵蓋了大多數圖標需求的用例，因此減少了對第三方圖標庫的需求。

有趣的事實：每次您造訪 Dashicons 主頁時，它都會顯示一個隨機圖示！親自嘗試一下。

什麼是字體圖示？

字體圖示正如其聽起來的樣子。每個字體圖示集（例如 Dashicons）都是常規字體，就像任何其他字體一樣，但包含符號而不是字母和數字。

這使它們易於使用，但 Dashicons 的一個缺點是它們被有效地編譯為單個大精靈（包含所有單獨圖標的排列好的單個大圖像）。

正如您可以想像的那樣，圖示集合越大，字體圖示精靈的整體大小也越大。即使使用緩存，如果您只需要一兩個圖標，包含每個圖標也並不理想。

但是，這並沒有阻止字體圖示在過去幾年中非常流行。

在 WordPress 中存取 Dashicons

好消息是 Dashicons 包含在 WordPress 核心中，因此它們可以開箱即用。它們實際上會自動添加到每個 WordPress 管理頁面，因此您無需做太多工作即可使用它們。

但是，如果您打算在網站的前端顯示 Dashicons，那麼在嘗試使用它們之前需要先將它們排隊。

要在網站前端啟用 Dashicons，請將其新增至外掛程式或主題：

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

現在我們已經準備好開始在我們的 WordPress 網站上使用 Dashicons！

如何顯示 Dashicons

#現在是您一直在等待的部分！根據您的要求，可以透過幾種不同的方式將 Dashicons 添加到您的網站：

WordPress 管理選單中的自訂外掛圖示
外掛程式設定頁面標記的自訂圖示
區塊圖示元件
前端貼文或頁面內容內的任何位置

為外掛程式建立自訂選單圖示

如果您正在開發插件，那麼您可以利用 WordPress 管理員中隨時可用的 Dashicons，為您的插件顯示自訂選單圖標，如果您願意，也可以在插件設定頁面上顯示標題。

function htud_add_options_page() {
  add_menu_page(
    'How to use Dashicons',
    'How to use Dashicons',
    'manage_options',
    'how-to-use-dashicons',
    'htud_render_settings_page',
    'dashicons-superhero-alt' // Add Dashicon to menu.
  );
}
add_action('admin_menu', 'htud_add_options_page');

function htud_render_settings_page() {
  // Add Dashicon to settings page title.
?>
<div class="wrap" style="display:flex;align-items:baseline;">
    <span class="dashicons dashicons-admin-site"></span>
    <h1 class="heading"><?php _e( 'Settings Page', 'text-domain' ); ?></h1>
  </div>
  <?php
}

這就是它在 WordPress 管理員中的樣子：

在 WordPress 中使用 Dashicons：综合指南

#您也可以在管理選單中使用 Dashicons 來自訂貼文類型。

function custom_post_type() {
  $args = array(
      'label' => __( 'My Custom Post Type', 'text_domain' ),
      'show_ui' => true,
      'menu_icon' => 'dashicons-drumstick', // Add Dashicon to custom post type menu.
  );
  register_post_type( 'My Custom Post Type', $args );
}
add_action( "init", "custom_post_type" );

這會為您的自訂貼文類型新增一個選單圖標，類似於上面的設定頁面範例。

在 WordPress 中使用 Dashicons：综合指南

#在古騰堡區塊中使用 Dashicons

如果您為古騰堡編輯器開發區塊，您也可以透過 8950b357b664c65ca9a917706a8bee4c 元件直接在程式碼中使用 Dashicons。

該元件非常容易使用。只需導入它並將其添加到區塊中，如下所示：

import { useBlockProps } from '@wordpress/block-editor';
import { Dashicon } from '@wordpress/components';

export default function Edit() {
  return (
    <div {...useBlockProps()}>
      <Dashicon icon="businessman" />
      <Dashicon icon="awards" />
      <Dashicon icon="pets" />
      <Dashicon icon="heart" />
    </div>
  );
}

這會將四個指定的 Dashicons 呈現在一行上。

在 WordPress 中使用 Dashicons：综合指南