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.
Patricia Reed
Is there a way to use an existing page (including all its content and images) and use this plugin to remove the menu and title link?
WPBeginner Support
We show two plugins in this guide, you can certainly recreate a page using them for what it sounds like you want.
管理者
Teresa Cuervo
Excellent Article!
Just one question. After you finish the landing page do you still need the plugin in the plugin folder or is it safe to delete after you create the page.
WPBeginner Support
Yes, if you used the plugin method you would want to keep the plugin.
管理者
Edmond
Hello,
Thank you for the easy tutorial. It worked so well.
I have one question though. How do you make the custom page you create have its own separate sitemap on the website´s sitemap.xml? Like for example in wpbeginner.com´s sitemap the /hosting-sitemap.xml etc. is it a custom page?
WPBeginner Support
It is a category for our custom post type which is why it has that page.
管理者
Jorge
I´ve already done this before and it worked, I know that many things can remove the file from where it was but my problem is that it doesn´t allow me to do it again. When I upload the custom page to the server it doesn´t appear on the template options when editing the page. Does someone knows how to solve this?
WPBeginner Support
The most common reason you would want to check is that you haven’t used the same template name and that you’ve uploaded the file to the correct location.
管理者
AJAY KUMAR
How do we change header path, as I have 2 different headers, so in my custom template I want to use other header, please let me know, how to call or bring header
WPBeginner Support
That would depend on your specific theme and would require some coding knowledge that would not be beginner-friendly.
管理者
Lance
Beginner? seriously! No beginner could use this blog to get started.
WPBeginner Support
This is more of a beginner developer article that we had users request. If you wanted a more beginner-friendly way to customize a page we would recommend taking a look at our post below on page builders:
https://www.wpbeginner.com/beginners-guide/best-drag-and-drop-page-builders-for-wordpress/
管理者
Bas
What happens to your custom templates when you update your theme? Since you’re creating that new template within the theme folder. Will the new template be gone?
WPBeginner Support
If you are concerned about the changes being lost, we would recommend creating a child theme to prevent the loss of any changes using our guide below:
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
管理者
Vivek kushwaha
Really Helpful for me
WPBeginner Support
Glad we could be helpful
管理者
Zack
Hi,
I can’t seem to find page.php in wordpress twentytwenty. Any idea where the template file?
Thanks
WPBeginner Support
That theme uses the singular template, you can create your own page.php but for a better understanding of why it works without that template you would want to take a look at our article here:
https://www.wpbeginner.com/wp-themes/wordpress-template-hierarchy-explained/
管理者
AmecuxDEV
I really appreciate your help that’s really exactly what I was looking for, thanks so much!
WPBeginner Support
You’re welcome, glad our guide was helpful
管理者
ammar
Hi,
Great article ! I already create the page template and now I want to make this page only page that does’nt have sidebar when i use this page template. How? Can you help me?
Thank you.
WPBeginner Support
It would depend on your current theme, if you reach out to your theme’s support they should be able to assist
管理者
Pete Zajonc
Hi-
So close. I have zipped my php file created in notpad++. The contents are the 1 line of code at the top of this article. I click add new theme and upload the zip file. When I click install it starts ok but ends in error. Can you suggest a fix? How do I add the style.css stylesheet? (Sorry, I’m a newbie!)
WPBeginner Support
You would want to go through the article again, this guide is for creating a new page for your current theme not an entirely new theme
管理者
Faby
Hi, thanks for the article. Is there a way to associate a CSS file to a custom page? Thank you.
WPBeginner Support
You would need to target the page ID in your custom CSS
管理者
Brendan
exactly what I was looking for, thanks!
WPBeginner Support
Glad our guide could help you
管理者
Okoji
Thanks for this. It was helpful.
I want to know if there is a way to remove the wordpress header without messing up the page.
WPBeginner Support
It would depend on your specific theme for any issues that would cause. You would likely want to test on a local installation or on a staging environment to see if it would break anything.
管理者
manoj
why we use page templates insted of page edit screens
WPBeginner Support
Page templates control the area around the content, the editor under Pages>Add New is for the content on the page.
管理者
Jass
Perfect Article
WPBeginner Support
Thank you
管理者
terry
Thanks for this tutorial! Is it possible to edit the custom page with Elementor? I get an error “The preview cannot be loaded.”
WPBeginner Support
You may need to recreate the custom page template with Elementor or reach out to Elementor’s support and they should be able to assist
管理者
Val
Hi – my problem is the template dropdown menu does not display. The theme displays only: Page attributes / parent / order — whereas I need it to display: Page attributes / parent / Template / order. Do you know how I can get the templates dropdown to display?
WPBeginner Support
Your theme may not have page templates by default as otherwise, they would be under the Page Attributes section.
管理者
Adrian
Thanks for this wonderful tutorial
WPBeginner Support
You’re welcome
管理者
shadab awan
thank you admin for always writing great articles on WordPress and SEO.i have a question to ask i hope you help me.
Can we use PHP, Osclass Or Other themes in a WordPress Created classified website?
Thanks
WPBeginner Support
You can use almost any theme to create a site even a classifieds website
管理者
Ramsey
Please, i need your assistance, i have my website build myself but i am having issues which i know you can help me cause i built my site watching all your videos and article. i want to create the home page then use the home on my MENU on my website so that when people finish reading an article and they want to return home they can easily click on home and return to the home page. please, i need your help on this.
WPBeginner Support
To set up your navigation menu, you would want to take a look at our guide here: https://www.wpbeginner.com/beginners-guide/how-to-add-navigation-menu-in-wordpress-beginners-guide/
管理者
Steven
I don’t see the Template drop-down in the page attributes?
WPBeginner Support
If you’re using the block editor then you would want to ensure you’re editing the document. If it is not displaying correctly then you would want to double check the file name and that the file was correctly added to your files.
管理者
Sara
thank you very much. you saved my day.
god bless you.
WPBeginner Support
Glad our article could help
管理者
Marie
Hi, maybe a stupid question but do I have to create a child theme for this? Or is it protected from theme updates because it is a separately built page?
WPBeginner Support
It would be best to use a child theme for this as it would be a file not found in the most recent version of the theme when you’re updating
管理者
Mannan Afzal
Really Helpful for me
WPBeginner Support
Glad it was helpful
管理者
rina
Hi,
Is it possible to add my php template to Elementor?
Thanks
Pedro
Hi! And thanks for your incredibly helpful and resourceful page! I’ve read lots of articles and learned a lot around your site
Using your guide I created my custom page for my “blog” section (page with the most recent posts that doesn’t have the slider or other features that the Home page has).
My website is bilingual, so I’d like to translate this custom page to my second language… and I can’t find the way to do it.
Your help would be much appreciated.
Thanks in advance!
Khalil
very simple and clear post
nidhi bhatt
hi i want to add html page not php page as a custom template can it be possible ?
Andrew
You can add an HTML page to the website but I wont be a part of the theme. It has to be a .PHP to be part of the theme.
Catherine
I had the same problem. Try another theme, and make sure you upload the file in the right directory. You can see the directory on top when you add a sample page.
OuadiI
please how can i do that when default template option isn’t appearing in dashbord?
thanks
kartik rawal
at the top you see screen options just click on it and check the box says page attributes and now you can see template option
Venky
Thank you for the detailed explanation.
Rakesh Roy
Nice and helpful instructions, but i want to load template from my plugin, when i add the .php file inside my plugin wordpress not showing the drop down .
Isabelle Hunter
Thank you!!! This is so clear and simple and straight forward. I was able to set up a new page temple in under 5 min. I really appreciate what you guys do – and whoever did this video has a great voice and speaks very well for instructions.
Edgar Mlowe
Thanks a lot for this, this post helped while i was creating a custom them which needed me to create a number of custom pages. thumbs up for this!
Jens Eckervogt
Great tutorial!
I love to see how do you have to create custom pages
Like table ( flex-wrap with div or about page.
I already made AboutMe-Page with css-embedded picture and more custom pages. That is really excellent! Wordpress makes us rich, right?
Wordpress is like darling / sweetheart
Because we want make our blog-websites with money from internet.
And how do I fix contactform of WPForm? Why does WPForm not send e-mail to my google mail. I want try if it works.
Thanks for nice explanations with your nice videos. I am really happy because you save my life and make me reality.
Best kind regards,
Jens Eckervogt
WPBeginner Support
Hey Jens,
Please see our article on how to fix WordPress not sending emails issue.
管理者
Dave
Are plugins compatible with custom page templates?
For example, if I were to add custom content directly to my page template via a text editor, then upload and select it for the appropriate page (say contact page), how would a plugin (say a contact form), be placed into the custom page?
Thanks
WPBeginner Support
Hi Dave,
Yes they are. Often if you have to add something to a page template, you can do so by using the shortcode or template tags provided by the plugin.
管理者
Erica
Very helpful! Thankyou!
Vandana
Hi I’m converting HTML template to WORDPRESS,in the i have nave menu like Home,About Us,Courses,Gallery etc,i’m not getting anything when i click on these pages,please help me out
Guatham
You are not getting anything because you should add default navigation links to your website.
Shihab k
i have a custom template page but i can’t connect with menu in normal html menu
Paddy O
Hey.. I needed this to create a page with no header and footer etc different to my template and with a little tweaking it worked perfeclty. Great. Thanks, P
Manpreet Kaur
Hello, Thanks Wpbeginner for all the tutorials. With your tutorials I build a website for the very first time by myself and its going great. I learned so much from you guys.
Jason
Hey i want to make a Wordpress page that goes like this : domain.com/something/PageHere
I cant do that by edditing the permalink, any advice?
Juned
Thank You Very MUCH!!!!!!!!!!!!
Jessika
Hi i have create a wordpress theme from scratch I create a new template call custom template it’s work but when I create a new page in admin panel the content of text does not show but it dispay only the header and footer of my new page.
Any idea please.
Thank you!
Abdur Rahman
Good
And also happy to see that One from Pakistan Helping the word 
I’m really getting grounded but this post is very excellent
thanks
Vimax
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?
Fifa
Hey, i used rocked theme but wp-content/theme folder doesnt contain rocked directory? Where should I upload the custom page file? Thanks
shellu
i am facing a problem in wordpress can any one help me
what ever i write any thing on my visual or text editor and when i publish it my web is blank it doesn’t publish any thing .i made a customised website ,waiting for answer
MO
If you inspect your page what do you see?