"

WordPressでグリッドレイアウトデザイン!

ワードプレスをjQueryプラグインを使ってグリッドレイアウトデザインに変更したいときの方法

いろいろワードプレス専用プラグインも探しましたが、特定ページだけグリッドレイアウトにする記事に辿りつけなかったので、Masonryという有名なjQueryプラグインを使うことにしました。

MISSION:カテゴリーページをグリッドレイアウトで表示して、見たい記事に辿りつきやすくすること。

難しいと身構えてたのに、5つの手順で設定・利用できることがわかりました!

  1. 本家のjQueryとMasonryを<head>内でリンクさせるように書く!
  2. グリッドレイアウトにする対象を選んで書く!
  3. content.phpを編集して、1度に見れる文字数を決める!
  4. CSSでデザイン(主に横幅)を設定する!
  5. head内で直接<script>を書く!

以上です。では、早速。

1.本家のjQueryとMasonryへのリンクを<head>内でリンクさせるように書く!

この記事の最初の画像がMasonryの公式サイトへのリンクになってますので、現在では右側の「Download masonry.​pkgd.​min.js」をクリックして表示されたURLをコピーします。

基本的には外観→テーマの編集→使用しているテーマを選択→head.phpで何やら長いプログラムが表示されるので、</head>の手前に追記します。※1

実際に記述したコードはこちら↓
<script src=”//cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.min.js”></script>

本家へのリンクは「jQuery Updater」というプラグインをワードプレス内で検索して有効化します。※2

※1 Masonryのサイトに直接リンクしているので、そのサイトのページがなくなった瞬間に機能しなくなるので注意してください。
※2 jQuery Updaterを利用して、今後も最新のjQueryが出てきた場合もリンクは大丈夫ですが、バージョンが変わったことでMasonryがうまく機能しなくなることがあるので注意してください。

2.グリッドレイアウトにする対象を選んで書く!

Masonryは指定したidの中の指定したclassのものを横並びにするjQueryプラグインということですので、
どのカタマリで横並びにするのか考えておく必要があります。

自分の場合は<article>で記事全体とカテゴリーなどのリンクが囲まれていたので、<article class=”任意の名前”>としても良かったのですが、面倒なのでclassではなく<article>をそのまま指定することにしました。

idの方は、指定する場所探しに若干時間がかかりました。

テーマによって違いますが、category(-なんとか).phpがあればその中、なければarchive.phpを触ることになると思います。

うちの環境だとarchive.phpだけがあったので、その中の

<?php
① if ( is_category() || is_tag() || is_author() || is_day() || is_month() || is_year() ) :
?>
② <div id="gridcot">
  <?php while ( have_posts() ) : the_post(); ?>
③   <?php get_template_part( 'content-cat', get_post_format() ); ?>
  <?php endwhile; ?>
 </div>
<?php
 endif;
?>

こんなコードを複製して対応しました。

①のところの直訳は、「if←もし (カテゴリーページ() ||←もしくは タグページ() || 製作者ごとのページ() || 日付() || 月一覧() || 年一覧() ) :だったら」次のことをしてください。という感じです。

②結局、付け加えたのは<div id=”gridcot”>と</div>になります。この中に含まれる全部の<article>をグリッドレイアウトの対象にするつもりです。

③のところの直訳は、記事の数だけ「content-cat.php」を繰り返して(本文/記事を)表示してください。って感じです。

3.content.phpを編集して、1度に見れる文字数を決める!

「content-cat.php」という「content.php」を複製したものをカテゴリー表示用に作って、そちらを指定しました。(上記の③の中の’content-cat’の部分です)

だいたいは「entry-content」のすぐ下にあるんじゃないでしょうか。

本来はthe_content()で本文を表示させているようですが、本文全文だと長すぎるので一部を表示するプログラムに差し替えました。

the_content(); を削除して echo mb_substr(get_the_excerpt(),0,100);

直訳は、全角で本文の0~100文字目を抜き出して表示するって感じです。

4.CSSでデザイン(主に横幅)を設定する!

#gridcot article {
 width:43%;
 border:none;
 background:#dfe0de;
 margin:12px 6px 12px 9px;
 padding:10px 8px 18px 12px;
}

さっき指定した<div id=”gridcot”>の中の<article>に横幅の指定とかを入れたCSSです。

外観→テーマの編集の一番下の「style.css」の中の1番下に入れれば動くと思います。

これだけだと、細くなった記事が縦長に連続して表示されるだけになると思います。

(width:43%はうちの場合の数字で2カラムにしようとしたときの値です。自分で試してちょうどよい数値を探してください。)

5.head内で直接<script>を書く!

横並びにするためのMasonryを使うタイミングと何のidなどに対して使うのか指定します。

「header.php」の</head>の直前の行に次のを入力します

<script>
 $(function(){
  $('#gridcot').masonry({
   itemSelector: 'article',
   isFitWidth: true,
   isAnimated: true
  });
 });
</script>

直訳は$(function() : このページが読み込まれたら、
$(‘#gridcot’).masonry : id=”gridcot”の中身をmasonryの対象にして、
itemselector:’article’ : gridcotの中にある<article>を横並びにしてください。
isFitWidth : true : 横幅可変で、
isAnimated : true : ぬるっと動いてください。

という感じです。

isFitWidth:trueにしていたら挙動不審になりましたので、うちでは「false」にして機能をOFFにしています。

最後に、

途中で画面が真っ白になったり、エラーメッセージだけが表示されているときはPHPのエラーです。<>”””のつけ忘れや閉じ忘れ、<?php(ここからPHP)、?>(ここまでPHP)の順番が狂ったりしてるときも多いです。

それがなくて動かないときは、MasonryやjQueryへのリンクが間違っていたり、6.で書いたidやclassがスペルミスなどで存在しなかったりが原因の場合が多いです。

いずれにしろ、1時間かけてわからなかったときは、最初からやり直すのがBESTな気がします。

大丈夫。できますよ。