WordPress ブロックエディタの『ボタン』を新しいタブで開く(target="_blank")には…… - uzurea.net

WordPress ブロックエディタの『ボタン』を新しいタブで開く(target=”_blank”)には……

WordPress ブロックエディタの『ボタン』を新しいタブで開く(target="_blank")を付けるには……
WordPress ブロックエディタの『ボタン』を新しいタブで開く(target="_blank")を付けるには……

執筆: UZUREA編集部 アイコン UZUREA編集部

WordPressのVer.5から導入されたブロックエディタ『Gutenberg』で、押しやすいリンクを作れる『ボタン』ブロック。 このボタンブロックには(2019年10月現在では)『新しいタブで開く』の設定ができないので、対処法を調べてみました。

※2019年11月のWordpress アップデートで、『ボタンで新しいタブで開く』は正式に実装されました。ばんざーい!

『ボタン』ブロックを『新しいタブで開く』には

ボタンブロック以外で、リンクを付与する時には当たり前のように設定できる『新しいタブで開く』。

テキストにリンクを付与すると普通に出て来る『新しいタブで開く』設定のON/OFF
テキストにリンクを付与すると普通に出て来る『新しいタブで開く』設定のON/OFF
ボタンブロックには『新しいタブで開く』設定が無い……
ボタンブロックには『新しいタブで開く』設定が無い……

この実装については、WordPress関連フォーラムでも論議されていたようです。

結論としては、色々な対応方法が議論され、前述のGithub フォーラム#10128で実装内容が確定し、デバッグも完了しているようです。

……という事で、今後のWordPressアップデートで実装されそうな雰囲気ですので、その時を待ちましょう。

今すぐ何とかしたい場合

今すぐ何とかしたいから、検索でこの記事にたどり着いたんじゃねえか!」 というご意見もあるかもしれませんので、対応策も掲載しておきます。

プラグイン『Gutenberg』を入れる

プラグインディレクトリにある『Gutenberg プラグイン』の最新版(※)をインストールする事で、最新のGutenbergアップデート版が利用できます。 (※登記事執筆時点ではバージョン 6.7.0 )

最新のGutenberg でのボタンブロック
最新のGutenberg でのボタンブロック

上記画像のように、投稿画面右側の設定カラムから『新しいタブで開く』を選択できるようになっています。 ちなみに角丸の半径もスライダー設定できるようにもなっていますね。

また、ボタンブロックだけでなく、画像ブロック段落見出しなどもUIが結構改良されていて、着実に進化していっているのを感じ取る事ができます。 プラグイン形式なので「やっぱり元に戻したい!」 と思ったら、プラグイン設定画面で『停止』するだけでOKです。

HTMLとして編集で対応する

やだやだ! プラグインも使いたくない! という方は……一旦ボタンをお好みの設定で作成してから、『HTMLとして編集』でご対応されては如何でしょうか。

HTMLとして編集で対応する
HTMLとして編集で対応する

ソースコードに手動で target="_blank"を付与すると、その後『無効なコンテンツが含まれています』とアラートが表示され、『HTMLに変換』を選択すると、半強制的にクラシックエディタに変更させられますが、一応目的は達成できます。

ちょっと不格好な気はしますが……。

まとめ

皆さんは、WordPress Gutenberg(グーテンベルグ)のブロックエディタへの乗り換えは済ませたでしょうか? プラグイン版の評価を見ているとまだ否定的な感想の人も多いようですが、実際に使い慣れると、便利な部分も多い事に気が付きます。

Gutenbergプラグインへの評価は2019年10月現在、星1つが一番多い。
Gutenbergプラグインへの評価は2019年10月現在、星1つ。 不満だらけ(汗

まだ発展途上な箇所が多く、クラシックエディタを併用しないとならない場面が多いのも事実です。 (tableブロックのthとか……)

とはいえ、膨大なユーザーや開発者が関わるWordPressコミュニティによって、日々リニューアル・アップデートされていますので、今後の事を考えれば早めに慣れておくのも良いのではないでしょうか。

何かブレイクスルーがあった時にそれを受け入れるか、拒否して古い物にこだわり続けるか。 個人的にはがんばって前者を選択していきたいと思っています。

WordPress ブロックエディタの『ボタン』を新しいタブで開く(target="_blank")を付けるには……

もしこの記事が役にたったら、シェアをお願いします。

この記事のタイトルとアドレスをコピーする


Page top