WordPressでカスタムページを作成する方法

カスタムページを使用すると、ウェブサイトの他の部分とは異なるレイアウトを使用できます。多くのWordPressサイトでは、セールスページ、ランディングページ、ウェビ ナーページなどにカスタムページレイアウトを使用しています。

これまで、WPBeginnerではさまざまな目的で多くのカスタムページを作成してきました。それらを使用して、プラグインやホスティングサービスのさまざまなオファーを表示したり、ユーザーがWordPressで困っていることを支援するProサービスを提供したり、さまざまな製品を表示したりしてきました。

私たちの経験では、カスタムページを作成する方法は複数あります。一部のプロジェクトではSeedProdのようなページビルダーを使用しました。それ以外にも、ブロックエディターやフルサイトエディターを使用してサイトにカスタムページを追加することもできます。

この記事では、WordPressでカスタムページを簡単に作成する方法を説明します。

WordPressでカスタムページを作成する理由

新しいページを作成するたびに、WordPressテーマはテンプレートファイルを使用してそのページの見た目を制御します。

このpage.phpテンプレートは、WordPressで作成するすべての単一ページに影響します。しかし、毎回同じデザインを使用したいとは限らない場合があります。

ランディングページは、大きなヒーロー画像や行動喚起（CTA）など、通常のページとは異なるコンテンツを持つことがよくあります。これは、ウェブサイトの他の部分とはまったく異なる見た目になることが多いことを意味します。 

しかし、標準のページテンプレートを使用してユニークなデザインを作成しようとすると、多くの時間がかかる可能性があります。また、page.phpテンプレートによって制限され、希望する正確なデザインを作成できない場合があります。これにより、良い結果を得ることが難しくなる可能性があります。たとえば、販売ページを作成している場合、ページのデザインが悪いためにコンバージョンが少なくなる可能性があります。

それを踏まえた上で、希望する正確なデザイン、レイアウト、コンテンツでWordPressにカスタムページを作成する方法を見ていきましょう。単に以下のクイックリンクを使用して、使用したい方法に直接ジャンプしてください。

• 方法1. ブロックエディターを使用してWordPressでカスタムページを作成する方法（プラグイン不要）
• 方法2. フルサイトエディターを使用してカスタムページを作成する方法（ブロックベースのテーマのみ）
• 方法3. SeedProdを使用してWordPressでカスタムページを作成する（推奨）
• 方法4. Thrive Architectを使用してWordPressでカスタムページを作成する

方法1. ブロックエディターを使用してWordPressでカスタムページを作成する方法（プラグイン不要） 

ブロックエディターを使用すると、使い慣れたツールで独自のテンプレートを簡単にデザインできます。

これは、同じデザインを複数のページに再利用する予定がある場合に良い選択肢です。なぜなら、同じテンプレートを適用するだけで済むからです。完全にユニークなデザインを作成したい場合は、別の方法として、ページを通常どおりに作成してから、方法2で説明するフルサイトエディターを使用してレイアウトを編集するという選択肢があります。

これらの方法は、ブロックベースのテーマ（例：ThemeIsle Hestia ProやTwenty Twenty-Three）でのみ機能することに注意してください。ブロックベースのテーマをお持ちでない場合は、代わりにページビルダーの使用をお勧めします。

まず、任意のページまたは投稿を開きます。次に、右側のメニューで「ページ」タブを選択し、「テンプレート」の隣のテキストをクリックします。

表示されるオプションはWordPressテーマによって異なる場合がありますが、通常は「ページ」、「デフォルトテンプレート」、またはそれに類するテキストが表示されます。

表示されるポップアップで、「テンプレートを追加」アイコンをクリックします。

表示されるポップアップで、テンプレートの名前を入力し、「作成」をクリックします。

名前は参照用ですので、好きな名前を自由に使用できます。

これにより、WordPressコンテンツエディターと同様に機能するテンプレートエディターが起動します。

カスタムページデザインにブロックを追加するには、青い「+」ボタンをクリックするだけです。その後、ドラッグアンドドロップでブロックを追加できます。

ブロックにコンテンツを追加したり、書式設定を変更したりするには、おなじみのWordPress投稿編集ツールを使用します。たとえば、「見出し」ブロックにテキストを入力したり、太字の書式を適用したり、テキストをH2からH3に変更したりできます。

パターンを使用してカスタムページを作成することもできます。パターンとは、イベントリスト、キャプション付きの画像、料金表など、よく一緒に使用されるブロックのコレクションです。

表示されるパターンはWordPressテーマによって異なりますが、「パターン」タブをクリックすると利用可能なパターンを確認できます。

ブロックパターンをレイアウトにドラッグアンドドロップするか、パターンをクリックしてテンプレートの末尾に追加できます。テンプレートの外観に満足したら、「公開」ボタンをクリックし、次に「保存」をクリックします。

これで、このテンプレートを任意のページに適用できます。エディターでページを開き、「テンプレート」の横にあるテキストをクリックするだけです。

表示されるポップアップで、作成したテンプレートを選択します。

これで、他のWordPressページと同様に、ページにコンテンツを追加できます。 

方法2. カスタムページを作成する方法 フルサイトエディターを使用する（ブロックベースのテーマのみ）

ブロックベースのテーマを使用している場合は、フルサイトエディターを使用してカスタムページを作成することもできます。これにより、カスタムテンプレートを作成せずに、個々のページのレイアウトを変更できます。

これを念頭に置くと、他のページで再利用しない完全にユニークなデザインを作成したい場合に適した選択肢となります。

まず、通常通り ページ » 新規追加 に移動してページを作成します。その後、タイトルを入力し、カテゴリーとタグを追加し、アイキャッチ画像をアップロードし、その他の変更を行います。

基本的なページに満足したら、変更を保存し、外観 » エディター に移動します。

デフォルトでは、フルサイトエディターにテーマのホームページテンプレートが表示されます。

左側のメニューで「ページ」をクリックします。

これで、WordPressウェブサイトで作成したすべてのページが表示されます。

再デザインしたいページを見つけてクリックするだけです。

WordPressはデザインのプレビューを表示します。

このテンプレートを編集するには、小さな鉛筆アイコンをクリックしてください。

フルサイトエディターツールを使用して、ページのレイアウトを編集できるようになりました。たとえば、青い「+」ボタンをクリックして新しいブロックを追加したり、カスタマイズしたいブロックをクリックして選択したりできます。

加えた変更に満足したら、「保存」ボタンをクリックしてください。

これで、ウェブサイトでこのページにアクセスすると、新しいページデザインが実際に表示されます。

方法3. SeedProd を使用して WordPress でカスタムページを作成する (推奨) 

以前は、カスタムページを作成するにはコードを記述する必要がありましたが、初心者にはあまり親切ではありませんでした。HTML、CSS、またはPHPコードに間違いがあった場合、一般的なWordPressのエラーを引き起こしたり、サイトが完全に壊れたりする可能性がありました。

これを踏まえて、代わりにページビルダーを使用することをお勧めします。

SeedProd は、WordPress向けの最高のドラッグ＆ドロップページビルダーです。350以上のテンプレートが付属しており、コードを書かずにカスタムページを作成できます。

コンバージョンを増やすためにカスタムページを使用している場合、SeedProdは、コンバージョンを得るためにすでに使用している可能性のある多くの人気サードパーティツールと連携します。これには、主要なメールマーケティングサービス、WooCommerce、Google Analyticsなどが含まれます。

まず、SeedProdをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

プラグインを有効化すると、SeedProdはライセンスキーを要求します。

この情報は、SeedProdウェブサイトのアカウントで見つけることができます。キーを入力したら、「キーの検証」ボタンをクリックしてください。

カスタムページのテンプレートを選択

それが完了したら、SeedProd » ランディングページに移動し、「新しいランディングページを追加」ボタンをクリックします。

これで、カスタムページのテンプレートを選択できます。

SeedProdのテンプレートは、「リード」、「Squeeze」、「Coming Soon」などのさまざまなキャンペーンタイプに整理されています。画面上部のタブをクリックすると、キャンペーンタイプに基づいてテンプレートをフィルタリングできます。 

最初から始めたい場合は、SeedProdには使用できる空白テンプレートもあります。

デザインを詳しく見るには、テンプレートの上にマウスカーソルを合わせ、虫眼鏡アイコンをクリックするだけです。

気に入ったデザインが見つかったら、「このテンプレートを選択」をクリックします。すべての画像では「コース販売ページ」テンプレートを使用していますが、好きなテンプレートを使用できます。

次に、カスタムページの名称を入力します。SeedProdはページのタイトルに基づいてURLを自動的に作成しますが、このURLは好きなものに変更できます。

説明的なURLは、検索エンジンがページの内容を理解するのに役立ち、適切なユーザーに表示されるようになるため、WordPress SEOが向上します。

カスタムページが関連性の高い検索結果に表示される可能性を最大限に高めるには、URLに欠けているキーワードを追加することを検討してください。詳細については、キーワードリサーチの方法に関するガイドをご覧ください。

入力した情報に満足したら、「保存してページの編集を開始」ボタンをクリックします。

カスタムページをデザインする

SeedProdは、選択したテンプレートを使いやすいドラッグ＆ドロップエディターで開きます。右側にはページのライブプレビューが表示され、左側にはいくつかのブロック設定が表示されます。

ブロックをカスタマイズするには、ページエディターでクリックして選択するだけです。左側のツールバーに、そのブロックのすべての設定が表示されます。

次の画像では、「見出し」ブロック内のテキストを変更しています。  

左側のメニューの設定を使用して、テキストの書式設定、配置の変更、リンクの追加などを行うことができます。

SeedProdページビルダーを使用すると、画像を簡単に編集することもできます。「画像」ブロックをクリックして選択し、設定を使用して代替テキストを追加したり、新しい画像をアップロードしたり、その他の変更を行ったりできます。 

カスタムページからブロックを削除したい場合は、そのブロックをクリックして選択するだけです。

次に、ミニツールバーのゴミ箱アイコンをクリックします。 

デザインに新しいブロックを追加するには、左側のメニューでブロックを見つけて、エディターにドラッグします。

次に、ブロックをクリックして選択し、左側のメニューで変更を加えることができます。 

SeedProdには「セクション」も付属しています。これは、カスタムページをすばやく作成するのに役立つ行とブロックテンプレートです。たとえば、Google広告のランディングページをデザインしている場合、SeedProdの既製のヒーロー、コールトゥアクション、または機能セクションを使用できます。

利用可能なすべてのセクションを表示するには、「セクション」タブをクリックしてください。

セクションを詳しく見るには、マウスカーソルを合わせ、虫眼鏡アイコンをクリックしてください。

デザインに追加したいセクションが見つかったら、マウスカーソルを合わせ、「+」アイコンをクリックしてください。

これでセクションがページの下部に追加されます。ドラッグアンドドロップを使用して、セクションやブロックをデザイン内で移動できます。

間違いを犯したり、気が変わったりしても心配いりません。左側のツールバーの下部にある「元に戻す」ボタンをクリックすると、最後のアクションを取り消すことができます。

ここには、やり直しボタン、リビジョン履歴、レイアウトナビゲーション、グローバル設定もあります。

これらの追加ボタンにより、WordPressでカスタムページを簡単に作成できます。 

ツールバーの下部には、モバイルプレビューボタンもあり、カスタムページをモバイルバージョンで表示できます。

これにより、モバイルデバイスでもコンピューターと同じくらい見栄えの良いカスタムページをデザインできます。

カスタムページに満足したら、「保存」の横にあるドロップダウン矢印をクリックし、「公開」オプションを選択して公開します。

カスタムページはWordPressブログで公開されます。

カスタムページをいつでも編集したい場合は、WordPressダッシュボードのSeedProd » ランディングページに移動してください。その後、変更したいページを見つけて、「編集」リンクをクリックします。

これにより、SeedProdのエディターでデザインが開かれ、変更を加える準備が整います。

方法4. Thrive Architectを使用してWordPressでカスタムページを作成する

Thrive Architectを使用してカスタムページを作成することもできます。Thrive Architectは、WordPress向けのもう1つの人気のドラッグ＆ドロップページビルダーです。

より多くのコンバージョンを獲得するのに役立つように設計された、300以上のプロフェッショナルデザインのテンプレートが付属しています。

まず、Thrive Architectプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

有効化したら、WordPress管理ダッシュボードのページ » 新規追加に移動してカスタムページを作成します。次に、「Thrive Architectを起動」ボタンをクリックします。

次に、通常のページを作成するか、あらかじめ構築されたランディングページを作成するかを選択できます。

「あらかじめ構築されたランディングページ」をクリックすることをお勧めします。これにより、すべてのThriveランディングページテンプレートにアクセスできます。これらのテンプレートは完全にカスタマイズ可能なので、WordPressウェブサイトに合わせて微調整できます。

気に入ったセットが見つかったら、クリックして選択するだけです。

次の画像では、「スマートランディングページセット」を選択しています。

次の画面で、セットから特定のテンプレートを選択する必要があります。

テンプレートをクリックして選択し、「テンプレートを適用」ボタンを押してください。

これにより、テンプレートがThrive Architectエディタで開きます。ここから、ブログ、ウェブサイト、またはオンラインストアに合わせてページテンプレートを簡単にカスタマイズできます。

例として、「見出し」をクリックして独自のカスタムメッセージを入力することで変更できます。

左側のメニューにすべてのカスタマイズオプションが表示されます。ここで、タイポグラフィ、フォントサイズ、色、フォーマットなどを変更できます。

左側のパネルから、レイアウト、背景スタイル、境界線、アニメーション、スクロール動作など、カスタムページの他の設定を調整することもできます。

SeedProdのブロックと同様に、Thrive Architectにはカスタムページに追加できる多くのあらかじめ構築された要素が付属しています。

ページに新しい要素を追加するには、画面の右側にある「要素を追加（+）」ボタンをクリックします。

画像、ボタン、リード生成フォーム、価格表、カウントダウンタイマーなどから要素を選択できるようになりました。

要素を追加するには、右側のメニューからドラッグしてページにドロップするだけです。

再度、ページに追加した新しい要素は、クリックすることで編集できます。 

ページの見た目に満足したら、「作業を保存」ボタンの隣にある矢印（^）ボタンをクリックします。次に、「保存して投稿エディターに戻る」オプションをクリックします。

その後、ページをドラフトとして保存するか、公開して WordPressウェブサイト に表示させることができます。

カスタムページが公開されたら、サイトにアクセスして実際に動作を確認できます。

この記事がWordPressでカスタムページを作成する方法を学ぶのに役立ったことを願っています。また、WordPressでランディングページを作成する方法やWordPressで投稿またはページのタイトルを分割する方法に関するガイドも参照することをお勧めします。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。