シードプロッド最新ニュース

ビジネスの成長に役立つWordPressのチュートリアル、ヒント、リソース

WordPressでカスタムページを作成する方法(ステップバイステップ)

WordPressでカスタムページを作成する方法(ステップバイステップ) 

執筆者 著者イメージ ステイシー・コリン
著者イメージ ステイシー・コリン
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。
     レビュー ジョン・ターナー
レビュアーイメージ ジョン・ターナー
ジョン・ターナーはSeedProdの共同設立者です。彼は20年以上のビジネスと開発の経験があり、彼のプラグインは2500万回以上ダウンロードされています。

WordPressのウェブサイトにカスタムページを作成したいですか?

カスタムページはあなたのウェブサイトにユニークなタッチを与えます。サイトの他の部分とは異なるレイアウトを与えることができ、競合他社から際立たせることができます。

このガイドでは、WordPressでステップバイステップでページを追加し、コードなしでカスタマイズする方法を紹介します。

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

WordPressで新しいページを作成する際、WordPressテーマはpage.phpテンプレートファイルでレイアウトやデザインを制御します。ページの見た目を統一するのに便利ですが、毎回同じデザインを使いたくない場合もあるでしょう。

例えば、次のようなページが欲しいかもしれない:

  • 最新のアートワークを展示
  • 主要なチームメンバーを紹介する
  • 新製品発売のプロモーション
  • ご購読ありがとうございます

そこで役立つのがカスタムページテンプレートです。テーマのデフォルトのページデザインを使う代わりに、好きな目的に合うようにカスタマイズすることができます。

しかし、ここからが問題だ。

デフォルトのテンプレートを使ってカスタムページを作成するには時間がかかります。また、page.phpファイルから抜け出せなくなり、本当に必要なレイアウトが得られないかもしれません。このため、特にコーディングの知識が不足している場合は、良いデザインを得ることが難しくなります。

しかし、以下のガイドでは、お好きなレイアウトとデザインでカスタムページを作る方法をご紹介します。そして一番の魅力は?コードを一行も書く必要がありません。

以下のリンクをクリックして、必要なガイドをお探しください:

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

カスタムページの作成と編集には、以前はテーマファイルにカスタムCSS、HTML、PHPを追加する必要がありました。初心者にやさしくなく、ミスをするとWordPressサイトを壊してしまうこともありました。

そのため、SeedProdのようなWordPressページビルダーを使ってカスタムページを作成するのが私たちのお気に入りの方法です。テーマファイルを直接編集する代わりに、ドラッグ&ドロップでウェブサイトのあらゆる部分をカスタマイズすることができます。

SeedProd ドラッグ&ドロップWordPressウェブサイトビルダー

何百ものテンプレートが用意されているので、コードを書くことなくカスタムページを作成できます。これには、アバウトページやコンタクトページから、コンバージョンの高いランディングページやブログページまで、あらゆるページが含まれます。

SeedProdを使って、カスタムヘッダー、カスタムフッター、カスタムサイドバーなどを備えたWordPressテーマを作成することもできます。

その上、SeedProdは、Eメールマーケティングサービス、WooCoomerce、Easy Digital Downloads、Google Analyticsを含む人気のあるサードパーティツールと連動します。そのため、1つのWordPressプラグインを使用して、完全に機能的なウェブサイトを作成し、リードと販売を促進することができます。

SeedProdを使用して最初のカスタムWordPressページを作成するには、以下の簡単な手順に従ってください。

ステップ1.SeedProdのインストールとアクティベート

まず、SeedProdプラグインをインストールし、有効化します。

SeedProdには、限定的な無料版を含め、いくつかのバージョンがあります。このガイドでは、より多くのテンプレート、ブロック、統合機能があるSeedProd Proを使用します。

この手順については、SeedProdのインストールに関するドキュメントをご覧ください。また、ライセンスキーのアクティベーション方法も記載されています。

ステップ2.ワードプレスで新しいページを作成する

SeedProdでは、2つの異なる方法で新しいページを作成することができます。

SeedProd " ランディングページに移動し、独立したランディングページを作成することができます。

SeedProdランディングページビルダーを使用してWordPressにカスタムページを追加する

または、WordPressの管理画面からページ " 新規ページを追加に進み、「SeedProdで編集」ボタンをクリックすることもできます。

SeedProdでWordPressページを編集する

どの方法を選んでも最終的なページに違いはないので、最も使いやすい選択肢を選んでください。

新しいページを作成した後、出発点として使用するテンプレートを選択することができます。テンプレートライブラリは、"セールス"、"ウェビナー"、"近日公開 "などのキャンペーンタイプ別に整理されています。

SeedProdのWordPress用カスタムページテンプレート

上部のタブをクリックすると、テンプレートを絞り込むことができます。また、"Blank Template "を使ってゼロから始めることも可能です。

ご希望のレイアウトが見つかるまで、デザインをスクロールしてください。次にチェックマークアイコンをクリックして選択します。

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

カスタムページの名前を入力します。SeedProdはタイトルに基づいてページのURLを自動的に生成しますが、必要に応じて変更することができます。

カスタムページの名前を入力します。

そこで、「保存してページの編集を開始する」ボタンをクリックします。

ステップ3.WordPressページをカスタマイズする

SeedProdはあなたのテンプレートをビジュアルページエディタで開きます。右側にライブプレビュー、左側に様々なブロック設定が表示されます。

SeedProdビジュアルページエディタ

選択したテンプレートは、これらのブロック、カラム、セクションで構成されています。これらをカスタマイズするには、エディタでブロックをクリックして選択します。ブロックの設定は左側のサイドバーに表示されます。

SeedProdでページの見出しをカスタマイズする

この例では、「見出し」ブロック内のテキストを編集しています。同じパネルで見出しの配置、フォントサイズ、見出しレベル、リンクも調整できます。

カスタムページへの画像の変更や追加も簡単です。任意の画像をクリックし、コンピュータまたはWordPressメディアライブラリから新しい画像を追加するだけです。

WordPressでカスタムページの画像を変更する

左側のサイドバーからブロックをドラッグしてページにドロップすることで、テンプレートに要素を追加することができます。

WordPressの画像ブロックをカスタムページにドラッグ&ドロップする

これらのデザイン要素には、以下のようなものがある:

完全なリストについては、WordPressブロックのページを参照してください。

テンプレートの配色がお好みに合わない場合は、数クリックで変更できます。ブロック、カラム、セクションを選択し、設定パネルのカラーオプションをクリックします。

カスタムページの色を選ぶ

または、左下にある歯車のアイコンをクリックして、カスタムカラーを設定することもできます。この方法では、ページ上のすべてのブロックの色が自動的に変更されるので、各ブロックを個別にカスタマイズする手間が省けます。

グローバルカスタムページカラーパレット

また、SeedProdにはあらかじめセクションが用意されています。これらのブロック、行、列のコレクションにより、カスタムページの作成が簡単になります。 

例えば、セールスページを作成する場合、あらかじめ用意されているヒーローセクションを使用することで、目を引く魅力的なページにすることができます。

テンプレートを見つけるには、左側のパネルにある「セクション」タブをクリックし、気に入ったテンプレートが見つかるまでスクロールします。そして、セクションにカーソルを合わせてプラスアイコンをクリックし、あなたのページに追加します。

WordPressのカスタムページセクション

ページエディタの下部には、レイアウトナビゲーション、リビジョン履歴、元に戻すとやり直しなど、さまざまなアイコンのあるツールバーがあります。これらのオプションは、ページ上の異なる要素を見つけたり、間違えて加えた変更を元に戻したりすることを簡単にします。

カスタムページレイアウト・ナビゲーション設定

また、携帯電話のアイコンをクリックすると、モバイルデバイスでのページのライブプレビューを見ることができます。このようにして、あなたのページがモバイルに対応し、スマートフォンやタブレットで簡単に操作できることを確認できます。

カスタムWordPressページをモバイルでプレビュー

カスタムページが完成したら、右上の保存ボタンをクリックします。

ステップ4.WordPressでカスタムページを公開する

SeedProdでカスタムWordPressページを公開するには、「保存」ボタンの隣にあるドロップダウンメニューをクリックし、「公開」を選択します。

SeedProdを使ってWordPressでカスタムページを公開する

これで、カスタムページにアクセスして、ウェブサイト上でどのように表示されるかを確認することができます。

ワードプレスの新しいカスタムページ

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

Twenty Twenty-FourなどのブロックベースのWordPressテーマを使用している場合、WordPressブロックエディタを使ってカスタムページを作成することができます。同じテンプレートを適用できるので、複数のページで同じデザインを再利用したい場合に便利です。

また、WordPressのサイトエディタを使って、追加のプラグインをインストールすることなく、独自のページレイアウトを作成することができます。

ただし、以下の2つの方法はブロックベースのWordPressテーマが必要ですのでご注意ください。ブロックテーマを使用していない場合は、代わりにページビルダーを使用することをお勧めします。

ブロックエディターでWordPressカスタムページテンプレートを作成する

この方法では、まずページを開き、右側メニューの「テンプレート」見出しの隣にある「ページ」をクリックする。

表示されたポップアップで、"Add Template "アイコンをクリックします。

WordPressに新しいページテンプレートを追加する

そこからテンプレート名を入力し、作成ボタンをクリックする。

カスタムテンプレートに名前をつける

テンプレートエディターが表示され、コンテンツエディターと同じように機能します。ここでは、見出し、画像、コンテンツなどのブロックを追加し、テキストのスタイルを設定することで、新しいテンプレートをデザインすることができます。

WordPressサイトエディタを使ってカスタムページをデザインする

また、価格表やコールトゥアクションのように、よく一緒に使われるブロックの集まりであるパターンを使うこともできる。

プラスアイコンをクリックし、パターンタブを選択することで見つけることができます。そして、それをクリックしてページテンプレートに追加します。

WordPressサイトエディターのパターン

テンプレートに満足したら、「保存」ボタンをクリックします。

これで、そのテンプレートを既存のどのページにも適用することができます。必要なのは、ページを開いて「テンプレート」の横のテキストをクリックし、先ほど作成したテンプレートを選択するだけです。

新しいカスタム・ページ・テンプレートを任意のページに適用する

テンプレートを適用した後は、他のWordPressページと同じようにコンテンツを追加することができます。

WordPressサイトエディターでカスタムページを作成する

カスタムテンプレートを作成するのが大変だと感じる場合は、WordPressのサイトエディタを使ってカスタムページを作成することができます。これにより、ページ全体のデザインを変更し、完全にユニークなものにすることができます。

まず、WordPressのダッシュボードからPages " Add Newに進み、通常と同じように新しいWordPressページを作成します。ここで、タグ、カテゴリー、特集画像などの単一ページ属性を追加します。

変更を保存したら、外観 " エディターに移動し、左側のページメニュー項目をクリックします。

WordPressサイトエディターのページメニュー

サイトに作成したページのリストが表示されます。そこで、先ほど作ったページを見つけてクリックしてください。

サイトエディターメニューから新しいWordPressページを選択します。

WordPressにページのプレビューが表示されます。デザインを変更するには、ページタイトルの横にある鉛筆のアイコンをクリックしてください。

WordPressサイトエディタでカスタムページを編集する

エディターツールを使ってページのレイアウトを編集できます。例えば、青いプラスアイコンをクリックすると、新しいブロックを追加することができます。

WordPressサイトエディタとブロックエディタでページデザインをカスタマイズ

変更に満足したら、保存ボタンをクリックし、新しいデザインを見るためにページにアクセスしてください。

これで完成だ!

WordPressでカスタムページを作成する方法を学びました。今回取り上げた方法はどれも簡単で、開発者の手を借りる必要はありません。

さあ、次のプロジェクトのために完璧なWordPressページを作成しよう。

また、以下のWordPressガイドも参考になるかもしれません:

お読みいただきありがとうございました!ご質問やご意見がありましたら、お気軽にコメントをお寄せください。

また、YouTubeX(旧Twitter)Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。

著者アバター
ステイシー・コリン ライター
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。

情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。私たちは、読者に付加価値をもたらすと信じる製品のみを推薦します。