タグ: ディスコグラフィ

ミュージシャンのサイトを作成していると、必ずディスコグラフィーを作りたいという場面に遭遇します。要件は以下の通り

• 投稿でカテゴリを「ディスコグラフィー」にチェックを入れた投稿を並べたい。
• アイキャッチ画像と、本文タイトルだけを表示したい
• アイキャッチ画像は正方形でグリッドに並べたい
• レスポンシブだとなおよし

イメージはこんなかんじ。Discographyではないですが「Theme」というカテゴリーに関連づけられた投稿のアイキャッチが時系列順に正方形で並んでいます。

今まではNewpost Catchというプラグインにお世話になっていたのですが、デバイスの解像度があがってきた昨今、thumbnailサイズの画像しか取得できないのは厳しい。というわけでWP_Queryを使った方法で実装してみました。

プラグイン

WP Codeというコードをスニペットとして登録、ショートコードとして本文に埋め込めるプラグインを使用します。

コード

WP_Queryで以下を作成し、WP CodeでCode Snipetを新規作成し、コードを入力します。そこで生成されたショートコードを本文の表示したいところに挿入すれば、サムネイル集が好きなところに表示できるようになります。

<?php
    $args = array('posts_per_page' => -1, 'orderby' => 'date');
    $query = new WP_Query($args);
    $query = new WP_Query( 'cat=492' );
?>
<?php if( $query->have_posts() ) : ?>
<ul class="list-gallery">
    <?php while ($query->have_posts()) : $query->the_post(); ?>
    <li>
        <div class="thumbnail"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium'); ?></a></div>
        <div class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
   </li>
   <?php endwhile; ?>
</ul>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

$args = array(‘posts_per_page’ => -1, ‘orderby’ => ‘date’);
posts_per_pageを-1にすると上限なく表示できる…はずなのですが、ダッシュボードの表示件数に依存してしまいます。
orderbyをdateにすると投稿日時順（昇順）で並びます

$query = new WP_Query( ‘cat=492’ );
cat=のあとにカテゴリーIDを入力することで特定のカテゴリーのアイキャッチだけひっぱってこれます

<ul class=”list-gallery”>
画像をグリッドで並べるのに使うクラス

<div class=”thumbnail”>

画像の大きさを制御するのに使うクラス

CSS

CSSはこんなかんじで可変のグリッドにしています（CSSは得意ではないのでもっとすっきりした方法があると思いますが）

ul.list-gallery{
  display: grid;
  grid-gap: 10px;
  overflow: hidden;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  list-style:none
}

.list-gallery li {
  margin-right:10px;
}

.thumbnail img{
  width:250px;
  height:250px;
  object-fit: cover; 
}