ブログカスタマイズ承ります。詳細はこちら▶▶

SANGOで新エディター「Gutenberg」を使ってみた

Gutenbergという今までのWordPressの投稿画面エディターとは全く違う新しいエディターがWordPress 5.0から正式採用されます。

現在はプラグインで試用できます。

注意
Gutenbergを有効にするとテーマによっては表示が崩れたりすることがあるかもしれません。いきなり本番環境で試さず、必ず事前にテスト環境でお試し下さい
https://ja.wordpress.org/plugins/gutenberg/

旧エディターは今までどおり使える

今までのエディターが使いたい、投稿画面の仕様が変わるのは嫌だという方はご安心下さい。Classic Editor プラグインをインストールし有効にすれば旧エディターが使えます。

SANGOでの対応状況

結論から言うと、2018/09/21現在SANGOの現行バージョンではGutenbergに対応していません。が、Gutenbergを有効にしても過去記事は問題なく表示されます。

Gutenbergで使えなくなる機能
  • SANGOのオリジナル装飾「スタイル」
  • Rinker・WPアソシエイトポストR2などのプラグイン
  • AddQuicktagでのショートコードの一発入力(クラッシックブロックでは使える)

SANGOのオリジナル装飾「スタイル」

SANGOのオリジナル装飾「スタイル」は使えなくなります。

https://saruwakakun.com/sango/text-decorate

SANGOのビジュアルエディターでは「スタイル」のドロップダウンからたくさんのSANGOオリジナルの装飾が簡単に適用できましたが、Gutenbergでは「スタイル」が見当たりません。今後テーマが対応すれば使えるようになるかもしれませんが現状ではスタイルは使えませんでした。

Rinker・WPアソシエイトポストR2などのプラグインは未対応

Amazon・楽天の商品リンクを簡単に追加できる「Rinker」「WPアソシエイトポストR2」もGutenbergには未対応です。

「商品リンクを追加」のボタンがエディターに表示されません。

現状ほとんどのプラグインはGutenbergに未対応です。今後の対応を待ちましょう。

ショートコードの入力がやや面倒になる

SANGOでは公式ヘルプでAddQuicktag用の設定ファイルを用意されており、簡単にインポートできます。SANGOには大量のショートコードが搭載されているのでショートコードを一発で入力できるAddQuicktagは必須プラグインでした。

Gutenbergでも「クラッシックブロック」ならAddQuicktagが使えます。

ただしクラッシックブロックを追加し、さらに「詳細」を押さないとAddQuicktagのドロップダウンが表示されないので余計なステップが必要となり少々面倒です。

Gutenbergのメリット

ではGutenbergが書きづらいかと言ったらそんなことはありません。ブロックを追加することでHTMLを書かなくてもさくさくと直感的に、リッチなコンテンツを作り上げることができます。

ビジュアルエディターとテキストエディターを行ったり来たりしなくて良い

Gutenbergはブロック単位でビジュアルエディターとテキストエディターを切り替えることができます。

旧エディターではビジュアルエディターとテキストエディターを行ったり来たりすると余計なpタグが入ったりしてHTMLが汚くなるのが私は気になっていまっした。自動整形はオフにしてテキストエディターにpタグを直接打っています。

Gutenbergではビジュアルエディタを行ったり来たりすることなく、ブロック単位でHTML編集ができるので余計なタグが入ったりする心配がなくなります。

HTML編集

記事の構造が一発でわかる

Gutenbergエディターの左上のiボタンを押すと、記事文書の構造が一発でわかります。

ブロック単位で記事を書くことでより「構造」を意識できます。ビジュアルと構造が一致しているのは非常に軽快でわかりやすいです。

SANGOのショートコードをGutenbergで使う

こちらのねるこブログさんの記事で知ったのですが、GutenbergでもSANGOのショートコードを使う方法があります。

参考 WordPressの新エディター「Gutenberg」を不便ながらも使い始めた理由ねるこブログ

よく使うショートコードを「再利用可能ブロック」に保存する

再利用可能ブロックのテンプレート化
  1. よく使うショートコードをショートコードブロックに入力する
  2. 「再利用可能ブロック」に追加する
  3. 「再利用可能ブロック」を呼び出して「通常のブロックへ変換」した後編集する
MEMO
再利用可能ブロックはサイト全体で再利用するブロックを作成して保存する機能です。ブロックを更新すると、使用中のすべての場所に変更を適用されます。定型文などに使用することができます。

そのまま再利用可能ブロックを編集するとテンプレートが変わってしまうので、「通常のブロックへ変換」する必要があります。

余計なステップを挟む必要があるため、一発入力とはいきませんが、慣れれば使いやすいかもしれません。

Gutenberg対応のテーマ

今のところ、Gutenbergに完璧に対応しているテーマはあまりないと思いますが、いくつか対応している有料テーマもあります。

Snow Monkey

Snow Monkeyは現在日本で一番Gutenbergに対応しているWordPressテーマではないでしょうか。

参考 100% GPL の有料 WordPress テーマ Snow Monkey の Gutenberg 対応状況(v4.2.6 現在)Snow Monkey

Snow Monkeyでは記事の表示とGutenbergエディター画面で見出しやリスト、画像など各要素のデザインが同じになるよう調整されています。他のテーマだと見出しのフォントが明朝体になっていたりします。

Gutenberg用の拡張プラグインを開発中

作者のキタジマさんは現在、“Snow Monkey Blocks という、Gutenberg に便利なカスタムブロックを追加する Snow Monkey 用のプラグイン(アドオン)を開発中”です。

この「Snow Monkey Blocks」プラグインが有料プラグインになるか、無料の公式プラグインになるかはまだわかりませんが、完成されたらGutenbergが飛躍的に使いやすくなるでしょう。完成が楽しみですね。

LIQUID PRESS

LIQUID PRESSさんのテーマもGutenbergに対応しています。

LIQUID PRESS シリーズテーマでは、Gutenbergの検証を行っております。

Gutenbergの便利な使い方とテーマ対応状況- LIQUID PRESS

Cocoon

無料のWordPressテーマ「Cocoon」もGutenbergに対応しています。1.0.8からGutenbergエディターにテーマスタイルが反映されるようになっています。

参考 Cocoon 1.0.8公開。GutenbergにCSS適用。商品リンクに「キャッシュ削除」が表示されていた不具合修正。Cocoon

Nishiki

WordPress 公式テーマ Nishikiも1.0.6 からGutenbergに対応しています。

参考 WordPress 公式テーマ Nishiki のビジュアルエディターを Gutenberg に一部対応しましたサポトピア

以上SANGOでGutenbergを使ってみた感想をまとめてみました。まだ今後の対応状況で変わってくるので、お知らせがあればこの記事に追記していきます。