WordPress5.0 新エディタ(Gutenberg)を使ってみたら良かったという話

  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
wordpress image
イラストACの画像をもとに加工しています。

WordPress 5.0にアップデートしたことで新エディタを使うことになりました。

旧エディタとはかなり違うものになったため、使いやすさなど心配していましたが、『慣れれば便利になる』というのが第一印象です。

そのほか、気になるところを書いていきます。

文章の構成はシンプルかつスムーズ

文章をスムーズに書けるかは、細かいことですがエディタでは一番大事なところです。

旧エディタに比べて、文章はとても書きやすいです。新しいエディタのGutenbergでは、すべてのコンテンツは『ブロック』という単位でくくられます。

文章も同じです。文章の場合は段落(<p>タグ)がひとつのブロックになります。Enterを入力して改行すると次のブロックに移ります。

次のブロックのデフォルトタイプが文章のブロックなので、続けて文章を書くことができます。操作感はほかのエディタと違いはありません。

段落内での改行はいままでと同じで『Shift + Enter』です。

見出しの挿入が文章を書く邪魔をしない

旧エディタでは、見出しの挿入がひと手間でした。エディタの上のメニューまで移動して挿入する必要がありました。

この、視線を文章から外してメニューからマウス操作をすることが、文章を書くリズムを崩すこともありました。

Gutenbergでは、見出しの挿入の『視線の移動』がなくなっています。

Enterを押してつくられた次のブロックにマウスをもっていくと、キャプチャのようなメニューが表示されます。

gutenberg image

右に表示される『T』が見出しの追加です。そのほか、右にはよく使われるブロックが3つ表示されます。見出しはよく使うものになることが多いので、ほとんどの人は右に表示されます。

ブロックのすぐ上に、見出しのレベルや太字・斜字などのメニューが出てくるので、視線はそのままで、かんたんな見出しのオプションまで設定できます。

文章をメインに書く人にとってはストレスフリーになっていると思います。

ただし、ブロックの上の簡易メニューが上の段落の文章を隠すことが多いので、前の文章を確認しながら書いている人はきついかもしれません。

ちなみに、左の『+』マークは、いろいろなコンテンツのブロックを追加できます。文章だけでなく、コンテンツの追加の『メニューへの視線の移動』もなくしています。

見出しと本文を書いているときのデモです。

自動整形のわずらわしさがなくなった

ちょっと技術的なところから見ていきます。旧エディタでは、自動整形機能がありました。

<p>タグ、</br>タグの挿入を自動でしてくれるというものです。でもこれが、文章のデザインの構成を崩す原因にもなっていました。

その崩れを修正するための方法は、プログラムを修正したり、プラグインの導入が必要だったりしたので、WordPressやプログラミンが分からない人にとってはどうしていいか分かりませんでした。

新エディタではこのわずらわしさが完全になくなっています。

動作の仕様はシンプルで、段落のブロックは<p>タグでくくり、『Shift + Enter』で</br>タグが挿入されます。たったこれだけなので、文章が勝手に崩れることもありません。

ブロックで機能が統一されている

さっきも言ったように、すべてのコンテンツは、カーソルがあるブロックの左の『+』マークから追加することができます。というかGutenbergでのコンテンツの追加の仕方はこれだけです。

そして、それぞれのコンテンツのオプションの設定は、よく使うような、かんたんなオプションはブロックのすぐ上に表示され、詳細のオプションは右側の『ブロック』タブで設定します。

また、ブロックのコンテンツは、詳細オプションの『高度な設定』で、HTMLタグのclass属性の設定ができます。見出しなど、なかにはid属性を設定できるものもあります。

id属性の入力は『HTMLアンカー』です。分かりにくい表現ですが、技術的なことは分からないユーザー向けの『リンクを貼ってジャンプできるよ。』という意味になっています。

これらの操作方法は、すべてのコンテンツで共通しています。操作感が統一されているので覚えるのも簡単ですし、慣れるのも早いでしょう。

構成のやり直しがかんたん

ブログでもコーポレーションサイトでも、一度ページを作成してから、『画像の位置を変えたい』『この文章を別の場所に移したい』など、構成を変更したいことがよくあります。

Gutenbergでは、それがかんたんにマウス操作でできます。Gutenbergのブロックの左にマウスをもっていくと『手』マークが出るので、そこからドラッグでブロックを移動することができます。

また、『上に移動』『下に移動』ボタンでひとつずつ移動することもできます。

あとでかんたんに構成を変えられるので、コンテンツ作成に集中することができます。

気を付けること

Gutenbergに完全移行するのは大変です。とくに過去記事が多かったり、大量のコンテンツをつくっているサイトは、手作業はほぼ不可能でしょう。

しばらくは、旧エディタとの互換性を保つために、Classic Editorを使うことになると思います。

classic-editor

Classic Editor

WordPress の旧エディターと、以前のスタイルの投稿編集画面レイアウト (TinyMCE、メタボックスなど) を有効化します。この画面を拡張する古いプラグインをサポートします。

ja.wordpress.org

_

そのとき、旧エディタで保存したものを新エディタに切り替えたときに、ブロックが壊れたような表示がでます。

原因は、旧エディタ(TinyMCE)は、なんでもかんでも<p>タグをつけるようになっています。でもGutenbergではブロックでコンテンツを囲うので、<p>タグをつけるのは文章の段落のブロックぐらいです。

そのほかのコンテンツは<div>タグで囲んで表示されます。この違いで、旧エディタで<p>タグがつけられたコンテンツは、Gutenbergに切り替えると、無効なブロックとして認識されます。

ぼくが見た限りではショートコードと『もっと読む』でした。ほかにもあるでしょう。でも解決方法は簡単です。

変換できなかったメッセージが表示されると同時に、解決ボタンが表示されます。この解決ボタンを押して下さい。

gutenberg error image

すると、解決策が表示されます。

gutenberg error image

赤文字の部分を削除するという意味です。ここでは<p>タグを削除します。ここで『ブロックへ変換』ボタンを押せばOKです。

『HTMLに変換』ボタンを押すと、HTMLの修正を行わずに(<p>タグがついたまま)、無理やり『カスタムHTML』ブロックに変換されるので、元のブロックのタイプが変わってしまいます。

ちなみに、最初に表示される黄色の『HTMLに変換』ボタンも同じ結果になるので、このときは押さない方がいいです。解決策を見てからHTMLに変換しても遅くはありません。

まとめ

 新エディタのGutenbergは、対応しているプラグインはまだ少ないです。にもかかわらず、使い勝手はとても良いです。

細かいことを言えばいろんな不満・希望はありますが、まだまだスタートしたばかりです。これからもっと良くなる伸びしろとして期待します。

旧エディタ(TinyMCE)は、もう使うことはないでしょう。過去記事以外では。

編集画面と完成したページのイメージが違うという不満を持つ人もいるかもしれません。でもこれはプレビュー機能で対応できます。

Gutenbergでは、編集内容を更新すると、すでにプレビューを開いているブラウザはリロードします。編集ウィンドウとプレビューウィンドウを分けて左右に並べて作業すれば問題ないでしょう。

Gutenbergでは、Classic Editorプラグインを入れてなくても、標準で『クラシックブロック』という旧エディタを使える機能があります。

でも、これを過去記事以外で使うのはよくありません。

旧エディタの機能は、将来必ずなくなる機能だからです。そのときに移行作業を増やすようなことはしてはいけません。

そういう意味では、いま大量にコンテンツを作成しようとしている人は、その前にGutenbergの導入(WordPress5.0へのアップデート)を検討したほうが良いでしょう。

前のページ
実録。WordPressを5.0にアップデートしたら、意外と上手くいく
WordPress ver5.0.Xのアップデートは早くしよう!
次のページ
WordPressの本
post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本
  • Webサイト作成から運用まで全体的に学ぶ
  • ブログサイトの運営からサイトの収益化を学ぶ
  • サイト作成・運営 + 集客の方法を学ぶ
  • WordPressからPHPプログラミングを学ぶ
  • 最新のWordPress(バージョン5)に対応した本

の7冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。


WordPressの本7選

SNSでも記事を配信しています。
コメントを残す

*

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

top
この記事を気に入ったらぜひシェアも!!