WordPressでランディングページを作ろう Customizrを横幅いっぱいにする

ランディングページを作ろう!と思い立ち、使い慣れたWordPressで作る方法はないかと調べていました。そうしたら、グリッドデザインシステムや Flexboxで作ると楽そうだというところに行き着きました。ふたつとも未知の領域...。作りながら勉強していきたいと思います。

今作っているサイトのテーマはCustomizr Pro。まずは子テーマを作ることが必要になってきます。作り方は他のサイトにたくさん載っているので調べてください。

次に、ページを横幅100%にすることが必要になってきます。今回はここを説明します。

- スポンサードリンク -

参考にしたページはこちら

full width page template

https://wordpress.org/support/topic/full-width-page-template-13/

Learning to create full width page template in WordPress

https://www.krishaweb.com/blog/learning-to-create-full-width-page-template-in-wordpress

ほとんど翻訳になりますがご覧ください。

1,cusotmizr-proのルートディレクトリにあるcustom-page.phpをコピーし、full-width.phpにリネームしたものを用意します。

2,上記ファイルのTemplate Nameの欄をFull-Widthといった名前に変えます。

3,PHPのcontainerの箇所を見つけ、"2"とします ※余白を取るために使われているクラス

4,customizr-pro-childに上記のファイルをアップロードします。

5,customizr-pro-child内のstyle.cssに以下のコードを追記します。


.page-template-full-width-php #tc-page-wrap {
	width: 100%;
	overflow-x: hidden;
	}

.page-template-full-width-php .container2 {
	width: 100%;
	}
.page-template-full-width-php #content {
	width: 99%;
	margin: 0 auto;
	padding: 0;
	display: inline-block;
	}

.page-template-full-width-php .row {
	margin-left: 0;
	margin-right: -30px;
	}

.page-template-full-width-php {
	overflow-x: hidden;
	}

6,あとは固定ページを作るときに、左下にあるテンプレートのプルダウンからFull-Widthを選ベばOK。

一応これで形にはなるのですが、パンくずリストやタイトルの処理をどうするかという問題が残っています。コードも自信がないので過不足があったら教えてください。

- スポンサードリンク -