1.8.6 Released !

SANGOでGutenbergエディタを使う方法と注意点

SANGO gutenberg

Gutenbergとは?

Gutenberg(グーテンベルク)とは、WordPress5.0より標準となった新エディターです。note.muMediumなどのエディターに似ており、直感的に記事を書くことができます。「ブロックエディター」と呼ばれることもあります。

ここでは、新しいエディターを「Gutenberg」、古いエディターを「旧エディター」と呼ぶことにします。

SANGOのGutenberg対応方針

SANGOでは今後、Gutenbergで快適に執筆ができるように、アップデートを続けていく予定です。

ただし、Classic Editorを利用し続ける方の負担にならないよう、また、アップデートの負担を減らすため、Gutenbergに関わる機能やスタイルは全て「SANGO Gutenberg」というプラグインに統一します。SANGOでGutenbergを利用する場合、こちらのプラグインを導入してください。導入方法は後ほど説明します。

Gutenbergを使わない場合

これまでWordPressを長い間使ってきた方にとっては、Gutenbergは不便な点が多くあると思います。特にショートコードで出来た多彩な表現のうちの一部は、Gutenbergのブロックでは実現が難しいかもしれません(Gutenbergエディター内でもショートコードは使えます)。

また、旧エディターで書かれた記事をGutenbergで編集する際に、さまざまな問題が生じる可能性があります。既に旧エディターで書かれた記事が多く、それらをリライトすることも想定される場合は、旧エディターを継続して使用することをおすすめします。

旧エディターを継続して使用する

WordPress5.0以上をご利用の場合、旧エディターを継続して使用するためにはプラグイン「Classic Editor」をインストール必要があります。WordPressチームが運営する公式プラグインなので、安心して使用することができます。

ダッシュボード⇒外観⇒プラグイン⇒新規追加⇒「Classic Editor」で検索⇒「今すぐインストール」⇒「有効化」

なお、Gutenbergを全く使用しない場合には「外観⇒カスタマイズ⇒詳細設定⇒ Gutenberg用のCSSを読み込まない」にチェックを入れることで、WordPressデフォルトで読み込まれるGutenbergのCSSの読み込みを停止することができます(SANGO ver1.7~、WordPress ver5.0~対応しています)。

今後、Gutenbergを利用することになったときには、チェックを外すのを忘れないようにしてください。

SANGOでGutenbergを利用する

以下の点をご確認のうえ、プラグインを導入してください。

インストール前の注意点
  • こちらのプラグインは、SANGOおよびWordPressの最新バージョンとの互換性のみを考慮して開発されます。Ver1.6以下では使用できないことにご注意ください。
  • Gutenbergにはテーマに関わらず利用できるWordPress標準のスタイルが多く含まれています。SANGOでは、これらの標準スタイルはそのまま活かしていく方針です。これらの機能についてバグ報告や改善要望をいただいても対応できませんのでご了承ください。
  • Gutenbergという名前のプラグインがありますが、このプラグインをインストールする必要はありません。
  • Gutenbergの中でカスタムエディターを呼び出した場合、SANGOのスタイルがエディター上で反映されない部分があります。

プラグインをインストール

はじめて導入する場合は、以下のボタンよりSANGO Gutenbergプラグイン(zipファイル)をダウンロードしてください。

(ライセンス:GPL)

zipファイルは解凍せずに、WordPressダッシュボードの「プラグイン⇒新規追加⇒プラグインのアップロード」より選択してください。アップロード成功後、有効化をクリックしてください。

アップデートの方法

他のプラグインと同様に、ダッシュボード⇒プラグインより、自動更新することができます(上のような表示が出ていたら「更新」をクリックしてください)。テーマファイルをアップロードし直す必要はありません。

SANGO Gutenbergの機能

ここでは「SANGO Gutenberg」プラグインの機能をいくつか紹介します。

エディターにSANGOデフォルトのスタイルが反映される

見出し、引用、リストなどを挿入すると、SANGO標準のスタイルと同じ装飾でエディター上に表示されます。テーマカスタマイザーで選択しているメインカラーやアクセントカラーがこれらのスタイルに反映されます。

見出しブロック

Gutenberg専用のオリジナル見出しを用意しています。エディター上で⊕をクリックし「SANGO見出し」というブロックを選択することで、挿入できます。見出しのスタイルは、エディター右側のサイドバー(右上のをクリックして表示)で変更できます。

ボックス・ブロック

「タイトル付ボックス」という名前のSANGOオリジナルのブロックを使用することができます。ボックスの種類はエディター右側のサイドバー(右上のをクリックして表示)で変更できます。

アコーディオン・ブロック

アコーディオンとはクリックすると開く機能のことです。SANGO Gutenbergでは一切専門知識がなくとも、アコーディオンを配置することができます。

ここに文章や画像、ブロックなどを自由に書くことができます。

タイムライン・ブロック

タイムラインのテスト

ここにタイムラインの文章を書きます。

画像を挿入することも
タイムラインの項目2

タイムラインの項目は必要な数だけ増やすことができます。

  • リストや画像などを配置することもできます
  • ブロックを使用するのに、専門知識は必要ありません

吹き出しブロック

https://saruwakakun.com/sango/wp-content/uploads/2018/12/06d98c9f555ca9e1641ba5c19b6ede38.png
名前

吹き出しのブロックも用意されています

https://saruwakakun.com/sango/wp-content/uploads/2018/12/06d98c9f555ca9e1641ba5c19b6ede38.png
名前

右から吹き出しを出すことも、背景や文字の色を変えることもできます

そのほかの魅力

この他にも、テキストの蛍光ペン風の装飾など、プラグイン独自の機能を使用することができます。また、「ボタン」や「画像」などのWordPress標準のブロックに対してもSANGO独自のスタイルバリエーションを追加しています。

問題の報告や要望について

下記リンク先よりお寄せください。

SANGO Gutenbergプラグイン問題の報告や要望

プラグインの更新情報

SANGO Gutenberg更新情報

開発ロードマップ

今後の開発計画をしばらくはTrelloにまとめて公開します。