Lightningのカスタマイズ

Lightningの投稿一覧(トップページやアーカイブ)をグリッド表示で横並びに表示する方法を紹介します。端末幅に合わせて1列~3列まで自動で切り替える仕組みです。仕上がりイメージは次のようになります。

Lightningの投稿一覧をグリッド表示にしたい

Lightningの投稿一覧をグリッド表示(横並び)にしたい

この記事はLightningバージョン: 6.16.0で検証しています。

カスタマイズが面倒なら「Lightning Pro」を

CSSやPHPのカスタマイズが面倒な方はLightning Proをお試しください。

スポンサーリンク

Lightningの投稿一覧テンプレートをコピー

Lightningの投稿一覧のレイアウトを決めるテンプレートはmodule_loop_post.phpです。カスタマイズするため、子テーマフォルダにコピーします。

module_loop_post.phpを子テーマフォルダにコピー

module_loop_post.phpを子テーマフォルダにコピー

module_loop_post.phpの修正

投稿一覧のテンプレート(module_loop_post.php)を開いてレイアウトを修正します。

投稿一覧の画像サイズを変更

まずは、アイキャッチ画像のサイズ設定(8行目)を修正します。現在は「the_post_thumbnail( 'thumbnail', $attr );」でサムネイルになっていますが、全幅になることを考えるともう少し大きいサイズに変更します。

たとえば、大サイズに変更する場合、「thumbnail」を「large」に変更します。

the_post_thumbnail( 'large', $attr );

中サイズ画像の場合は「medium」、フルサイズは「full」です。いろいろ試行錯誤してみてください。

抜粋の削除

初期設定では投稿一覧に抜粋が表示されますが、ここではグリッド表示にするので削除します。

具体的にはmodule_loop_post.phpの16行目です。合わせて17行目から19行目の「続きを読む」を消しても良いです。

抜粋と「続きを読む」ボタンの削除

抜粋と「続きを読む」ボタンの削除

ここまでの表示結果は次のようになります。

module_loop_post.phpの修正結果

module_loop_post.phpの修正結果

CSSの追加

投稿一覧をグリッド形式で横並び表示するCSSを入力します。

主な内容は次のようになります。

投稿一覧をグリッド表示するCSS
  • 「display: flex;」で横並び表示
  • 端末幅に応じて1列~3列で表示を切り替える
  • カテゴリーリンクを消す

子テーマのstyle.cssまたは「外観」-「カスタマイズ」-「追加CSS」メニューなどに入力してください。

#main .postList,
.home .mainSection .postList {
    display: flex;
    width: 100%;
    flex-wrap:wrap;
}

#main .media,
.home .media {
    padding: 1%;
    margin: 1% 1% 50px;
    border: solid 1px #eee;
}

@media (max-width: 480px) {
    #main .media,
    .home .media {
        width: 98%;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    #main .media,
    .home .media {
        width: 48%;
    }
}

@media (min-width: 768px) {
    #main .media,
    .home .media {
        width: 31.333%;
    }
}

.archive .entry-meta_items_term,
.blog .entry-meta_items_term,
.home .entry-meta_items_term {
    display: none;
}

#main .media .postList_thumbnail,
.home .media .postList_thumbnail {
    width: 100%;
    padding-right: 0px;
    float: none;
}

#main .navigation.pagination,
.home .navigation.pagination {
    width: 100%;
}

表示結果は次のようになります。

Lightningの投稿一覧がグリッド表示に

Lightningの投稿一覧がグリッド表示に

CSSはふわっと仕上げてあります。あとは自由にカスタマイズしてください。

WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください(相談・見積もり無料)
  • サイトのデザインをカスタマイズしたい
  • CSS・PHPのカスタマイズがうまくいかない
  • 引っ越し(サーバー移転)したい
  • サイトをSSL対応(https://)したい
WordPress講座の問い合わせ先
WordPress講座申し込み
メールで問い合わせ
カスタマイズの手間が省ける「Lightning Pro」
Lightningテーマの有料版「Lightning Pro」ならモバイルフッターの固定メニューや投稿一覧のレイアウト変更などの便利機能が標準装備されています。面倒なカスタマイズに時間をかけたくない方はお試しください。

関連記事

スポンサーリンク