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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

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

nautilus  Just another demo Sites site

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

Pinterestのタイル状リスト

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

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

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

photo by William Murphy

スポンサーリンク
レクタングル(大)広告

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

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

無駄に余白ができてしまう

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

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

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

Masonry

Masonry

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

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

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

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

Masonryをダウンロード

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

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

Masonryの段ダウンロード

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

Masonryの呼び出し

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

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

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

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

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

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

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

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

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

コンテナ要素とブロック要素

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

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

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

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

投稿のブロック要素(.entry)の実装部分

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

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

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

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

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

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

詳しい方法は以下。

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

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

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

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

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

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

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

3列に並ぶ

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

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

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

このコードは、リストページのみで表示されれば良いので、投稿ページや固定ページなどでは表示されないように、!is_singular()を用いて、表示させないようにしています。

あとは、コンテナ要素のIDを指定して、各記事のブロック要素のクラスを指定して、アニメーションするかを指定します。

アニメーションをおあONにすると、ブラウザの幅などを変更すると、ブロックがアニメーションで移動して格好いいです。

参考 【WordPress】jQueryMasonryを使って、隙のないタイル状のサイトを作る | MasterPeace21

動作確認

上記のように設定することで、以下のように、タイル状に表示されるようになります。

タイル状に表示カスタマイズ

まとめ

このように、結構簡単にタイル状リストを実装することができます。

ここまで手軽に、実装が行えるのは、ほとんど全てMasonryのおかげです。

「Wordpressで行っているサイトのリストを、ギャラリー風に表示したい」なんて人には、もってこいの方法なのでお試しあれ。