コーポレートサイトのおすすめのWordPressテーマ!!詳細はこちら▶▶

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
再利用可能ブロックはサイト全体で再利用するブロックを作成して保存する機能です。ブロックを更新すると、使用中のすべての場所に変更を適用されます。定型文などに使用することができます。
そのまま再利用可能ブロックを編集するとテンプレートが変わってしまうので、「通常のブロックへ変換」する必要があります。 余計なステップを挟む必要があるため、一発入力とはいきませんが、慣れれば使いやすいかもしれません。 以上SANGOでGutenbergを使ってみた感想をまとめてみました。まだ今後の対応状況で変わってくるので、お知らせがあればこの記事に追記していきます。