MENU

[WordPress]ショートコードを呼び出して記事一覧を取得する

エンジニア
WordPress

function.phpでショートコードを定義して、single.phpやpage.php、記事編集画面でショートコードを呼び出すことで、手軽に記事一覧を表示します。

目次

function.phpにショートコードを定義する

記事一覧を返す関数を作成します。
WP_Query に$argsを渡して対応する記事一覧を取得します。

この例では、取得した記事のアイキャッチ画像をarticleタグのバックグラウンドイメージとして表示をさせます。

記事取得後にタグを生成して、returnする関数です。

function fetch_and_display_posts() {
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 1000, // 取得する投稿数を設定
        'orderby' => 'rand' // ランダムに並び替え
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $post_id = get_the_ID();
            if( has_post_thumbnail() ) {
                $eye_catch_image = get_the_post_thumbnail_url( get_the_ID(), 'medium' );
            } else {
                $eye_catch_image = get_template_directory_uri() . '/assets/img/ogp.png';
            }

            $output .= '<li class="box">';
            $output .= "<article style='background-image: url({$eye_catch_image});' class='box_article'>";

            $output .= '</article>';
            $output .= '</li>';
        }

        wp_reset_postdata();
    }
    return $output;
}

ショートコードをhookで登録します。
第一引数がショートコードを呼び出す時につかう名称で、第二引数がhookに登録する関数名を記載します。

add_shortcode('fetch_posts', 'fetch_and_display_posts');

ショートコードを呼び出す

single.phpやpage.phpで、ショートコードを呼び出します。do_shortcodeを使うだけで簡単にできます。

    <ul class="random-container">
        <?= do_shortcode('[fetch_posts]'); ?>
    </ul>

Summary

ショートコードで関数にまとめられるのでコードが見やすくなるのはメリットですね。
他にも記事編集ページから呼び出すこともできるので便利です。

エンジニア
WordPress
よかったらシェアしてね！

関連記事

目次