Gutenbergエディタで「AddQuicktag」のように登録してショートコードを再利用する裏技

Web
この記事は約3分で読めます。

みなさんは、 AddQuicktagというWordPressプラグインを使ったことはありますか?

AddQuicktag
This plugin makes it easy to add Quicktags to the html - and visual-editor.

使いまわしたいショートコードを登録してすぐに呼び出すことができる便利なプラグインなのですが、Gutenbergエディタでは使えません。使えないというと語弊がありますが、クラシックエディタを使用する必要があります。私の経験上、Gutenbergエディタ上でクラシックエディタを使用するとサイトの表示速度が著しく低下する現象が再現されていますので、できる限りクラシックエディタを使用することは避けたいです。

ですがご安心ください。Gutenbergエディタでも「AddQuicktag」プラグインと同じようにショートコードを使い回せるようにする方法をご紹介します!

そもそもなぜショートコードを再利用したくなったか

Pz-LinkCardというブログカードを手軽に表示できるプラグインがあり、他のサイトで使用して見たいと思い、ショートコードを再利用したいと考えるようになりました。

Pz-LinkCard
このプラグインは、ブログカード形式のリンクを表示することができます。テキストのみのリンクにさようなら。

外部リンクはいいのですが、内部リンクはoEmbed化されるため上手く置き換わってくれないときがあります。なので内部リンクだけはショートコードを使用して直接埋め込もうと思ったのですが、AddQuicktagプラグインは上述の通り使いたくなかったので他の方法を模索していました。

ですのでこの記事は、Pz-LinkCardをGutenbergエディタで使いやすくしたいという方に特におすすめです。

再利用ブロックを利用してみよう!

では、Gutenbergエディタで「AddQuicktag」のようにショートコードを挿入する方法を試してみましょう。

まずは、「ショートコード」というボタンをクリックしてください。

Pz-LinkCardは「blogcard url=””」で埋め込めますね。

次に、「再利用ブロックに追加」を選択してください。ちなみに再利用ブロックとは、以下のようなものになります。

再利用可能ブロックは、ブロックまたはブロックのグループを保存して、サイトの投稿やページにあとから使用できます。頻繁に同じコンテンツを同じブロックやブロックのグループに追加する場合は、再利用可能ブロックを使用すると大幅に時間を節約できます。

https://wordpress.com/ja/support/wordpress-editor/blocks/reusable-block/
再利用可能ブロック
再利用可能ブロックは、ブロックまたはブロックのグループを保存して、サイトの投稿やページにあとから使用できます。…

次に、名前をつけましょう。あとで使用する時にわかりやすい名前にしてください。そして保存をします。これで再利用ブロックとして登録完了です。

登録した再利用ブロックを使用する

では、早速先程登録した再利用ブロックを使用してみましょう。

「+」ボタンを押して、一番下の項目に「再利用可能」という項目が追加されています。そこから先程登録したものを選択すると、呼び出すことができます。

ページごとに内容を変更したい

さて、登録した内容をそのまま使用する分には問題ないのですが、今回の場合URLの部分を入力しなければショートコードが意味をなしませんよね。

ですので、通常ブロックに一度変換する必要があります。

「通常ブロックへ変換」を押します。

すると通常のショートコード入力欄に先程登録したショートコードが入力された状態で編集可能になりますので、ここでURLを入力してください。ここで編集した内容は再利用ブロックの内容を上書きしないので、この記事のこのショートコードのみに適用されます。

これで作業は完了です!

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
この記事を書いた人
たいしょん

岐阜のTECPRESSO株式会社でWebエンジニアとして働いています。
1992年生まれ。学生時代は野球(副部長なのに補欠)と演劇をしていました。元技能五輪全国大会Webデザイン競技愛知県代表。
Apple製品をはじめとするガジェットやウェブサービス、デザインなどに関心があります。

たいしょんをフォローする
Web
たいしょんをフォローする
たいしょんブログ
タイトルとURLをコピーしました