WordPressで全幅ページを作成する方法（初心者ガイド）

WordPressで全幅ページを作成して、コンテンツを画面全体に広げたいですか？

ほとんどのWordPressテーマには、すでに全幅ページテンプレートがビルトインされています。しかし、あなたのテーマにテンプレートがない場合は、簡単に追加することができます。

この投稿では、WordPressで全幅ページを簡単に作成する方法と、コードなしで完全カスタマイザーのページレイアウトを作成する方法を紹介する。

ここでは、このガイドのメソッドを簡単に紹介する：

方法1.テーマの全幅テンプレートを使う

もしあなたのテーマがすでに全幅ページテンプレートを備えているなら、それを使うのがベストだ。ほとんどすべての優れたWordPressテーマがそうです。

無料のWordPressテーマでも全幅のテンプレートが付属していることが多いので、すでにお持ちの可能性が高いです。

まず、WordPressダッシュボードのページ ” 新規追加からページを編集するか、新規ページを作成します。

コンテンツエディターの右側の’ドキュメント’ペインで、’ページ属性’セクションの横の下向き矢印をクリックして、’ページ属性’セクションを展開する必要があります。すると、「テンプレート」のドロップダウンが表示されます。

あなたのテーマに全幅テンプレートがある場合、それはここにリストされます。全幅テンプレート」というような名前になっているはずです：

ここに表示されるオプションはテーマによって異なります。あなたのテーマに全幅ページのテンプレートがなくても心配しないでください。

以下の方法で簡単に追加できる。

方法2.プラグインを使って全幅ページのテンプレートを作成する。

この方法は最も簡単で、すべてのWordPressテーマとページビルダー・プラグインで動作する。

まず、Fullwidth Templatesプラグインをインストールして有効化する必要があります。その方法が本当に〜してもよいですか？WordPressプラグインをインストールするための初心者ガイドをご覧ください。

Fullwidth Templatesプラグインは、ページテンプレートに3つの新しいオプションを追加します：

これらのオプション設定は以下の通り：

• FWサイドバーなし：ページからサイドバーを削除しますが、それ以外はそのまま残します。
• FWフル幅：サイドバー、タイトル、コメントするを削除し、レイアウトを全幅に引き伸ばす。
• FW Fullwidth ヘッダー・フッターなし：FW Fullwidthが行うすべてのこと、さらにヘッダーとフッターを削除します。

WordPressのビルトインエディターを使うだけなら、「FW No Sidebar」がベストな選択だろう。

このプラグインを使えば全幅ページのテンプレートを作成できるが、カスタマイザーの設定は限られている。

全幅テンプレートをコードなしでカスタマイズしたい場合は、ページビルダーを使用する必要があります。

方法3：WordPressでページビルダー・プラグインを使って全幅ページをデザインする

あなたのテーマに全幅テンプレートがない場合、これが全幅テンプレートを作成しカスタマイズする最も簡単な方法です。

ドラッグ＆ドロップのインターフェースで、全幅ページを簡単に編集し、サイトのさまざまなページレイアウトを作成できます。

この方法では、WordPressページビルダープラグインが必要です。このチュートリアルでは、Thrive Architectを使用します。

ドラッグ＆ドロップ式のページビルダー・プラグインの中でも最も優れたもののひとつで、コードを書くことなく簡単にページレイアウトを作成できる。

まず、Thrive Architectプラグインをインストールして有効化します。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

プラグインを有効化したら、WordPressで既存のページを編集するか、新規ページを作成してください。

次に、画面上部の「Launch Thrive Architect」ボタンをクリックします。

次に、作成するページのタイプを選択するよう促されます。通常のページを作成するか、あらかじめビルトインされたランディングページを作成するかを選択できます。

ビルトインページ」オプションをクリックして設定します。

Thrive Architectのランディングページライブラリに移動します。ここから、あなたの全幅ページのベースとして使用する既成テンプレートの1つを選択できます。

お好きなテンプレートをクリックして選択してください。

スマートランディングページセット」からテンプレートを選んだ場合、そのスタイルであらかじめデザインされた数多くのページから選ぶことができる。

このチュートリアルでは、「セールスページ」テンプレートをクリックして選択します。そして、「テンプレートを適用」ボタンを押すと、ページビルダーがテンプレートを読み込みます。

Thrive Architectエディターに入ったら、画像、背景、テキストなど変更したい要素を編集することができます。

ページ上の要素を編集するには、その要素をクリックすればよい。今回は、このページブロックの背景をクリックしました。すると、左側のメニューにすべてのカスタマイズオプションが表示されます：

ここでスイッチを切り替えて、コンテンツが画面幅全体をカバーするようにすることができます。

左側のメニューから、タイポグラフィ、フォントサイズ、レイアウト、背景スタイル、枠線、シャドウなどをカスタマイズすることもできます。

また、いつでも新しい要素をレイアウトに追加することができます。Thrive Architectには、ページにドラッグ＆ドロップできる多くの基本ブロックと高度なブロックが付属しています。

編集が終わったら、画面下の「作業を保存」ボタンの横にある矢印（^）ボタンをクリックします。その後、「保存して投稿エディターに戻る」オプションをクリックします。

その後、下書きを保存するか、公開することができます。

公開したら、WordPressブログにアクセスして、完成した全幅ページを見ることができる。

方法4.SeedProdで完全カスタムの全幅ページを作る

Thrive Architectはすてきなソリューションですが、サイトページにさらに強力なカスタマイズオプションを与えるプラグインを探しているかもしれません。

ヘッダー、フッター、ページのすべてのエリアをカスタマイズしたい、完全にカスタムされたランディングページを作成したい場合は、SeedProdを使用することをお勧めします。

WordPressのための最高のランディングページプラグインであり、非常に使いやすいドラッグ＆ドロップページビルダーのインターフェースを持っています。

まず、SeedProdプラグインをインストールし、有効化する必要があります。有効化した後、SeedProd ” ページから新しいランディングページを追加してください。

全幅オプションを含む300以上のビルトインテンプレートからお選びいただけます。または、全幅カスタムのランディングページを一から作成することもできます。

SeedProdの最も優れた点は、非常に高速で、購読者管理、メールマーケティングサービスの統合、高度なWooCommerceブロックなどのビルトイン変換機能を備えていることです。

詳しい手順については、WordPressでランディングページを作成する方法をご覧ください。

ランディングページビルダーの他に、SeedProdはまた、完全なドラッグアンドドロップテーマビルダーを提供しています。これは、コードを編集することなく、全幅カスタムのWordPressテーマを簡単に作成できることを意味します。

SeedProd ” Theme Builderにアクセスするだけで、新しいWordPressテーマを作成することができます。ここでも、カスタマイズ可能なテーマテンプレートから選ぶことも、テーマの各部分をゼロからデザインすることもできます。

ポイント＆クリックするだけで、テーマの各部分を編集できる。例えば、新しい背景画像を追加したり、位置やセクションの幅を全画面に設定することができます。

SeedProdテーマビルダーを使用すると、ページ、投稿、アーカイブ、ヘッダー、フッター、サイドバー、WooCommerceページなど、WordPressサイトのあらゆる部分をカスタマイズすることができます。

ステップバイステップの手順については、WordPressカスタムテーマを簡単に作成する方法についてのチュートリアルを参照してください。

方法5：手動で全幅のWordPressページテンプレートを作成する

この方法は、上記の方法がどれもうまくいかない場合の最終手段です。WordPressテーマファイルを編集する必要があります。PHP、CSS、HTMLの基本的な知識が必要です。

コピー＆ペーストをしたことがない場合は、WordPressでコードをコピー＆ペーストする方法をご覧ください。

先に進む前に、WordPressのバックアップを作成するか、少なくとも現在のテーマのバックアップを作成することをお勧めします。そうすることで、何か問題が発生したときに簡単にサイトを復元することができます。

次に、メモ帳のようなプレーンテキストエディターを開き、空白のファイルに以下のコードを貼り付ける：

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

このファイルを全幅.phpとしてコンピューターに保存します。.txtファイルとして保存するのを避けるため、’Save as type’を’All Files’に変更する必要があるかもしれません：

このコードは、単にテンプレートファイル名を定義し、WordPressにヘッダーテンプレートの取得を依頼する。

次に、コードのコンテンツ部分が必要です。FTPクライアント（またはcPanelのWordPressホスティングサービスファイルマネージャー）を使用してサイトに接続し、/wp-content/themes/your-theme-folder/に移動します。

次に、page.phpファイルを探します。これはあなたのテーマのデフォルトページテンプレートファイルです。

そのファイルを開き、get_header()行以降をすべてコピー＆ペーストして、コンピューター上の全幅.phpファイルに貼り付けます。

full-width.phpファイルで、次の行を見つけて削除してください：

<?php get_sidebar(); ?>

この行はサイドバーを取得し、テーマに表示します。これを削除すると、全幅テンプレートを使用しているときにテーマがサイドバーを表示しなくなります。

あなたのテーマでは、この行が複数回表示されるかもしれません。あなたのテーマに複数のサイドバー（フッターウィジェットエリアもサイドバーと呼ばれる）がある場合、それぞれのサイドバーがコード内で一度だけ参照されます。どのサイドバーを残すか決めてください。

もしあなたのテーマがページにサイドバーを表示しないのであれば、ファイル内にこのコードが見つからないかもしれません。

変更後の全幅.phpのコードは以下のようになります。テーマによってコードが若干異なるかもしれません。

<?php
/*
*
Template Name: Full Width
*/
get_header(); ?>

	<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<?php
		// Start the loop.
		while ( have_posts() ) :
			the_post();

			// Include the page content template.
			get_template_part( 'template-parts/content', 'page' );

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) {
				comments_template();
			}

			// End of the loop.
		endwhile;
		?>

	</main><!-- .site-main -->

	<?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_footer(); ?>

次に、FTPクライアントを使用して全幅.phpファイルをテーマフォルダーにアップロードします。

これで全幅カスタムページテンプレートの作成とテーマへのアップロードが完了しました。次のステップは、このテンプレートを使って全幅ページを作成することです。

WordPressの管理エリアに移動し、WordPressブロックエディターでページを編集または新規作成します。

右側の「ドキュメント」ペインで「ページ属性」を探し、必要に応じて下向き矢印をクリックしてそのセクションを展開します。テンプレート’ドロップダウンが表示されますので、そこで新規’全幅’テンプレートを選択してください：

テンプレートを選択したら、ページを公開するか更新する。

ページを表示すると、サイドバーが消え、ページが個別カラムとして表示されていることがわかります。まだ全幅ではないかもしれませんが、これで別のスタイルにする準備ができました。

コンテンツエリアを定義するためにテーマが使用しているCSSクラスを見つけるには、Inspectツールを使用する必要があります。

その後、CSSを使って幅を100％に調整することができます。CSSコードは、外観 ” カスタマイズから画面下の「追加CSS」をクリックして追加できます。

テストサイトでは以下のCSSコードを使用した：

.page-template-full-width .content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.page-template-full-width .site {
margin:0px;
}

Twenty Sixteenテーマを使用したデモサイトでは、このように表示されました。

手動の方法を使い、さらにカスタマイザーを加えたい場合は、ポイント＆クリックエディターでCSSスタイルを変更できるCSS Heroプラグインを使うこともできる。

しかし、ほとんどのユーザーには、独自のテーマの全幅テンプレートを使用するか、プラグインを使用して作成することをお勧めします。

この投稿がWordPressで全幅ページを簡単に作成する方法を学ぶのにお役に立てば幸いです。また、サイトを成長させるのに最適なWordPressプラグインのガイドや、コースを作成・販売するのに最適なWordPress LMSプラグインの比較もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.