WordPress 管理アイコンの追加または変更方法（簡単な2つの方法）

WordPress管理エリアをより自分好みにすることは、奇妙なほど満足感があります。クライアントのサイトや長期的なプロジェクトに取り組んでいるとき、カスタムアイコンのような小さな変更でさえ、ダッシュボードをより洗練され、パーソナルなものに感じさせることができます。

デフォルトのWordPressアイコンは機能しますが、一般的です。カスタム投稿タイプを追加したり、カスタマイズされた管理画面エクスペリエンスを構築したりした場合、それらのアイコンはサイトのブランドや目的に合わない可能性があります。

管理アイコンを変更するために、長年にわたりさまざまな方法を使用してきました。簡単なものもあれば、少し高度なものもあります。簡単なプラグインソリューションが必要な場合でも、コードでアイコンを切り替える方法が必要な場合でも、両方のオプションをステップバイステップでご紹介します。

このチュートリアルは、WordPressダッシュボードをサイトのフロントエンドと同じくらいカスタムに見せたいサイトオーナー、開発者、フリーランサーに最適です。

WordPressの管理アイコンとは？

管理画面アイコンとは、WordPressダッシュボードメニューの各項目の隣に表示される小さな画像のことです。これにより、投稿、ページ、プラグイン、設定など、サイトのさまざまな領域をすばやく認識できます。

デフォルトでは、WordPressはDashiconsというアイコンフォントを使用しています。これは2013年から存在しており、それ以降あまり更新されていません。問題なく機能しますが、特にカスタムサイトを構築している場合、少し古臭く一般的だと感じるかもしれません。

これらのアイコンをカスタマイズすると、管理画面に新鮮な外観が与えられます。ブランドに合わせて変更したり、クライアントのためにメニューを簡素化したり、単にサイトに個性を加えたりできます。

WordPressに慣れていない人のためにサイトを構築している場合、アイコンを変更することで、より早く物事を見つけるのに役立ちます。ダッシュボードの使い勝手に大きな違いをもたらすちょっとした調整です。

ここでは、管理アイコンを変更する2つの簡単な方法を見てみましょう。1つはプラグインを使用する方法、もう1つは少しのコードを使用する方法です。

方法 1: プラグインを使用して WordPress 管理画面のアイコンを変更する
方法2：コードスニペットを使用して管理メニューアイコンを手動で変更する
ボーナス：WordPressでカスタム投稿タイプにアイコンを追加する
WordPress管理画面をカスタマイズするその他の方法 🎁

方法 1: プラグインを使用して WordPress 管理画面のアイコンを変更する

この方法では、Admin Menu Editor プラグインを使用します。その名前が示すように、WordPress の管理メニューを簡単にカスタマイズできます。

まず、Admin Menu Editorプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。

プラグインを有効化したら、設定 » メニューエディター ページに移動します。ここでは、WordPress の管理メニューが、カスタマイズ可能な整然としたユーザーインターフェース（UI）で表示されます。

UI には上部にツールバーがあり、メニュー項目の追加または削除、区切り線の追加、項目のコピーと貼り付けなどを行うことができます。

その下で、メニュー項目をクリックして展開し、設定を表示できます。ここでは、投稿メニュー項目を展開しました。

メニュー項目を展開すると、さらに多くのオプションが表示されます。親メニューの場合は、右側の列に子メニュー項目も表示されます。

メニューアイコンの追加、置換、または削除を行うには、下部にある「詳細オプションを表示」リンクをクリックします。

次に、「アイコン URL」フィールドの隣にあるボタンをクリックします。

これにより、利用可能なすべてのDashiconsが表示されるポップアップが表示されます。または、「メディアライブラリ」ボタンをクリックして、独自の画像アイコンをアップロードすることもできます。

独自の画像アイコンをアップロードしたい場合は、32×32の画像、できれば透明なPNG形式を使用することをお勧めします。

アイコンを選択したら、「変更を保存」ボタンをクリックして設定を保存します。

管理メニューで使用されているカスタムメニューアイコンが表示されます。

方法2：コードスニペットを使用して管理メニューアイコンを手動で変更する

次の方法では、アイコンを変更するためにカスタムコードを追加する必要があります。

まだ行ったことがない場合は、WordPressにカスタムコードを追加する方法に関するチュートリアルを簡単に確認することをお勧めします。

WordPressにカスタムコードを追加する最も簡単で安全な方法は、WPCodeを使用することです。これは最高のWordPressコードスニペットプラグインです。これにより、WordPressサイトにカスタムコード、CSS、HTMLを安全に追加でき、誤ってサイトを壊してしまう心配がありません。

注: このプラグインには、WPCode Liteという無料バージョンもあり、これで目的を達成できます。ただし、プロバージョンには役立つ追加機能があります。

例1. デフォルトのDashiconsを使用してアイコンを置き換える

この例では、既存のアイコンセットのアイコンを置き換えるために、デフォルトのDashiconsを使用します。

WordPressは既にパフォーマンスのために高度に最適化されたDashiconsを読み込んでいることに注意することが重要です。そのため、これらを使用してもページの読み込み速度に影響はありません。

とはいえ、コードを実行する前に、以下の点に注意する必要があります。

変更したいメニュー項目のURL
使用したいアイコンの名前

まず、カスタマイズしたいメニュー項目のページURLを見つける必要があります。たとえば、「投稿」メニューのアイコンを変更したいとします。

マウスカーソルを「投稿」メニューに合わせると、ブラウザのステータスバー（ページ下部）にリンク先のURLが表示されます。必要なのはURLの最後の部分で、この場合は edit.php となります。

次に、Dashiconsのウェブサイトにアクセスし、使用したいアイコンをクリックします。

アイコンをクリックすると、一番上にその名前とスラッグが表示されます。この時点では、次のステップで必要になるため、スラッグをコピーする必要があります。

これが完了したら、コードスニペット » + スニペットを追加ページに移動し、「カスタムコードを追加（新規スニペット）」ボックスにマウスカーソルを合わせます。

次に、表示される「+ カスタムスニペットを追加」ボタンをクリックするだけです。

次の画面で、スニペットのタイトルを指定し、コードタイプオプションの下でPHPスニペットを選択します。

その後、次のコードをコードエディターボックスにコピー＆ペーストできます。

function change_post_menu_icon() {
    global $menu;
    
    // Loop through the menu items
    foreach ($menu as $key => $menu_item) {
        // Find the "Posts" menu item (default URL is 'edit.php')
        if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
            // Change the icon to a different Dashicon class
            $menu[$key][6] = 'dashicons-format-aside'; // Change this to your preferred Dashicon slug
        }
    }
}
add_action('admin_menu', 'change_post_menu_icon');

dashicons-format-aside を、先ほどコピーしたスラッグに変更することを忘れないでください。

コードはエディタで次のように表示されます。

次に、このコードを実行する場所をWordPressに指示する必要があります。

管理メニューアイコンはWordPress管理エリア内に表示されます。同じページで、「挿入」セクションまでスクロールし、「場所」オプションの下で「管理者のみ」を選択します。

最後に、スニペットを「アクティブ」に切り替え、「スニペットを保存」ボタンをクリックして変更を保存します。

WordPressは、投稿ページに選択したアイコンを使用するようになります。

例2. WordPress管理エリアのメニュー項目にFont Awesomeアイコンを使用する

デフォルトのDashiconライブラリには、限られた数のアイコンしかありません。幸いなことに、Font Awesomeのようなフォントおよびアイコンライブラリを使用できます。これは、はるかに多くのアイコンセットを持っています。

ただし、これによりFont Awesomeを読み込む必要があり、WordPress管理画面の速度がわずかに低下する可能性があります（わずか数ミリ秒）。

コードを追加する前に、まず使用したいアイコンを見つける必要があります。Font Awesomeのウェブサイトにアクセスし、無料ライブラリに切り替えてください。

無料で利用できるすべてのアイコンが表示されます。

使用したいアイコンをクリックすると、ポップアップで開きます。ここから、アイコンの Unicode 値をコピーする必要があります。

その後、WordPressダッシュボードのコードスニペット » + スニペットを追加ページに移動します。

「カスタムコードを追加（新規スニペット）」ボックス内の「+カスタムスニペットを追加」ボタンをクリックしてください。

次の画面で、スニペットのタイトルを入力し、コードタイプオプションとしてPHPスニペットを選択します。

その後、次のコードをコードエディターボックスにコピー＆ペーストできます。

// Enqueue Font Awesome in the admin area
function enqueue_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');

// Add custom class to the Posts menu item
function add_custom_post_menu_class() {
    global $menu;

    foreach ($menu as $key => $menu_item) {
        if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
            $menu[$key][4] .= ' custom-post-menu-class';
        }
    }
}
add_action('admin_menu', 'add_custom_post_menu_class');

// Add custom CSS to change the icon to a Font Awesome icon
function custom_admin_menu_icon() {
    echo '<style>
        .custom-post-menu-class .wp-menu-image:before {
            font-family: "Font Awesome 5 Free" !important;
            content: "\f015"; /* Unicode for the Font Awesome icon */
            font-weight: 900; /* Needed for solid icons */
        }
    </style>';
}
add_action('admin_head', 'custom_admin_menu_icon');

\f015 を、先ほどコピーしたUnicode値に置き換えるのを忘れないでください。

コードはエディタで次のように表示されます。