Lightning3カラム化計画 その2 ~プラグイン編~
前回の記事で3カラムの実装方法を書きました。
ウィジェットエリアを追加するのはそこそこ簡単にできるのですが、レイアウトを整えるのに結構苦労することが判明しました。
と、いうわけで、いちいち CSS を毎回書くのも面倒ということで、今回はプラグインを作りましたのでそれを紹介したいと思います。
- 1. プラグインの概要
- 2. プラグインの使用方法
- 2.1. 投稿タイプ毎のレイアウト指定方法
- 2.2. 記事毎のレイアウト指定方法
- 2.3. その他の設定項目
- 2.3.1. メインセクションの幅
- 2.3.2. サイドバーの幅
- 2.3.3. カラム間のマージン
- 2.3.4. コンテナの外の最低マージンの合計(px)
- 2.3.5. 3カラムレイアウトを選択時かつウィンドウ幅を狭めたときに2カラムレイアウトを生成する
- 2.3.6. 主サイドバーの制御
- 2.3.7. 副サイドバーの制御
- 2.3.8. ウィンドウ幅が狭いときでもヘッダー上部のキャッチコピーを表示する
- 3. 注意事項
- 4. プラグインの入手先
- 5. まとめ
- 6. 余談
プラグインの概要
今回作成したプラグインは下記の機能を有します。
プラグインの使用方法
それでは、プラグインの使用方法を解説します。設定画面は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 限定の機能となります。
注意事項
このプラグインを導入すると下記機能は無効になります。
プラグインの入手先
プラグインは下記から入手可能です。ただし、下記注意事項を読んでからにしてください。
まとめ
この記事の内容をまとめると下記のようになります。
- 3カラム化を実現しようと思ったら CSS が複雑怪奇だったのでなんとなくプラグイン化した
- せっかくプラグインを作ったので紹介しつつ公開することにした。
- 最近暇とはなかなか言えない状況なので、原則ノーサポートということにした。
余談
Vektor WordPress Solution Advent Calendar 2020 の19日目と20日目は現時点でまだ空いてます。
気が向いたら何か記事を書くかもしれません。その時はお楽しみに。
投稿者プロフィール
最新の投稿
Lightning2023年12月20日Lightning G3 Three Column Unit をアップデートした話
Lightning2021年12月15日Lightning G3 のスキンを自作してみた話
Lightning2021年12月10日Lightning Three Column Unit を G3 対応した話
Lightning2020年12月18日Lightning3カラム化計画 その2 ~プラグイン編~