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

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

長年にわたり、WPBeginnerではさまざまな目的のためにたくさんのカスタムページを作成してきました。プラグインやホスティングサービスのお得な情報を表示したり、WordPressでユーザーをサポートするプロサービスを提供したり、さまざまな製品を表示したりするために使用してきました。

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

この投稿では、WordPressでカスタムページを簡単に作成する方法を紹介します。

なぜWordPressでカスタムページを作成するのか？

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

このpage.phpテンプレートは、WordPressで作成するすべての個別ページに影響します。しかし、個別ページで毎回同じデザインを使いたいとは思わないでしょう。

ランディングページは、大きなヒーロー画像や行動喚起（CTA）など、通常のページとは異なるコンテンツを持つことがよくあります。つまり、ランディングページはウェブサイトの他の部分とは全く異なる印象を与えることが多いのです。

しかし、標準のページテンプレートを使ってユニークなデザインを作ろうとすると、多くの時間がかかります。また、page.phpテンプレートに制限され、思い通りのデザインができないこともあります。そのため、良い結果を得ることが難しくなります。例えば、セールスページを作成する場合、ページのデザインが悪いためにコンバージョンがあまり得られないかもしれません。

それでは、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はコンバージョンを獲得するために既に使用している多くの人気のあるサードパーティツールと連動します。これには、トップクラスのEメールマーケティングサービス、WooCommerce、Google アナリティクスなどが含まれます。

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

プラグインを有効化した後、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でランディングページを作成する方法や、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.