WordPress

WordPress(Gutenberg)でEnlighterを使う方法 2020年3月版

以前にWordPressでEnlighterを使ってソースコードを表示する方法を紹介しましたが、今回はWordPressのGutenbergからEnlighterを使う方法を紹介します。

なお、今回はEnlighterの設定だけの紹介になるので、Enlighterの導入方法については、上記の記事をご参照ください。

GutenbergでEnlighterを使う方法

WordPressのGutenbergでは、ブロックという単位で記事を書いていく形になります。ブロックには、テキスト用のブロックや画像用のブロック、そしてJINなど独自テーマ向けブロックなど数多くの種類が用意されています。

Enlighterにも専用のブロックが用意されており、このブロックを使えば、Gutenberg上でソースコードを簡単に編集できるようになります。

GutenbergでEnlighterのブロックを有効化

デフォルトではGutenbergでEnlighterのブロックが有効になっていないと思われるため、WordPressのEnlighterの設定ページから「Visual Editorタブ」にある「Gutenberg Editor Plugin」の「Enableにチェック」を入れることで、Enlighterのブロックを有効にできます。

Enlighterのブロックが有効になっていれば、GitHubで紹介されているGutenberg Editorの操作のように、ソースコードの編集が可能です。