[WordPress] 商品紹介のような「名前＋画像＋リンク」の一覧を表示したい

公開日:2018/11/07 更新日:2018/11/08

やりたいこと

商品情報のようなカスタム投稿タイプを作成して、商品一覧ページを作ることがあります
一覧ページ用の「archive-xxx.php」で実行するクエリと商品情報の引っ張り方はある程度決まりきったやり方なのでまとめてみました

サンプルコード

<?php
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => -1,
    );
    
    $the_query = new WP_Query($args);
    if( $the_query->have_posts() ) {
        while( $the_query->have_posts() ) {
            $the_query->the_post();
            $name = get_the_title();
            $url = get_the_permalink();
            $image = wp_get_attachment_url( post_custom('image') );
?>
            <a href="<?php echo $url ?>">
                <figure>
                    <img src="<?php echo $image; ?>" alt="<?php echo $name; ?>">
                    <figcaption><?php echo $name; ?></figcaption>
                </figure>
            </a>
<?php
        }
    }
    wp_reset_postdata();
?>

仕組み、解説、補足など

「product」というカスタム投稿タイプに、「image」という画像用のカスタムフィールドが紐づいているという想定です。ここは適宜使用する環境によって書き換えます
画像とその名称のセットなのでfigureタグを使っています
スタイルは最低限のレスポンシブ対応のみ。ウィンドウの幅に応じて1行あたりの項目数を1→2→3→4と増やしていきます

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。