WordPress ブロックテーマ 固定ページ 作り方

WordPress ブロックテーマ 固定ページ 作り方

WordPressのブロックテーマで固定ページを作るには、テーマにファイルを追加する方法と管理画面からテンプレートを追加する方法があります。

一番簡単なのは管理画面からブロックエディターでテンプレートを作成する方法で、以下のようなものがあります。

  • すでにある固定ページテンプレートを編集する
  • 「テンプレート追加」から既存の固定ページを選択する
  • カスタムテンプレートを作成し、固定ページから使用するテンプレートを選ぶ

テンプレートを作ったあとはブロックを設置しながらコンテンツの内容を作成していけばOK。

詳しいやり方についてはこのあと画面の画像付きで解説していきます。

固定ページの内容がブログ記事のようなテキストだけでなくレイアウトが必要な場合、Wordpress標準のブロックだけだと思った通りのデザインを再現するのは難しいかもしれません。

固定ページもノーコードでサクサク作りたい!という方向けにコピーするだけですぐにレイアウトを作れるテンプレートを用意しました。コピーしたあとはテキストや画像を差し替えるだけで、効率よく固定ページの作成ができます。

-> 今すぐテンプレートを使ってみる

ブロックテーマで固定ページを作る方法

すでにある固定ページテンプレートを編集する

ブロックテーマによってはあらかじめ下層ページ用のテンプレートが用意されているものもあります。デフォルトテーマの「Twenty Twenty-Five」は固定ページ用のテンプレートと404ページのテンプレートなどがあります。

すでにあるテンプレートを編集するには、テンプレート名の右にあるアイコンをクリックして「編集」を選びます。

編集画面が表示されるので、文字を変更したり、フォントサイズを変更したり、レイアウトを独自のデザインに変更することができます。

「テンプレート追加」から既存の固定ページを選択する

特定の固定ページ用のテンプレートを作成することもできます。テンプレート一覧の右上にある「テンプレート追加」ボタンを押すと作成できるテンプレートの種類が表示されます。

ここで「固定ページ」を選ぶと対象の固定ページを選ぶ画面が出てきます。一覧に表示されてないページは検索窓からタイトルを検索すれば表示されます。

ページを選ぶとまっさらな編集画面が表示されるのでテーマ側で用意されたパターンを選ぶか、ゼロからレイアウトを作っていきます。

この方法で作ったテンプレートは特定のページ用のテンプレートになるので、複数ページで使いまわしたい場合は次の「カスタムテンプレート」を作成しましょう。

カスタムテンプレートを作成し、固定ページから使用するテンプレートを選ぶ

新規に固定ページを作成すると、自動的にデフォルトの固定ページ用テンプレートが選択されますが、ページごとに異なるテンプレートを用意することも可能です。

先ほどの「テンプレート追加」ボタンから「固定ページ」ではなく、下の方にある「カスタムテンプレート」を選らんください。

選択するとテンプレート名を入力する画面が表示されるので、わかりやすい名前を入力しておきます。名前は後から変更できます。

名前を入力するとまっさらな編集画面が表示されるので、パターンを選んだり、レイアウトを自分で作っていきます。

レイアウト作成の際、標準のブロックだとレスポンシブやPositionによる絶対配置ができないため、デザイン通りのレイアウトを作るのが難しいかもしれません。

せっかくのフルサイトエディターなのでもっと自由にデザインできるようにしたい!という方はOrigamiUIプラグイン(無料)がおすすめ!FlexboxやGridを使って自由にレイアウトでき、Webサイトでよくあるパターンをコピーして自由に使うことができます。

-> 今すぐテンプレートを使ってみる

カスタム投稿タイプやカスタムタクソノミーのテンプレートを作るには?

カスタム投稿タイプやカスタムタクソノミー用のページ(固定ページや一覧ページ)を作ることもできます。

やり方は通常のテンプレートの作り方と同じように、「テンプレート追加」ボタンから作成したいカスタム投稿やカスタムタクソノミーを選ぶだけです。

下層ページ間で共通のブロック(ヘッダーやフッター)を一度で編集するには?

下層ページを複数作っていると、ヘッダーやフッターのような共通のコンテンツが出てきます。

最初はとくに気にせずコピーするだけで作れますが、変更があった場合に全てのページにコピーする必要があり、結構面倒です。

このような共通のコンテンツはブロックを「パターン」化することで解決します。

やり方は簡単で、ブロックのメニューから「パターンを作成」を選ぶだけ。

詳しい方法についてはこちらのドキュメントをご覧ください。

特定のページにのみCSSスタイルを適用したい場合は?

特定のページのみにCSSを適用するには以下の方法でCSSを作成します。

  • bodyタグのClassにある「page-id-000」を使う
  • OrigamiUIでページに設置したブロックにカスタムCSSを記述する
  • ブロックのスタイルで編集する

WordPressではページごとにIDが振られており、そのページのbodyタグにあるClass内に「page-id-000」のように表示されます。

CSSコードを書くときにこのClassを追加しておけば特定のページのみに適用されるスタイルを作成できます。ページIDは固定ページの編集画面を表示したときのURLに「post=000」のように表示されます。

また、OrigamiUIプラグインを使ってブロックごとにCSSスタイルを入れることもできます。

ブロックでスタイルを設定できる場合はそこでもスタイルの変更ができます。

管理画面で作ったテンプレートはどこに保存される?

WordPressのブロックテーマではエディターを使って管理画面上で作成したテンプレートは、テーマフォルダを探してみてもどこにも作成されていません。

ブロックテーマでは、管理画面で作成・編集したテンプレートはサーバー上のファイル(front-page.htmlなど)には保存されません。

管理画面で作ったテンプレートは、データベース上の「wp_posts」テーブルに保存されます。このテーブルの「post_content」にテンプレートのタグなどの情報が全て保存されます。

phpMyAdminにログインしてWordpressのデータベースを開き、wp_postsの中にエディターで作成したテンプレートが保存されているか確認することができます。

ノーコードでWordpressサイト作るなら

OrigamiUI