WordPressで全幅ページを作成して、コンテンツを画面全体に広げたいですか？
ほとんどのWordPressテーマには、すでに全幅ページテンプレートがビルトインされています。しかし、あなたのテーマにテンプレートがない場合は、簡単に追加することができます。
この投稿では、WordPressで全幅ページを簡単に作成する方法と、コードなしで完全カスタマイザーのページレイアウトを作成する方法を紹介する。
ここでは、このガイドのメソッドを簡単に紹介する：
- Method 1. Use Your Theme’s Full Width Template
- Method 2. Create Full Width Page Template Using a Plugin
- Method 3: Design a Full Width Page in WordPress Using a Page Builder Plugin
- Method 4. Create Completely Custom Full-Width Pages with SeedProd
- Method 5: Create Full Width WordPress Page Template Manually
方法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.
Susie
I have installed and activated the plug in but it still does not allow me to choose a template on the page attributes section. Please help
WPBeginner Support
If the option is not available with your specific theme you would want to reach out to the plugin’s support and they can look into adding the ability for that theme!
管理者
Jake Brodie
Many, many, many thanks for the advice but also for the expert way you structured and presented it. I used Method 2 to add a fullwidth page option to my _s starter Theme after spending a week trying to find a way to remove Post headings on my static pages.
WPBeginner Support
You’re welcome, glad our article could be helpful
管理者
Charles Cooper
Used your method 2 with ‘Primer’ theme. Worked a treat and hopefully, I’m learning.
Appreciate the time and effort you have given to provide these solutions – thank you.
WPBeginner Support
You’re welcome, glad our article was helpful
管理者
Muhammad Awais
Thank you very much
WPBeginner Support
You’re welcome
管理者
Matthew Gordon
I too don’t have “Template” in the Page Attributes section. I have followed method 2 to create a full width template but the “Template” field still doesn’t appear.
WPBeginner Support
You may want to try swapping themes to see if this could be due to your current theme
管理者
Carol Ragsdale
Hello – I am using Twenty-Sixteen 2019… there does not appear to be the function for full page width in Page Attributes.. all it has is Parent and Order. Can you help me find where I can change the page width for this theme? Thanks for any help.
-Carol Ragsdale
WPBeginner Support
If there is no built-in full width template then you would want to use either of the other two methods in this article to set up a full width page
管理者
Bob
THIS is what worked, I only did this and got rid of the -template-full-width junk and it worked on 2016theme:
.page-template-full-width .content-area {
width: 100%;
margin: 0px;
border: 0px;
padding: 0px;
}
.page-template-full-width .site {
margin:0px;
}
WPBeginner Support
While this can work, your sidebar could either be getting pushed to the side of your content or set beneath your content if you don’t add a new page template.
管理者
Masoom
How can I increase only the width of the top banner in WPBakery Page Builder? It is possible?
Dush
Thanks. 1st one worked but now in WP is appearing as
Pages » Add New page.
Now go to down ‘LAYOUT’ > Custom (select radio button) > One Column – Wide (1st option by default it take sidebar option)
Note: Page attribute is now separate widget as appearing on my system. Thanks.
Lance Watkins
Why are your blogs so narrow in width?
I view them on a desktop PC’s wide-screen, where their width is less than half the screen’s width. Most other websites I view have full-width text stories.
Does your narrow format somehow help with SEO or something?
Laura
Thank you, I was looking at how to do this and it was very simple even a two-year-old could figure that out. I have a disability when it comes to reading and not seeing pictures like you had put up there.. that was very very handy for folks like myself.
Thank you
Laura.
WPBeginner Support
Hi Laura,
Thank you for kind words and feedback. It means a lot and we really appreciate it.
管理者
Fer
Thank you very very much!!!
saju
How to create a full width template for category page with widget support
Bikram
I have created a full-width template by removing the sidebar like you said. But it doesn’t work on custom-post-type.
The CSS works for pages but when the template is applied to CPT, the post get back to default page size, without a sidebar.
What should I do, now?
Alex
This simply not work for twenty fourteen
Amit
thanks guys its realy work
Zi
I tried the manual way but when testing I get an error 500? Any possibility as to why? I followed instructions to the T…
Laura
Try the second one that’s the one I did. It was simple and I got no 500 errors on it.
Andrew Wilkerson
Thanks for this. Although I don’t need to change my theme at the moment I found it interesting to see how it all works. I think mine is full width then I’m using Genesis columns?
and the /half-first tags or whatever. Still learning all this. Love reading wpbeginner and your videos!
Also good to see how beaver builder does it.