WordPressのカスタム投稿を自作して表示する

WordPressのカスタム投稿を自作して表示する

WordPressのカスタム投稿を使用したかったので自作して表示してみました。

カスタム投稿を自作して表示するまでに2日かかったポンコツな私ですが、時間をかけてカスタム投稿を作成したことで、カスタム投稿の機能を管理画面に追加する方法と、追加したカスタム投稿を「どのようにテーマに表示するのか」カスタム投稿の理解を深めることができました。

私がカスタム投稿を自作したときの方法が誰かの役にたてばと思います。

 

カスタム投稿を自作するには

 

WordPressのカスタム投稿を自作するには、カスタム投稿を自作したいテーマのfunctions.phpにregister_post_typeというWordPressの関数を使用します。

 

<?php register_post_type( $post_type, $args ); ?>

 

 

register_post_typeを使用することによって、WordPressのデフォルトの投稿タイプ「投稿」や「固定ページ」とは別に、独自の投稿タイプを自作することができます。

上の画像では「テスト投稿」「サンプル投稿」と表示されている部分が自作したWordPressのカスタム投稿タイプです。

 

register_post_typeでカスタム投稿を自作

 

WordPressのカスタム投稿を自作するときには、カスタム投稿を自作したいテーマのfunctions.phpにユーザー定義関数を作成します。

 

function test_custom_page() {
}
add_action('init', 'test_custom_page');

 

作成したユーザー定義関数はadd_action()でinitにフック(登録)しておきます。

 

function test_custom_page() {
    register_post_type(
    //ここにregister_post_typeのパラメーターを記述
    );
}
add_action('init', 'test_custom_page');

 

そしてユーザー定義関数内にregister_post_typeを記述しパラメータを使用してWordPressのカスタム投稿を自作していきます。

私がカスタム投稿を自作したときのサンプルコードを用意しました。register_post_typeのパラメータについては種類が多いので、実際に使用したパラメータで説明します。

 

function test_custom_page() {
    register_post_type( 'test',
        array(
            'public' => true,
            'label' => 'テスト(labelキー)',
/*          'show_in_rest' => true,
            'supports' => array('title','editor','thumbnail','revisions','excerpt', 'custom-fields','page-attributes'),
            'has_archive' => true,
            'menu_position' => 5,
            'menu_icon' => 'dashicons-admin-customizer',
            'hierarchical' => true,
            'labels' => array(
                'menu_name' => 'テスト投稿(menu_nameキー)',
                'all_items' => 'テスト投稿一覧(all_itemsキー)',
                'add_new' => '新規テストページ追加(add_newキー)',
                'exclude_from_search' => false,
             ),
*/       )
    );
}
add_action('init', 'test_custom_page');
Advertisement

 

上のPHPコードをカスタム投稿を自作して表示したいテーマのfunctions.phpにコピペで貼り付け編集を保存すると以下の画像ように投稿タイプが「テスト」のカスタム投稿を自作できます。

 

 

サンプルコードは少し長いコードですが、コメントアウトして無効にしているパラメータが多いため実際に処理されるのは以下のPHPコードと同じです。

 

function test_custom_page() {
    register_post_type( 'test',
        array(
            'public' => true,
            'label' => 'テスト(labelキー)',
        )
    );
}
add_action('init', 'test_custom_page');

 

WordPressのカスタム投稿を自作するためには、register_post_typeの2つのパラメータを使用して、必ず第一パラメータに「カスタム投稿タイプ名」を記述します。サンプルではtestがカスタム投稿タイプ名です。

カスタム投稿タイプ名は20文字以内で半角英数字の小文字で指定します。

 

第二パラメータは配列arrayでキーと値のセットを記述していきます。

まずは’public’ => true, を記述します。これにより第一パラメータで指定したカスタム投稿タイプ名「test」の投稿の公開や編集をすることができるようになります。

publicキーの値をfalse した場合は「この投稿タイプの投稿を編集する権限がありません。」のエラーになってしまいます。

 

次にlabelです。

register_post_typeのlabelの値に記述した文字列は管理画面のカスタム投稿タイプ名のラベルなどで表示されます。

 

 

WordPressの管理メニューに「テスト(labelキー)」と表示されているのが画像で分かるかと思います

 

'label' => 'テスト(labelキー)',

 

サンプルコードのようにregister_post_typeのlabelキーの値を「テスト(labelキー)」と記述してカスタム投稿を自作すると、WordPressのどの部分にregister_post_typeのlabelが使われることになるのか確認しやすくなります。

 

次にサンプルコードのコメントアウトの位置を’menu_position’ => 5,の行まで下げて「show_in_rest」「supports」「has_archive」のパラメータを有効にします。

 

function test_custom_page() {
    register_post_type( 'test',
        array(
            'public' => true,
            'label' => 'テスト(labelキー)',
            'show_in_rest' => true,
            'supports' => array('title','editor','thumbnail','revisions','excerpt', 'custom-fields','page-attributes'),
            'has_archive' => true,
/*          'menu_position' => 5,
            'menu_icon' => 'dashicons-admin-customizer',
            'hierarchical' => true,
            'labels' => array(
                'menu_name' => 'テスト投稿(menu_nameキー)',
                'all_items' => 'テスト投稿一覧(all_itemsキー)',
                'add_new' => '新規テストページ追加(add_newキー)',
                'exclude_from_search' => false,
             ),
*/       )
    );
}
add_action('init', 'test_custom_page');

 

するとカスタム投稿タイプがtestの投稿をブロックエディターで編集できるようにカスタム投稿を自作できます。

 

Advertisement

 

カスタム投稿にブロックエディターを使用できるように自作しているのはshow_in_restです。show_in_restの値をtrueで指定することで、ブロックエディターが有効になります。

 

supportsはカスタム投稿の編集画面で「タイトル」「エディター」「サムネイル」「リビジョン」「抜粋」「カスタムフィールド」を使えるようにするためのパラメータです。

supportsパラメータは以下7つのオプションをsupportsの配列arrayにカンマで区切り指定します。

 

  • title
  • editor
  • thumbnail
  • revisions
  • excerpt
  • custom-fields
  • page-attributes

 

page-attributesについては自作するカスタム投稿タイプに階層を持たせるために必要な指定です。

 

has_archiveは値をtrueで指定します。tureにすることで、自作したカスタム投稿タイプのアーカイブが有効になります。WordPressのカスタム投稿を自作後にカスタム投稿の記事一覧ページも必要な場合は有効にしておきます。

 

次はサンプルコードをlabelsの行まで移動させ「menu_position」「menu_icon」「hierarchical」のカスタム投稿パラメータを有効にします。

 

function test_custom_page() {
    register_post_type( 'test',
        array(
            'public' => true,
            'label' => 'テスト(labelキー)',
            'show_in_rest' => true,
            'supports' => array('title','editor','thumbnail','revisions','excerpt', 'custom-fields','page-attributes'),
            'has_archive' => true,
            'menu_position' => 5,
            'menu_icon' => 'dashicons-admin-customizer',
            'hierarchical' => true,
/*          'labels' => array(
                'menu_name' => 'テスト投稿(menu_nameキー)',
                'all_items' => 'テスト投稿一覧(all_itemsキー)',
                'add_new' => '新規テストページ追加(add_newキー)',
                'exclude_from_search' => false,
             ),
*/       )
    );
}
add_action('init', 'test_custom_page');

 

menu_positionはWordPressの管理画面で投稿タイプが表示されるメニューの位置を変更することができます。

位置を変更する場合は以下を参考にmenu_positionの値に番号を指定します。

 

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

 

menu_iconオプションはWordPressの管理画面の投稿タイプメニューで使われるアイコンを変更できます。

アイコンの変更方法はDashiconsを使用するやり方になりますが、Dashiconsのページにアクセスし、表示しているアイコンの種類からアイコン名をmenu_iconの値に記述します。

 

Developer Resources: Dashicons

 

 

'menu_icon' => 'dashicons-admin-customizer',

 

例えば今回のサンプルコードではDashiconsのページでアイコン名dashicons-admin-customizerをregister_post_typeのmenu_iconの値にコピペしてカスタム投稿のアイコンを自作しています。

 

hierarchicalのパラメータは指定するとカスタム投稿タイプに階層を持たせることができるようになります。

投稿タイプに階層を持たせるためには、hierarchicalの値をtrueにすると共に、supportsパラメータでpage-attributesの指定をしている必要があります。

 

Advertisement

 

WordPressのカスタム投稿を自作するregister_post_typeのパラメータ残りはラベル関係です。コメントアウトを全て削除して全てのサンプルコード全てを有効にします。

 

function test_custom_page() {
    register_post_type( 'test',
        array(
            'public' => true,
            'label' => 'テスト(labelキー)',
            'show_in_rest' => true,
            'supports' => array('title','editor','thumbnail','revisions','excerpt', 'custom-fields','page-attributes'),
            'has_archive' => true,
            'menu_position' => 5,
            'menu_icon' => 'dashicons-admin-customizer',
            'hierarchical' => true,
            'labels' => array(
                'menu_name' => 'テスト投稿(menu_nameキー)',
                'all_items' => 'テスト投稿一覧(all_itemsキー)',
                'add_new' => '新規テストページ追加(add_newキー)',
                'exclude_from_search' => false,
                'view_item' => 'テストページを表示',
            ),
        )
    );
}
add_action('init', 'test_custom_page');

 

コメントアウトを削除するとregister_post_typeのlabelsが有効になります。

labelsは配列で記述します。

labelsのパラメータはカスタム投稿のラベルとして表示するオプションが多くて分かりづらいのですが、表示確認用にキー名を値に記述して自作作業を進めるとlabels系の表示パターンが理解しやすいです。

カスタム投稿を自作して私なりにベストだと思えたlabelsのパターンは以下です。

 

'labels' => array(
    'menu_name' => 'テスト投稿(menu_nameキー)',
    'all_items' => 'テスト投稿一覧(all_itemsキー)',
    'add_new' => '新規テストページ追加(add_newキー)',
    'exclude_from_search' => false,
),

 

 

 

このへんは上のサンプルコードと表示結果の画像を参考に自作して頂けたらと思います。

 

exclude_from_searchのパラメータは素直に理解不足です。

調べてみると、タクソノミーのタームが関連付けられた投稿のリストを表示したければexclude_from_search を必ず false にセットするということです。

 

register_post_typeのもっと詳しい説明はWordPressの関数リファレンスを参考にしてくださいまし。

関数リファレンス/register post type

 

複数のカスタム投稿を自作する場合

 

WordPressで複数のカスタム投稿を自作する場合は、前述の説明で書いたPHPコードからregister_post_type関数の記述をコピペし、パラメータとオプションの値を書き換えます。

コピペする部分は分かりやすいように、カスタム投稿を自作するために使用したPHPコードにコメントアウトしたので、WordPressで複数のカスタム投稿を自作する場合は参考にしてください。

 

function test_custom_page() {
//①この下の行からコピー
    register_post_type( 'test',
        array(
            'public' => true,
            'label' => 'テスト(labelキー)',
            'show_in_rest' => true,
            'supports' => array('title','editor','thumbnail','revisions','excerpt', 'custom-fields','page-attributes'),
            'has_archive' => true,
            'menu_position' => 5,
            'menu_icon' => 'dashicons-admin-customizer',
            'hierarchical' => true,
            'labels' => array(
                'menu_name' => 'テスト投稿(menu_nameキー)',
                'all_items' => 'テスト投稿一覧(all_itemsキー)',
                'add_new' => '新規テストページ追加(add_newキー)',
                'exclude_from_search' => false,
            ),
        )
    );//①ここまでコピー
////////////////////

//①でコピーしたコードをここにペースト

////////////////////
}
add_action('init', 'test_custom_page');

 

コピペ後は複数のカスタム投稿になりかけている状態です。WordPressでカスタム投稿タイプ名が重複している状態なので、第一パラメータと、オプションの値を書き換えます。

 

書き換える部分

register_post_type関数右横のtest(第一パラメータ)を違うカスタム投稿タイプ名に書き換え。例えばnewsやsmpleとかです。

label、menu_name、all_items、add_newの値も書き換え。管理画面ラベルが重複してしまうため。

 

書き換えが終わると、複数のカスタム投稿タイプ名でWordPressのカスタム投稿を自作することができています。

 

 

WordPressにカスタム投稿を表示

 

WordPressにカスタム投稿を自作して投稿タイプを作成すると、カスタム投稿タイプ名のページを表示することができます。

WordPressのカスタム投稿を表示するまでの手順を、サンプルで作成したカスタム投稿タイプ名「テスト」を例にして説明します。

テスト投稿タイプの「カスタム投稿ページ」と「カスタム投稿一覧ページ」の2つを表示したいと思います。

まずはWordPressにカスタム投稿を表示する準備です。

WordPressの管理画面のメニューに表示するカスタム投稿タイプ名「テスト」から「新規テストページ追加」をクリックして投稿編集エディタで表示確認用の文章を簡単に書いて2ページくらい作成しておきます。

準備完了

 

カスタム投稿をsingle.phpで表示

 

テスト投稿タイプの「カスタム投稿ページ」をsingle.phpで表示します。

単なるsingle.phpはWordPressの投稿で使用していますので、single-[post-type].phpのテンプレートを作成してカスタム投稿ページを表示します。

使用しているテキストエディタでファイル名をsingle-test.phpにしてphpファイルを作成します。このとき作成するカスタム投稿ページのテンプレートファイル名のtestの部分は register_post_type関数の第一引数に指定したものです。

 

作成したsingle-test.phpには以下のように表示確認用のループを書いておきます。

 

<?php get_header(); ?>
single-test.php
    <?php if ( have_posts() ): while ( have_posts() ) : the_post(); ?>
    <ul>
        <li><?php the_title(); ?></li>
        <li><?php the_content(); ?></li>
    </ul>
    <?php endwhile; endif; ?>

<?php get_footer(); ?>

 

ついでにsingle-test.phpと書いておくと、自作したカスタム投稿タイプにsingle-test.phpを使用できているか確認しやすいです。

ループが書き終わったらsingle-test.phpの編集内容を保存して、カスタム投稿を自作したテーマフォルダにsingle-test.phpをアップします。

これでWordPressのカスタム投稿をsingle-test.phpで表示することができます。

 

 

表示確認はテスト投稿タイプの投稿編集画面サイドに表示するURLでアクセスするのが簡単です。

 

カスタム投稿の一覧ページを表示

 

WordPressでカスタム投稿一覧ページを表示する場合です。

archive-test.phpのテンプレートを作成してカスタム投稿一覧ページを表示します。ファイル名でtestの部分はregister_post_type関数の第一引数に指定したtestです。

archive-test.phpを作成したファイル内にはWP_Queryのサブループを記述してカスタム投稿タイプの一覧を表示します。

 

<?php get_header(); ?>

archive-news.php(表示確認用)

<?php
$args = array(
    'post_type' => 'test',// 投稿タイプを指定
    'posts_per_page' => 10,// 表示する記事数
);
$news_query = new WP_Query( $args );
    if ( $news_query->have_posts() ):
        while ( $news_query->have_posts() ):
        $news_query->the_post();
?>
<div>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</div>

<?php endwhile; endif; wp_reset_postdata(); ?>
<?php get_footer(); ?>

 

カスタム投稿の一覧ページを表示するためのWP_Queryループは、カスタム投稿タイプをループする条件に投稿タイプを指定するのがポイントです。

‘post_type’ => ‘test’,を配列で記述し、その配列arrayを変数$argsに代入します。

そしたらWP_Queryのインスタンスを作成して「カスタム投稿タイプtestの投稿あったから回すよループ」をしてあげるだけですね。

「カスタム投稿タイプtestの投稿あったから回すよループ」で表示するコンテンツは、カスタム投稿ページの詳細に移動できるように投稿タイトルをリンクして表示しておきます。確認用ですね。

記述できたらarchive-test.phpの編集内容を保存、カスタム投稿を自作したテーマフォルダにarchive-test.phpをアップします。

 

Advertisement

 

カスタム投稿一覧ページを表示できるリンクも作成しておきましょう。

以下のコードをテーマのheader.phpあたりにでも記述します。

 

<span><a href="<?php echo get_post_type_archive_link( 'test' ); ?>">テストページ一覧</a></span>

 

コードはWordPressのget_post_type_archive_link()関数を使用しています。

get_post_type_archive_link()は引数に$post_typeを使用できますので、カスタム投稿タイプ名testを渡すことにより、投稿タイプがtestの一覧ページパーマリンクを取得できます。

取得するパーマリンクはHTMLのaタグのhref属性値にecho文で出力します。

 

 

するとリンクテキストを「テストページ一覧」にしているので、get_post_type_archive_link()を記述したページには、自作したカスタム投稿(test)の一覧ページを表示するリンクが表示します。

 

 

リンクをクリックすると、カスタム投稿一覧ページを表示することができます。画像ではarchive-news.phpと表示していますがWordPressでカスタム投稿を自作する練習をし過ぎて書き直すのを忘れているだけです。

これにてWordPressのカスタム投稿を自作して表示するのが完成です。

WordPress使い方カテゴリの最新記事