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

早速ですが、このブログでは、3カラムレイアウトを実装しています。

なぜかというと、私は3カラムレイアウトに慣れきってしまって今更2カラムレイアウトには戻れないからです。

また、最近、3カラムレイアウトを実現するためのフックを仕込んでもらいました。

なので、それを活用しない手はないということで今回の記事を書くことにしました。

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

今回の記事では CSS と PHP をある程度扱える方を想定した記事となります。

自信がないという方はこの記事を見る前に下記記事を読むことをおすすめします。

これらの記事を理解できればこの記事は理解できると思われます。

今回行う作業について

今回は下記工程で作業を行います。

今回行う手順一覧

  • Lightning / Lightning Pro を最新版に更新
  • 新たなサイドバーとして使うウィジェットエリアを作成 ( PHP )
  • 作ったウィジェットエリアをアクションフックを使って挿入 ( PHP )
  • CSS を使ってレイアウトを調整 ( CSS )

注意事項

今回のカスタマイズはサイドバーの固定機能は効かないどころか不具合の原因となりますので、サイドバーの固定は OFF にしてください。

作業工程その1:テーマを最新版に更新

今回は2020年5月か6月頃にごねにごねて追加してもらったアクションフックを使用しているので、それ以前のバージョンだとうまく行かない可能性があります。古いバージョンの Lightning Pro をお使いの方でこの記事に興味がある方はこの際更新してしまいましょう。

Lightning Pro の更新はこちらから

更新ライセンスのほうが若干安いですが、何か起こったときのデメリットが大きいので私は通常版での更新をおすすめします。

・・・というわけでリンク先は通常版となっております。

Vektor WordPress Solutions

作業工程その2:ウィジェットエリアの作成

まず、ウィジェットエリアを作ります。

この工程は子テーマの functions.php かプラグインの PHP に下記コードをコピー&ペーストすれば完了です。

function my_lightning_register_widget_area() {
	register_sidebar(
		array(
			'name'          => '追加サイドバー',
			'id'            => 'lightning-addtional-sidebar',
			'description'   => '3カラムレイアウトのみ表示',
			'before_widget' => '<aside class="widget %2$s" id="%1$s">',
			'after_widget'  => '</aside>',
			'before_title'  => '<h1 class="widget-title subSection-title">',
			'after_title'   => '</h1>',
		)
	);
}
add_action( 'init', 'my_lightning_register_widget_area' );

詳しくは register_sidebar を御覧ください。

作業工程その3:作成したウィジェットエリアを挿入

先程作成したウィジェットエリアを挿入します。

今回は3カラムレイアウトを実現するという目的があるため挿入位置は lightning_additional_section となります。

この工程も子テーマの functions.php かプラグインの PHP に下記コードをコピー&ペーストすれば完了です。

function my_lightning_add_sidebar() {
	echo '<div class="col subSection addSection addSection-col-three baseSection addSection-base-on">';
		if ( is_active_sidebar( 'lightning-addtional-sidebar' ) ) {
			dynamic_sidebar( 'lightning-addtional-sidebar' );
		}
	echo '</div>';
}
add_action( 'lightning_additional_section', 'my_lightning_add_sidebar' );

2行目の addSection-base-on の部分はセクションベースが不要ならつけなくても OK です、

作業工程その4:CSSでレイアウトを調整

3カラムレイアウトは深く考えるとかなり複雑になります。

3カラムレイアウトを構築する際に考えること

  • コンテンツ部分はどこに配置するか(左端・中央・右端)
  • ウィンドウ幅が狭いときのサイドバーの処理をどうするか(下に回す・消す)
  • ウィンドウサイズが中途半端なときに2カラムレイアウトを生成するか否か
  • メインのサイドバーはどちらのサイドバーに割り当てるか

というわけで全部書こうとすればキリがないので今回はこのサイトで採用している CSS のコードを掲載します。

このサイトでは下記設計思想のもとで作られています。

このサイトについて

  • コンテンツ部分は中央に配置
  • ウィンドウ幅が狭いときはメインのサイドバーは下に回し、追加したサイドバーは消す
  • ウィンドウサイズが中途半端なときに2カラムレイアウトを生成する
  • メインのサイドバーは左側のサイドバーに割当
  • Lightning Skin Variety を適用中
  • コンテンツエリアの幅は 680px
  • サイドバーの幅は 320 px
  • 各カラムの間隔は 40px
  • コンテナ( .container )の外側に合計 40px の最低マージンを確保

上記を満たすコードは下記のようになります。

.container,
.siteHeadContainer.container .navbar-header,
.gMenu_outer nav,
.header_scrolled .gMenu_outer nav {
	padding-left: 0;
	padding-right: 0;
}

.siteContent > .container > .row,
.siteContent.siteContent-base-on > .container > .row {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-left: 0;
	margin-right: 0;
}

.sideSection,
.mainSection,
.addSection {
	flex-basis: auto;
	float: none;
	margin-left: 0;
	margin-right: 0;
}

@media (min-width: 1200px) {
	.addSection-base-on {
		padding: 2.4rem 2rem;
	}
}

@media (min-width: 992px) {
	.addSection-base-on {
		padding: 2.4rem 1.7rem;
	}
}

@media (min-width: 768px) {
	.addSection-base-on {
		padding: 2rem;
	}
}

@media (min-width: 576px) {
	.addSection-base-on {
		padding: 1.7rem;
	}
}

.addSection-base-on {
	background-color: #fff;
	padding: 1.4rem;
}

.siteHeader .headerTop .container {
	padding-left: 0;
	padding-right: 0;
}

@media ( max-width: 1079px) {
	.headerTop {
		display: block;
	}
	.headerTop .headerTop_description {
		text-align: center;
	}
	.headerTop nav {
		display: none;
	}
	.headerTop .headerTop_contactBtn {
		display: none;
	}
}

@media ( max-width: 1079px) {
	body.device-pc .vk-mobile-nav-menu-btn {
		display: block;
	}
	.siteHeader_logo {
		font-size: 1.6rem;
		float: inherit;
		text-align: center;
		display: block;
		margin: 0 auto;
		padding: 0 45px;
	}
	.siteHeader_logo.navbar-brand {
		float: none;
		height: auto;
	}
	.navbar-header {
		float: none;
	}
	.siteHeadContainer.container .navbar-header {
		padding: 0;
	}
	.gMenu_outer {
		display: none;
	}
}

@media ( max-width: 1079px) {
	.container,
	.siteHeadContainer.container .navbar-header,
	.gMenu_outer nav,
	.header_scrolled .gMenu_outer nav {
		width: calc( 100% - 40px);
		max-width: calc( 100% - 40px);
	}
	.mainSection,
	.sideSection,
	.addSection {
		width: 100%;
		max-width: 100%;
	}
	.addSection {
		display: none;
	}
}

@media ( min-width: 1080px) and ( max-width: 1439px) {
	.container,
	.siteHeadContainer.container .navbar-header,
	.gMenu_outer nav,
	.header_scrolled .gMenu_outer nav {
		width: 1040px;
		max-width: 1040px;
	}
	.mainSection {
		width: 680px;
		max-width: 680px;
		margin-right: 40px;
		order: 0;
	}
	.sideSection {
		width: 320px;
		max-width: 320px;
		order: 1;
	}
	.addSection {
		display: none;
	}
}

@media ( min-width: 1440px) and ( max-width: 9999px) {
	.container,
	.siteHeadContainer.container .navbar-header,
	.gMenu_outer nav,
	.header_scrolled .gMenu_outer nav {
		width: 1400px;
		max-width: 1400px;
	}
	.mainSection {
		width: 680px;
		max-width: 680px;
		margin-left: 40px;
		margin-right: 40px;
		order: 1;
	}
	.sideSection {
		width: 320px;
		max-width: 320px;
		order: 2;
	}
	.addSection {
		width: 320px;
		max-width: 320px;
		order: 0;
		display: block;
	}
}

解説なようなもの

.container,
.siteHeadContainer.container .navbar-header,
.gMenu_outer nav,
.header_scrolled .gMenu_outer nav {
	padding-left: 0;
	padding-right: 0;
}

.siteContent > .container > .row,
.siteContent.siteContent-base-on > .container > .row {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-left: 0;
	margin-right: 0;
}

.sideSection,
.mainSection,
.addSection {
	flex-basis: auto;
	float: none;
	margin-left: 0;
	margin-right: 0;
}

この部分ではレイアウトを Float ベースから Flexbox ベースに切り替えています。

あとは Bootstrap 等諸々の使用に合わせて余白等を調整しています。

@media (min-width: 1200px) {
	.addSection-base-on {
		padding: 2.4rem 2rem;
	}
}

@media (min-width: 992px) {
	.addSection-base-on {
		padding: 2.4rem 1.7rem;
	}
}

@media (min-width: 768px) {
	.addSection-base-on {
		padding: 2rem;
	}
}

@media (min-width: 576px) {
	.addSection-base-on {
		padding: 1.7rem;
	}
}

.addSection-base-on {
	background-color: #fff;
	padding: 1.4rem;
}

この部分で追加したサイドバーにセクションベースを適用しています。

.siteHeader .headerTop .container {
	padding-left: 0;
	padding-right: 0;
}

@media ( max-width: 1079px) {
	.headerTop {
		display: block;
	}
	.headerTop .headerTop_description {
		text-align: center;
	}
	.headerTop nav {
		display: none;
	}
	.headerTop .headerTop_contactBtn {
		display: none;
	}
}

モバイル時でもキャッチコピーだけでもを表示させたいのでそのためのコードを記述しています。

@media ( max-width: 1079px) {
	body.device-pc .vk-mobile-nav-menu-btn {
		display: block;
	}
	.siteHeader_logo {
		font-size: 1.6rem;
		float: inherit;
		text-align: center;
		display: block;
		margin: 0 auto;
		padding: 0 45px;
	}
	.siteHeader_logo.navbar-brand {
		float: none;
		height: auto;
	}
	.navbar-header {
		float: none;
	}
	.siteHeadContainer.container .navbar-header {
		padding: 0;
	}
	.gMenu_outer {
		display: none;
	}
}

メディアクエリを書き換えているのでヘッダー部分にも調整を入れています。

@media ( max-width: 1079px) {
	.container,
	.siteHeadContainer.container .navbar-header,
	.gMenu_outer nav,
	.header_scrolled .gMenu_outer nav {
		width: calc( 100% - 40px);
		max-width: calc( 100% - 40px);
	}
	.mainSection,
	.sideSection,
	.addSection {
		width: 100%;
		max-width: 100%;
	}
	.addSection {
		display: none;
	}
}

ウィンドウ幅が 1079px 以下の場合は1カラムレイアウトになるようにしています。

メインのサイドバーはメインカラムの下に配置し、追加したサイドバーは表示しないようにしています。

.siteHeadContainer.container .navbar-header,
.gMenu_outer nav

上記の部分は Lightning Fort / Pale / Variety でコンテナ幅を変えてもヘッダーの幅が変わらないので一緒に変えています。

それ以外のスキンでは不要なので削除してください。.container の後ろのカンマも不要です。

@media ( min-width: 1080px) and ( max-width: 1439px) {
	.container,
	.siteHeadContainer.container .navbar-header,
	.gMenu_outer nav,
	.header_scrolled .gMenu_outer nav {
		width: 1040px;
		max-width: 1040px;
	}
	.mainSection {
		width: 680px;
		max-width: 680px;
		margin-right: 40px;
		order: 0;
	}
	.sideSection {
		width: 320px;
		max-width: 320px;
		order: 1;
	}
	.addSection {
		display: none;
	}
}

ウィンドウの幅が 1080px 以上 1439px 以下のときは2カラムレイアウトになります。

サイドバーが左側に表示され、その右にコンテンツエリアが表示されます。

Flexbox レイアウトを採用している場合、 order を使うことで簡単に要素の順番を入れ替える事ができます。

@media ( min-width: 1440px) and ( max-width: 9999px) {
	.container,
	.siteHeadContainer.container .navbar-header,
	.gMenu_outer nav,
	.header_scrolled .gMenu_outer nav {
		width: 1400px;
		max-width: 1400px;
	}
	.mainSection {
		width: 680px;
		max-width: 680px;
		margin-left: 40px;
		margin-right: 40px;
		order: 1;
	}
	.sideSection {
		width: 320px;
		max-width: 320px;
		order: 2;
	}
	.addSection {
		width: 320px;
		max-width: 320px;
		order: 0;
		display: block;
	}
}

ウィンドウ幅が 1440px 以上の場合は3カラムレイアウトを生成します。

他の CSS のメディアクエリによる干渉を回避するため max-width: 9999px も条件に追加しています。

まとめ

今回のまとめは下記のようになります。

今回のまとめ

  • どうしても3カラムレイアウトを実現したかったのでテーマのカスタマイズで対応した。
  • 3カラムレイアウトの実装はウィジェットエリアの作成&設置とCSSでの調整をすれば可能。
  • 3カラムレイアウトはかなり複雑なので、このサイト用の CSS を紹介した。
  • Flexbox は order で簡単に順番を入れ替えられるので楽。

そんなところです。

次回予告

さすがに自力で実装するのは結構だるかったのでこの際プラグイン化してみました。

というわけで、次回はそのプラグインについて紹介していきたいと思います。

コメントを残す

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

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

CAPTCHA