WordPressでカスタムページを作成したいですか?
カスタムページでは、他のサイトとは異なるレイアウトを使用することができます。多くのWordPressサイトでは、セールスページ、ランディングページ、ウェビナーページなどにカスタムページレイアウトを使用しています。
この投稿では、WordPressでカスタムページを簡単に作成する方法を紹介します。
なぜWordPressでカスタムページを作成するのか?
新しいページを作成するたびに、WordPressテーマはテンプレートファイルを使ってそのページの見た目をコントロールします。
このpage.phpテンプレートは、WordPressで作成するすべての個別ページに影響します。しかし、個別ページで毎回同じデザインを使いたいとは思わないでしょう。
ランディングページは、大きなヒーロー画像や行動喚起(CTA)など、通常のページとは異なるコンテンツを持つことがよくあります。つまり、ランディングページは他のサイトとは全く異なる印象を与えることが多いのです。
しかし、標準のページテンプレートを使ってユニークなデザインを作ろうとすると、多くの時間がかかります。また、page.phpテンプレートに制限され、思い通りのデザインができないこともあります。そのため、良い結果を得ることが難しくなります。例えば、セールスページを作成する場合、ページのデザインが悪いためにコンバージョンがあまり得られないかもしれません。
それでは、WordPressで思い通りのデザイン、レイアウト、コンテンツを持つカスタムページを作成する方法を見ていきましょう。以下のクイックリンクから、お好きな方法にジャンプしてください。
- Method 1. How to Create a Custom Page in WordPress Using the Block Editor (No Plugin Required)
- Method 2. How to Create a Custom Page Using the Full-Site Editor (Block-Based Themes Only)
- Method 3. Create a Custom Page in WordPress using SeedProd (Recommended)
- Method 4. Using Thrive Architect to Create a Custom Page in WordPress
方法1.WordPressでブロックエディターを使ってカスタムページを作成する方法(プラグイン必須なし)
ブロックエディターを使えば、すでに使い慣れたツールを使って簡単に独自のテンプレートをデザインできる。
複数のページで同じデザインを再利用するつもりなら、同じテンプレートを適用するだけなので、これは良い選択です。完全にユニークなデザインを作成したい場合、別のオプションとして、通常通りページを作成し、フルサイトエディターを使ってレイアウトを編集する方法があります。
ただ、これらの方法はThemeIsle Hestia ProやTwenty Twenty-Threeのようなブロックベースのテーマでしか使えないことに注意してください。ブロックベースのテーマを持っていない場合は、代わりにページビルダーを使用することをお勧めします。
まず、任意のページまたは投稿を開きます。次に、右側のメニューから「ページ」タブを選択し、「テンプレート」の横のテキストをクリックします。
表示されるオプションはWordPressテーマによって異なりますが、テキストには通常「ページ」「デフォルトテンプレート」などが表示されます。
表示されたポップアップで、「Add Template」アイコンをクリックします。
表示されるポップアップで、テンプレートの名前を入力し、「作成」をクリックします。
この名前は参考のためなので、好きなものを使ってください。
WordPressのコンテンツエディターと同様の機能を持つテンプレートエディターが起動します。
カスタムページデザインにブロックを追加するには、青い「+」ボタンをクリックするだけです。ドラッグ&ドロップでブロックを追加できます。
WordPressでおなじみの投稿編集ツールを使って、ブロックにコンテンツを追加したり、フォーマットを変更したりすることができます。例えば、「見出し」ブロックにテキストタイプを入力したり、太字フォーマットを適用したり、H2からH3にテキストを変更することができます。
パターンを使ってカスタムページを作成することもできます。パターンとは、イベントのリスト、キャプション付き画像、価格表など、よく一緒に使われるブロックの集まりです。
表示されるパターンはWordPressのテーマによって異なりますが、「パターン」タブをクリックすると、利用可能なパターンを確認できます。
ブロックパターンをレイアウトにドラッグ&ドロップするか、パターンをクリックしてテンプレートの一番下に追加します。テンプレートの見た目に満足したら、「公開する」ボタンをクリックし、「保存する」をクリックします。
このテンプレートを任意のページに適用することができます。エディターでページを開き、「テンプレート」の横のテキストをクリックするだけです。
表示されるポップアップで、先ほど作成したテンプレートを選択します。
これで、他のWordPressページと同じように、ページにコンテンツを追加することができる。
方法2.フルサイトエディターを使ってカスタマイザーページを作成する方法(ブロックベースのテーマのみ)
ブロックベースのテーマを使っている場合、フルサイトエディターを使ってカスタムページを作成することもできます。これにより、カスタムテンプレートを作成することなく、個々のページのレイアウトを変更することができます。
この点を考慮すると、他のページで再利用することのない、完全にユニークなデザインを作成したい場合には、この方法が適している。
ページを作成するには、ページ“ 新規追加 をクリックします。タイトルを入力し、カテゴリーとタグを追加し、アイキャッチ画像をアップロードし、その他の変更を加えることができます。
基本的なページに満足したら、変更を保存し、外観“ エディターに移動します。
初期設定では、フルサイトエディターはテーマのホームテンプレートを表示します。
左側のメニューで『ページ』をクリックする。
WordPressサイトで作成したページがすべて表示されます。
デザイン変更したいページを見つけてクリックするだけ。
WordPressにデザインのプレビューが表示されます。
このテンプレートを編集するには、小さな鉛筆のアイコンをクリックしてください。
フルサイトエディターツールを使ってページのレイアウトを編集できるようになりました。例えば、青い「+」ボタンをクリックして新しいブロックを追加したり、クリックしてカスタマイズしたいブロックを選択することができます。
変更内容に満足したら、「保存」ボタンをクリックします。
さて、あなたのサイトでこのページにアクセスすると、新しいページデザインが実際に表示されます。
方法3. SeedProdを使ってWordPressにカスタムページを作成する(推奨)
以前は、コードを書いてカスタマイザーのページを作成していましたが、これは初心者にはあまり優しいものではありませんでした。HTML、CSS、PHPのコードを間違えると、WordPressの一般的なエラーを引き起こしたり、サイトが完全に壊れてしまうことさえあります。
その点を考慮し、代わりにページビルダーを使用することをお勧めします。
SeedProdはWordPressのための最高のドラッグアンドドロップページビルダーです。350以上のテンプレートが付属しており、コードを書くことなくカスタムページを作成することができます。
より多くのコンバージョンを得るためにカスタムページを使用している場合、SeedProdはすでにコンバージョンを得るために使用している多くの人気のあるサードパーティツールと連動します。これには、トップクラスのメールマーケティングサービス、WooCommerce、Google アナリティクスなどが含まれます。
まず、SeedProdをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
注: SeedProdには無料版もあり、予算に関係なくカスタムページを作成することができます。しかし、このガイドではSeedProd Proを使用します。SeedProd Proはより多くのテンプレートがあり、すべて最高のメールマーケティングサービスと統合されているからです。
プラグインを有効化した後、SeedProdはライセンスキーを要求します。
この情報は、SeedProdサイトの自分のアカウントの下にあります。キーを入力した後、「Verify Key」ボタンをクリックしてください。
カスタムページテンプレートを選ぶ
それができたら、SeedProd ” ランディングページに行き、’新規ランディングページを追加’ボタンをクリックします。
カスタムページのテンプレートを選択できます。
SeedProdのテンプレートは、「リード」、「スクイーズ」、「近日公開」などのキャンペーンタイプ別に整理されています。画面上部のタブをクリックすると、キャンペーンタイプに基づいてテンプレートをフィルターすることができます。
ゼロから始めたい場合は、SeedProdには空白のテンプレートもあります。
デザインを詳しく見るには、テンプレートの上にマウスオーバーし、虫眼鏡アイコンをクリックするだけです。
気に入ったデザインが見つかったら、「このテンプレートを選択」をクリックしてください。画像ではすべて「コースセールスページ」テンプレートを使用していますが、お好きなテンプレートを使用することができます。
次に、カスタムページの名前を入力します。SeedProdはページのタイトルに基づいて自動的にURLを作成しますが、このURLは好きなものに変更することができます。
また、説明的なURLは、検索エンジンがそのページが何についてのページなのかを理解しやすくなるため、適切なユーザーに表示することができ、WordPressのSEOを向上させることができます。
カスタムページが関連する検索結果に表示される可能性を高めるために、URLに不足しているキーワードを追加するとよいでしょう。詳しくは、キーワード調査の方法をご覧ください。
入力した情報に問題がなければ、「保存してページの編集を開始する」ボタンをクリックします。
カスタムページのデザイン
SeedProdはユーザーフレンドリーなドラッグ&ドロップエディターで選択したテンプレートを開きます。右側にページのライブプレビューが表示され、左側にいくつかのブロック設定が表示されます。
ブロックをカスタマイズするには、ページエディターでクリックして選択するだけです。左側のツールバーにはそのブロックのすべての設定が表示されます。
次の画像では、「見出し」ブロック内のテキストを変更している。
左側のメニューにある設定を使って、テキストの書式設定、配置の変更、リンクの追加などを行うことができます。
SeedProdページビルダーを使用して画像を編集するのも簡単です。Image’ブロックをクリックし、設定を使ってaltテキストを追加したり、新しい画像をアップロードしたり、その他の変更を加えるだけです。
カスタムページからブロックを削除したい場合は、そのブロックをクリックして選択するだけです。
次に、ミニツールバー内のゴミ箱アイコンをクリックします。
デザインに新規ブロックを追加するには、左側のメニューからブロックを探し、エディター上にドラッグするだけです。
その後、クリックしてブロックを選択し、左側のメニューで変更を加えることができます。
また、SeedProdには「セクション」という行やブロックのテンプレートが用意されており、カスタマイザーのページを素早く作成することができます。例えば、Google広告のランディングページをデザインする場合、SeedProdのHero、Call To Action、Featuresセクションを使用することができます。
すべてのセクションを見るには、「セクション」タブをクリックしてください。
セクションを詳しく見るには、マウスオーバーして虫眼鏡アイコンをクリックする。
デザインに追加したいセクションを見つけたら、その上にマウスを移動させ、小さな「+」アイコンをクリックするだけです。
これでセクションがページの一番下に追加されます。セクションもブロックもドラッグ&ドロップで移動できます。
もし間違えたり、気が変わったりしても心配はいりません。左側のツールバーの一番下にある「元に戻す」ボタンをクリックすれば、最後に変更した内容を元に戻すことができます。
ここには、やり直しボタン、リビジョン履歴、レイアウトナビゲーション、グローバル設定もあります。
これらの追加ボタンを使えば、WordPressでカスタムページを簡単に作成できます。
ツールバーの下部には、カスタムページのモバイルバージョンを表示できるモバイルプレビューボタンもあります。
これにより、モバイル端末でもコンピューターと同じように見栄えのするカスタムページをデザインすることができます。
カスタムページに満足したら、’保存’の隣にあるドロップダウン矢印をクリックし、’公開’オプションを選択して公開します。
カスタムページがWordPressブログで公開されます。
カスタムページを編集したい場合は、WordPressダッシュボードのSeedProd ” ランディングページにアクセスしてください。変更したいページを見つけて、「編集」リンクをクリックしてください。
これで、SeedProdのエディターでデザインが開かれ、変更できるようになります。
方法4.Thrive Architectを使ってWordPressでカスタマイザーページを作成する
Thrive Architectを使ってカスタムページを作成することもできます。Thrive ArchitectもWordPressで人気のドラッグアンドドロップページビルダーです。
より多くのコンバージョンを獲得するためにデザインされた、プロがデザインした300以上のテンプレートが付属しています。
まず、Thrive Architectプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化したら、WordPress管理ダッシュボードのページ ” 新規追加にアクセスしてカスタムページを作成します。次に、’Launch Thrive Architect’ボタンをクリックします。
次に、通常のページを作成するか、あらかじめビルトインされたランディングページを作成するかを選択します。
すべてのThriveランディングページテンプレートにアクセスできるので、「ビルトイン済みランディングページ」をクリックすることをお勧めします。これらのテンプレートはフルカスタマイズ可能なので、WordPressサイトに合わせて微調整することができます。
気に入ったセットが見つかったら、クリックして選択するだけ。
以下の画像では、「Smart Landing Page Sets」を選択しています。
次の画面では、セットから特定のテンプレートを選択する必要があります。
テンプレートをクリックして選択し、「テンプレートを適用」ボタンを押す。
これでThrive Architectエディターでテンプレートが開きます。ここから、ブログ、サイト、オンラインストアに一致するようにページテンプレートを簡単にカスタマイズできます。
例として、「見出し」をクリックし、カスタマイザーメッセージを入力することで、「見出し」を変更することができます。
左側のメニューにすべてのカスタマイズ設定が表示されます。ここでは、タイポグラフィ、フォントサイズ、色、書式などを変更することができます。
左側のパネルから、レイアウト、背景スタイル、枠線、アニメーション、スクロール動作など、カスタムページのその他の設定を調整することもできます。
SeedProdのブロックと同様に、Thrive Architectにはカスタムページに追加できる多くのビルトインエレメントがあらかじめ用意されています。
ページに新規要素を追加するには、画面右側の「要素を追加(+)」ボタンをクリックします。
画像、ボタン、リードジェネレータフォーム、価格テーブル、カウントダウンタイマーなどの要素を選択できるようになりました。
要素を追加するには、右側のメニューからドラッグしてページにドロップするだけです。
繰り返しになりますが、ページに追加した新しい要素をクリックして編集することができます。
ページの見た目に満足したら、「作業を保存」ボタンの隣にある矢印(^)ボタンをクリックします。次に、「保存して投稿エディターに戻る」オプションをクリックします。
その後、ページを下書きとして保存したり、WordPressサイトに表示されるように公開することができます。
カスタマイザーページが公開されたら、サイトにアクセスしてその動作を確認することができます。
この投稿がWordPressでカスタマイザーのページを作成する方法を学ぶのにお役に立てば幸いです。ブログのトラフィックを増やす方法や、WordPressのエキスパートが選ぶ最高のお問い合わせフォームプラグインもご覧ください。
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.
Hemant Kuswah
Hiii, Thanks for the information.
I have a little problem/confusion. I had made the custom page as you described in the tutorial above. But i want to add custom php code to fetch data from other place and display on the custom page i just created.
There will be a dropdown on the custom page and on selecting a value it will display some data on the same page which is either coming from database or from some other website.
How can i do that ?
Any suggestion ?
Thanks
Jared
Hi – I was wondering how I can avoid including other plugins css and js files such as woocommerce and various others in my template.
Thanks,
J.
Valerio
What if the theme has a kind of wrapper base.php? I would like to create a new custom page template but I always get also what is in the main wrapper base.php. Did I make myself clear enough?
Dre
how about this one,
I want the sidebar on the very right and all the other content “full width” on the page. How can I do this?
When I choose “Full Width” in the WordPress-Site-Settings, the sidebar of course is gone and my content still isn’t full width.
you can see my page here:
thank you!
Yazhini
How to make FTP client connection?
WPBeginner Support
Hey Yazhini,
You will need to enter your website domain, FTP username and password. For detailed instructions please see our guide on How to use FTP to upload files to WordPress.
管理者
Yiani
Nothing shows up in the drop down in Page Attributes? I am using Storefront theme for Woocommerce. What is the solution? Is Storefront not allowing custom page templates? Any help is much appreciated. Thanks.
Henry
Very educative indeed, thanks alot. However, I have a rather unique situation and after reading your post felt I should ask. I have two lovely pages I long to add to my wordpress theme, but sadly they are static HTML pages with commenting, voting as well as sharing system. Is there a way I can get them into my existing wordpress theme and also get them to use the wordpress commenting, voting and sharing systems?
Ketan Chaudhari
Thank you for this tutorial.
Today, You give me a chance to learn something new in wordpress.
Natacha
Thank you for the tutorial. I am happy to learn new stuff step by step.
But, When I preview the page with the new template, I don’t have a white page, I have my default theme loaded.
How can I change that?
WPBeginner Support
Hi Natacha,
You can click on Appearance and then select a theme. See our guide on how to install a WordPress theme for detailed instructions.
管理者
Natacha
Thank you for the answer.
But, I cannot change the theme of my whole website. I just needed to create a blank page so I can create a forum.
Hero
Instead of reinventing the wheel, why not just use BuddyPress?
Tim
I just want to THANK YOU for posting this. I’ve been trying to get a static front page to work with my custom template and I just couldn’t find a straight and simple answer until stumbling upon this article. Much appreciated.
WPBeginner Support
Hi Tim,
You are welcome Don’t forget to follow us on Facebook for more WordPress tips and tutorials.
管理者
hamed ahmed
thanks, the google search console requires to save .html file to my wordpress website , but .html will not be appeared in the website , can any one help please because i want to register my website to search console
WPBeginner Support
Hi Hamed,
You can also verify by adding the meta tag or by using Yoast SEO plugin which allows you to add the meta tag from its settings page.
管理者
Sameer Kumar
how to remove sidebar Php?
KH
I don’t see the template option in the Page Attributes section of my wp page – is there something I need to do to see this?
Yasser
thanks alot.
It worked perfectly.
Luis
Thanks for the post! It was so difficult to find this simple answer in the wordpress codex. One suggestion, though. Please add to your post that when users create their ‘custom_page.php’ file to add a header tag, i.e. with a text title so they don’t get a white page on the first go. It’s just a quick way of making sure the page is really working. Again, thanks a lot for making this so easy!
ashkan 261
So cool thank a lot dear
AltisB
I m trying to embed some javascipt or html codes into the blank page… how should i do that? Because i now have the blank page but when i embed the embedded codes onto the editor it doesnt seems to work.
kray
How do you do this for Wordpress 4.7? No Template shows up when I attempt to create a page in 4.7.
Altisb
“Once you have added the code, save the file to your desktop as, custompaget1.php.”
My notepad save the file as .txt
How to you even save it as .php file???
WPBeginner Support
Hello,
Try using ‘Save as’ instead of save option from the file menu. When using save as write full name for your file. You can also rename the existing custompaget1.php.txt file to custompaget1.php
管理者
Ben
I’m truly a beginner and found the steps easy to follow. I created my new .php file following the instructions, pasting the page.php text at the end of my new .php file. I’m to the point where my new custom page template is available in the drop down when I create a new page. I select the new template for the new page, and when I make changes to the new page in the customizer (delete a text widget from the sidebar), the changes are applied to the other pages that have the default template selected as well, not to just my new page with the new custom template selected. Any ideas?
Marshall
I found this really helpful. However, I did have one problem. When I go to the new page
there is a 32px top margin on it which does not show on the other page.
Logan
Hello,
I have an issue with my WP pages. I have a website up and running and I recently needed to add a new page and a new menu button. I’ve made a new menu button and created a new page (default template) and published it. However, on the website, after clicking on the new button under which this new page should be, it’s only showing header and footer. Not my new page.
Could you be so kind and advise me on this? I’m a total WP beginner so building my own template page is out of the question and I was under the impression that simply adding a new page to my WP website should be only a few clicks away…
Thanks
WPBeginner Support
Hi Logan,
Please check out our guide on adding navigation menus in WordPress.
管理者
Anish
Hi! I did as you said.
I created a .php file with the same code snippet as given and uploaded it onto my /wp-content/themes folder. Now, when i go to the Page section on WordPress, there is no option for the Template choosing. What should i do ? Can you figure out where i might be going wrong ?
Leonardo
Hi. I don’t know any php and I need to creature a custom page for my website.
Is it possible to create an HTML page from scratch, include javascript to the page and put it into the .php file as described?
Thanks.
WPBeginner Support
Hi Leonardo,
You will still need to use PHP for WordPress template tags.
管理者
Mo
@DAN Are you sure that you including the header. Thats usually where WP will enqueue your style.css
Dan
Hi,
I’m trying to create a blank template to be used for a landing page. I succeded in creating the blank template, but now when I try to add content (using the WP editor or Visual Composer or even a CF7 contact form) no style is applied. Is there any way to tell the template to use the theme css style?
Thanks
Marco Milano
This isn’t a new post type but is a new template. They’re two different thing. In fact the you can call a template from a post whereas the custom post type has a personal space in admin panel.
Julie
I followed all the steps and they worked until I tried to select it in the “Page Attributes” part. The “CustomPageT1” is just not an option in the drop down menu!
What can I do so that Wordpress and or my theme can pick up that it’s a template?
Thanks in advance!
Julie
WPBeginner Support
Most often users make mistake while copy-pasting code snippets. Please make sure that your custom template file contains exactly the same code
<?php /* Template Name: CustomPageT1 */ ?>
管理者
Ubaid
I want to add a full width header image before entire content and sidebar. How can I do that?
Girija Tandel
Thank you so muc for this wonderfull tutorial.
This helps me a lot.
It works great.
Harish S Reddy
Thank You , it works Great !
WPBeginner Support
Hey Harish, glad you found it helpful. Don’t forget to follow us on Facebook for more WordPress tips and tutorials.
管理者
Charmy Dexter
It was like I’m reading 123. I hope a page template of a theme could be used in another theme.
Uchenna
please can you help me out. I have two themes. one for my desktop view and the other for mobile. i used any mobile switcher to get the mobile view working. I designed a static page for desktop theme and this is where my problem begins because once i set from “reading” to use static front page for the desktop theme, the mobile theme homepage stops displaying posts. please is there a way i can get this working? this is the site am talking about thanks in advnce
Matthew
Way easier than I thought this would be. Thank you!
Rahul Tiwari
Hi,
Its really helpful for me and very easy to understand.
Thanks
jass
thank you very much.This article really helps
Steven Denger
For a “beginner” this was not helpful. You did not explain the steps more in detail, like “go to your current theme folder” – how do I do this? And your FTP instructions were way to vague. If I was able to understand your instructions I wouldn’t have needed this wp-beginner in the first place as it is explained for those that have mor tech experience.
These tutorals were not at all helpful and are just targeted for the more tech viewers.
NO HELP HERE AT ALL!!
WPBeginner Support
Hi Steven,
We are sorry that you didn’t find this article helpful. We will try to explain in comments.
To connect to your theme folder you will need an FTP client. These are special software which allow you to connect to your webserver and upload, delete, and manage your files directly.
When you sign up with a WordPress hosting provider, they send you an email with your FTP login credentials. If you did not receive this email then please contact your hosting provider via chat or email and then will send them to you right away.
However, if using FTP seems a bit too difficult, then you can also use File Manager. It is a web based application available under your web hosting account. Login to your web hosting account and look for File Manager.
Let us know if you need more help
We will try to improve and make our articles even more beginner friendly in the future.
管理者
Niki
Many thank you for simple and informative article helped me to start
Chibuike Mba
Thank you very much, this your article about custom page have really pointed me in the right direction for I needed to override theme page in my plugin for some custom post types.
Thank you once again.
WPBeginner Support
We are glad you found it helpful:) Don’t forget to follow us on Twitter for more WordPress tips and tutorials.
管理者
Wayne from Keys English
Hello,
What can I do if I see the successful transfer of the custompageT1 to my FireFTP client, but when I go into WP admin – create a new page – scroll down to template, the custompageT1 is not in the drop down list to select?
Thanks
Wayne
zamaan
Excellent, very useful. Thank you.
but u fogot to tell where i want to add my custom php code in the template file
Jaczkowski
I learnt something new. Thanks alot
Janet Fuller
This is really extra ordinary. Generally, I do add a page and then create that. But today, I have known something new.
nevenx
Hi,
is it possible to integrate another script to wp (e.g. faucetbox script) on this way?
WPBeginner Support
You can, but it would be better to create a plugin for that.
管理者
San
Great article. Helps to ease my confusion
Tak
thanks for the very concise tutorial with simple examples. it was super easy to follow!
Radhakrishnan
Dear sir,
I did what you say. but in my page edit screetn there no template comming in attribute. what i can do sir?
levan
many thanks to you my dear its very helpful
Gabriel
This is a great tutorial. Very simple and easy to follow. Thank you!
Waleed Barakat
Thanks for the tutorial! actually i have a games WordPress template and every time i try to create a page treat it as a game and not show the page content as usual, but i think everything will be okay after reading and applying this tutorial on my website:
Thanks again