デフォルトでは、カスタム投稿タイプはすべて同じように見えるため、混乱を招く可能性があります。ユニークなアイコンは、さまざまな種類のコンテンツをすばやく識別するのに役立ちます。
さらに、カスタム投稿タイプに適切なアイコンを取得すると、WordPress管理画面のナビゲーションに大きな違いが生まれます。ログインすると、サイドバーに投稿、ページ、カスタム投稿タイプの項目が表示されます。
この記事では、カスタム投稿タイプに異なるアイコンを追加する方法を説明します。
WordPressでカスタム投稿タイプにアイコンを追加する理由
WordPress ウェブサイトを操作する際には、通常、投稿またはページを使用します。ただし、カスタム投稿タイプを使用して他の種類のコンテンツを作成することもできます。
例えば、WooCommerce は、「Product」と呼ばれるカスタム投稿タイプを使用してストアの商品を管理しています。
カスタム投稿タイプは、WordPressの管理画面で投稿や固定ページと一緒に左側のメニューに表示されます。WordPressの各メニュー項目には、その横にアイコンが表示されますが、これはDashiconsというアイコンフォントから来ています。
問題は、すべてのカスタム投稿タイプが投稿と同じアイコンを使用することです。したがって、カスタム投稿タイプが複数ある場合、すべてに異なるアイコンがあれば、正しいものを簡単に見つけることができます。
これを踏まえ、WordPress でカスタム投稿タイプのアイコンを追加する方法をご紹介します。このチュートリアルでは、以下の内容をカバーします。
準備はいいですか？始めましょう。
プラグインを使用してカスタム投稿タイプにアイコンを追加する
カスタム投稿タイプの登録が初めての方や、コードに慣れていない方は、投稿タイプとタクソノミーを作成するために、 Custom Post Type UI プラグインを使用することをお勧めします。
プラグインでカスタム投稿タイプを作成する
まず、カスタム投稿タイプを作成する必要があります。すでに作成済みの場合は、以下の「プラグインを使用してカスタム投稿タイプにアイコンを追加する」セクションにスキップしてください。
プラグインをインストールして有効化したら、新しいカスタム投稿タイプを作成するために CPT UI » Add/Edit Post Types に移動します。次に、「Add New Post Type」タブが選択されていることを確認してください。
次に、カスタム投稿タイプのスラッグ（例：「movies」）を入力する必要があります。その下に、複数形と単数形の名前（例：「books」と「book」）を入力します。
その後、「選択したラベルに基づいて追加のラベルを入力する」というリンクをクリックします。これにより、下の追加ラベルフィールドが自動的に入力され、通常は時間を節約できます。
または、「追加ラベル」セクションにラベルを手動で追加することもできます。
次に、「設定」セクションまでスクロールダウンし、投稿タイプのさまざまな属性を設定します。各オプションには、その機能の説明が簡潔に記載されています。
たとえば、投稿タイプの並べ替え方法や階層化するかどうかを選択できます。
一般設定の下に、この投稿タイプがサポートする編集機能を選択するオプションが表示されます。含めたいオプションにチェックを入れるだけです。
最後に、「投稿タイプを追加」ボタンをクリックして、カスタム投稿タイプを保存して作成します。
Custom Post Type UI を使用してカスタム投稿タイプを作成する詳細な手順については、WordPress でカスタム投稿タイプを作成する方法に関するガイドの最初の方法である WordPress でカスタム投稿タイプを作成する方法 を参照してください。
プラグインを使用してカスタム投稿タイプにアイコンを追加する
カスタム投稿タイプを作成したら、アイコンを選択します。カスタム投稿タイプUIプラグインはデフォルトでDashiconsをサポートしているため、この手順は簡単です。
まず、CPT UI » Add/Edit Post Types に移動し、ページ上部の「Edit Post Types」タブをクリックします。ここで、ドロップダウンメニューから正しい投稿タイプが選択されていることを確認してください。
それが完了したら、同じページの最下部近くにある「設定」までスクロールし、「メニューアイコン」セクションを見つけます。
カスタム投稿タイプにアイコンを追加するための2つのオプションが表示されるはずです。
「ダッシュアイコンを選択」ボタンで任意のDashiconを選択でき、「画像アイコンを選択」でメディアライブラリから画像アイコンをアップロードまたは選択できます。
このチュートリアルでは、「ダッシュアイコンを選択」ボタンをクリックします。
ポップアップの上部にある矢印を使用して、何百ものアイコンを閲覧できるようになりました。さらに、Dashiconを検索することもできます。
このチュートリアルでは、「book」を検索します。
次に、4つの一致するアイコン、2つの「Facebook」アイコン、2つの「book」アイコンが見つかりました。使用したいものをクリックするだけです。
選択したアイコンのCSSクラスが、「メニューアイコン」フィールドに自動的に入力されます。
次に、下にスクロールして「投稿タイプを保存」ボタンをクリックして設定を保存します。
ここから、管理ダッシュボードに戻り、左側のサイドバーでカスタム投稿タイプを見つけることができます。
メニュー内の投稿タイプの横に新しいアイコンが表示されるはずです。
カスタム投稿タイプに手動でアイコンを追加する
コードでカスタム投稿タイプを手動で作成した場合は、アイコンも手動で追加する必要があります。
まず、使用したい投稿タイプのアイコンを見つけるために、 Dashicons ウェブサイト にアクセスしましょう。
このチュートリアルでは、「その他」セクションまでスクロールし、「本」アイコンをクリックします。
次に、カテゴリ名やアイコンのCSSクラスなど、アイコンに関する詳細情報が表示されるページに移動します。
例えば、次のスクリーンショットでは、カテゴリは「その他」、CSSクラスは「dashicons-book」です。
CSSクラスをクリップボードにコピーしましょう。
次に、カスタム投稿タイプを作成した場所にコードを追加する必要があります。それは、テーマの functions.php ファイルであるか、WPCode のようなコードスニペットプラグインを使用した可能性があります。
これを実際に確認するために、以下のコードスニペットは「Books」というカスタム投稿タイプを作成し、45行目にDashicons CSSクラスを追加してメニューアイコンも追加します。
/*
* Creating a function to create our CPT
*/
function custom_post_type() {
// Set UI labels for Custom Post Type
$labels = array(
'name' => _x( 'Books', 'Post Type General Name', 'twentytwentyone' ),
'singular_name' => _x( 'Book', 'Post Type Singular Name', 'twentytwentyone' ),
'menu_name' => __( 'Books', 'twentytwentyone' ),
'parent_item_colon' => __( 'Parent Book', 'twentytwentyone' ),
'all_items' => __( 'All Books', 'twentytwentyone' ),
'view_item' => __( 'View Book', 'twentytwentyone' ),
'add_new_item' => __( 'Add New Book', 'twentytwentyone' ),
'add_new' => __( 'Add New', 'twentytwentyone' ),
'edit_item' => __( 'Edit Book', 'twentytwentyone' ),
'update_item' => __( 'Update Book', 'twentytwentyone' ),
'search_items' => __( 'Search Book', 'twentytwentyone' ),
'not_found' => __( 'Not Found', 'twentytwentyone' ),
'not_found_in_trash' => __( 'Not found in Trash', 'twentytwentyone' ),
);
// Set other options for Custom Post Type
$args = array(
'label' => __( 'books', 'twentytwentyone' ),
'description' => __( 'Book reviews', 'twentytwentyone' ),
'labels' => $labels,
// Features this CPT supports in Post Editor
'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'revisions', 'custom-fields', ),
// You can associate this CPT with a taxonomy or custom taxonomy.
'taxonomies' => array( 'genres' ),
/* A hierarchical CPT is like Pages and can have
* Parent and child items. A non-hierarchical CPT
* is like Posts.
*/
'hierarchical' => false,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'show_in_admin_bar' => true,
'menu_position' => 5,
'menu_icon' => 'dashicons-book',
'can_export' => true,
'has_archive' => true,
'exclude_from_search' => false,
'publicly_queryable' => true,
'capability_type' => 'post',
'show_in_rest' => true,
);
// Registering your Custom Post Type
register_post_type( 'books', $args );
}
/* Hook into the 'init' action so that the function
* Containing our post type registration is not
* unnecessarily executed.
*/
add_action( 'init', 'custom_post_type', 0 );
上記のコードを使用してカスタム投稿タイプを登録する際にアイコンをカスタマイズするには、45行目に次のスニペットのいずれかを追加するだけです。
'menu_icon' => 'dashicons-book',
または、画像アイコンを「メディアライブラリ」に追加し、CSSクラスの代わりにアイコンのURLを使用することもできます。
'menu_icon' => 'http://www.example.com/wp-content/uploads/2022/08/your-cpt-icon.png',
これらのスニペットの余分なスペースは意図的なものであり、上の大きなコードブロックに貼り付けたときにコードがきれいに整列されることを保証します。
このコードを使用する際は、独自のDashicon CSSクラスまたは画像アイコンURLに変更する必要があることに注意してください。
これで完了です！
このチュートリアルが、WordPressでカスタム投稿タイプのアイコンを追加する方法を学ぶのに役立ったことを願っています。次に、カスタム投稿タイプをWordPressの検索結果に含める方法やWordPressでカスタム投稿タイプを切り替える/変換する方法に関するガイドも参照してください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Tasawar
Thanks
This article just saved my day 
Jonathan
この投稿ありがとうございます。なぜ私には機能しないのかわかりません。どこを見ればよいか何かアイデアはありますか？
md alamgir miah alam
あなたのアイテムは素晴らしい出来栄えです。誰でも使えます。ありがとうございます。
Karl
役立つ記事をありがとうございます！フルURLで画像を定義して参照する場合、アイコンのピクセル寸法に関する情報が少し欠けています。それ以外はとても良いです！
ryanbowden
ああ、それは本当に役立ちます、ありがとう！