[WordPress + Gutenberg] 再利用ブロックの使い方

アイキャッチ画像


記事内に商品のプロモーションを含む場合があります。

Nプログラマ(@Nprog128)です。

今回はWordPress + Gutenbergでの再利用ブロックの使い方のメモリアです。

記事を書く時に毎回同じような定型文を使う時ことがあると思います。

なプ

挨拶や締めの言葉とか、、、

コピペで毎回コピーしてもいいのですが、どうしてもコピペミスなどが起きてしまう時があります。

そんな時は再利用ブロックを使って、よく使う定型文を登録しておくとこういう問題が減ってちょっとラクになりますよ。

なプ

使い始めてみると意外と便利ッス!

\ ワードプレスが使える! /

再利用ブロックとは

文字通り再利用できるブロック(reusable block)のことです。

再利用ブロックとは、そのブロックをまるっとテンプレートのように登録しておき、編集画面の任意のブロックで使うことができます。

特徴はカテゴリやタグのように専用の管理画面で一元管理されており、変更した再利用ブロックは使用箇所全てに反映されます。

AddQuicktagのように使いたい

AddQuicktagプラグインのように、定型文をまず入力してからちょっと内容を変更したい、という使い方をしたい時もあると思います。

再利用ブロックはそういった使い方はできませんが、再利用ブロックを通常のブロックへ変換をすれば同じような使い方ができます。

任意の名前をつける事も可能で、エディタのブロック選択でその名前をインクリメンタルサーチで検索することができます。

なプ

検索ができるので、ブロックリストをスクロールで探す手間が省けますねっ!

記事の構成が決まっていて定型文を使うことが多い時に重宝すると思います。

以前はこういう定型文を使う場合ショートコードやプラグインを使う必要がありましたが、Wordpress(Gutenberg)のデフォルトでこのような機能があるのは大変ありがたいですね。

使い方

まずは記事の編集画面を開きます。

なプ

とりあえず記事タイトルは入力しておきましたっ!

/img/article/2020/09/26/02.jpg
編集画面 タイトル入力済み

ここでは挨拶の文言を再利用ブロックに登録してみます。

こんな感じで挨拶の文言を入力します。

/img/article/2020/09/26/03.jpg
挨拶の文言

次にこの挨拶のブロックを再利用ブロックとして登録します。

先程入力した挨拶のところにカーソルを合わせると、ブロックメニューが表示されます。

ここの…をクリックすると、さらにメニューが表示されます。

この中にある再利用ブロックに追加という項目をクリックします。

/img/article/2020/09/26/04.jpg
再利用ブロックに追加

このような画面になるので、保存ボタンを押せば再利用ブロックに追加完了です。

/img/article/2020/09/26/05.jpg
保存で追加完了

あと、再利用ブロックには名前をつける必要があります。

デフォルトで無題の再利用ブロックと入力されていますが、この名前はブロックメニューで探すときの検索名になります。

頻繁に使う場合は、探しやすく分かりやすい名前を登録しておくと便利だと思います。

挨拶の再利用ブロックなら、

さいりよう > あいさつ > ぼうとう

という感じの名前にしておくといいと思います。

/img/article/2020/09/26/06.jpg
再利用ブロックに名前をつける

名前をひらがなにしているのは、ブロックメニューの検索から探しやすくする自分なりの工夫です。

なプ

漢字だと変換がめんどくさい、、、

このようにしておくとスペース区切りでひらがなを入力していくだけで、目的の再利用ブロックが表示されやすくなります。

/img/article/2020/09/26/07.jpg
ひらがなとスペース区切りでブロックを検索

また > を使い階層構造っぽくしておくと単語間の区切りになりますし、作成した再利用ブロックをカテゴリのように整理できていいかな、と個人的に思っています。

なプ

この辺は好みなのでスペースを使ってもいいと思います。

そんなに再利用ブロックを作るわけあるかっ!

とか、思ってしまいがちですが、数が増えてくる場合はこの方法がじわりじわりと効いてくる、、、と思いますよ(ドヤ顔)

再利用ブロックの管理画面へのアクセス方法

登録した再利用ブロックの管理画面ですが、ちょっと分かりづらい場所になります。

(1)記事編集画面のみぎ上の…をクリック

(2)ツールの中にある全ての再利用ブロックを管理をクリック

/img/article/2020/09/26/07a.jpg
再利用ブロックの管理画面へのアクセス

これでカテゴリと同じような管理画面にアクセスすることができます。

デメリット

デメリット、、、というかもう少し使いやすくなって欲しいと感じるところはあります。

それは、カテゴリのように利用箇所が管理画面から検索できないトコロ、、、ですかね。

カテゴリページは使用しているカテゴリの記事が分かる(テーブルとidが紐付いている)のですが、再利用ブロックはそれがないので利用箇所は分からないのです。

なプ

post_idが紐付いているわけではないので、仕方がないと思うトコロもある。。。

なので探す場合は、投稿画面の検索機能を使う必要があります。

どのような文字で検索するかですが、再利用ブロックはコードではこのような記述で記載されています。

1wp:block {"ref":再利用ブロックのID}
IDについて

このIDは、再利用ブロックを登録した時点で自動的に割り振られるIDです。

IDは管理画面で確認することができるので、そのIDを入力して検索すれば再利用ブロックが使われている記事を検索することができます。

確認方法はこんな感じになります。

(1)IDを確認したい再利用ブロックをクリック

(2)開いたページのURLを確認

(3)post=IDのIDの部分に数字があるのでそれがID

例えば、idが100の再利用ブロックを使われている記事を検索する場合は、以下のような文字列を投稿画面の検索に打ち込めばオッケーです。

1wp:block {"ref":100}

ちなみに次に書いてあるコードの確認方法で、記事の中で使っている箇所からIDを確認する方法もあります。

コードの確認方法

ちなみに再利用ブロックがどんなコードで記述されているのかを確認するためには、コードエディタに切り替えると確認することができます。

なプ

ビジュアルエディターでは確認することができません。。。

記事の編集画面みぎ上のをクリックすると、ビジュアルエディターかコードエディターかの切り替え画面が表示されるので、これで任意のエディタに切り替えることができます。

/img/article/2020/09/26/01.jpg
エディタの切り替え

元に戻す場合は、画面上に表示されているコードエディターを終了をクリックします。

/img/article/2020/09/26/08.jpg
コードエディターを終了

もしくは、先程のコードエディターを切り替えた手順と同じ様にして、ビジュアルエディターを選択して終了します。

なプ

戻し方を忘れて、投稿画面が変になった!と焦らないように注意です。

番外編: 一部を変更して使う

再利用ブロックでは、修正した内容が利用箇所全てに反映される仕様になっています。

なので特定の記事は再利用ブロックの内容をちょっとだけ変更したい、、、というAddQuicktagプラグインのような使い方ができません。

なプ

つっかえねーな、、、!

とか思っていた時期が私にもありました、、、(土下座)

再利用ブロックは通常ブロックに変更することが可能です。

通常ブロックに変更してしまえばただのブロックになるので、他の箇所の影響を考えることなく内容を変更することができます。

なプ

再利用ブロックの利点である一元管理はなくなってしまいますが、コピペ用途で使うことができます。

ブロックの変更方法は以下のように行います。

(1)再利用ブロックを使っているブロックをクリックしてカーソルをあわせる

(2)左上の…をクリックする

(3)通常のブロックへ変換をクリックします。

/img/article/2020/09/26/09.jpg
通常のブロックへ変換

通常ブロックに戻すと、いつもの見慣れたブロック編集画面になります。

/img/article/2020/09/26/10.jpg
通常のブロック
なプ

これでテンプレートを持ってきてから必要な文字を入力する、という方法ができますね。

利用例

再利用ブロックの使い回しで何を使ったらよいのか?と迷うこともあります。

なプ

自分もWordpress5がリリースされた直後はちょっと悩みました。

自分が考えた利用例を書いていきたいと思います。

(1)挨拶

記事の冒頭や終わりの言葉が決まっている時には便利です。

自分のブログでは、記事のはじめと終わりの文章はこんな風に決めています。

なプ

今のブログはHugoなので表示する方法は異なっていますが、、、(笑)

1# 冒頭
2Nプログラマ(@Nprog128)です。
3
4# おわり
5それでは、このへんで。
6バイナリー!

twitterのリンクを貼るのも意外と面倒なので、テンプレートを用意しておくと作業量が減ってラクだと思います。

再利用ブロックは使う場面を自分で選択できるので、利用場面が曖昧な場合に役に立つと思います。

ちなみに、必ず冒頭と終わりには決まった文章を書く場合は、Wordpressのウィジェットで位置に表示するのも手です。

(2)メルマガとかの宣伝?

よく記事の終わりにメルマガの登録を促すような記事がありますよね。

なプ

インフルエンサーや本の著者のページなんかに多い印象があります。

これもウィジェットで表示してあげてもいいですが、特定のページにだけ表示させたいって時は重宝するかもしれません。

メルマガの登録用メールアドレスなどが変更になった場合でも、再利用ブロックの内容を変更するだけで使用箇所が全部反映されるのがラクです。

(3)アフィリエイトタグ

ツラツラと書いてきて、なんかこれが用途としてよく使う気がしてきました。。。(笑)

なプ

テキストアフィリエイトの場合は、文言を変更する必要があるのでちょっと工夫が必要かもしれないですね。

提携している広告に変更があったり、終了したりしたとき全記事を探し回って修正する手間が最小限に抑えられます。

投稿画面から該当広告を検索して、一つ一つ修正していくのはなかなか心折れる作業だと思います。

なプ

時々、他のブログやtwitterとかで見かける気がする、、、

おわりに

今回は、WordPress + Gutenbergの再利用ブロックの使い方、という内容でした。

使い始めはちょっと使いにくい印象を受けますが、定型文が多い場合はとても便利だと思います。

定型文は再利用ブロックに登録して、手動による入力やコピペを少なくしてみてはどうでしょうか?

それでは、このへんで。
バイナリー!

\ ワードプレスが使える! /


関連した記事