WordPress のエディタを Gutenberg に移行

はじめに

　WordPress のエディタが Gutenberg 標準となった日、それはもう頭を抱えてなんだこれ状態だった。
　ClassicEditor が提供されたお陰でなんとかいつも通りにコードエディタで記事を書き続けてきた。

　最近の Gutenberg はどうなったのかなと様子見でちょっとビジュアルエディタを有効にしてみたところ、案外どうにかなりそうなレベルにまで進化していたもんだから乗り換えてみるかと。

　いつまでも Classic なままじゃダメだなって。そんな想い。

Gutenberg にする際の問題点

　Gutenberg に移行しようとチマチマと弄っていて困った点はやはり出てきた。

AmazonJS が使えない

　Amazon アソシエイツのコードを簡単に入れ込んでくれる AmazonJS がどうも動作してくれない。
　これに関しては RINKER というより上位な感じのする高機能なプラグインを導入することで解決した。

商品リンク管理プラグインRinker（リンカー）の公式サイト

「もっと楽にブログの商品リンクを貼りたい！」 そう思うことはありませんか？ 私はブログ開始当初から、商品リンク作りがとても苦痛でした。 外部ジェネレーターを利用してWordpressに貼り付け。商品が...

oyakosodate.com

Prism.js をスマートに使えない

　コードハイライターには Prism.js を使用している。
　ハイライトを適用する際、AddQuickTag で予め登録しておいたタグでポチポチ囲んだあと class 等をちょちょっと変更して弄っていた。

<pre class="command-line" data-user="hoge" data-host="localhost"><code class="language-bash">

　こんな感じのやつは Gutenberg じゃちょーっとキツい。

　そんなわけで同じ Prism.js を採用した Highlight Code Block をインストールする事で代用とした。
　その代わりコマンドプロンプトを模したような凝った表示ができなくなるので、以後は工夫しながらなんとかしていこうかなと思う。

Highlighting Code Block

prism.js を使用したシンタックスハイライト機能付きのコードブロックを追加します。 (Gutenberg とクラシックエディター共に利用可能)

ja.wordpress.org

Gutenberg にすることのメリット

　ここに大きな重みがないと感じるのであれば無理に移行することはないだろう。

　せっかくのビジュアルエディタなので、スタイルを使用しているテーマに合わせる設定で行えば、ある程度記事を書いていったときに何回もプレビューしてレイアウト確認をしなくても良い。
　サーバースペックにもよるけどプレビューする為の負荷もあるんで、数瞬であれ待ちが発生する。更にはブラウザのタブを往復していく作業回数も増えるが、これらが激減する。
　さすがは WYSIWYG (死語?) だな! と。

　あとは見たまま書けるという上記内容とも繋がるが、文字装飾の幅が大きく広がるし画像挿入も視覚的に行える為、再調整する回数も少ないので編集コストも下がるから良い事ばかり。

おわりに

　今まで Classic Editor でコードベースの執筆を行ってきた身としてはかなり大きな環境変化となった。
　まだ Gutenberg に慣れきっていないから何だかんだと調べながらになるので、今までよりも記事を書いていく速度は落ちているが、慣れたらコードベース時代よりもトータルで速く記事を書けるようになると思う。

　現在も Classic Editor を使っている方は、たまに Gutenberg に触れてみて移行出来そうなタイミングを探ってみると良いかも。