ブロックエディタで「自分で作ったテンプレート」を爆速で出す方法

コピーするとそのままペーストできる

WordPressのブロックエディタでは、コピペが簡単にできます。

まず、適当なところにカーソルを持っていって、適当にクリックしてコピーしましょう。

そのままペーストすると、先ほどコピーしたものが現れました。

これは便利ですよね！　なにも考えずにコピペができます！

【注意】<div>でグループ化している場合

上では省略しましたが、わたしの例のように「グループ化（<div>の入れ子）」を使ってレイアウトをしている場合は以下の手順が必要です。

コピーしたい範囲をクリックすると出てくるアイコンの左端にある「グループを選択」をクリックします。

この状態、つまりグループを選択した状態でコピーしなければ全体をコピーできません。

これでそのグループ（<div>）ごとコピーされますよ。

2つの<div>で入れ子にしている場合、もう一度「グループを選択アイコン」を押す必要があります。

クリップボードには何がコピーされている？

ここで問題が生じるでしょう。

クリップボードには何がコピー（保存）されているの？

ということで、メモ帳などにペーストしてみましょう。

次のような文字列が出てきます。

<!-- wp:group {"className":"txt_example-wrap"} -->
<div class="wp-block-group txt_example-wrap"><!-- wp:group {"className":"txt_example"} -->
<div class="wp-block-group txt_example"><!-- wp:paragraph {"className":"headline"} -->
<p class="headline">箇条書きの例</p>
<!-- /wp:paragraph -->

<!-- wp:list {"className":"stk-list-icon\u002d\u002dcheck02","listIconSetting":"stk-list-icon\u002d\u002dcheck02"} -->
<ul class="stk-list-icon--check02"><li>友情</li><li>努力</li><li>勝利</li></ul>
<!-- /wp:list --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

コードのわかる人が見ると「なんか余計なコードがいっぱい混じってるぞ！」と思うはず。

「<!-- wp:group {"className":"txt_example-wrap"} -->」のようなコメントアウトタグが多いですよね？

実はこれが、コピペできるカギになっています。

これを一瞬で出せたらいいのでは？

先ほどのコードをWordPressのブロックエディタにペーストすればコピーできる。

……ということは、このコードを一瞬で出力できれば、簡単にテンプレートが使えるという意味になりますよね？

では、それを解決する方法を紹介していきますね。

スニペットツールとは？

スニペットツールとは、次のアニメーション画像のようなことができる入力補助アプリです。

一瞬で長い文字を出力しています。しかも改行も反映される！

参考: スニペットツールとは? テンプレートを一瞬で呼び出せる「最強の単語登録ツール」

一瞬で出力される例

ということで、スニペットツールに登録し、ブロックエディタ上で使ってみました。

次のアニメーション画像のようになります。

ul;と文字を打った瞬間に、レイアウトが出現していますよね？

爆速すぎる！

スニペットツールを使えば、次のように「プルダウンで選択」することもできます。

yos;と文字を打った瞬間に、ウィンドウが出現し「アイコンの表情」を選んでいますよ。

「マイパターン［旧：再利用ブロック（ブログパーツ）］」に登録

まずは「マイパターン」に、テンプレートとして使いたいものを登録します。

詳しい登録の仕方はストーク19で複数の記事に同じ情報を入れる方法で紹介しています。

「ブロックパターン」に変換

STORK:マイパーツに登録を押しましょう（※この画像では「ブロックパターンに変換」という古い表記です）。

これで、簡単に呼び出すことができるようになりました。

「パターン」から登録したものを選ぶだけ

あとは「パターン」から登録したものを選ぶだけになります。