WordPress講座(個別相談)

WordPressで作ったカスタム投稿を表示する方法を考えてみます。基本的にカスタム投稿は通常の投稿のテンプレートに相乗りできるので特別な設定をせずに一覧や個別記事を表示できます。ただし、固定ページ内で一覧表示したい場合などはプラグインを使ったりPHPコードを書いたり、工夫が必要です。

カスタム投稿を表示したい

カスタム投稿を表示したい

以下、固定ページの中でカスタム投稿を表示するパターンを2つ(プラグインを使用・PHPを記述)紹介します。

スポンサーリンク

カスタム投稿の表示(プラグインを使用)

カスタム投稿を表示できるプラグインはいくつかあります。

カスタム投稿を表示できるプラグインの例

基本的にはショートコードを使って好きな種類の投稿を表示する仕組みです。ここでは、Shortcodes Ultimateの例で固定ページの中にカスタム投稿を表示する手順を紹介します。

Shortcodes Ultimateのインストール後、投稿や固定ページの編集画面を開いて、「ショートコードを挿入」をクリックします。

ショートコードの挿入

ショートコードの挿入

カスタム投稿を表示するため、「投稿」をクリックします。

「投稿」をクリック

「投稿」をクリック

初期設定では4種類のテンプレートが使用可能です。ひとまず、デフォルトの「templates/default-loop.php」で大丈夫です。

テンプレートの選択

テンプレートの選択

画面を下にスクロールして、表示したいカスタム投稿のタイプ(例:お知らせ)を選びます。合わせてタクソノミー(カスタム投稿の分類)も選択できます。

表示する投稿タイプを選択

表示する投稿タイプを選択

他にもオプションを設定できますが、ひとまず画面を下にスクロールして「ショートコードを挿入」をクリックします。

「ショートコードを挿入」をクリック

「ショートコードを挿入」をクリック

ショートコードが追加されます。

ショートコードが追加される

ショートコードが追加される

指定したタイプのカスタム投稿が表示されます。

カスタム投稿が表示される

カスタム投稿が表示される

使用中のテーマによっては初期設定のレイアウトが微妙な感じになる場合がありますが、テンプレートをカスタマイズできるので大きな心配は不要です。レイアウトを変更する方法は以下のページも参考にしてください。

Shortcodes Ultimateの投稿一覧のレイアウトを変更する

カスタム投稿の表示(PHPを記述)

PHPを記述してカスタム投稿を表示するには、WP_Queryを使って投稿ループを作成します。たとえば、カスタム投稿タイプinfoの投稿を一覧表示するコードの例は次のようになります。

<?php
/* (ステップ1)データの取得 */
$query = new WP_Query(
    array(
        'post_type' => 'info',
        'posts_per_page' => 3,
    )
);
?>
<?php
/* (ステップ2)データの表示 */
if ( $query->have_posts() ) : ?>
    <div>
        <?php while ( $query->have_posts() ) : $query->the_post();?>
            <p><a href="<?php the_permalink(); ?>">
                <?php the_title(); ?></a></p>
            <p><?php echo get_the_date(); ?></p>
            <p><?php the_category(", "); ?></p>
            <p><?php the_excerpt(); ?></p>
            <?php if ( has_post_thumbnail() ) : ?>
                <p><?php the_post_thumbnail(); ?></p>
            <?php endif; ?>  
            <hr />
        <?php endwhile; ?>
    </div>
<?php endif; wp_reset_postdata(); ?>

これを、カスタム投稿を表示する固定ページのテンプレート(例:page-info.phpなど)に入力すれば、次のようにカスタム投稿が表示されます。

表示されたカスタム投稿

表示されたカスタム投稿

page-info.phpとはスラッグがinfoの固定ページに対応するテンプレートファイルです。現在使用中のテーマのpage.phpなどをコピーして作成すると簡単です。

ステップ1でデータを取得してステップ2で表示しています。データを取得するときに「post_type」でカスタム投稿タイプを指定するのがポイントです。

その他、コードで使われている命令について詳しくは以下のページも参考にしてください。

投稿やカスタム投稿にカテゴリーやカスタム分類を指定して一覧表示する

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク