WordPressの記事リストをギャラリーサイトのようにタイル状に隙間なくビッシリと表示させる方法

先日、「Wordpressのトップページなどにあるインデックスリストを次のようなタイル状のギャラリー風表示にするにはどうしたらよいか？」という質問を受けました。

Pinterestなどもこんな感じのタイル状ですね。

この隙間がなくて無駄のない感が、おしゃれというかかっこいいです。

質問を受けたことをきっかけに、僕も興味があったので、実際に実装する方法を調べてみました。そしたら、意外と簡単そうだったのでWordpressをカスタマイズしてみることにしました。

今回は、Wordpressのリスト表示を「ギャラリー風のタイル状リスト」にする方法です。

photo by William Murphy

タイル状のリストを作成するには
Masonryでタイル状リストを作成するための主な手順
Masonryをダウンロード
Masonryの呼び出し
リストとブロック要素の設定
Masonryでタイル状にするコードの実装
動作確認
まとめ

タイル状のリストを作成するには

通常CSSだけでブロック要素を横に並べると、以下のように無駄な余白ができてしまいます。

これを、冒頭の画像のような隙間のないタイル状にするには、JavaScriptもしくはjQueryを用いてブロック要素に対して処理をしてやる必要があります。

ただ、このような処理を自前で書くのは計算も難しそうだしかなり大変です。

そこで、今回はそういった処理があらかじめ簡単に使えるように関数が用意されているjQueryライブラリのMasonryを利用して実装したいと思います。このような、タイル状にするライブラリは、他にもありますが、Masonryが最も汎用性もあり簡単に実装できそうだったので今回採用してみました。

Masonry

Masonryでタイル状リストを作成するための主な手順

Masonryを使用したタイル状リストを作成するには、次の6手順を行います。

Masonryのダウンロード
jQueryとMasonryファイルの呼び出し
リストを囲むコンテナ要素に操作用のID（class）をつける
投稿のブロック要素に操作用のclassをつける
ブロック要素のスタイルを設定する
Masonryライブラリのタイル状リストにする関数を呼び出す

手順リストを見ただけでは、少し難しそうに見えるかもしれませんが、HTMLとCSSがわかる人ならば、一つ一つ順を追って行っていくと、それほど難しくはありません。

Masonryをダウンロード

まずは、Masonryから、ライブラリファイルをダウンロードします。

ダウンロードは、「Download masonry.pkgd.min.js 」ボタンを右クリックして「リンク先を保存」をします。

「masonry.pkgd.min.js」をダウンロードしたら、このライブラリファイルをテーマ（子テーマ）フォルダ内にコピペしておきます。

Masonryの呼び出し

Masonryの呼び出しは、header.phpの<head></head>間などで以下のように指定します。

<?php wp_enqueue_script('jquery'); //jQueryを呼び出していない場合は呼び出す。既に呼び出している場合は不要。?>
<!-- Masonryライブラリの呼び出し -->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/masonry.pkgd.min.js"></script>

<?php wp_enqueue_script('jquery'); //jQueryを呼び出していない場合は呼び出す。既に呼び出している場合は不要。?>

wp_enqueue_script(‘jquery’);は、既にjQueryが呼び出されている場合は不要です。

Masonryが保存されているディレクトリを呼び出すために、get_stylesheet_directory_uri()を使用しています。これだと、子テーマを使用してカスタマイズしている場合は、子テーマディレクトリが呼び出されます。

リストとブロック要素の設定

Masonryで、ブロック要素を操作するためには、以下の2つの設定が必要です。

投稿リストを囲うコンテナ要素にIDをつける（classでも良いけど）
投稿それぞれのブロック要素にclassを指定する

僕は今回、それぞれの要素に以下のIDとclass名を指定しました。

コンテナ要素：#list
ブロック要素: .entry

図で表すと、このようになります。

コンテナ要素は、あらかじめあるものを使用すると、予期せぬ不具合が起きることもあるので、リスト部分のみを囲う新たなコンテナ要素を作成してIDをつけるのが良いかと思います。

#llstの要素幅は680pxです。今回は、この中に3列タイル状に並べようと思っています。

リストを囲むコンテナ要素（#list）の実装部分

リストを囲むコンテナは以下のように設定します。（構造単純化するために、ブロック要素部分は別テンプレートに切り分けてあります）

<div id="list">
<!-- 記事一覧 -->
<?php 
if (have_posts()) : // WordPress ループ
  while (have_posts()) : the_post(); // 繰り返し処理開始
    get_template_part('entry-card');//投稿のブロック要素呼び出し
  endwhile; // 繰り返し処理終了 ?>
  <div class="clear"></div>
<?php else : // ここから記事が見つからなかった場合の処理  ?>
    <div class="post">
      <h2>記事はありません</h2>
      <p>お探しの記事は見つかりませんでした。</p>
    </div>
<?php
endif;
?>
</div><!-- /#list -->

<?php

if (have_posts()) : // WordPress ループ

while (have_posts()) : the_post(); // 繰り返し処理開始

get_template_part('entry-card');//投稿のブロック要素呼び出し

endwhile; // 繰り返し処理終了 ?>

<?php else : // ここから記事が見つからなかった場合の処理 ?>

<h2>記事はありません</h2>

<p>お探しの記事は見つかりませんでした。</p>

</div>

<?php

endif;

</div>

投稿のブロック要素（.entry）の実装部分

ブロック要素部分（entry-card.phpテンプレート）は以下のようになっています。

<?php //投稿をのリスト表示のループ内で呼び出されるサムネイルカード ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('entry') ?>>
  <div class="entry-thumb">
    <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <a href="<?php the_permalink(); ?>" class="entry-image"><?php the_post_thumbnail( 'thumb320', array('style' => 'width:320px;height:180px;') ); ?></a>
    <?php else: // サムネイルを持っていないときの処理 ?>
      <a href="<?php the_permalink(); ?>" class="entry-image"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/no-image-320.png" alt="NO IMAGE" title="NO IMAGE" style="width:320px;height:180px;" class="no-image list-no-image" /></a>
    <?php endif; ?>
  </div><!-- /.entry-thumb -->
  <div class="entry-content">
      
    <h2><a href="<?php the_permalink(); ?>" class="entry-title"><?php echo get_the_title(); ?></a></h2>
    <p class="post-meta">
      <span class="post-date"><i class="fa fa-clock-o fa-fw"></i><?php the_time('Y/n/j') ;?></span>
      
      <?php if (is_category_visible()): ?>
      <span class="category"><i class="fa fa-folder fa-fw"></i><?php the_category(', ') ?></span>
      <?php endif; ?>
    </p><!-- /.post-meta -->
    <p class="entry-snippet"><?php echo get_the_custom_excerpt( get_the_content(''), get_excerpt_length() ); //カスタマイズで指定した文字の長さだけ本文抜粋?></p>
<p class="entry-read"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
  </div><!-- /

<?php //投稿をのリスト表示のループ内で呼び出されるサムネイルカード ?>

<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>

<a href="<?php the_permalink(); ?>" class="entry-image"><?php the_post_thumbnail( 'thumb320', array('style' => 'width:320px;height:180px;') ); ?></a>

<?php else: // サムネイルを持っていないときの処理 ?>

<a href="<?php the_permalink(); ?>" class="entry-image"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/no-image-320.png" alt="NO IMAGE" title="NO IMAGE" style="width:320px;height:180px;" class="no-image list-no-image" /></a>

<?php endif; ?>

</div>

<h2><a href="<?php the_permalink(); ?>" class="entry-title"><?php echo get_the_title(); ?></a></h2>

<?php if (is_category_visible()): ?>

<?php endif; ?>

</p>

<p class="entry-read"><a href="<?php the_permalink(); ?>">記事を読む</a></p>

</div><!-- /

今回、少し大きめの320pxのサムネイルを使用しています。こうすることで、スタイルの変更次第で2列にしたりすることもできます。

サムネイルサイズを指定する

the_post_thumbnail()関数で、普段使用しているサムネイルサイズ以外を指定した場合は、functions.phpなどでサイズ指定をしなければいけません。

とは言っても、functions.phpに以下のような一行を書き加えるだけです。

add_image_size('thumb320',320,180,true);

1	add_image_size('thumb320',320,180,true);

こうして、サムネイルの再生成を行うと、新たに指定したサイズのサムネイル画像が生成されます。そうしないと、画像が歪みます。

詳しい方法は以下。

WordPressプラグインの「Regenerate Thumbnails」を使ったサムネイルの再生成

.entryブロック要素のスタイル

で、とりあえずコンテナ要素の幅は、680pxなので3列表示するとして、

ブロック内幅214px
左右のマージン5px
左右のボーダー2px
1つのブロックのトータル幅226px

となるようにしました。これでちょうどコンテナ内に3列並ぶようになります。

これを、スタイルシートにすると以下のようになります。

.entry{
  width:214px;
  margin:10px 5px 0 5px;
  border:1px solid #ddd;
  border-radius:5px;
  float:left;
  clear:none;
}

.entry{

width:214px;

margin:10px 5px 0 5px;

border:1px solid #ddd;

border-radius:5px;

float:left;

clear:none;

}

このようにすることで以下のように3列に並びます。

一応、僕がカスタマイズ使用した、全てのスタイル設定を参考として載せておきます。

#main .entry{
  width:214px;
  margin:10px 5px 0 5px;
  border:1px solid #ddd;
  border-radius:5px;
  float:left;
  clear:none;
}

.entry-thumb {
  margin-top:0;
  margin-right: 0;
  text-align:center;
}

.entry-thumb img{
  width:100% !important;
  height:auto !important;
  margin-bottom:0;
}

.entry-content {
  margin-left: 0;
}

.entry h2 a{
  margin-top:0;
  font-size:16px;
  line-height:110%;
}

.post-meta{
  margin:0;
  font-size:14px;
}

.post-meta .category{display:none;}

.entry-snippet{
  font-size:14px;
  padding:0 5px;
  word-wrap:break-word;
}

.entry-read a{font-size:12px;padding:0 5px;}

.entry .post-meta .category{
  font-size:14px;
}

.entry h2{
  padding:0 5px;
  word-wrap:break-word;
}

#main .entry{

width:214px;

margin:10px 5px 0 5px;

border:1px solid #ddd;

border-radius:5px;

float:left;

clear:none;

}

.entry-thumb {

margin-top:0;

margin-right: 0;

text-align:center;

}

.entry-thumb img{

width:100% !important;

height:auto !important;

margin-bottom:0;

}

.entry-content {

margin-left: 0;

}

.entry h2 a{

margin-top:0;

font-size:16px;

line-height:110%;

}

.post-meta{

margin:0;

font-size:14px;

}

.post-meta .category{display:none;}

.entry-snippet{

font-size:14px;

padding:0 5px;

word-wrap:break-word;

}

.entry-read a{font-size:12px;padding:0 5px;}

.entry .post-meta .category{

font-size:14px;

}

.entry h2{

padding:0 5px;

word-wrap:break-word;

}

Masonryでタイル状にするコードの実装

最後に、jQueryでMasonryライブラリを呼び出すコードを書きます。header.phpなどの<head></head>の間に以下のコードを挿入します。

<?php if ( !is_singular() ): //投稿ページや固定ページ以外のとき?>
<script>
  jQuery(function(){
    jQuery('#list').masonry({ <!-- #listは記事一覧を囲んでる部分 -->
      itemSelector: '.entry', <!--.entryは各記事を囲んでる部分-->
      isAnimated: true <!--アニメーションON-->
    });
  });
</script>
<?php endif; ?>