パターンを使用すると、カスタマイズしたブロックを保存してサイト全体で再利用できます。新しいページに同じブロックのグループを繰り返し追加する場合、パターンを使用すると大幅に時間を節約できます。このガイドでは、パターンを作成して使用する方法について説明します。
💡
WordPress.com のデザインチームが作成したパターンのコレクションからインスピレーションを得て、イメージどおりのページを構築しましょう。
このガイド内
まず、再利用するコンテンツを作成します。パターンは、1つのブロックまたは複数のブロックのグループにすることができます。この例では、次のような画像、ヘッダー、テキスト、行動喚起 (CTA) ボタンを使用します。
コンテンツを作成したら、次の手順に従って、サイトのあらゆる場所で使用できるパターンに変換します。
- 再利用するすべてのブロックを選択します。ブロックを選択する方法はいくつかあります。
- マウスを使って互いに隣接している複数のブロックをハイライトできます。
- 「リスト表示」を使用して、最初のブロックをクリックし、キーボードの Shift キーを押しながら最後のブロックをクリックします。これにより最初のブロックと最後のブロックの間にあるすべてのブロックを選択できます。
- ブロックツールバーに表示される3つのドットをクリックします。
- 「パターンを作成」オプションをクリックします。
- パターンの用途を思い出せるような名前を付けます。名前は自分にのみ表示されます。
- 任意でパターンをカテゴリーに割り当てます。これは、整理しておきたいパターンが多数ある場合に便利です。
- 「同期済み」オプションのオンとオフを切り替えます。
- 同期済み: パターンに加えた編集は、パターンが挿入されているすべての場所に適用されます。ブロックを再利用する場合に適しています。
- 同期されてない: パターンに対して行った編集はパターンの1つのインスタンスにのみ適用されます。複数のページで同じレイアウトを使用し、各ページでパターンのコンテンツを変更する場合に適しています。
- 「作成」ボタンをクリックします。
パターンを作成したら、以下の手順に従ってコンテンツに挿入します。
- 「+」ブロック挿入アイコンをクリックします。
- 「パターン」タブを選択します。
- 次から選択します。
- すべてのパターン: WordPress.com が提供するパターンを含め、すべてのパターンを表示します。
- カスタムパターン: 自分が作成したパターンのみを表示します。
- 「このサイトについて」、「バナー」、「フォーム」、「サービス」など、カテゴリー別にサンプルパターンを表示します。
- パターンを1回クリックするとページに追加されます。
💡
キーボードを使用して新しい行に前方スラッシュ / とパターンの名前を入力し、Enter キーを押すことで、作成したパターンをすばやく追加することもできます。
パターンを追加した後、次の2つの方法で編集できます。
- 前のセクションで説明したように、サイトにパターンを追加します。
- ブロックを選択し、ブロックツールバーの「オリジナルを編集」オプションをクリックします。
- 新しいテキストの入力、ブロックの並べ替え、新しいブロックの追加、ブロックの削除など、変更を加えます。
- 変更が完了したら、右上の「保存」/「更新」/「公開」ボタンをクリックします。
- 変更を保存する前に、サイトに加えた変更の概要を確認できます。同期済みパターンを編集した場合は、ここでハイライトされます。
- もう一度「保存」ボタンをクリックして変更を確定するか、保存しない変更の横にあるボックスのチェックマークをオフにします。
ツールバーの「リセット」オプションをクリックすると、同期済みパターンをすぐにオリジナルコンテンツに復元できます。
- ダッシュボードにアクセスします。
- 「外観」→「エディター」の順に移動します。
- 「パターン」オプションをクリックします。
- パターンを選択し、鉛筆アイコンをクリックしてそのパターンを編集します。
- 編集が完了したら、「保存」ボタンをクリックします。
「外観」→「エディター」にアクセスできない場合、サイトはブロックテーマを使用していません。サイトエディターにアクセスせずにパターンを編集するには、次の手順を実行します。
- ダッシュボードにアクセスします。
- 「外観」→「パターン」の順に移動します。
- パターンのタイトルをクリックして、そのパターンを編集します。
- 編集が完了したら、「更新」ボタンをクリックします。
パターンの作成時に、同期済みまたは同期されていないパターンにすることができます。ここでは、各オプションと、両方のパターンタイプを使用する方法について説明します。
同期済みパターンとは、サイトで使用するあらゆる場所で変更されずに使用されるパターンです。同期済みパターンをサイト上の1か所で編集すると、その変更はそのパターンが使用されているすべての場所に適用されます。たとえば、営業時間の同期済みパターンを作成した場合、そのパターンの1つのインスタンスで時間を変更すると、サイト全体で更新されます。
同期済みパターンは、ダイヤモンドの後ろに別のダイヤモンドが重なって見えるパターン記号によって示されます。パターンの名前はエディターの次の場所にも表示されます。
- ブロックツールバー
- ブロック設定サイドバー
- リスト表示
- 画面下部のパンくずリスト
同期済みパターンはパターンを使用している任意の場所で変更できます。変更を保存すると、そのパターンを使用しているすべてのページと投稿に変更が適用されます。
同期済みパターンを切り離すと、そのページまたは投稿に対してのみ、パターンのコンテンツを編集できます。挿入されたパターンは同期されていないパターンに変換され、既存の同期済みパターンはそのまま残ります。
同期済みパターンを同期されていないパターンに変換するには、次の手順を実行します。
- 前のセクションで説明したように、サイトにパターンを追加します。
- パターンをクリックすると、その上または下にツールバーが表示されます。
- ツールバーの最後にある省略記号 (3つのドット) をクリックし、「切り離す」オプションを選択します。
コンテンツ構造の残りの部分は同じまま維持し、同期済みパターン内のコンテンツを上書きできます。これにより、レイアウト全体を変更しなくても個々のインスタンスのコンテンツをカスタマイズする機能をブロックごとに設定できます。パターンの上書きについては、こちらをご覧ください。
同期されていないパターンはデザインしたブロックのコレクションです。再利用する予定であるものの、ページや投稿に追加した後もブロックのコンテンツを変更できる柔軟性を必要としています。たとえば、ブログ投稿の画像とテキストを含む一貫性のあるレイアウトがあるとします。パターンを作成して同期オプションをオフにすると、各ブログ投稿で同じレイアウトを使用して画像とテキストを変更できます。
同期済みパターンとは異なり、同期されていないパターンがページに追加されると、通常のブロックのコレクションのように動作します。同期されていないパターンのコンテンツは変更でき、変更はその単一のページまたは投稿にのみ適用されます。
パターンに変更を加えると、以前のバージョンに戻す必要がある場合に備えて、以前のバージョンのブロックが保存されます。パターンのリビジョンにアクセスするには、次の手順に従います。
- ダッシュボードにアクセスします。
- 「外観」→「エディター」の順に移動します。
- 「パターン」を選択します。
- 「すべてのパターンを管理」オプションをクリックします。
- 任意のパターンのタイトルにマウスオーバーし、「編集」を選択します。
- 右側の「設定」サイドバーを開きます。幅の異なる2つの列から成る正方形のアイコンです。
- 「パターン」タブで「リビジョン」をクリックします。「リビジョン」が表示されない場合は、リビジョンがまだ保存されていません。
「外観」→「エディター」にアクセスできない場合、サイトはブロックテーマを使用していません。サイトエディターにアクセスせずにパターンリビジョンにアクセスするには、次の手順を実行します。
- ダッシュボードにアクセスします。
- 「外観」→「パターン」の順に移動します。
- リビジョンを表示するパターンのタイトルをクリックします。
- 右側の「設定」サイドバーを開きます。幅の異なる2つの列から成る正方形のアイコンです。
- 「パターン」タブで「リビジョン」をクリックします。「リビジョン」が表示されない場合は、リビジョンがまだ保存されていません。
リビジョンには、以前に保存したすべてのパターンのバージョンが表示されます。ページと投稿のリビジョンと同様に、ここでは必要に応じて古いバージョンのパターンを読み込むことができます。
サイトからパターンを削除するには、次の手順に従います。
- ダッシュボードにアクセスし、「外観」→「エディター」の順に移動します。
- 「パターン」→「カスタムパターン」の順に選択します。
- パターン名の横にある3つのドットをクリックし、「削除」オプションを選択してパターンを削除します。
「外観」→「エディター」にアクセスできない場合、サイトはブロックテーマを使用していません。サイトエディターにアクセスせずにパターンリビジョンを削除するには、次の手順を実行します。
- ダッシュボードにアクセスします。
- 「外観」→「パターン」の順に移動します。
- 削除するパターンのタイトルにマウスオーバーします。
- タイトルの下にある「ゴミ箱」オプションを選択します。
あるサイトのパターンを別のサイトに移動する場合に、ブロックを JSON ファイルとしてエクスポートおよびインポートする方法を以下に示します。
- ダッシュボードにアクセスします。
- 「外観」→「エディター」の順に移動します。
- 「パターン」を選択します。
- 「すべてのパターンを管理」をクリックすると、次のことを実行できます
- パターンをエクスポートする: 任意のパターンのタイトルにマウスオーバーし、「JSON 形式でエクスポート」オプションをクリックします。これにより、ファイルがコンピューターに保存されます。パターンを作成した場合は、チェックボックスを使用してこれらを一括選択し、グループとしてエクスポートできます。
- パターンをインポートする: パターン管理画面の上部にある「JSON からインポート」ボタンをクリックします。
「外観」→「エディター」にアクセスできない場合、サイトはブロックテーマを使用していません。サイトエディターにアクセスせずにパターンをインポートするには、次の手順を実行します。
- ダッシュボードにアクセスします。
- 「外観」→「パターン」の順に移動します。
- パターン画面の上部にある「JSON からインポート」ボタンをクリックします。
- 「ファイルを選択」をクリックし、アップロードするファイルを選択します。
- 「インポート」をクリックします。
サイトエディターにアクセスせずにパターンをエクスポートするには、次の手順を実行します。
- ダッシュボードにアクセスします。
- 「外観」→「パターン」の順に移動します。
- エクスポートするパターンのタイトルにマウスオーバーします。
- タイトルの下にある「JSON 形式でエクスポート」オプションを選択します。
コメントを投稿するにはログインしてください。