スポンサーリンク

wordpressのGutenberg(グーテンベルク)って何?

WordPress

WordPressが4.9.8が公開されましたが、アップデートすると管理画面のダッシュボードに「あたらしいエディターを試してみませんか?」とか出てくるのですが

これがどうやらwordpress5.0から標準搭載されるGutenberg(グーテンベルク)というエディターのようですのでインストールして調べてみました

Gutenberg(グーテンベルク)とは?

そもそも今までのエディターは記事内コンテンツを1ページのHTMLとして記述するようなものでしたが、Gutenbergは「ブロック」という概念が導入されており、記事内に「見出しブロック」や「段落ブロック」、「単一画像ブロック」などのブロックを挿入しながら記事を作成していきます

使ったことがある人なら分かると思いますが、Page Builder for WordPress (formerly Visual Composer)をすごいシンプルにしたような感じです

ちなみに「グーテンベルク」活版印刷を発明した「ヨハネス・グーテンベルク」が元なんじゃないかなと思います

デモ版もあるのでそちらもご参照下さい
Gutenberg DEMO

Gutenbergで編集してみる

この記事もGutenbergで編集してるのですが、正直慣れないと使いにくいです
ですがこれも新しい形なのだろうということで慣れてみようと思います

公開状態やステータスを変更する

右上の歯車マークをクリックすると見慣れた設定が出てくると思います
Gutenbergにすると一部の設定がトグルになるみたいです

エディターの設定

右上の3点をクリックします、ビジュアルエディターとコードエディターがあります
コードエディターは既存のエディタのようなHTMLタグを入力するような画面なのですが、ブロックの概念はそのまま引き継がれるので「ブロックの中でHTMLコードを入力する」ような感じです

ブロックを追加する

左上の「+」ボタンかエディタの「+」をクリックするとブロックを追加できます、追加する際にブロックの種類を選択できます
あるいはテキスト入力中であればEnterキーを押すことでブロックが追加されます

ブロックの編集

ブロック右上の3点をクリックすると設定が表示されます
「HTMLとして編集」を選択するとそのブロックだけをコードエディタのように編集できます
「複製」を選択するとそのブロックをそのまま複製します
そして今回追加された「再利用ブロック」ですが、これは作成したブロックを保存しておき、ブロックの追加時に保存したブロックを読み込めるという機能です
この機能を利用することで、例えばブログの先頭の書き出しや、ブログ末尾の装飾など毎回使うものを保存しておくことが出来ます
自分でwordpressテーマを作成できる人はsingle.php等に追加してしまえばいいのですが、PHPに明るくない方はこの機能を使うことでブログの更新を少し楽にできると思います

ブロックの移動

ブロックの左上に出てくる上下の矢印でブロックの順番を移動できます
あるいはブロックの空白部分にマウスカーソルを持っていくと手のひらマークになるので、ドラッグアンドドロップでの移動も可能です

まとめ

なんか急に出てきたので調べてみました
これからはGutenbergが標準エディターになるとのことですが「どうしてもやだ!」という方は旧エディタのまま使用することも可能だそうです
その場合は旧エディタ用のプラグインをインストールする必要があります
(現状でもGutenbergを使う場合はプラグインをインストールする必要があります)
恐らく大手のエディタ系プラグインは既にGutenbergに対応していると思うので移行してしまっても問題無いとは思いますが、不安な方は旧エディタで様子見してもいいのではと思います

使用感としてはまだ使いにくいです、しかし慣れちゃえば問題ないんじゃなかいなと思います
ただこれから調べなきゃいけないなーと思っているのは
「エディタ画面にフロントのCSSを適用している場合Gutenbergでもただしく反映されるのかな?」といったところですね
新しいものは何かと不安が付きまといますが、ちゃんと検証して慣れちゃえばどってことないです

コメント

タイトルとURLをコピーしました