【WordPress】トップページにカスタム投稿タイプを表示する方法

WordPressのカスタム投稿タイプを活用すると、ウェブサイトの柔軟性を大幅に向上させることができます。しかし、その投稿をトップページに表示する方法は一般的に知られていないこともあります。このガイドでは、簡単なステップでトップページにカスタム投稿タイプの投稿を表示する方法を紹介します。

カスタムループを使う

WordPressのカスタムループを使って、カスタム投稿タイプの投稿を取得して表示する方法です。

functions.phpにカスタムループを追加する

function custom_post_type_loop() {
    $args = array(
        'post_type' => 'your_custom_post_type', // カスタム投稿タイプのスラッグ
        'posts_per_page' => 5, // 表示する投稿数
        'orderby' => 'date', // 日付順で並べ替え
        'order' => 'DESC', // 降順で表示（新しい投稿が先）
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        echo '<ul>';
        while ($query->have_posts()) {
            $query->the_post();
            echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        }
        echo '</ul>';
    }

    wp_reset_postdata();
}

トップページテンプレートに表示する

トップページの任意の場所にカスタムループを呼び出すコードを挿入します。

<div class="custom-post-type-section">
    <h2>カスタム投稿タイプのタイトル</h2>
    <?php custom_post_type_loop(); ?>
</div>

ウィジェットを使う

WordPressのウィジェットを活用して、カスタム投稿タイプの投稿をトップページに表示する方法です。

functions.phpでウィジェットエリアを登録する

function custom_post_type_widget_init() {
    register_sidebar( array(
        'name' => 'カスタム投稿タイプウィジェットエリア',
        'id' => 'custom_post_type_widget_area',
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ) );
}
add_action( 'widgets_init', 'custom_post_type_widget_init' );

カスタムウィジェットを作成する

カスタムウィジェットを作成し、ウィジェットエリアに追加します。

class Custom_Post_Type_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'custom_post_type_widget',
            'カスタム投稿タイプウィジェット',
            array( 'description' => 'カスタム投稿タイプの投稿を表示します。' )
        );
    }

    public function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', $instance['title'] );

        echo $args['before_widget'];
        if ( ! empty( $title ) ) {
            echo $args['before_title'] . $title . $args['after_title'];
        }

        $args = array(
            'post_type' => 'your_custom_post_type', // カスタム投稿タイプのスラッグ
            'posts_per_page' => 5, // 表示する投稿数
            'orderby' => 'date', // 日付順で並べ替え
            'order' => 'DESC', // 降順で表示（新しい投稿が先）
        );

        $query = new WP_Query($args);

        if ($query->have_posts()) {
            echo '<ul>';
            while ($query->have_posts()) {
                $query->the_post();
                echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
            }
            echo '</ul>';
        }

        wp_reset_postdata();

        echo $args['after_widget'];
    }

    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>">タイトル:</label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <?php
    }

    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';

        return $instance;
    }
}

function register_custom_post_type_widget() {
    register_widget( 'Custom_Post_Type_Widget' );
}

add_action( 'widgets_init', 'register_custom_post_type_widget' );

ウィジェットエリアにウィジェットを追加する

WordPressの管理画面で、ウィジェットを使用してウィジェットエリアにカスタム投稿タイプウィジェットを追加します。その後、トップページのウィジェットエリアにウィジェットを配置します。

ショートコードを使う

ショートコードを使用して、トップページにカスタム投稿タイプの投稿を表示する方法です。

functions.phpでショートコードを定義する

function custom_post_type_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'post_type' => 'your_custom_post_type', // カスタム投稿タイプのスラッグ
        'posts_per_page' => 5, // 表示する投稿数
        'orderby' => 'date', // 日付順で並べ替え
        'order' => 'DESC', // 降順で表示（新しい投稿が先）
    ), $atts, 'custom_post_type' );

    $args = array(
        'post_type' => $atts['post_type'],
        'posts_per_page' => intval( $atts['posts_per_page'] ),
        'orderby' => $atts['orderby'],
        'order' => $atts['order'],
    );

    $query = new WP_Query($args);

    ob_start();
    if ($query->have_posts()) {
        echo '<ul>';
        while ($query->have_posts()) {
            $query->the_post();
            echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        }
        echo '</ul>';
    }

    wp_reset_postdata();

    return ob_get_clean();
}
add_shortcode( 'custom_post_type', 'custom_post_type_shortcode' );

トップページでショートコードを使用する

ショートコードを使って、カスタム投稿タイプの投稿をトップページに直接表示します。

[custom_post_type]

または、引数を指定してカスタマイズすることも可能です。

[custom_post_type post_type="your_custom_post_type" posts_per_page="5"]

まとめ

WordPressのカスタム投稿タイプをトップページに表示する方法について、いくつかのアプローチを紹介しました。それぞれの方法には独自の利点があります。

• カスタムループを使う方法: WP_Query を使用してカスタム投稿タイプの投稿を取得し、直接トップページに表示します。柔軟性が高く、カスタマイズが容易です。
• ウィジェットを使う方法: カスタムウィジェットを作成し、ウィジェットエリアに配置することで、管理画面から簡単にカスタム投稿タイプの投稿を追加できます。
• ショートコードを使う方法: 短いコードをトップページの任意の場所に挿入するだけで、カスタム投稿タイプの投稿を表示します。使い勝手が良く、非常に柔軟です。

これらの方法は、あなたのウェブサイトのニーズやデザインに応じて選択できます。カスタム投稿タイプを利用することで、WordPressの機能を最大限に活用し、ユーザーにとって魅力的なコンテンツを提供することができます。