サイトのデザインを変更する

基本的な操作方法

サイトエディターを開く

サイトのデザイン(レイアウト)のカスタマイズはサイトエディターでおこないます。サイトエディターは管理バーの「サイトを編集」をクリックすると開くことができます。

編集したいテンプレートを開く

unitone にはページの種類毎に複数のテンプレートが用意してあります。例えばアーカイブ用テンプレート、固定ページ用テンプレート、個別投稿用テンプレートなどです。サイトエディターはどのページから開いたときでもトップページに適用されたテンプレートが選択された状態で開くので、トップページ以外のテンプレートを使用したい場合は編集したいテンプレートを選択して開く必要があります。

ヘッダーやフッターはテンプレートパーツになっており、これらもサイトエディターで編集できます。

unitone では、ヘッダーテンプレートパーツ・フッターテンプレートパーツは各テンプレートで共通のものが参照されているので、例えば固定ページ用テンプレートを開いた状態でヘッダーテンプレートパーツを編集すると、トップページやアーカイブページにもその変更が反映されます。

ページ上部にある「template の詳細を表示」ボタンから任意のテンプレートを開くことができます。

新しいテンプレートを作成する

unitone では基本的なテンプレートはデフォルトで用意されていますが、unitone で用意していないテンプレート、例えばカテゴリー用テンプレートや投稿者用テンプレートが必要な場合は、それらもサイトエディターから作成できます。

WordPress 6.0 現在、カスタム投稿タイプ用のテンプレートはサイトエディターから作成できないので今後作成できるようになってほしい…!

編集したいテンプレートパーツを選択する

ページ上部にある「template の詳細を表示」ボタンから任意のテンプレートパーツを選択できます。ここで選択できるテンプレートパーツは現在選択されているテンプレートで使用されているものだけになります。

他のテンプレートパーツを選択したい場合は「すべてのテンプレートを表示 → テンプレートパーツ」で選択できます。

unitone テンプレートの構造について

unitone の各テンプレートは基本的に下記のような構造になっています。

└ テンプレート用テンプレートパーツ
  ├ ヘッダー用テンプレートパーツ
  ├ コンテンツ用テンプレートパーツ
  └ ヘッダー用テンプレートパーツ

ヘッダー、コンテンツ、ヘッダーのテンプレートパーツは複数種類のデザインが用意してあります。デザインをカスタマイズしたい場合はまずは用意されているデザインに切り替えて(置換して)から、自分の好みのデザインに調整していくのがオススメです。

ヘッダー・フッターテンプレートパーツを置換する

ページ上部にある「template の詳細を表示」ボタンから「ヘッダー」あるいは「フッター」を選択してください。

選択するとブロックツールバーに「置換」というボタンが表示されるのでクリックしてください。クリックするとモーダルが開くので、適用したいパターンを選択してください。

unitone では、ヘッダーテンプレートパーツ・フッターテンプレートパーツは各テンプレートで共通のものが参照されているので、例えば固定ページ用テンプレートを開いた状態でヘッダーテンプレートパーツを編集すると、トップページやアーカイブページにもその変更が反映されます。

現状、ブロックパターンを使ってつくられたテンプレートパーツの場合、モーダルやインサーター内のプレビューにそのブロックパターンが表示されない不具合があります。WordPress コアの不具合でありテーマ側で根本的な解決をすることはできないのですが、なにか回避方法がないものか…

コンテンツテンプレートパーツを置換する

コンテンツ用のテンプレートパーツはヘッダー・フッターテンプレートパーツとは違い各テンプレート毎に用意されています。従って、まずは置換したいコンテンツテンプレートパーツが含まれるテンプレートを開く必要があります。

ページ上部にある「template の詳細を表示」ボタンから任意のテンプレートを開くことができます。

開いたら、ページ上部にある「template の詳細を表示」ボタンから「○○ページのコンテンツ」を選択してください。

選択するとブロックツールバーに「置換」というボタンが表示されるのでクリックしてください。クリックするとモーダルが開くので、適用したいパターンを選択してください。

unitone のコンテンツテンプレートパーツは基本的には下記のものが用意されています。

  • デフォルト(ページタイトルのみ表示)
  • アイキャッチ画像 + ページタイトル(個別投稿・固定ページテンプレートのみ選択可能)
  • 画像 + ページタイトル
  • 右サイドバー