暮らしブログ【こはるのおうち手帖】はこちらからどうぞ

SANGO&PORIPUで「Gutenberg」を使ってみた

Gutenbergを使ってみた

こんにちは、こはるです!

当ブログとメインのブログ、ついにWordPressの新しいエディタ「Gutenberg(グーテンベルク)」にしました。
今までのエディタで慣れてしまっている方も多く、なかなかGutenbergにしづらい…使い勝手がよくない…というお声もちらほら耳にしまして、私も長い間足踏みしておりました。

でもついに切り替えてもうた!!ああ、どないしよ!!
え?本当にGutenbergで書いてますよ、ほら。

Gutenbergのエディタ画面

(わざわざ見せんでも)

このGutenberg、本当正直絶対使いにくいやろ…と思っていましたが、使ってみるとアレ?意外と使えるかも…!?と思えてきました。現にブログも書けてる。よかった。

私はWordPressテーマ「SANGO」と子テーマ「PORIPU」を使っておりますが、このテーマをご利用の方なら特に安心して移行できると思います。
この記事では、実際Gutenberg使ってどんな感じ?というのをつづってみようと思います!

切り替えようかどうしようかとお悩みの方の手助けになりましたら幸いです。

Gutenbergってどんな感じなん?

Gutenbergのエディタ画面

今までのテキストエディタと全く異なるGutenbergさん。
「ブロック」を追加して、文章や見出し、画像、装飾といったいろいろなものを組み合わせて記事を作成していきます。
ブロックはパズルみたいに動かせるので、文章の入れ替えもとっても楽ちん。

Gutenbergのブロック

旧エディタにあった「見出し」「画像」「リスト」などといった機能もすべてブロックとして追加・配置していきます。
繰り返し利用するものは「再利用ブロック」として登録できて便利ですし、ブロックとして置いていくことで常にプレビュー表示しているような感覚で執筆していけるので、効率もいい気がします。

iPadでもエディタ画面を使ってみましたが、PCと同じ感覚で使えるのでとてもいい感じです。
これ慣れたら今までのエディタよりいいかもしれん・・・

こはる

私がGutenberg移行を決めるきっかけとなった、まっさーさんの記事をぜひご覧ください。とても詳しく説明してくださっています。

SANGOでGutenbergを使う場合

Gutenbergってまだまだスタートしたばかりのエディタで、使用するWPテーマやプラグインによっては対応していなかったり不都合が生じたりしてしまうこともあるんですよね。
まぁこれだけガラッと変われば、使い勝手は大きく変わるはずだもんね。

ただ、ユーザーが使いやすいようにWPテーマ側でGutenberg用にカスタマイズしてくれている場合もあります。

私が愛用しているWPテーマ「SANGO」の場合は、「SANGO Gutenberg」という専用プラグインを追加することでGutenbergをより便利に使うことができるようになっています。

詳しくはこちら 参考 SANGOでGutenbergエディタを使う方法と注意点SANGOカスタマイズガイド

このプラグインのおかげで、↓こんなボックスがブロック一覧から追加できたり、快適に使えるための細かい機能がいろいろと追加されたりします。

SANGO Gutenbergで追加される機能(一部)
  • オリジナル見出し
  • タイトル付きボックス(このボックス)
  • タイムライン
  • ボタンや画像にオリジナルスタイル追加 etc

こうした細やかな気配りがありがたいですね。
新エディタに移行したばかりなので、こうした快適に使えるような配慮がとてもうれしいです。

SANGO+PORIPUでGutenbergを使う場合

SANGO×PORIPU

SANGOには素晴らしい子テーマ「PORIPU(ポリプ)」があります。

PORIPUはいいぞ~~ poripuSANGO公認子テーマ「PORIPU」が超感動的だったので紹介させてほしい

このPORIPUにも、Gutenbergを快適に使えるようカスタマイズされたプラグインが登場しました!

詳しくはこちら 参考 PORIPUでグーテンベルクを使うPORIPU

このプラグインを追加することで、私も普段めちゃくちゃ使いまくっているPORIPUオリジナルの吹き出しボックスなどが簡単にブロックとして追加できるようになります。

こんなやーつが
  • 簡単に
  • 追加できるんやで~!
  • めっちゃ便利~!

たくさんある素晴らしい追加装飾も、このように手軽に使えるんであれば快適に記事が書けそうですね!本当にありがたいです。

使ってみて困ったこと

このようにWPテーマが数多くのカスタマイズを行ってくれているおかげで、デフォルトの状態と比べるとめちゃくちゃ使いやすくなった我がGutenbergさんですが、やはりいくつか不便というか、困ったなぁということもあります。

便利だったプラグインがGutenbergに非対応

エディタ画面が大きく変化したので、今までのエディタ上部に表示されていたボタンがなくなったり、今まで使えていたプラグインの機能がそのまま使えなかったりといったことが結構起きています。

MEMO(自分用)
商品リンク挿入プラグイン「Rinker」は「レイアウト要素」というカテゴリの中にRinkerブロックがあり、そこから挿入できます。

All ShortCode of SANGO

WPテーマSANGOにはたくさんのショートコードが用意されておりまして、それをエディタ画面から簡単に挿入できる素晴らしいプラグイン「All ShortCode of SANGO」を愛用しておりました。

ノートパソコンの電源ボタンを押す指SANGOがもっと便利に!「All ShortCode of SANGO」でショートコードを簡単に貼ろう

このプラグインがGutenbergでは使えません。めっちゃ愛用していたのでとても痛い…!!!!
特に内部リンクの挿入はこのプラグインのおかげでめちゃめちゃはかどっていたので、慣れるまでは苦戦しそうです。

当面は、クラシックブロックで利用可能なAddQuickTagにショートコードを登録して使う予定です。

こはる

このプラグインを有効にしたままGutenbergを使うと、エディタ画面が一瞬表示崩れを起こすので、Gutenbergをご利用の場合は停止しましょう。

SANGOサポーターの一部機能

同じく、SANGOを便利に使える「SANGOサポーター」というプラグインがあります。

ノートパソコンを操作する男性プラグイン「SANGOサポーター」でSANGO&PORIPUユーザーのブログ効率がさらにアップするよ!

このプラグインにも内部リンク・外部リンクを簡単に挿入できる機能があったんですが、それも現状使えなくなってしまうようです。
特に外部リンクはURLを貼り付けるだけでリンクのタイトルとサイト名が自動挿入できていたので、めちゃめちゃ便利だったのですが…!

MEMO
SANGOサポーターで簡単に挿入できていたPORIPUの追加コード(吹き出しボックスなど)は、専用ブロックを使用すれば簡単に設置できます。

スマホでの執筆は難しいかも

このGutenberg、PCとiPadでは問題なく利用できましたが、スマホではちょっと難しい印象。
小さな画面ではブロックの追加がかなり難しく、PCで右側に表示されるブロックの詳細設定のようなものがスマホでは表示できず…(私が見つけられてないだけかもしれんけど)

スマホでブログをやろうとすると、ざっくりと段落で文章追加はできると思いますが、細かい装飾などはPCやiPadから行うようになるのかな、と思います(現段階では)。よさげなエディタがあれば試してみたいです。

タイトルの文字数カウントがなくなっちゃった

地味に困っているのがコレ。今までは記事のタイトルを入力すると文字数をカウントしてくれる機能があったんですが(テーマ側の機能かも)、そのカウントがなくなってしまいました。
今タイトルは1文字ずつ地道に数えています笑

今後のアプデで機能追加…されたら…いいな……!!(他力本願)

MEMO
エディタ左上の「i」マークを押すと、記事本文の文字数や使用している見出しの数、見出しの構成などを確認することができるそうです。(まっさーさん、教えていただきありがとうございます!)

WPテーマ・カスタマイズ次第でものすごいエディタになる

いくつか不便な点はあるものの、使ってみた感じ「そんなに怯えなくてよかったのかも」と思いました。
というのも、いざClassic Editorを止めてみたら、テーマ用に最適化されたブロックのおかげで割と抵抗なく使えたんですよね。

Gutenbergってまだまだ開発途中だと思いますし、対応していないプラグインがあったり、テーマ側での対応ができていなかったりと不具合や不都合が起きやすくて使いづらい、という面もあると思います。

ただ、SANGOそしてPORIPUの場合、テーマ側でかなりカスタムしていただいていますし、アップデートで機能が改善されたり追加されたりといったことが頻繁にあるので、ユーザーにとってはかなりありがたいです。

いずれClassic Editorのサポートも終わってしまうそうなので、早めに使い慣れておくのもいいかもですね。
テーマにもよるかもしれませんが、少なくともSANGOはかなりいい感じに使えます!

以上、私のGutenbergを使ってみた感想でした。少しでも悩まれている方のご参考になりましたら幸いです~!

こはる

ショートコードがもっと挿入しやすかったらいいなぁ…
WordPressのアプデ時にはキャッシュクリアを忘れずに

WordPressはさまざまなエラーを解消するアップデートが実施されることがありますが、アップデート後にGutenbergのエディタが表示崩れを起こすことがあるようです。

WordPressのアップデート後のGutenbergエディタ画面

私もこんな風にエディタが左端に寄ったり、よく分からないエラー文章が表示されていたり、+ボタンがめっちゃ出ていたりと表示崩れを起こしました。

キャッシュが残っているときにこのような表示の不具合が生じることがあるようです。
キャッシュ消去を行うと改善されるようですので、アプデ後は忘れず実施しましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA