Memo

今更聞けない!WordPressの新エディタ『グーテンベルグ』を使ってみた話

WordPress 5.x系から標準エディタとなった『Gutenberg(グーテンベルグ)』ですが、今更になって使ってみたら、クラシックエディタに戻れなくなってきたというお話です。

グーテンベルグってどんなエディタ?

これまでのWordPressには、Wordソフトのようなビジュアルエディタ「TinyMCE」とHTMLコードなどで書き込めるテキストエディタがついていました。

グーテンベルグはブロックエディタと呼ばれ、どちらかといえばビジュアルエディタに近いです。

https://wordpress.org/gutenberg/ で雰囲気はつかめるかも?

ビジュアルエディタと違うのは、かなり自由度が高いこと。

例えば、コンテンツ内の一部分だけ2カラムにしたい!なんて時は、CSSで設定しなくてもカラム要素を追加することで実現できます。

例えば

こんな風に

また、追加した見出しや段落の要素をドラッグ&ドロップで移動できるし、別のページでも使いたい部分を登録すれば、使い回すことだって可能。

すごく直感的に使えるんですよね。

グーテンベルグでできること、できないこと

とりあえず、使ってみて「すごい!」とか「ちょっとざんねん」と感じたできることできないことを箇条書きにしてみました。

グーテンベルグのスゴイところ

  • 全幅指定ができる
  • カラム要素を追加できる
  • ショートコードを書き込むことができる
  • 再利用したいコンテンツを登録できる
  • 選択したブロックをそのまま複製するのも簡単
  • Twitterなどの埋め込みも簡単
  • 最新の記事リストなどウィジェットを埋め込める
  • 部分的にクラシックエディターを入れ込むことができる
  • 部分的にHTMLコードを書き込むことができる
  • エディタ上で背景色や画像を設定できる

できることが多くて、CSSをいじれない人でも自由なレイアウトをつくれるようになっているなぁと感じました。
カラム要素はちゃんとレスポンシブですしね。

グーテンベルグのちょっと残念なところ

  • 1文字ずつ色を変えたり、クラスを指定したりできない
  • 1度保存しないと、スラッグを指定できない?
  • ソースがDIVDIVしている

基本的にはブロック単位でクラスやIDを指定するので、段落内の一部分にだけクラス設定をするようなことはできません。 そういう時は、HTMLコードで書き込んでやるしかないようです。

また自由度が高くなった反面、ソースはあんまり綺麗じゃないですが、仕方ないかなーとも思います。

1ページだけグーテンベルグを使いたい!そんな時は?

「投稿ページはクラシックエディターにしておきたいけど、固定ページはグーテンベルグを使いたい」
「クラシックエディタから完全に移行はできないけど、1ページだけグーテンベルグを使ってみたい」
ってことありますよね。

そんな人にオススメしたいのが『ys-wp-gutenberg-switcher』というプラグイン。

記事ごとにGutenbergを切り替えるプラグインを作りました。

非公式のプラグインですが、ページ単位でエディタを切り替えることができるというスグレモノです。

エディタの一番下に、こんなチェックボックスが追加されるのです。

まさに仕事で「投稿はクラシックエディタにしときたいけど、固定ページはグーテンベルグで作りたい」というのがあって、見つけました。

\ちなみにこの記事だけ、グーテンベルグで作成しています/

試しにグーテンベルグを使ってみたい!という人はぜひ使ってみてくださいね。
おかげさまで、今ではすっかりグーテンベルグで受託案件やってます。

そろそろ使ってみようと思ってる人も、ぜひ使ってみてください!

COMMENT

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください