WordPress Dashicons: WordPress サイトでの使用方法

公開: 2022-10-14

WordPress で Dashicons を使用する方法を学びたい初心者ですか?

Dashicons は、すべての WordPress インストールに付属するアイコンフォント (FontAwesome に似ています) です。 軽量で、ほとんどのユーザーがサードパーティのアイコン セットをインストールするのを避けるのに十分なアイコンが含まれています。

デフォルトでは、ダッシュコンはバックエンドでのみロードされます。 ただし、単純なコードを使用して、Dashicon をフロント エンドに簡単に追加できます。

現在、すべてのテーマ開発者は、アイコンの読み込みが速いため、画像よりも WP Dashicons を使用することを好みます。

このガイドでは、WordPress でダッシュコンを使用する方法を紹介します。

WordPressダッシュコンとは何ですか?

ダシコンは WordPress の公式アイコンフォントで、バージョン 3.8 で初めて導入されました。 Web サイトでこれらのフォントを使用すると、見栄えがよくなります。 これらは、ピクセル化せずに任意のサイズにスケーリングできる高品質の SVG ファイルです。

WordPressダッシュコン

WordPress チームが開発したため、ネイティブの WordPress サポートがあり、追加のスクリプトなしで使用できます。 約 350 のアイコン フォントが利用可能で、公式の WordPress 開発者向けリソースで見つけることができます。

これらのアイコンは、次のもので使用できます。

  • WordPress 管理ダッシュボード
  • ナビゲーション メニュー
  • ページと投稿
  • メタデータ
  • カスタムプラグインとテーマ
  • フロントエンドのデザイン

Dashicon を「アイコン」ではなく「フォント アイコン」と呼んでいることにお気付きかもしれません。 これは、フォント アイコンと通常のアイコンに違いがあるためです。

画像アイコンとフォント アイコンの違いは何ですか?

フォント アイコンとイメージ アイコンは同じ目的を果たします。 唯一の違いは、サーバー上での保存方法です。

画像アイコンは、Web サイトのさまざまな要素に配置する小さな画像です。 フォント アイコンは、ブラウザがベクター画像に変換するコードの断片です。

ダッシュコンを使用する理由

多くの理由から、画像アイコンの代わりにフォント アイコン (Dashicons) を使用する必要があります。

  • WordPress Web サイトのテキストとまったく同じように、デフォルトでスケーラブルです。 つまり、ユーザーの画面がどれほど大きくても、見栄えがよくなります。
  • ダッシュコンも軽量です。 これは、WordPress Web サイトのパフォーマンスが画像アイコンを使用するよりも高速になることを意味します。
  • ダッシュコンはテキストであるため、CSS を使用してさらにカスタマイズできます。 影、グラデーション カラー、アニメーションなどの効果を追加できます。
  • ダッシュコンは、他のフォントと同時に読み込まれるため、HTTP リクエストをできるだけ低く抑えるのにも役立ちます。 サイトで大量の画像を使用すると、画像を取得するために多くのリクエストを行う必要があり、ページの読み込み時間が長くなります。

WordPress でダッシュコンを使用する方法

心配しないで。 ダッシュ アイコンの使用には、高度なコーディング スキルは必要ありません。 以下の手順に従うと、すぐに WordPress Web サイトに Dashicons が表示されます。

フロントエンドで WordPress ダッシュコンを有効にする

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' );

フロントエンドで WordPress ダッシュコンを有効にする

functions.php を編集する前に、子テーマを作成することをお勧めします。 テーマ ファイルを直接編集してからテーマを更新すると、更新によって functions.php に加えた変更が上書きされます。 結果として、子テーマを持つことは常に良いことです。

それでおしまい！ これで、WP Dashicons の使用を開始する準備が整いました。 次に、Dashicons の HTML および CSS コードを取得する方法を示します。

Dashicons の HTML および CSS コードを取得する方法

WordPress.org には、各アイコンの CSS および HTML コードを取得できる Dashicon ライブラリがあります。

WordPress 開発者リソース ページにアクセスするだけです。 ここに、利用可能なダッシュコンのリストが表示されます。

次に、サイトに使用するアイコンをクリックします。

次に、必要に応じて、[ HTMLをコピー] または [ CSSをコピー] を選択します。

クリックすると、コードを含むポップアップ ウィンドウが表示されます。 コードをクリップボードにコピーするだけです。

Dashicons の HTML および CSS コードを取得する

Dashicons を有効にしてコードをコピーしたら、あとは WordPress ダッシュボードのどこで Dashicons アイコンを使用するかを決定する必要があります。 たとえば、テーマ、メタデータ、ナビゲーション メニューなどでアイコンを使用できます。

特定の目的で WordPress ダッシュコンを使用する方法

サイトで Dashicons を使用する方法を見てきました。次に、特定の目的で Dashicons を使用する方法を示します。

WordPress のページと投稿にダッシュコンを追加する

Dashicons アイコンを WordPress ページまたは投稿に追加するには、まず、使用するアイコンの HTML コードをコピーします。

WordPress の投稿とページの Dashicon HTML コードをコピーする

それに続いて、HTML コードを HTML レンダリング ショートコード内に配置する必要があります。 Gutenberg エディターを使用する場合、ほとんどのページ ビルダーはカスタム HTML ショートコードまたはカスタム HTML ブロックを使用します。 クラシック エディターのユーザーにとって、これは HTML コードをエディターの [テキスト] タブに貼り付けることを意味することに注意してください。

さらに、カスタム HTML ウィジェット内で同じ HTML コードを使用して、Dashicons アイコンをウィジェット領域に追加することもできます。

アイコンを追加するには、ページまたは投稿を開き、カスタム HTML ブロックを挿入します。 コピーしたコードをブロックに直接貼り付けるか、HTML コードで囲むことができます。

WordPress の投稿とページに Dashicon を追加する

HTML コードを挿入したら、ページ/投稿を公開し、フロントエンドからプレビューして結果を確認します。

Dashicon フロントエンド プレビュー

ナビゲーション メニューに WP Dashicons を使用する

WP Dashicons を WordPress のナビゲーション メニューに追加するには、まず、使用するアイコンの HTML コードをコピーします。

その後、WordPress ダッシュボードに戻り、[外観] » [メニュー] をクリックします。

次に、編集するメニューを選択し、アイコンを追加するメニュー項目をクリックします。

次に、展開されたメニュー項目セクションの下にある [ナビゲーション ラベル] オプションを探します。 その領域内に HTML コードを直接貼り付ける必要があります。 コードは、既存のメニュー項目のラベルの前または後に挿入できます。 HTML コードを追加したら、[メニューを保存]ボタンをクリックして変更を保存します。

WordPress のナビゲーション メニューに Dashicon を追加する

次に、Web サイトのフロントエンドにアクセスして、選択したアイコンがどのように表示されるかを確認します。

ナビゲーションメニューのホームダッシュコン

管理メニューにダシコンを追加

カスタム投稿タイプを WordPress ウェブサイトに追加するには、まずregister_post_type()関数を使用して登録します。 この関数はいくつかのパラメーターを受け入れますが、そのうちの 1 つがmenu_iconです。 管理ダッシュボードのカスタム投稿タイプ メニュー オプションの横に表示されるアイコンを選択できます。

Dashicons を使用するには、 register_post_type()関数を呼び出すときにmenu_iconパラメータをアイコンの完全な名前に設定します (例: dashicons-format-video)。

たとえば、隣にdashicons-format-videoアイコンがあるメニューセクションを持つmovieという名前のカスタム投稿タイプを登録しました。

WordPress でカスタム投稿タイプを作成する

wp_cpt()関数を使用して映画の投稿タイプを登録しました。この関数は、この小さなコード スニペットの init アクション フックに接続されています。

WordPress ダッシュボードにアクセスして、使用したコードがどのようになったかを確認してください。

管理メニューのカスタム投稿タイプ

カスタム作成された Dashicons ショートコードの使用

ショートコードを使用して、Dashicon を Web サイトにすばやく追加できます。 他の誰かのために Web サイトを作成していて、Web サイトの所有者が HTML をいじる必要なく、自分のサイトに目的のアイコンを簡単に挿入できるようにしたい場合、これは優れたソリューションです。

ショートコード Dashicon を使用するためにfunctions.phpファイルに追加する必要があるコードは次のとおりです。

WordPress で Dashicon ショートコードを作成する

次に、投稿やページで次のようなショートコードを使用できます。

ページでショートコードを呼び出し、WordPress に投稿する

ショートコードを機能させるには、Web サイトのフロント エンドに Dashicons スタイルシートをロードする必要があることに注意してください。

functions.php ファイルを編集する前に、Web サイトをバックアップしてください。 そうすれば、何か問題が発生した場合でも、Web サイトを簡単に復元できます。

結論

このガイドでは、WordPress Dashicon とは何か、WordPress でそれらを使用する方法について説明します。 また、ダッシュコンを WordPress Web サイトに追加するさまざまな方法についても説明しました。 それらをサイトのフロントエンドまたはバックエンドに追加するかどうかにかかわらず、選択できるオプションがいくつかあります.

ダッシュコンやカスタム機能を追加できる WordPress プラグインやテーマを探すこともできますが、これらのガイドラインを使用して、それらを完全に自分で追加することもできます。 説明した情報を使用すると、説明した手順に従うだけで自分で実行できるはずです.

もっと役立つ記事を読む

  • SVG ファイルを WordPress にアップロードする
  • WordPress にファビコンを追加する
  • 管理者以外のすべてのユーザーに対して WordPress 管理バーを非表示にする