「Gutenberg(グーテンベルク)」WordPressの新しい編集画面のエディタをレビュー

WordPress使い方

久しぶりにちゃんと、仕事で使っているWordPressに関係する記事です。

[speech type="ln" icon="https://www.uesei.net/wp-content/uploads/speech-img/girl.png" name="同業者さん"]ちゃんと仕事してる?[/speech]

[speech type="ln" icon="https://www.uesei.net/wp-content/uploads/speech-img/uesei.png" name="うえせい"]してるけど、夏から秋はトライアスロンとか自転車で、忙しくて。。。[/speech]

とはいえ、定期契約のお客様もいらっしゃいますし、そもそも仕事しないと収入ないので、ちゃんとやってますよ。
ただ、トライアスロンとか自転車のネタが多くなってしまうだけなんです。

さて、ボクの状況はさておき、WordPressももうすぐVer5.0.0になりそうですね。

そのタイミングで編集画面がリニューアルして「Gutenberg(グーテンベルク)」というエディタに変わるようです。

「ビジュアル」「テキスト」の使い分けが、どうなるのか分かりませんが、2018年8月8日現在、プラグインをインストールすると使えるようなので、ひとまず使ってみての感想と、どんな風になっているのかをご紹介します。

 

「Gutenberg(グーテンベルク)」って、そもそも何?

WordPressで新しく記事を書くときに、「ビジュアル」「テキスト」という編集のモードがあって、それぞれ使い分けていたり、使いやすい方を使っていたと思いますが、それがビジュアル・テキストともに、「Gutenberg(グーテンベルク)」という全く新しい編集画面に変わるようなのです。

WordPress Ver5.0から導入される見込みで、その特徴は文章の段落や写真、表組み、箇条書きなど、それぞれをブロックという単位で作っていき、最終的に記事にしていくというタイプのもの。

2018年8月8日現在、まだベータ版でプラグインをインストールすることによって、本導入以前に使えるようになります。

[speech type="ln" icon="https://www.uesei.net/wp-content/uploads/speech-img/uesei.png" name="うえせい"]あくまでベータ版なので、この記事を読んで「早く使いたい〜!」って思っても、仕事でバリバリ使っているサイトなんかにインストールして使うのはやめておいた方が無難でしょう。[/speech]

[speech type="ln" icon="https://www.uesei.net/wp-content/uploads/speech-img/uesei.png" name="うえせい"]テーマや同時にインストールされているプラグインによっては、干渉してどんな影響がでるかは分からないからね[/speech]

 

「Gutenberg(グーテンベルク)」を使ってみた感想

ボクは普段Mac用のブログエディター「MarsEdit」を使ったり、WordPressの「テキスト」編集を使ったりしています。

投稿画面の「ビジュアル」を使わないのは、改行などでキチンと調整しきれなかったりすることが理由なんですが、今回使ってみた「Gutenberg(グーテンベルク)」は、その辺りの「ビジュアル」編集の使いにくさがなく、かなり使えるなという印象です。

[speech type="ln" icon="https://www.uesei.net/wp-content/uploads/speech-img/uesei.png" name="うえせい"]スマートフォンでブログを書くときは「するぷろ」というブログエディタを使ってるよ[/speech]

これなら、Macのときは「MarsEdit」。WindowsのときはWordPressの編集画面に直接入力。スマートフォンのときは「するぷろ」と、使い分けをしなくても良くなる可能性を秘めています。

[speech type="ln" icon="https://www.uesei.net/wp-content/uploads/speech-img/uesei.png" name="うえせい"]そうなるとPCを購入するときの選択肢がすごく広がりますからね![/speech]

 

「Gutenberg(グーテンベルク)」ベータ版を使う方法

「Gutenberg」をダウンロード&インストール

グーテンベルク導入画面

2018年8月8日現在、WordPressをVer4.8.2にアップデートを行うとWordPress管理画面のダッシュボードに上のような表示がある。
左側の「インストール」ボタンを押すと、ダウンロード&インストールが始まります。

いまから使い方を解説しますが、まだベータ版であることも含め、テーマやプラグインが対応するかどうか分からないため、導入には慎重になった方がいい。
試しに使ってみるなら、公開していないテスト用のサイトなどで使ってみるといいですよ。

[speech type="ln" icon="https://www.uesei.net/wp-content/uploads/speech-img/uesei.png" name="うえせい"]ボクは、テスト用の環境があるので、そちらのWordPressに「Gutenberg」プラグインをインストールしました。[/speech]

 
有効化する
ダウンロードが終わったら、有効化をします。

これで、「Gutenberg」を使うための準備が完了しました。

 

「Gutenberg」を使ってみる

「Gutenberg」インストール後すぐは、サンプルデータが一緒にインストールされ、表示される

グーテンベルクサンプルデータ
実際試しに使ってみるだけなら、この英語のサンプル記事だけ見てればだいたいのことが分かりそうな気がします。

[speech type="ln" icon="https://www.uesei.net/wp-content/uploads/speech-img/uesei.png" name="うえせい"]でも、実際日本語を入力してみたかったので、やってみました[/speech]

 

「Gutenberg」投稿画面

グーテンベルク投稿画面
見た目がすごく変わってはいますが、そのレイアウト自体が大きく変わったわけではないので、以前からWordPressの投稿画面に直接入力していたユーザーなら、それほど違和感はないでしょう。

 
ブロックを追加
ひとつひとつブロックを作っていき、それを積み上げていくようなイメージで記事の制作を行っていく。

[speech type="ln" icon="https://www.uesei.net/wp-content/uploads/speech-img/uesei.png" name="うえせい"]だから、最初に行う作業は最初のブロックを作ること[/speech]

[speech type="ln" icon="https://www.uesei.net/wp-content/uploads/speech-img/uesei.png" name="うえせい"]”+”部分をクリックすると、ブロックが追加されます。[/speech]

 
ブロックの種類
よく使う、「段落」「画像」「見出し」などがあります。

 
▼もちろん、選択したブロックの変更も可能です。
ブロックの種類変更

 
▼その他コードなどのブロック
ブロックの種類2

 
▼他のサイトの情報を埋め込むためのブロック
埋込ブロック

 

画像の挿入はとても簡単で、あとからサイズ変更もできる

画像挿入後
画像を挿入したあとで、画像の縁をつまむようにしてサイズ調整が可能となっていまうs.

 
▼ちなみに、画像ブロックを選択している時の右側のメニューはそのままです。
管理画面 画像時サイドバー

 

テキスト編集をメインで使っていた方にとてっては、HTMLタグが入力できるのは嬉しい

HTMLとして編集
通常はグーテンベルクを「ビジュアルエディター」として、画像や文字の大きさ、色などをビジュアル的に確認しながら記事を書いていき、必要な場合のみHTMLを挿入するというやり方も可能です。

 

「テキスト」編集は、コードエディターとして、そのまま残るようです

コードエディター
編集画面右上の”⋮”をクリックすると上のメニューが表示されます。
そこに表示される「コードエディター」をクリックすると、いままで使っている「テキスト」と同様の画面になります。

コードエディター
ただし、ボクが使ったとき「コードエディター」がうまく動作せず、ブロックをつくることができませんでした。

[speech type="ln" icon="https://www.uesei.net/wp-content/uploads/speech-img/uesei.png" name="うえせい"]ベータ版なのか当方の環境なのかは分かりませんが、どちらにしても正式にリリースされるころには、いろいろな不具合も解消されていることと思います。[/speech]

 

スマートフォン(iPhone)で使ってみた

スマートフォン

PCの画面そのままではなく、レスポンシブに対応していて、スマートフォン用にレイアウトが整えられて表示されます。

PC同様に、ブロックを作っていくという作業は変わりません。
スマホ ブロックを追加

 
画像の追加に関しても「メディアライブラリ」の中にあるものを使うことも可能ですし、スマートフォン内にある写真も使うことができます。
画像の追加

 
[speech type="ln" icon="https://www.uesei.net/wp-content/uploads/speech-img/uesei.png" name="うえせい"]いままで、スマートフォンでブログを書くときは、ブログエディタアプリを使っていたのですが、コチラで用が足りるのなら、iOSやAndroidといった環境にしばられることもなくなるので、かなり期待しています。[/speech]

 

【まとめ】さらっと使ってみた印象は、かなり良いです。

結局うえせいはこう思う
動作がすごく重いというわけでもありませんし、ブロックを積み上げていくような記事制作に関しては、感覚的にすぐに馴染むように思います。

使ってみる価値は、充分あるというのがボクの印象です。

ただし、使っているテーマやプラグインなどが対応していない可能性もあり、とくにカスタムフィールドやカスタム投稿タイプも不安だったりするので、導入は慎重になったほうがいいと思います。

では、また。最後まで読んでくれてテリマカシ。

 
【関連記事】コピペでできる! アメブロのリブログをWordPressでも使うための5ステップ【2017年4月リライト】

【関連記事】WordPressことはじめ「検索エンジンがサイトをインデックスしないようにする」

【関連記事】WordPressで記事を分割する2つの方法。「nextpage」またはプラグインを使う