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

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="' . esc_url( get_permalink() ) . '">'
                . esc_html( get_the_title() ) . '</a></li>';
        }
        echo '</ul>';
    }

    wp_reset_postdata();
}

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

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' );

if ( is_active_sidebar( 'custom_post_type_widget_area' ) ) {
    dynamic_sidebar( 'custom_post_type_widget_area' );
}

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'] . esc_html( $title ) . $args['after_title'];
        }

        $query_args = array(
            'post_type'      => 'your_custom_post_type',
            'posts_per_page' => 5,
            'orderby'        => 'date',
            'order'          => 'DESC',
        );

        $query = new WP_Query( $query_args );

        if ( $query->have_posts() ) {
            echo '<ul>';
            while ( $query->have_posts() ) {
                $query->the_post();
                echo '<li><a href="' . esc_url( get_permalink() ) . '">'
                    . esc_html( 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 esc_attr( $this->get_field_id( 'title' ) ); ?>">タイトル:</label>
            <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"
                name="<?php echo esc_attr( $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' );

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="' . esc_url( get_permalink() ) . '">'
                . esc_html( 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"]

<?php echo do_shortcode( '[custom_post_type]' ); ?>