初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
WordPress

【WordPress】カスタム投稿タイプ追加方法【タクソノミーも】

【WordPress】カスタム投稿 新しい投稿タイプを作ろう!

カスタム投稿タイプとは、通常の投稿や固定ページとは異なる、新たな投稿タイプのことです。
例えば「お知らせ」と「制作実績」など、全く種類が異る投稿を行っているウェブサイトってありますよね。

それをワードプレスで実現するためには、新しいカスタム投稿タイプを追加する必要があります。

投稿が「お知らせ」だけだったり、シンプルなブログとして使っているウェブサイトでは必要ありませんが、ワードプレスでオリジナルテーマ作成を目論んでいる方には必須のスキルです。

カスタム投稿タイプの追加方法

カスタム投稿は、function.phpに下記を記述することで追加することができます。

/* カスタム投稿追加 */
function add_custom_post_type(){
    register_post_type(
        'news', // 投稿タイプ名
        array( // オプション 
            'label' => 'お知らせ', // カスタム投稿名
            'public' => true, // パブリックにする 
            'has_archive' => true, // アーカイブを有効化
            'menu_position' => 5, // メニューに挿入される位置
            'menu_icon' => 'dashicons-edit', // メニューアイコン
            'show_in_rest' => true, // 投稿ページをグーテンベルグ化
            'exclude_from_search' => true, // サイト内検索で引っかかるようにする
            'supports' => array( // 投稿画面に表示するもの
                'title', // タイトル
                'editor', // 本文 
                'thumbnail', // アイキャッチ
                'revisions' // リビジョン
            )
        )
    );
}
add_action('init', 'add_custom_post_type');

今回はカスタム投稿名が「お知らせ」で、投稿タイプ名が「news」のカスタム投稿タイプを追加しました。

カスタム投稿名とは、文字通りカスタム投稿の名前で、メニューに出てきたりします。
各自必要に応じて適切なネーミングをつけてください。

投稿タイプ名は、一覧ページのスラッグとして登場したり、php側での制御の際に使ったりします。
なので英名にしておきましょう。

メニューに表示される位置を変更する(menu_position)

menu_positionは、メニューにカスタム投稿を追加する位置を決めるものです。
今回は5で、投稿の下に追加されるように設定してあります。

  • 5 – 投稿の下
  • 10 – メディアの下
  • 15 – リンクの下
  • 20 – 固定ページの下
  • 25 – コメントの下
  • 60 – 最初の区切りの下(コメントの下に区切りがある)
  • 65 – プラグインの下
  • 70 – ユーザーの下
  • 75 – ツールの下
  • 80 – 設定の下
  • 100 – 二つ目の区切りの下(設定の下に区切りがある)

メニューに表示されるアイコンを変更する(menu_icon)

menu_iconは、メニューに表示されるカスタム投稿のアイコンを決めるものです。
今回は’dashicons-edit’と設定してあり、鉛筆のアイコンが表示されます。

アイコンはかなり種類があり、下記サイトから使いたいアイコンをクリックし、名前っぽい部分をコピペすることで変更することができます。

Dashicons | WordPress Developer Resources

タクソノミー(カテゴリ・タグ)の追加方法

タクソノミーとは、通常の投稿でいうカテゴリやタグのことです。
なぜかカスタム投稿タイプでは、カテゴリやタグのことをまとめてタクソノミーと呼びます。

こちらから設定しない限り、カテゴリーもタグも存在しないカスタム投稿タイプになります。
必要であれば下記を記述します。

/* タクソノミー追加 */
function add_custom_taxonomy(){
    // カテゴリー
    register_taxonomy(
        'news-category', // タクソノミー名
        'news', // 利用する投稿タイプ名
        array( // オプション
            'label' => 'カテゴリー', // 表示名
            'hierarchical' => true, // 階層を持たせるか
            'public' => true, // パブリックにする
        )
    );
    // タグ
    register_taxonomy(
        'news-tag', // タクソノミー名
        'news', // 利用する投稿タイプ名
        array( // オプション
            'label' => 'タグ', // 表示名
            'hierarchical' => false, // 階層を持たせるか
            'public' => true, // パブリックにする
        )
    );
}
add_action('init', 'add_custom_taxonomy');

タクソノミー名は各自自由に設定してください。
投稿タイプの部分は、先ほどカスタム投稿タイプ作成に用いた投稿タイプ名に書き換えてください。
先ほどのサンプルでは「news」を使ったので、こちらでも「news」になっています。

カテゴリだけでよければ、タグの部分は丸ごと決してOK、逆も然りです。

カスタム投稿のスラッグを自動設定する方法

カスタム投稿は設定しない限り、記事のタイトルがそのままスラッグになってしまいます。
日本語タイトルにすると日本語のスラッグがついてしまい、何かと不都合があります。

下記の記述はスラッグを自動的に「投稿タイプ名-投稿ID」に変更してくれます。

/* カスタム投稿タイプの投稿スラッグ自動化 */
function auto_post_slug( $slug, $post_ID, $post_status, $post_type ) {
    if ( preg_match( '/(%[0-9a-f]{2})+/', $slug ) ) {
        $slug = utf8_uri_encode( $post_type ) . '-' . $post_ID;
    }
    return $slug;
}
add_filter( 'wp_unique_post_slug', 'auto_post_slug', 10, 4  );

全てをまとめると…

全てのコードをまとめると下記のようになるので、これを丸ごとfunction.phpに記述して、必要な部分を書き換えたり、不要な部分を削っていけばOKです。

/*--------------------------------
カスタム投稿追加
---------------------------------*/

/* カスタム投稿追加 */
function add_custom_post_type(){
    register_post_type(
        'news', // 投稿タイプ名
        array( // オプション 
            'label' => 'お知らせ', // カスタム投稿名
            'public' => true, // パブリックにする 
            'has_archive' => true, // アーカイブを有効化
            'menu_position' => 5, // メニューに挿入される位置
            'menu_icon' => 'dashicons-edit', // メニューアイコン
            'show_in_rest' => true, // 投稿ページをグーテンベルグ化
            'exclude_from_search' => true, //検索で引っかかるようにする
            'supports' => array( // 投稿画面に表示するもの
                'title', // タイトル
                'editor', // 本文 
                'thumbnail', // アイキャッチ
                'revisions' // リビジョン
            )
        )
    );
}
add_action('init', 'add_custom_post_type');

/* タクソノミー追加 */
function add_custom_taxonomy(){
    // カテゴリー
    register_taxonomy(
        'news-category', // タクソノミー名
        'news', // 利用する投稿タイプ名
        array( // オプション
            'label' => 'カテゴリー', // 表示名
            'hierarchical' => true, // 階層を持たせるか
            'public' => true, // パブリックにする
        )
    );
    // タグ
    register_taxonomy(
        'news-tag', // タクソノミー名
        'news', // 利用する投稿タイプ名
        array( // オプション
            'label' => 'タグ', // 表示名
            'hierarchical' => false, // 階層を持たせるか
            'public' => true, // パブリックにする
        )
    );
}
add_action('init', 'add_custom_taxonomy');

/* カスタム投稿タイプの投稿スラッグ自動化 */
function auto_post_slug( $slug, $post_ID, $post_status, $post_type ) {
    if ( preg_match( '/(%[0-9a-f]{2})+/', $slug ) ) {
        $slug = $post_ID;
        // $slug = utf8_uri_encode( $post_type ) . '-' . $post_ID;
    }
    return $slug;
}
add_filter( 'wp_unique_post_slug', 'auto_post_slug', 10, 4  );