トランスクリプト
はじめに
ブロックを使って、ヘッダーからフッターまで、サイト上のすべてをデザインできるサイトエディターについて見ていきましょう。まず「外観」に移動し、「エディター」をクリックします。これでサイトエディターが開きます。左側にはサイト表示サイドバーがあり、この便利なツールを使って、ナビゲーション、スタイル、固定ページ、テンプレート、パターンなど、サイトの主要部分にアクセスできます。このチュートリアルでは、これらの要素について深く理解することを目指します。
ナビゲーション
まず、上部にあるナビゲーションから始めましょう。ここでは、すべてのメニューをすばやく確認して調整できます。メニュー管理の司令塔です。簡単な編集を直接行うこともできます。たとえば、並べ替えです。メニュー項目’の名前の横にある縦に並んだ3つのドットをクリックすると、必要に応じて項目の名前変更、複製、削除ができます。編集モードで開けば、気を散らすものなしに特定の変更を加えられます。変更内容はサイト全体に同期されます。プラスアイコンをクリックすると、新しいページやその他のメニュー項目を追加できます。このエリアではナビゲーションブロックがロックされていることがわかります。ナビゲーションメニューのスタイルを設定するには、テンプレート、またはその一部になっているテンプレートパーツを開く必要があります。
スタイル
次に、スタイルについて説明します。「スタイル」を選択すると、テーマに含まれるさまざまなスタイルの組み合わせを参照できます。「スタイルを編集」をクリックすると、ここからスタイルを確認し、サイト’のタイポグラフィ、色、レイアウトを変更できます。仕組みを見てみましょう。「タイポグラフィ」をクリックすると、テキスト、リンク、見出し、キャプション、ボタンのタイポグラフィ設定を管理できます。すばらしい新機能として、フォントライブラリも利用できるようになりました。「フォント」の下には、テーマに追加されたフォントが表示されます。「フォントを管理」をクリックすると、ブロックテーマを使ってサイト全体にローカルフォントやGoogleフォントをインストール、削除、アクティベートできます。「フォントをインストール」をクリックすると、サイトに任意のGoogleフォントをインストールできます。コンピューターからフォントをアップロードしたい場合は、「アップロード」をクリックします。アップロードするフォントを使用する権利があることを確認してください。「タイポグラフィ」の下には色があります。ここでは、サイト上のさまざまなグローバル要素の色も変更できます。「レイアウト」に進むと、パディングやブロック間隔などの要素も制御できることがわかります。
スタイルブック
さらに下を見ると、サイト全体に適用する特定のブロックの外観をカスタマイズできます。これらのブロックを編集するとどのように変化するか確認するには、サイト’のスタイルブックに移動します。上部に小さな目のアイコンがあることに気づくでしょう。スタイルブックでは、サイトに挿入できるすべてのブロックをプレビューできます。ユーザーがブロックをテンプレートに挿入しなくても、グローバルスタイルが表示されるブロックにどのような影響を与えるかを簡単に確認できます。また、スタイルブック内でブロックのスタイルを調整できる点も重要です。たとえば、「ボタン」ブロックの背景色と文字の大文字・小文字を大文字に変更してみましょう。表示が気に入ったら、「保存」をクリックします。スタイルブックで個別のブロックを変更すると、設定したグローバルスタイルよりも優先されることにも注意してください。
スタイルのリビジョン
ここでは、スタイルのリビジョンについても説明します。スタイルブックのアイコンの横にある「スタイルのリビジョン」をクリックしましょう。スタイルブックでテンプレートを編集しているときに、スタイルのリビジョンが開きます。スタイルのリビジョン機能では、時間の経過に伴うスタイルの変更を視覚的に確認できます。好みのスタイルを見つけた場合や以前のバージョンに戻したい場合は、簡単に以前の状態に戻せます。バージョンを選択して「適用」をクリックするだけです。この例ではテンプレートを編集し、同じ手順に従います。スタイルのリビジョンを開き、以前のスタイルを選択して、「適用」をクリックして元に戻します。スタイルの横にある縦に並んだ3つのドットをクリックすると、スタイルをリセットしたり、追加のCSSを追加したりできます。
固定ページ
「スタイル」の下にある「固定ページ」から、固定ページを作成して公開できます。新しい固定ページを追加するには、「固定ページ」の横にあるプラスアイコンをクリックし、下書きを作成します。もちろん、ダッシュボードやWP Adminから新しい固定ページを作成することもできます。次に、既存の固定ページの1つである「Aboutページ」を開いてみましょう。固定ページを開いたときは、「コンテンツ」ブロックにコンテンツを追加することが重要です。別の言い方をすれば、コンテンツブロックはすべてのコンテンツを収める家、つまりコンテナです。もう1つ覚えておくべきことは、固定ページを編集しているときにヘッダーとフッターをカスタマイズすることはできないという点です。これらはテンプレートの管理に含まれます。ヘッダーをクリックすると、「このブロックを編集するには、テンプレートを編集してください。」というメッセージが表示されます。この固定ページに割り当てられているテンプレートを変更したい場合は、「テンプレートを編集」をクリックします。この例では、固定ページのテンプレートに移動します。ここでヘッダーとフッターを変更できます。テンプレートにコンテンツを追加することはできません。もちろん、コンテンツは投稿や固定ページに追加します。このコンテキストでは、コンテンツブロックは単なるプレースホルダーです。
テンプレート
これで次のトピック、テンプレートに移ります。テンプレートは、コンテンツの表示方法の構造を提供します。「テンプレート」を選択すると、テーマに組み込まれているさまざまなテンプレートが表示されます。たとえば、1つの固定ページを表示する固定ページテンプレート、フォールバックテンプレートであるインデックステンプレート、個々の投稿のレイアウトを表示する個別投稿テンプレートなどです。一番下には、カスタムテンプレートも表示されます。「テンプレート」の横にあるプラスアイコンをクリックすると、投稿や固定ページに適用できるカスタムテンプレートなど、さまざまな新しいテンプレートを追加できます。テンプレートの仕組みをよりよく理解するために、固定ページテンプレートを開いてみましょう。テンプレートは構造を提供します。通常、テンプレートにはヘッダーのテンプレートパーツとフッターのテンプレートパーツが含まれます。
投稿コンテンツブロックは、テンプレートに割り当てられた固定ページまたは投稿からコンテンツを取得します。つまり、テンプレートは固定ページのレイアウトやデザイン、すなわちヘッダー、フッター、さらにはサイドバーを変更するためだけに使用されます。したがって、サイトエディターではテンプレートの編集と固定ページの編集が明確に区別されています。テンプレート内でヘッダーとフッターを変更できます。また、縦に並んだ3つのドットをクリックして「ヘッダーを置換」を選択することもできます。これにより、現在のヘッダーを、既存のヘッダーテンプレートパーツまたはテーマに含まれるヘッダーパターンに置き換えられます。もう1つの方法は、ヘッダーを選択して「編集」をクリックすることです。これにより、他の要素に気を取られることなく、テンプレート編集モードでヘッダーまたはフッターを変更できます。
テンプレートの割り当て
固定ページや投稿に新しいテンプレートを割り当てるには、該当するコンテンツ、この場合は「Aboutページ」を開き、右側のサイドバー設定を開きます。「テンプレート」の横にあるテンプレート名をクリックし、「テンプレートを交換」を選択すると、固定ページや投稿に割り当てるカスタムテンプレートを選択できます。
テンプレートの管理
「すべてのテンプレートを管理」をクリックしてから「一括編集」を選択すると、テーブルビューまたはグリッドビューでテンプレートを確認したり、絞り込んだりできます。もう一度「一括編集」を選択すると、さらに多くの絞り込みオプションが表示されます。固定ページとテンプレートパーツも、まったく同じ方法で確認および絞り込みができることに注意してください。
パターン
最後に、パターンについて説明します。上部では、利用可能なすべてのパターンを確認できます。「マイパターン」を選択すると、独自のカスタム同期パターンと非同期パターンを作成および管理できます。「マイパターン」の下には、カスタムパターンと、テーマに含まれるパターンが関連するカテゴリーごとに表示されます。「テンプレートパーツ」の下では、ヘッダー、フッター、一般テンプレートパーツも作成および管理できます。テンプレートパーツは基本的にパターンです。サイト全体で使用できる、同期された再利用可能なコンポーネントです。
カスタムパターン
「マイパターン」から始めましょう。カスタムパターンを作成するには、パターンの横にあるインサーターをクリックし、「パターンを作成」を選択します。名前を付けたら、関連するカテゴリーに追加するかどうかを選択し、パターンを同期するかどうかを決めます。同期パターンはサイト全体で同期されます。つまり、ある場所でパターンを変更すると、使用されているすべての場所で更新されます。これをオフにして、非同期パターンにすることもできます。非同期パターンは、独立して編集できる通常のパターンです。カスタムパターンのエリアに戻ると、同期パターンには紫色のアイコンが表示され、非同期パターンには表示されないことがわかります。次に、テーマに含まれるパターンはロックされていて、編集できないことに気づくでしょう。ただし、パターンの下にある縦に並んだ3つのドットをクリックすると、そのパターンを「マイパターン」エリアにコピーできます。
テンプレートパーツ
下部では、ヘッダー、フッター、一般テンプレートパーツを作成および管理できます。ここには2つの方法があります。カスタムのヘッダーとフッターを作成するか、テーマに含まれるテンプレートパーツのパターンをカスタマイズできます。独自のテンプレートパーツを作成するには、上部のパターンの横にあるプラスアイコンをクリックし、「テンプレートパーツを作成」を選択します。新しいテンプレートパーツを追加するときは、一般、ヘッダー、フッターのテンプレートパーツから選択できます。一般テンプレートパーツは特定のエリアに紐付けられていないため、内容がわかる名前を付けることを忘れないでください。ここからテンプレートパーツを開くと、他の要素に気を取られることなく、テンプレート編集モードでテンプレートパーツを変更および編集できます。関連するテンプレート、この場合はカスタムテンプレートを開き、テンプレート内からヘッダーまたはフッターのテンプレートパーツを変更することもできます。先ほど説明したように、ヘッダーやフッターを、ライブラリにあるパターンまたは既存のテンプレートパーツに簡単に置き換えられます。
コマンドパレット
最後に、コマンドパレットという非常に便利な機能についても紹介します。これは多くの時間を節約し、サイトエディター内をより効率的に移動できるようにします。コマンドパレットを使うと、サイトエディター内での作業や移動をすばやく行えます。たとえば、「‘新規’」と入力して固定ページやテンプレートを作成したり、移動したいエリアの名前だけを入力したりできます。たとえば、すべてのパターンを管理するには「パターン」と入力します。MacではCommand+K、WindowsではControl+Kのショートカットを使ってコマンドパレットにアクセスできます。また、サイト表示サイドバーの検索アイコンをクリックして開くこともできます。タイトルバーをクリックするだけでも開けます。
まとめ
これで、サイトエディターを使ってできることについての簡単な概要は終了です。
実践
WordPress Playgroundを使ってサイトエディターを試してみましょう。
- サイトエディター内のさまざまなエリア間を移動する練習をしましょう。
- コマンドパレットを使って、サイトエディター内をよりすばやく移動しましょう。
- 固定ページとテンプレートの違いを比較してみましょう。