ConoHa WINGとのコラボ開始

ショートコード不要!直感的に記事を書けるSANGO Gutenbergをインストールしよう!

この記事はSANGOカスタマイズガイドの「SANGOでブロックエディタ(Gutenberg)を使う方法と注意点」を転載したものです。

Gutenbergとは?

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

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

SANGOのGutenberg対応方針

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

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

Gutenbergを使わない場合

これまでWordPressを長い間使ってきた方にとっては、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

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

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

吹き出しブロック

名前
名前

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

名前
名前

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

記事一覧ブロック

文章の途中に記事一覧を差し込むことができます。カテゴリーやタグで絞り込んで表示することも可能です。 ショートコードでも記事一覧は差し込めるのですが、どのような表示結果になるかリアルタイムで確認できるぶん、ブロックを使った方が作業がはかどります。

タブブロック

文章の途中にタブをクリックすることでコンテンツを切り替えて表示するためのブロックを挿入することができます。

ここにタブ1のコンテンツが入ります

ここにタブ2のコンテンツが入ります

レビューボックスブロック

下のような評価テーブルを簡単に作成することができます。

この本の評価
読みやすさ
 (3.5)
値段
 (1.5)
コレクション性
 (3)
総合評価
 (3)

参考ブロック

URLを入力するだけで簡単に参考リンクを作成できるブロック

関連ブロック

内部リンクを検索してカード形式で表示できるブロック

SANGOの魅力WordPressテーマ「SANGO」30の魅力

メッセージブロック

以下の様な注意事項や補足説明に利用できるブロック

MEMO

このように補足メモを記事内に簡単に挿入することができます。

注意事項

ここに注意事項が入ります

ボックスブロック

内容を囲って強調したい場合に利用できるブロック

ここに内容が入ります。

ボタンブロック

全18種類のボタンスタイルから選んで表示することができるブロック。アフィリエイトの計測タグも入力することができます。

ボタン

ボタン

リストブロック

全12種類のリストスタイルから選んで表示することができるブロック。

  • リスト1
  • リスト2
  • リスト3

線ブロック

区切り線を入れるのに便利なブロック。



蛍光ペンやラベル装飾

SANGOの蛍光ペン機能

段落やリストなどの好きなテキストを「蛍光ペン風」や「ラベル風」に装飾できます。

デフォルトブロックでもSANGOのスタイルが使用可能

「ボタン」や「画像」、「表」などのWordPress標準のブロックに対してもSANGO独自のスタイルバリエーションを追加しています。

応用編

テーブルブロックやリストブロックを選んだ状態で、ツールバーの[高度な設定]→[追加CSSクラス]に以下のクラス名を挿入すると、ブロック内のフォントサイズを変更できます 

※ v1.5.2から対応

  • font-small: フォントサイズを小さく
  • font-smaller: フォントサイズをやや小さく
  • font-larger: フォントサイズをやや大きく
  • font-large: フォントサイズを大きく