【Lightningカスタマイズ】masonryを使って新着記事をおしゃれに並べるコツ

 

今日は、だっっっっっさぁぁぁい普通の記事の並び方を変える方法を書いておきます。(Lightningのデフォルトの記事一覧の並び方が私にとってはださい…。)

ちなみに、常々日本のWordpressテーマって割と洗練されていなくってダサいものが多く、どのサイトを見ても同じような構成のサイトになってしまうテーマが多いな〜と個人的には思ってました。
割りといろんなサイトを見ても同じようなサイトが多くないですか?
それがすごく気になってました。
そしたら、つい先日師匠も同じことをおっしゃっていて…!

そう思っていたのは自分だけじゃなかったんだ。。。と思いました。

 

そんなことはさておき、この簡単3ステップで、新着記事を簡単に手軽におしゃれにLigthningの記事一覧がカスタマイズできる方法を書いていきます!
(子テーマの作り方はこちら)

  1. 子テーマを作る
  2. 子テーマのphpをごにょごにょする
  3. CSSで幅などを微調整していく

 

Lightningのデフォルトの記事一覧は…

 

まず最初にデフォルトの記事一覧を見ていただきましょう。

 

litnning_article_index

これです。
心の底からダサいと思います。
なので、Lightningをカスタマイズしていっちゃいます!

いや、Lightningだけじゃなく、全てのテーマに使える方法です。

Lightningのカスタマイズをしていきましょう

方法としては2通りあります。

  1. プラグインを使う
  2. 自分でカスタマイズ

プラグインを使うと、諸々の見た目や細かい所は自分でできなかったり、有料版じゃないとできなかったり、レスポンシブ対応してくれなかったりするようなので、今回は自分でカスタマイズをしていきます!
いや、まぁプラグイン使うほうが面倒なので自分でカスタマイズする気まんまんでしたが。。。

ということで、今回行うのはLightningのカスタマイズになります。
Lightningのカスタマイズですが、必要なものはLightningの子テーマのみです。

あら簡単!

子テーマにごりごりカスタマイズを施していきます!

 

使うのはMasonry.js!

 

以前、記事に書こうとしてやめた…?(たぶん) Masonry.jsを使います。
Masonry.jsはWordpressのコアに内包されているようなので、ソースの読み込みとかダウンロードとか面倒なことはしなくてOKです!

必要はコードはたった3つ!(多くて3つ)
少なければjQueryを追加して、CSSをかけば良いだけなんです。

まず、masonry.jsを呼び出すために作成したチャイルドテーマのfunctions.phpに下記を追記します。

 

 

 

この部分が肝になる部分です。
masonryでタイル状に並べたいコンテンツを包括している divタグに .masonryでmasonryを効かせるように指定し、タイル状に並べるコンテンツ自体のクラス名を itemSelectorに書いてあげる
これが基本です。

次にLightningではmodule_loop_post.phpに書かれている単記事にクラス名の付与、後述しているarticleタグのdivタグへの変更をやっておきます。

 

 

これを

 

 

このように変更します。

 

変更前

 

でも、このままだと、タイトルと日付の並び順や続きを読むボタンが非表示になっている箇所、アイキャッチ画像の大きさなど気に食わない所だらけなので、色々と修正していきます。(キャプチャはすでに画像表示サイズを変えてしまった後ですみません…。)
module_loop_post.phpで修正したのは、タイトルの表示位置と「続きを読む」ボタンのコメントアウトを外すということくらいです。

 

 

あとはCSSをごにょごにょします!
それはもう適宜お好みのレイアウトに…という感じです。

で、できた結果がこれです。

 

変更後

 

まぁ、「続きを読む」ボタンの位置や大きさが気に食わないのでこれらはおいおいやっていきます。

 

ちなみにですが、masonryはdiv用に書かれていそうなので、divタグではなく、contntタグやarticleタグが使われている場合はdivタグへの変更をするようにしましょう。
私は仕事でmasonryを使うときにこのことに気づかず、表示崩れをしてずっと解消できずハマったので…。苦笑

 

まとめ

 

Lightningでmasonry.jsを使う際は

  1. functions.phpにmasonryの設定を記述
  2. module_loop_post.phpの単記事の article タグを div タグに変更
  3. CSSでレイアウトを微調整

この3ステップで使うことができます。

簡単なのでぜひ使ってみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です