Gutenberg エディター

ワードプレスの新しいエディターを使ってみました。

WordPressの次のバージョンより、標準エディターになるそうですが、これまで困っていたことなどにも手が行き届きとても使いやすい印象です。

ここではインストールから、使用感、とても便利だと感じている部分をご紹介します

  
ダッシュボードを開くとすぐに目につきます

使えるようにする

何はともあれインストールをしないと、、、

っと思ったのも束の間、ダッシュボードに説明書きと【インストールする】というボタンもあります。しかしこれだけでは、エディターを入れ替える所まで心動かないかもしれません。

そんな方のために、エディターのテストページも用意してありますので、インストールボタンの下にある“Gutenberg の詳細”からご覧ください

テストページはもう別世界!

これまでのWordpressで使っていたエディターとはもう全然違います!

  • テキストボックス内で執筆をしなくてはならず、毎回はみ出す度に画面いっぱいまで広げていた手間がなくなります
  • テキストスペース上にあるエディターメニューと文章の間を、各作業で行ったり来たり

  • その他もろもろ

こんにちは、新エディターです

インストールは簡単

インストールはダッシュボードのインストールをおしてしばし待ち、有効化すればすぐに使えます。

これまでのエディターで作成した記事もそのままの形で保存されており、安心です。

まずは、使ってみましょう

タイトルを入れて改行するとすぐに入力できる状態になります。

はじめにどういったブロックにしたいのか?決めながら進めていくので、初めてでも書き始めやすい印象です

また画像にしろテキストにしろ必要な詳細設定は右側に表示されているので上までスクロールしたりすることも必要ありません。

画像の追加に感動!

画像を挿入するときも、これまではエディーター上にある“メディアを追加”から行っていましたが、これがまた感動ものです!!

したの画像のようにマウスオンで出てくるメニューの右の真ん中を押すと②のように画像挿入画面が文中に現れます

これまではアップロードする際もメディアライブラリーを一度開くため読み込みに時間がかかったり、画面がレイヤーにになり重くなっていたりと、処理に負担がかかっていましたがこれだと、そのまま貼り付けていくことができ、とてもスピーディー(直感的)に執筆することができます。

僕は普段マックで執筆していますが、この記事のようにスクリーンショットなどを切り取りそのまま貼ることができるため作業工程が1〜2つ減るだけで、かなりの負担減だと感じています。

右側に表示されるメニューが便利すぎる

【テキスト編】


【画像編】

各画像で行っていた設定も、変更時にメディアライブラリーへ移管せず変更・編集することができます。

基本的な記事のメニューはこんな感じに出ています

箇条書きはこんな感じに

また、+をおすと以下のメニューが出るので、

  • 画像(上の画像挿入と同じ)
  • ギャラリー
  • カバー画像

これらを選択するとこれまでのメディアを追加から画像を選んだりする作業が必要なくなります

箇条書きなどでわかりやすくまとめたいときは、はじめから+右側の一番右端にあるリストから箇条書きメニューをだすか、文節を箇条書き毎に段落(ブロック)に分けて範囲指定をして上にでる変換からリストを選ぶこともできます

  
マウスなどでえらんで

  
リストを選びます

HTMLのタグもまぜまぜ

この表現が正しいかわかりませんが💦

①初期状態の「+」メニューよりカスタムHTMLを選びます

②下記のウインドウが開くのでHTMLを記入、もしくはペーストします

③左括弧を入力するとタグを補完してくれます

④選択すると結びも補完してくれます

⑤とりあえず仕切り線と見出し5をテストにしてプレビューをおします

このようにしてHTMLのタグも文章に織り交ぜながら執筆できます

保存も簡単

  • Macintoshはコマンド+S
  • Windowsはコントロール+S

で、WordやAdobeのソフトのように保存することができます。

自動保存で安心

執筆中に自動で保存をしてくれていて、急なトラブルや誤って戻るをしても安心です

再設定

次にある大きなアップデートでは、標準機能になるGutenbergですが、現在は今までのエディターとGutenbergを必要に応じて使い分けることができます。

↑と、インストールする所にも書いてありました。

WordPressのダッシュボードよりインストールを行い、Gutenbergを使っているときは、旧エディターと選びながら使えますが、旧エディターをメインに使いたいと、一度Gutenbergを解除してしまうとGutenbergを再度設定する方法が見当たりません💦

解除をしてもGutenbergはインストールされているので、再度有効にするには【設定→投稿設定】より使用するエディターを選ぶようにします。

ここで、Gutenbergと旧エディターを切り替えることができます

速報

  • 平成30年10月19日(金)
    1. 一部管理サイトにてGutenberg使用のブログが更新できない問題が起きています
    2. 画像をライブラリーからアップデートしないとエラーになります
    3. これらは旧エディターで作成された記事をGutenbergへブロック毎に置き換えた記事で起こっています
    4. 自動保存の度に「方針に失敗した」旨が送られてくる
    5. 先日のアップデートが原因か?
  •  

まとめ

今回、初めて触った感想を書きながら、非常に興奮しています。

これまで「こうなったら良いのに・・・」といった所が随所に修正され、この作業の時にはこれ!って言うものが近くに表示されており、これまでに無い快適なエディターに仕上がっていました。

今後はあとからインストールしていたエディターとの兼ね合いや、プラグインで追加していた書式などがどのように融合するのか楽しみですが、今後もメリットやデミリットをチェックしながら使っていきたいともいます。

 

 

追記

この記事を書いた後、色々な管理サイトでこのエディターが原因か不明ですが、扱いにくくなってしまう症状が出ました

  • アイキャッチが設定できない
  • 画像を記事にアップロードできずエラーになってしまう
  • 自動保存ができず定期的に、「保存できませんでした」と表示される

などなど

平成30年10月31日(水)

上記の様な症状を受け、ひとまずエヂィターを休止しようと設定→投稿設定から変更を試みましたが、この記事に書いた変更用のメニューはすでになくなっていましたOTL

そこで、「助けて!Google先生」と検索してみたところ【Disable Gutenberg】というプラグインがあって、これを有効にし、Gutenbergを停止すればエディターの機能を休止できるようです。

プラグインを使うほか、コードでグーテンベルグを休止させる方法も詳しくcolissさん(Gutenbergの準備がまだの人に、WordPressのGutenbergを無効化する方法のまとめ)
で紹介されていますのでご覧ください。

 

この記事気に入って頂けたら、ぜひフォローをしてください!

The following two tabs change content below.

kobayoshi

美容室オーナー兼WebデザイナーデザインWeb's
美容室を経営しながら、中小企業のWebサイトやリーフレット・フライヤーなどの制作を受けています。おしゃれで今どきのサイトを作って満足していませんか? ホームページは、作っても見る人に優しい構成でないと無駄になってしまいます。 「中身がない」「何の会社かわからない」「インフォメーションや探している内容が見つからない」 デザインWeb'sでは、作り手の伝えたい内容を、探している人に伝わるように制作します。 ホームページで集客を考えている!あなたの相談をお待ちしています

最新記事 by kobayoshi (全て見る)

コメントを残す