第8回 のんびり研究所構築日記｜同期パターンを使って、シリーズ案内を一括管理する

前回は、Cocoonの吹き出し機能へ、きょろぽん、ノン、アマデウス、鈴羽の4人を登録しました。

登録した吹き出しは、これからの記事でも会話や説明に使っていく予定です。

今回は、さっそく吹き出しを使いながら、シリーズ記事を作っていて気付いた問題を解決します。

シリーズの記事が増えるたび、全記事の修正が必要になる

「のんびり研究所構築日記」の冒頭には、シリーズの記事一覧を掲載しています。どの記事から読んでも、前後の記事やシリーズ全体の内容が分かるようにするためです。

しかし、このシリーズが全部で何回になるのかは、まだ決まっていません。新しい作業を試すたびに記事が増えるため、当初の予定より回数が増える可能性もあります。

シリーズが1本増えるたびに、第1回から最新記事までを一つずつ開き、同じ一覧を修正する必要があります。今はまだ記事数が少ないので修正できますが、10本、20本と増えてから毎回すべての記事を直すのは大変です。

同期パターンとは

同期パターンは、複数の記事や固定ページで同じ内容を使い回すための機能です。

同期した状態で登録したパターンは、どこか1か所で内容を変更すると、そのパターンを使っているほかの記事にも変更が反映されます。

以前のWordPressで「再利用ブロック」と呼ばれていた機能に近いものです。

今回のように、複数の記事で共通して掲載するシリーズ案内に向いています。

同期パターンは、シリーズ一覧、共通のお知らせ、注意事項、プロフィール案内など、複数ページで同じ内容を表示したい場面に利用できます。

今回行うこと

1. 第8回の記事で、シリーズ案内の同期パターンを新しく作る
2. 第7回の記事にあるシリーズ案内を、同期パターンへ差し替える
3. 第7回の記事で、共通部分が正しく表示されるか確認する
4. 第1回から第6回までのシリーズ案内も、同じ同期パターンへ差し替える
5. 同期パターンを1か所修正し、すべての記事へ反映されるか確認する

同期パターンの作り方は最初に詳しく説明し、2記事目以降の差し替えは簡略化して進めます。

同期パターンに入れる内容を準備する

まず、これまで各記事の冒頭へ入れていたシリーズ案内を確認します。

今回は、次のような構成を共通部分として登録します。

• 「このシリーズについて」の見出し
• シリーズの簡単な説明
• 第1回から現在予定している記事の一覧
• 記事数や内容を変更する場合があるという注意書き

「この記事」の表記は共通部分へ入れない

これまでの一覧では、現在読んでいる記事に「この記事」と表示していました。

しかし、同期パターンはすべての記事で同じ内容を表示します。

たとえば、第8回を「この記事」と書いた状態で同期すると、第1回の記事を開いたときにも第8回が「この記事」と表示されてしまいます。

そのため、同期パターン内の一覧では、特定の回だけに「この記事」と表示しない形へ変更します。

記事ごとに異なる内容は、同期パターンの中へ入れません。現在の回を示したい場合は、同期パターンの外側に個別の文章として入れます。

第8回の記事で同期パターンを作る

シリーズ案内をブロックで作成する

第8回の記事編集画面を開き、記事の冒頭へシリーズ案内を作成します。

見出し、説明文、記事一覧、注意書きを、これまでの記事と同じ内容になるように入力します。

シリーズ案内全体をグループ化する

同期パターンとして扱いやすいように、シリーズ案内全体を一つのグループへまとめます。

見出しから注意書きまでのブロックをすべて選択します。

複数のブロックを選択できたら、ブロックツールバーまたはオプションメニューから「グループ化」を選択します。

グループ化を選択すると、シリーズ案内が一つのグループになります。

パターンを作成する

シリーズ案内をまとめたグループブロックを選択します。

ブロックツールバーのオプションメニューを開き、「パターンを作成」を選択します。

パターン名と同期設定を決める

パターンの名前を入力します。

今回は、後から見つけやすいように、次のような名前で登録します。

のんびり研究所構築日記・シリーズ案内

同期に関する設定が表示された場合は、同期する状態を選択します。同期を有効にして保存することで、1か所の変更を使用中のすべての記事へ反映できるようになります。

同期しないパターンは、挿入時に同じ構成を複製するためのひな型として使えます。今回は全記事の内容を一括で変更したいため、同期するパターンとして保存します。

第8回の記事を保存して表示を確認する

同期パターンを作成できたら、第8回の記事を下書き保存します。

プレビューを開き、これまでのシリーズ案内と同じように表示されているか確認します。

第7回の記事を同期パターンへ差し替える

次に、公開済みの第7回の記事を開きます。

現在入っているシリーズ案内を削除し、先ほど作成した同期パターンへ差し替え作業を行っていきます。

既存のシリーズ案内を削除する

第7回の記事冒頭にある「このシリーズについて」から注意書きまでを選択します。

選択する範囲を確認してから削除します。

第7回に入っている古いシリーズ案内

古いシリーズ案内を選択

シリーズ案内を削除した状態

同期パターンを挿入する

シリーズ案内を削除した位置で、ブロック追加の「＋」を押します。

パターンの一覧を開き、先ほど登録した「のんびり研究所構築日記・シリーズ案内」を選択します。

検索欄が利用できる場合は、パターン名の一部を入力して探します。

第7回へ同期パターンを挿入した状態

第7回の最後にある次回予告を修正する

第7回の記事末尾では、次回は「メニューとサイドバーを設定する」と案内していました。

第8回の内容を同期パターンへ変更したため、次回予告も修正します。

今回は、シリーズ記事を作っていて発生した問題と、その効率化を扱うことが伝わる文章に変更します。

変更前：

次回は、サイト内で記事を探しやすくするため、メニューとサイドバーを設定します。

変更後の例：

次回は、シリーズの記事が増えるたびに、すべての記事を修正しなければならない問題が発生します。WordPressの同期パターンを使い、1か所の変更を全記事へ反映できるようにしてみます。

第7回を更新して確認する

第7回の記事を更新し、公開ページを確認します。

シリーズ案内の見た目が崩れていないか、リンクが正しいか、本文との間隔に違和感がないかを確認します。

同期パターンを変更して第7回へ反映されるか試す

第8回の記事に戻り、同期パターンの一部を試しに変更します。

今回は、記事一覧へ第8回を追加したり、準備中の回数表記を変更したりして、保存後に第7回へも反映されるか確認します。今回は第9回目の部分を「第9回目：サイトマップ構築」に変え、「第10回以降：準備中」を追加します。

まずは同期パターン編集画面に入ります。「オリジナルを編集」を押して編集に入ります。

内容を書き換え、最後に右上の保存を押します。

記事編集に戻る場合が上部の「戻る」を押します

第7回の公開ページを再読み込みし、同じ変更が反映されていれば成功です。

第1回から第6回も同期パターンへ差し替える

第7回で正しく動作することを確認できたので、第1回から第6回までの記事も同じ同期パターンへ差し替えます。

操作内容は第7回と同じです。

1. 記事の編集画面を開く
2. 古いシリーズ案内を削除する
3. 同じ位置へ同期パターンを挿入する
4. プレビューで表示を確認する
5. 記事を更新する

第7回で詳しく説明したため、ここからは各記事、第1回～第6回まで修正していきます。

すべての記事へ反映されるか最終確認する

第1回から第8回までの差し替えが終わったら、同期パターンをもう一度編集します。

記事タイトルや準備中の表記など、分かりやすい部分を変更して保存します。

その後、複数の記事を開いて、同じ変更が反映されているか確認します。

すべての記事へ同じ内容が反映されていれば、シリーズ案内の共通化は完了です。

同期パターンを使うときの注意点

編集すると使用中の全ページへ反映される

同期パターンは便利ですが、内容を編集すると、そのパターンを使用しているすべての記事へ変更が反映されます。

1記事だけ内容を変えるつもりで編集すると、ほかの記事まで変わるため注意が必要です。

同期パターンを編集するときは、共通部分として全記事へ反映してよい内容か確認してから保存します。

記事ごとに違う内容はパターンの外へ置く

「この記事は第8回です」など、記事ごとに異なる文章は同期パターンの外側へ置きます。

共通部分と個別部分を分けておくことで、誤った表示を防ぎやすくなります。

削除前に範囲を確認する

古いシリーズ案内を削除するときは、本文まで一緒に削除しないよう、選択範囲を確認します。

公開済みの記事を修正するため、不安な場合は変更前の文章をメモ帳などへ控えてから作業します。

同期パターンに向いている内容

• 複数記事に掲載する共通のお知らせ
• 記事末尾のプロフィールや研究員紹介
• 共通の注意事項
• キャンペーンや受付状況の案内
• 関連記事への案内
• サイト共通の補足説明

反対に、記事ごとに文章を変えたい部分は、同期しないパターンや通常のブロックの方が向いています。

方法	向いている使い方
同期パターン	どの記事でも同じ内容を表示し、1か所の変更を全体へ反映したい
同期しないパターン	同じ構成をひな形として挿入し、記事ごとに内容を変更したい
通常のブロック	その記事だけで使う内容を作りたい

今回のまとめ

今回は、シリーズの記事が増えるたびに、すべての記事の一覧を修正しなければならない問題を、WordPressの同期パターンで解決しました。

最初に第8回の記事でシリーズ案内を同期パターンとして登録し、第7回の記事へ差し替えて動作を確認しました。

正しく同期できることを確認した後、第1回から第6回までの記事も同じパターンへ変更しました。

最初の差し替えには少し手間がかかりますが、これから記事が増えたときは、同期パターンを1か所修正するだけで、シリーズ全体の案内を更新できます。

記事を増やしてから困る前に、共通部分をまとめて管理できるようになりました。

次回は、サイト内で記事を探しやすくするため、メニューとサイドバーを設定します。