WordPress5.0で挫折しないために!Gutenbergで人気プラグイン5種を使い倒す方法

インターネット上の全ウェブサイトの32%を占めると言われるコンテンツ管理システム(CMS)の「Wordpress」

そんなWordpressのメジャーバージョンアップとなるWordPress 5.0「Bebo “ベボ”」が、2018年12月にリリースされました。

変更点は多くあるものの、一番の目玉は新エディタ「Gutenberg」が採用されたことです。

1.新エディタ「Gutenberg」とは

活版印刷技術の発明者”ヨハネス・グーテンベルグ”が名前の由来となった新エディタ「Gutenberg」は、ブロックベースのエディタです。

従来のOfficeライクなWYSIWYGエディタ(Wordpress内ではクラシックエディタと呼ばれる)に慣れ親しんだ人は、「ブロックエディタって何??」と思うかもしれません。

クラシックエディタ画面

ブロックエディタ画面

ブロックエディタでは、コンテンツ内の

  • 文章
  • 見出し
  • リスト
  • テーブル
  • ボタン
  • 画像
  • 動画
  • 埋め込みリソース

といった各パーツを「ブロック」という単位で管理します。

ブロックはそれぞれ独立しており、必要に応じてブロックを挿入することでコンテンツを作成していきます。

エディタ上ではブロック単位で分離されて見えますが、実際の表示(Web サイトの見え方)は従来と変わりません。

2.エディタ「Gutenberg」の特徴

「Gutenberg」では、HTMLやCSSの知識が無くてもレイアウトを組めるほか、各ブロックが矢印で簡単に移動できたり、よく使うブロック形式を再利用可能なテンプレートとして登録したりすることができるなど、編集時の操作性が向上しています。

また、スマホなどのモバイル端末で編集する際の操作性も向上しており、2カラムにしたり装飾したりといった操作が容易になっています。

3.エディタ拡張系プラグインの挙動

さて、前置きが長くなりましたが、今回の記事では「Gutenbergを使った記事の書き方」については言及しません。すでに多くのサイトで取り扱っているので、今更書くことでもないでしょう!

今回の記事ではクラシックエディタ自体に活躍していた「エディタ拡張系プラグイン」の挙動や相性を確認していきたいと思います。

今回、動作を確認するプラグインは(個人的に)使用頻度の高い以下の5つです。

  • All In One SEO Pack
  • TinyMCE Advanced
  • TinyMCE テンプレート
  • Crayon Syntax Highlighter
  • AddQuicktag

①Gutenbergの「All In One SEO Pack」

「All In One SEO Pack」はWordPressでのSEO設定を可能にするプラグインです。

参考 All in One SEO Pack – WordPress プラグインWordPress.org

「All In One SEO Pack」には多くのSEO設定項目が存在しますが、今回確認するのは「SEOタイトル」や「ディスクリプション」といった記事単位のSEO設定です。

従来のクラシックエディタでは、本文を書くエディタ下部に以下のようなSEO設定エリアがありました。

「タイトル」や「説明」の入力欄に記載した項目で、Googleなどの検索エンジンにおける検索結果をカスタマイズすることが出来ます。

さて、このSEO設定欄が「Gutenberg」ではどうなるかというと・・・

クラシックエディタと、ほぼ変わりません!

これまで同様に本文入力欄の下部にSEO設定欄が用意されています。「タイトル」と「説明」に入力した内容で検索結果のカスタマイズが可能です。

「All In One SEO Pack」を愛用していた方にとっては、これまでと使用感が変わらないので一安心です。

②Gutenbergの「TinyMCE Advanced」

「TinyMCE Advanced」はWordPressでのエディタ機能を拡張するプラグインです。

参考 TinyMCE Advanced – WordPress プラグインWordPress.org

クラシックエディタ時代は、ほぼ必須のプラグインだったといっても過言ではないでしょう!

「TinyMCE Advanced」を使用するとクラシックエディタではエディタ上部のツールバーに多くの機能が追加されます。

「TinyMCE Advanced」プラグイン無

「TinyMCE Advanced」プラグイン有

さて、このエディタ機能拡張が「Gutenberg」ではどうなるかというと・・・

画像のように、文字寄せや太字等はブロック上部に、文字色・文字サイズ・文字形式の装飾は画面右ツールバーに表示されました。

クラシックエディタと比べると設定できる項目が減っているように見えますが、テーブルやリンクの挿入は「ブロック」として独立しているため「TinyMCE Advanced」としての機能からは削られています。

ちなみに、「Gutenberg」が有効化された状態の場合、「TinyMCE Advanced」の設定画面が”Block Editor(Gutenberg)”と”Classic Editor(TinyMCE)”にタブで分かれます。

エディタ上で使用する装飾をカスタマイズしたい場合は、設定から変更して使用しましょう!

③Gutenbergの「TinyMCE テンプレート」

「TinyMCE テンプレート」はWordPressでのエディタでHTMLのテンプレートを利用するためのプラグインです。

参考 TinyMCE Templates – WordPress プラグインWordPress.org

TinyMCE テンプレートでは、頻出する文章をテンプレート(ひな形)化して呼び出すことで、記事の執筆効率を向上させることが出来ます。

このようにテンプレートを作成していると、

投稿や固定ページのクラシックエディタ上でテンプレートを呼び出し挿入することが出来ます。

さて、このテンプレート機能が「Gutenberg」ではどうなるかというと・・・

挿入するためのボタンやブロックは見当たりませんでした。現状、GutenbergではTinyMCE テンプレートを使用したひな形の挿入が出来ないようです。

従来のクラシックエディタで固定文をテンプレート化して効率化している方にとっては、ショッキングかもしれません・・・。私もかなり利用していたので、

「このままでは困る!!」

と思い、Gutenbergの他の設定を探してみました。すると、こんなものが!

そうなんです。Gutenbergの標準機能で、一度作成したブロックを「再利用ブロック」という独自のブロックとして利用することができるのです。

上記の「再利用ブロックに追加」をクリックし、テンプレート名を付けて保存するとブロック一覧に再利用ブロックが追加されます。

これまで「TinyMCE テンプレート」でテンプレートを多用してきた人にとっては、再度テンプレートを作ることになってしまい結構な手間かもしれませんが、機能的にはよく使う文章を「テンプレート」として作成し運用することが可能です。一安心ですね!

④Gutenbergの「Crayon Syntax Highlighter」

「Crayon Syntax Highlighter」は技術ブログ等でWordPressにプログラムコードを掲載するときに、色付けや強調表示をして見やすくしてくれるプラグインです。

参考 Crayon Syntax Highlighter – WordPress プラグインWordPress.org

Crayon Syntax Highlighterを使用して掲載したプログラムコードは、プレビュー画面で表示するとハイライト表示することが出来ます。

しかし、この「Crayon Syntax Highlighter」というプラグインですが、最終更新が3年前(2019/1/15時点)となっており、プラグインのページには下記の警告が表示されています。

このプラグインは WordPress の最新3回のメジャーリリースに対してテストされていません。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress で使用した場合は互換性の問題が発生する可能性があります。


https://ja.wordpress.org/plugins/crayon-syntax-highlighter/

このままでは、「記事内にソースコードが載せられない!」ということで調べてみました。

ハイライトを実装するJSライブラリ「Prism.js」

Prism.jsは、Web標準が考慮された軽量で拡張可能なシンタックスハイライト用のJSライブラリです。

ライブラリを読み込み、コードブロックに指定のClass名を設定することで簡単にハイライトを実装することが出来ます。

「Prism.js」の導入

WordPressへPrismを導入するためには

  1. 読込用のライブラリファイルを準備
  2. WordPressテーマファイルの編集
  3. 記事内にコードブロックを追加

の手順が必要となります。

STEP.1
1.読込用のライブラリファイルを準備

Prism.jsのサイト(https://prismjs.com/)にアクセスしダウンロードページを表示します。

ダウンロードページが表示されたら、下記を行います。

  • Compression level:Minified version
  • Core:Core
  • Themes:好きなものを選択
  • Languages:必要な言語を選択

選択が完了したら画面の最下部にスクロールしてください。

すると、下記のように必要なJS、CSSコードとそのダウンロードボタンが表示されています。

WordPressではダウンロードして使用するかと思いますので、JSとCSSをダウンロードしましょう。

STEP.2
Wordpressテーマファイルの編集

上記でファイルがダウンロードできたら、使用するWordpressサイトのテーマフォルダにファイルをアップロードします。

今回は、Wordpressのデフォルトテンプレート「Twenty Nineteen」を使用しているため。「~/twentynineteen/lib/prism」フォルダを作成しファイルを配置します。

続いてWordpressのテンプレートファイルを編集し、アップロードしたPrism.jsのライブラリファイルを読み込む設定を行います。

※以下の設定は、使用しているテーマによって記載方法が異なる可能性があります。お使いの環境に合わせて編集してください。

function.php
function add_files() {
    // JS読みこみ
    wp_enqueue_script( 'prism-script', get_template_directory_uri() . '/lib/prism/prism.js', array( 'jquery' ), '20190115', true ); 
    // CSS読みこみ
    wp_enqueue_style( 'prism-css', get_template_directory_uri() . '/lib/prism/prism.css', "", '20190115' );
 
} 
add_action('wp_enqueue_scripts', 'add_files'); 

これで準備は完了です。

STEP.3
3.記事内にコードブロックを追加

最後に記事内にコードブロックを追加します。前述の手順1と2は初回のみ設定すればいいので、実際の執筆では3の手順を繰り返します。

まず、+ボタンからソースコード(< >マーク)を選択し、表示されたソースコードブロックに記事で表示したいソースを入力します。

続いて、追加したブロックを選択した状態で、画面右のツールバーから「高度な設定」を開きます。

「高度な設定」で設定可能な「追加CSSクラス」欄にハイライトしたいコードの言語に合わせたクラスを指定します。

書き方は「language-○○」の書式で、○○は言語に合わせて指定しましょう。(例では、PowerShellを指定しています。)

設定はこれだけです。プレビューを見てみると下の画像のようにコード部分がハイライトされていることがわかります。とっても簡単ですね!!

背景の色を変えたいという場合は、ライブラリファイルのダウンロード時に別のテーマを選択してください。

お気に入りのハイライトを見つけて快適な執筆環境を整えましょう!

④Gutenbergの「AddQuicktag」

「AddQuicktag」はWordpressの便利機能であるショートコードをクイックタグとしてエディタに追加するプラグインです。

参考 AddQuicktag – WordPress プラグインWordPress.org

執筆効率を上げるため、ショートコードを自作する場合には重宝するプラグインの代表格です。上で説明した「TinyMCE テンプレート」に少し似ていますね。

AddQuicktagでショートコードを登録すると、下の画像のようにクラシックエディタ上にクイックタグの挿入用リストが表示され、数クリックでショートコードを呼び出すことが出来ます。

良くある利用シーンとしては、目次のショートコード挿入や、吹き出しプラグインのショートコード挿入が考えられます。

さて、このショートコード呼び出し機能が「Gutenberg」ではどうなるかというと・・・

挿入するためのボタンやブロックは見当たりませんでした。現状、GutenbergではAddQuicktagを使用したショートコードの挿入が出来ないようです。

TinyMCEテンプレートと同じ結果となってしまいました。解決策もTinyMCEテンプレートと同様に「再利用ブロックに追加」をして呼び出すしかないようです。

ブロックエディタの「Classic Paragraph」で使えるが…

確認したところ、ブロック追加時にClasssic Paragraphとして追加した場合は、ブロック直上のツールバーにAddQuicktagのリスト選択欄が表示されるようです。

ただし、ブロックの追加⇒リストの選択という2段階のプロセスが必要となり若干面倒になっています。

3.まとめ

今回、クラシックエディタで使っている人の多かった5つのプラグインについて、Gutenbergでの挙動を確認しました。

結果としては

  • All In One SEO Pack ⇒ そのまま使える
  • TinyMCE Advanced ⇒ 使い方変更
  • TinyMCE テンプレート ⇒ 再利用ブロック
  • Crayon Syntax Highlighter ⇒ Prism.js
  • AddQuicktag ⇒ 再利用ブロック

となり、かなり運用の変更が必要そうだなという感想です。

救済措置として用意されたクラシックエディタプラグインもありますが、サポートは2021年末までとなっています。

参考 Classic Editor – WordPress プラグインWordPress.org

いずれはGutenbergのブロックエディタを使わざるを得ない状況に変わりはないので、今のうちに新エディタでの執筆に慣れておくのが吉だと思います。

なお、Wordpress標準のテーマ(Twenty ○○系)以外の市販や無料テーマについては、ユーザの使用感を損なわないようにGutenberg用のプラグインをリリースしている場合もあります。

まずは、お使いのテーマを確認し公式サイトを今一度確認しましょう。運が良ければ便利なプラグインがあるかもしれません!

それでは、良いWordpressライフを!