【WordPress】同期パターン(再利用ブロック)/非同期パターンの使い方(Cocoon編)

【WordPress】同期パターン(再利用ブロック)/非同期パターンの使い方(Cocoon編)

この記事では、効率よくブロックの使い回しができる同期パターン(旧再利用ブロック)と非同期パターンの使い方について、詳しく解説していきます。

テーマはCocoonを対象としています。

「CTRL」+「D」を押すだけで、当サイト【還じいブログ】の記事がブックマークできます!

修正履歴

2024.02.28) Cocoonの2.7.1がリリースされたことに伴い、全体的に見直しをした。
2024.03.03) 記事内にマウスで「パターン」呼び出しをする方法を追加。

WordPress6.3から、「再利用ブロック」は「同期パターン」という名称に変更されました!

名称変更を知らなかった人は、以下の【重要】部分を展開して変更内容を確認しましょう!

要確認
【重要】「再利用ブロック」が「同期パターン」に変更されました(タップで詳細参照)

WordPress6.3から「再利用ブロック」は「同期パターン」に変更されました。
※ブロックパターンは「非同期パターン」と同等。

スクロールできます
WordPress6.3からWordPress6.2まで
同期同期パターン再利用ブロック
非同期非同期パターンパターン(ブロックパターン)
パターンを同期/非同期に統一

そして、パターン作成時に「同期/非同期」を選択できるようになりました。

同期/非同期選択画面

また、同期/非同期パターンにの違いついては、以下の記事が参考になります。

ブロックエディタでは、「使い回し」ができる同期/非同期パターンというのが使えます。

このパターンを使えるようになると、記事を書く時間が短縮できるので記事書きのスピードがぐっと速くなりますよ!

この記事では、同期/非同期パターンの使い方、ショートコードの便利な使い方について詳しく解説しています。

ぜひ、参考にしてください!

目次

Cocoon2.7.1での実装内容

2/26にリリースされたCocoonの2.7.1で、待望のパターン関連の機能が実装されました。

1番目のうれしい追加機能が、WordPrsssの管理メニューから一発で「パターン」管理画面を開けるようになったことです。

Cocoon2.7.1の機能追加(パターン管理画面の表示)

今までは、「パターン」管理画面を開くのが結構面倒でした。

還じい

管理画面開きたいだけなのに、ちょっと面倒なんです~
1. 適当な投稿編集画面を開く。
2 右上の三点リーダーアイコンを押す。
3. メニューから「パターンの管理」を選択。

そして、2番目のうれしい機能として、「パターン」を「ショートコード」で呼び出すことができます。

ショートコードの使い方については、「パターンが呼び出せるショートコードの使い方」に詳しく書いているので、こちらを参考にしてください。

同期/非同期パターンの使い方

Cocoonのバージョンが2.7.1以降であることが前提です。
WordPress管理メニュー「ダッシュボード」→「更新」で、2.7.1以降にバージョンアップしてください。

同期パターン(旧再利用ブロック)、非同期パターン(旧ブロックパターン)の使い方です。

パターンの作成

同期/非同期パターンを作成する方法は、管理画面からと投稿記事の編集画面から作成する方法があります。

「パターン」管理画面から作成

まずは、「パターン」管理画面からの作成。

WordPress管理メニューの「パターン」→「新規パターンを追加」とクリックしたら、以下の画面で「同期/非同期」を選択して、「生成」をクリック。

「パターン」管理画面からパターンを作成

投稿記事の編集画面と似たような画面が開くので、あとは使い回しをしたいブロックを追加して、「公開」で保存します。

「パターン」管理画面からパターンを作成

投稿記事の編集画面から作成

記事を書いている時に、「このブロックは使い回しをした方がいいな」と思うことがあるでしょう。

その時に、そのまま編集画面で「パターン」(同期/非同期)を作成(変換)できる方法です。

次のように、赤枠部分を使い回ししたい(パターンにしたい)ブロックがあったとします。

投稿記事の編集画面からパターンを作成

① ~ ③の順番で操作。

  • パターンにするブロックを選択(①)
  • ブロックツールバーの一番右にある「3点リーダー」(②)をクリック
  • 「パターンを作成」(③)をクリック
投稿記事の編集画面からパターンを作成

パターン名の入力、同期/非同期を選択して「生成」をクリック。

投稿記事の編集画面からパターンを作成

これで、選択したブロックがパターンに変換されました。

「パターン」管理画面からパターンを作成

枠が紫色のブロックが「パターン」ブロックです。

パターンの呼び出し(記事への追加)

作成したパターンは、キーボードまたは、マウスで記事内に自由に呼び出す(追加する)ことができます。

キーボード入力だけで呼び出す

以下は、キーボード入力のみで「bookmark」というパターンを呼び出す場合の例です。

追加したい位置にカーソルを置いて、「/」(スラッシュ)+「bo」と入力(①)すると、「bo」で始まるパターンが検索されるので、該当のブロックをクリック(②)

キーボードのみでパターンの呼び出し(記事への追加)

これで、記事内に「パターン」を呼び出すことができます。

パターンの呼び出し(記事への追加)

WordPressの以前のバージョンでは、非同期パターンの呼び出しは「/」(スラッシュ)検索が使えませんでしたが、今のバージョン(6.4以降)では使えるようになりました。

マウスだけで呼び出す

もう一つの呼び出し方法となる、マウスだけでパターンを呼び出す場合です。

追加したい位置にカーソルを置いて、① ~ ③とクリックし、呼び出したい「ターン」をクリックします。

  • 「+」ボタン(ブロック挿入ツール切り替え)
  • 「パターン」タブ
  • 「すべてのパターン」
マウスのみでパターンの呼び出し(記事への追加)

パターンの編集

記事内に追加したパターンを編集する方法です。

「パターン」管理画面からのパターンの編集は難しくないので解説は省略します。

ここでは、同期パターンを編集する場合を例に解説します。

非同期パターンは、記事内に追加した時点でパターンから切り離されるので、パターンとしての編集はできません。

記事内に追加した「パターン」のブロックをクリックし、編集します。

記事に内に追加した「パターン」を編集する。
ブロックが編集できない場合(タップで詳細を展開)

「パターン」ブロックをクリックしても「ブロック」タブにパターン名しか表示されない場合は、再度「パターン」ブロックの中をクリックすると、ブロックが編集できるようになります。

記事に内に追加した「パターン」を編集する。

ちなみに、「パターン」ブロックを編集すると、「更新」ボタンの左に「●」が表示されるようになりますが、これは記事内の外部ブロックが編集されたことを示します。

記事に内に追加した「パターン」を編集する。

「パターン」の編集が終わったら、「更新」ボタンを押します。
すると、記事の本文とパターンにチェックがついているので、このまま「保存」→「更新」をクリック。
※この例では記事本文も修正。

記事に内に追加した「パターン」を編集する。

これで「パターン」の編集は完了です。
「パターン」管理画面から「パターン」を確認すると、編集した内容に更新されていることがわかります。

間違ってパターンを編集した時の対応

修正するつもりじゃなかったのに、間違って「パターン」を編集していまうことがあります。

この場合は、「パターン」のチェックを外して「保存」すればOKです。

記事に内に追加した「パターン」を間違って編集した場合の対応

その後に、ブラウザ(タブ)を閉じる時に以下の警告が表示されますが、「このページを離れる」をクリックしても問題ありません。

記事に内に追加した「パターン」を間違って編集した場合の対応

パターンが呼び出せるショートコードの使い方

「パターン」のショートコードを使ってウィジェットなどに呼び出すことができます。

「パターン」管理画面で呼び出したいパターンのショートコードをコピーします。

パターンが呼び出せるショートコードの使い方

WordPress管理画面メニュー「外観」の「ウィジェット」(①)をクリック。

パターンが呼び出せるショートコードの使い方

ウィジェット画面の左にある「カスタムHTML」をクリック(①)し、追加先に「投稿本文下」(②)を選択したら、「ウィジェットを追加」(③)をクリック。

パターンが呼び出せるショートコードの使い方

記事本文下にウィジェットが追加されるので、コピーしたショートコードを貼り付けて「保存」→「完了」とクリック。

パターンが呼び出せるショートコードの使い方
パターンが呼び出せるショートコードの使い方

これで、全ての記事の本文下に「パターン」が表示されるようになります。

還じい

どの記事でも全く同じブロック(パターン)を表示させたい場合は、ウィジェット+ショートコードの組み合わせは、かなり便利に使えますよ!

まとめ

繰り返しますが、Cocoonの2.7.1から「パターン」管理画面が簡単に開けるようになりました。
また、ショートコードで簡単に「パターン」を呼び出すこともできます。

「使い回し」できるパターンは、同期、非同期として使い分けることで、さらに効率よく記事が書けるようなります。

また、ショートコードが使えることで、ウィジェットなどでも簡単に呼び出すことができるので、記事を書く時間が短縮できる「パターン」を有効利用していきましょう!

「CTRL」+「D」を押すだけで、当サイト【還じいブログ】の記事がブックマークできます!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次