Lightning3カラム化計画 その2 ~プラグイン編~

前回の記事で3カラムの実装方法を書きました。

ウィジェットエリアを追加するのはそこそこ簡単にできるのですが、レイアウトを整えるのに結構苦労することが判明しました。

と、いうわけで、いちいち CSS を毎回書くのも面倒ということで、今回はプラグインを作りましたのでそれを紹介したいと思います。

これは「Vektor WordPress Solution Advent Calendar 2020」18日目の記事です。

今回の記事では前回の記事を読んで3カラムレイアウトを実現する手間を知った方向けの記事です。

前回の記事を読まないと今回紹介するプラグインの有り難みが99%損なわれます。

なので、前回の記事を読んでからこの記事を読むことをおすすめします。

前回の記事は下記から読めます。

Lightning3カラム化計画 その1 ~実践編~

早速ですが、このブログでは、3カラムレイアウトを実装しています。 なぜかというと、私は3カラムレイアウトに慣れきってしまって今更2カラムレイアウトには戻れないか…

プラグインの概要

今回作成したプラグインは下記の機能を有します。

プラグインの機能一覧

  • 投稿タイプ毎にレイアウト指定が可能です
  • 記事毎でもレイアウト指定が可能です
  • 幅や余白の指定が可能です。
  • ウィンドウ幅が狭いときにサイドバーを下に回り込ませるか消すかが指定可能です。
  • 3カラム選択時かつウィンドウ幅が狭いときに2カラムレイアウトを生成するか否かが指定可能です。
  • ウィンドウ幅が狭いときでもヘッダートップにキャッチコピーを表示させるか否かを設定可能です。( Lightning Pro のみ )

プラグインの使用方法

それでは、プラグインの使用方法を解説します。設定画面は3つに別れています。

投稿タイプ毎のレイアウト指定方法

Lightning にもともとある設定パネルを利用しています。

外観 > カスタマイズ > Lightning レイアウト設定から各投稿タイプのレイアウトを指定できます。

サイドバーの左右も、もとからある設定項目で制御可能です。

記事毎のレイアウト指定方法

Lightning にもともとある設定パネルを利用しています。

記事編集画面 > Lightning デザイン設定 >レイアウト設定から指定可能です。

その他の設定項目

外観 > カスタマイズ > Lightning Three Column Unit から設定可能です。

メインセクションの幅

メインセクションの幅を設定できます。数字を入力してください。単位は px として処理されます。デフォルトは 680 に設定されています。

サイドバーの幅

サイドバーの幅を一括で設定できます。数字を入力してください。単位は px として処理されます。デフォルトは 320 に設定されています。

カラム間のマージン

メインセクションやサイドバーといった部分のマージン間隔の幅を設定できます。数字を入力してください。単位は px として処理されます。デフォルトは 40 に設定されています。

コンテナの外の最低マージンの合計(px)

コンテナの外の最低マージン幅を設定できます。数字を入力してください。単位は px として処理されます。デフォルトは 40 に設定されています。

下記の様なコードを出力させたい場合は 40px を指定ください。

@media ( min-width: 1080px) {
	.container {
		width: 1040px;
		max-width: 1040px;
	}
}

3カラムレイアウトを選択時かつウィンドウ幅を狭めたときに2カラムレイアウトを生成する

3カラムレイアウトを選択したとき、ブラウザのウィンドウ幅を狭めたときに3カラム→2カラム→1カラムと変化させるか3カラム→1カラムと変化させるかを選択できます。デフォルトは「無効」(3カラム→1カラム)です。

主サイドバーの制御

ウィンドウ幅が狭いときに元からあるサイドバーを非表示にするか下に回り込ませるかを選択できます。デフォルトは「下に回り込ませる」です。

副サイドバーの制御

ウィンドウ幅が狭いときにこのプラグインで追加したサイドバーを非表示にするか下に回り込ませるかを選択できます。デフォルトは「非表示にする」です。

ウィンドウ幅が狭いときでもヘッダー上部のキャッチコピーを表示する

ウィンドウ幅が狭いときでもヘッダー上部のキャッチコピーを表示するか否かを指定できます。デフォルトは「非表示」です。

ヘッダートップは無料版 Lightning にはもともとないので、この機能は Lightning Pro 限定の機能となります。

注意事項

このプラグインを導入すると下記機能は無効になります。

このプラグインを有効化すると下記機能が無効化されます。

  • 外観 > カスタマイズ > Lightning レイアウト設定 の「サイドバー固定設定」の設定項目
  • 上記オプションは「サイドバーは固定しない」に固定されます。

プラグインの入手先

プラグインは下記から入手可能です。ただし、下記注意事項を読んでからにしてください。

注意事項

  • このプラグインは私個人が趣味で作成したものです。株式会社ベクトルは一切関係ありません。
  • 不具合修正はするかもしれませんが、導入は自己責任かつ原則ノーサポートということでお願いします。
  • 場合によっては場所を変えて月額制での有償サポートをする可能性はあります。

以上に同意できる方の中で興味がある方は下記よりダウンロードしてみてください。

プラグインの入手先はこちら

GitHub リポジトリはこちら

Github のリポジトリでも公開しています:Lightning Three Column Unit

ソースコードに興味がある方はぜひ見てみてください。

まとめ

この記事の内容をまとめると下記のようになります。

  • 3カラム化を実現しようと思ったら CSS が複雑怪奇だったのでなんとなくプラグイン化した
  • せっかくプラグインを作ったので紹介しつつ公開することにした。
  • 最近暇とはなかなか言えない状況なので、原則ノーサポートということにした。

余談

Vektor WordPress Solution Advent Calendar 2020 の19日目と20日目は現時点でまだ空いてます。

気が向いたら何か記事を書くかもしれません。その時はお楽しみに。

投稿者プロフィール

DRILL LANCER
コメント

コメントを残す

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

コメントは日本語で入力してください。(スパム対策)

CAPTCHA