この記事では、効率よくブロックの使い回しができる同期パターン(旧再利用ブロック)と非同期パターンの使い方について、詳しく解説していきます。
テーマはCocoonを対象としています。
2024.02.28) Cocoonの2.7.1がリリースされたことに伴い、全体的に見直しをした。
2024.03.03) 記事内にマウスで「パターン」呼び出しをする方法を追加。
名称変更を知らなかった人は、以下の【重要】部分を展開して変更内容を確認しましょう!
【重要】「再利用ブロック」が「同期パターン」に変更されました(タップで詳細参照)
WordPress6.3から「再利用ブロック」は「同期パターン」に変更されました。
※ブロックパターンは「非同期パターン」と同等。
WordPress6.3から | WordPress6.2まで | |
---|---|---|
同期 | 同期パターン | 再利用ブロック |
非同期 | 非同期パターン | パターン(ブロックパターン) |
そして、パターン作成時に「同期/非同期」を選択できるようになりました。
また、同期/非同期パターンにの違いついては、以下の記事が参考になります。
ブロックエディタでは、「使い回し」ができる同期/非同期パターンというのが使えます。
このパターンを使えるようになると、記事を書く時間が短縮できるので記事書きのスピードがぐっと速くなりますよ!
ぜひ、参考にしてください!
Cocoon2.7.1での実装内容
2/26にリリースされたCocoonの2.7.1で、待望のパターン関連の機能が実装されました。
1番目のうれしい追加機能が、WordPrsssの管理メニューから一発で「パターン」管理画面を開けるようになったことです。
今までは、「パターン」管理画面を開くのが結構面倒でした。
管理画面開きたいだけなのに、ちょっと面倒なんです~
1. 適当な投稿編集画面を開く。
2 右上の三点リーダーアイコンを押す。
3. メニューから「パターンの管理」を選択。
そして、2番目のうれしい機能として、「パターン」を「ショートコード」で呼び出すことができます。
ショートコードの使い方については、「パターンが呼び出せるショートコードの使い方」に詳しく書いているので、こちらを参考にしてください。
同期/非同期パターンの使い方
同期パターン(旧再利用ブロック)、非同期パターン(旧ブロックパターン)の使い方です。
パターンの作成
同期/非同期パターンを作成する方法は、管理画面からと投稿記事の編集画面から作成する方法があります。
「パターン」管理画面から作成
まずは、「パターン」管理画面からの作成。
WordPress管理メニューの「パターン」→「新規パターンを追加」とクリックしたら、以下の画面で「同期/非同期」を選択して、「生成」をクリック。
投稿記事の編集画面から作成
記事を書いている時に、「このブロックは使い回しをした方がいいな」と思うことがあるでしょう。
その時に、そのまま編集画面で「パターン」(同期/非同期)を作成(変換)できる方法です。
次のように、赤枠部分を使い回ししたい(パターンにしたい)ブロックがあったとします。
① ~ ③の順番で操作。
- パターンにするブロックを選択(①)
- ブロックツールバーの一番右にある「3点リーダー」(②)をクリック
- 「パターンを作成」(③)をクリック
パターン名の入力、同期/非同期を選択して「生成」をクリック。
パターンの呼び出し(記事への追加)
作成したパターンは、キーボードまたは、マウスで記事内に自由に呼び出す(追加する)ことができます。
キーボード入力だけで呼び出す
以下は、キーボード入力のみで「bookmark」というパターンを呼び出す場合の例です。
追加したい位置にカーソルを置いて、「/」(スラッシュ)+「bo」と入力(①)すると、「bo」で始まるパターンが検索されるので、該当のブロックをクリック(②)
WordPressの以前のバージョンでは、非同期パターンの呼び出しは「/」(スラッシュ)検索が使えませんでしたが、今のバージョン(6.4以降)では使えるようになりました。
マウスだけで呼び出す
もう一つの呼び出し方法となる、マウスだけでパターンを呼び出す場合です。
追加したい位置にカーソルを置いて、① ~ ③とクリックし、呼び出したい「ターン」をクリックします。
- 「+」ボタン(ブロック挿入ツール切り替え)
- 「パターン」タブ
- 「すべてのパターン」
パターンの編集
記事内に追加したパターンを編集する方法です。
ここでは、同期パターンを編集する場合を例に解説します。
非同期パターンは、記事内に追加した時点でパターンから切り離されるので、パターンとしての編集はできません。
記事内に追加した「パターン」のブロックをクリックし、編集します。
ブロックが編集できない場合(タップで詳細を展開)
「パターン」ブロックをクリックしても「ブロック」タブにパターン名しか表示されない場合は、再度「パターン」ブロックの中をクリックすると、ブロックが編集できるようになります。
ちなみに、「パターン」ブロックを編集すると、「更新」ボタンの左に「●」が表示されるようになりますが、これは記事内の外部ブロックが編集されたことを示します。
「パターン」の編集が終わったら、「更新」ボタンを押します。
すると、記事の本文とパターンにチェックがついているので、このまま「保存」→「更新」をクリック。
※この例では記事本文も修正。
間違ってパターンを編集した時の対応
修正するつもりじゃなかったのに、間違って「パターン」を編集していまうことがあります。
この場合は、「パターン」のチェックを外して「保存」すればOKです。
その後に、ブラウザ(タブ)を閉じる時に以下の警告が表示されますが、「このページを離れる」をクリックしても問題ありません。
パターンが呼び出せるショートコードの使い方
「パターン」のショートコードを使ってウィジェットなどに呼び出すことができます。
「パターン」管理画面で呼び出したいパターンのショートコードをコピーします。
WordPress管理画面メニュー「外観」の「ウィジェット」(①)をクリック。
ウィジェット画面の左にある「カスタムHTML」をクリック(①)し、追加先に「投稿本文下」(②)を選択したら、「ウィジェットを追加」(③)をクリック。
記事本文下にウィジェットが追加されるので、コピーしたショートコードを貼り付けて「保存」→「完了」とクリック。
どの記事でも全く同じブロック(パターン)を表示させたい場合は、ウィジェット+ショートコードの組み合わせは、かなり便利に使えますよ!
まとめ
「使い回し」できるパターンは、同期、非同期として使い分けることで、さらに効率よく記事が書けるようなります。
また、ショートコードが使えることで、ウィジェットなどでも簡単に呼び出すことができるので、記事を書く時間が短縮できる「パターン」を有効利用していきましょう!