WordPress に Gutenbergがやってくるヤァ!ヤァ!ヤァ! – ACF & カスタム投稿タイプ & テキストエディターにHTML…

この記事をフルスクリーンで見るフルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。

WordPress 4.9.8がリリースされて、いよいよ Gutenberg の足音が聞こえてくる季節になりました。
Gutenberg という名の通り、WordPress においては大きな変革であることは間違いないと思う。
今までのエディターでは実現が難しかった表現が、それほどリテラシーのないユーザーでも実現できる可能性がある。
もちろん今までのエディターを使い慣れている人にとっては、ちょっと戸惑うかも知れないけど、慣れるまでにそれほど時間はかからない気がする。

Gutenbergがやってくるヤァ!ヤァ!ヤァ!

Gutenbergがやってくるヤァ!ヤァ!ヤァ!

で、実際どういうエディターなのかということは、使ってみないとよくわからないので、『Gutenberg』をテーマにしたイベントが WordBench 神戸で数回開催されました。
8月13日にも『第93回 WordBench神戸』で、『Gutenbergについてみんなで触って考えてみよう』という『夏のGutenberg祭り』が zoom を使ったオンラインで開催されました。
そのときに気になったことや、次の日に『Before Gutenberg – カスタムフィールド職人の命運やいかに? – Capital P』という記事が公開されたので、自分なりに気になるところを確認してみようかと…

これまでは、『どんなエディターなのかな?』ということくらいのさわり方だったので、ローカル環境に新しく WordPress をインストールして試していました。
でも、皆さまも同じだと思うのですが、やはり一番気になるのは既存のサイトを Gutenberg に移行したときにどのようになるのかということだと思います。

ということで、既存のサイト(といっても本家のサイトが無くなっちゃいましたけど…)をローカル環境に構築して、実験的に色々と試してみました。

ちなみに今回テストしたサイトは、マルチサイトなのでちょっと挙動などが違うかも知れませんが、カスタムフィールド(Advanced Custom Fields)をそこそこ使っていることやテキストエディターで HTML を記述している固定ページがある、カスタム投稿タイプを使っているということ。
また、『ついでならマルチサイトでどうなるのかもあわせて確認できるかな?』という単純な理由です。

あとから気づいたのですが、ローカル環境がちょっと古いので、php のバージョン等で挙動が違うところがあるかも知れません。
この記事を参考にされる場合は、そのあたりのことやマルチサイトで検証しているということを考慮してくださいね。

Gutenberg を使えるようにする

もし、「Gutenberg って何?」という方がおられましたら、『こんにちは、新エディターです』というページを見ていただいた方がいいかも知れませんね。

まず、バージョン4.9.8をインストールしたときにダッシュボードに表示される『Gutenberg』と『Classic Editor』をインストール & 有効化します。

GutenbergとClassic Editorのインストール

GutenbergとClassic Editorをインストール

GutenbergとClassic Editorを有効化

GutenbergとClassic Editorを有効化

ただ、マルチサイトは『ネットワーク管理』からじゃないとテーマやプラグインのインストールはできないはずですが、『参加サイト』からでもプラグインのインストールができました。
テスト用のサイトは前述の通りマルチサイトですが、権限がないというアラートが出たにもかかわらず、プラグインのインストールができたということですね。
ダッシュボードに表示されたインストールボタンだったからかなぁ。

このあたりは、もう一度検証した方がいいかも知れない…

ACF(Advanced Custom Fields)はどうなる?

今回、ローカル環境に構築したのは、

検証に使ったサイトの画像

宝塚映画祭のサイトで検証してみました。

というサイトです。
投稿設定は、クラシックエディターのまま。

投稿設定画面

投稿設定はクラシック (旧型) エディターのまま

管理画面は、

フロントページの管理画面

フロントページの管理画面

こんな感じ。
ほぼカスタムフィールド(Advanced Custom Fields)です。
WordPress のエディターは、Advanced Custom Fields の設定でコンテンツエディタを非表示にしています。

投稿設定を『Gutenberg エディターをデフォルトで使い、旧エディターへのリンクを含める。』に変更するとこんな画面になります。

Gutenbergでのフロントページの管理画面

Gutenbergでのフロントページの管理画面

基本的には、問題なさそうですね。
以前試したときは、カスタムフィールドは全然ダメだった気がするのですが…
ただ、その時は毎日のように Gutenberg プラグインがアップデートされていた時期でしたけどね。

Advanced Custom Fields の Repeater も問題ないみたい。
ただ、フィールドのドラッグ & ドロップがうまく動作しないことがある。(ブラウザが原因かも知れない)
この画面だと『ホーム・スライダー』はちゃんと移動できるのですが、『ホーム・コンテンツ』のドラッグ & ドロップができないですね。
まぁ、Advanced Custom Fields も、まだ完全には Gutenberg に対応していないだろうし、バージョン5.0で対応するみたいなので、それまでは仕方ないかな。(現時点のバージョンは、4.4.12)

Advanced Custom Fields については、『Before Gutenberg – カスタムフィールド職人の命運やいかに? – Capital P』にも書かれていますが、いくつか注意が必要なようですので、是非この記事をお読みください。

記事によるとカスタムブロックを作れるようにもなるらしいので、これはちょっと楽しみです。
まぁ、そのときに『Repeater』の扱いがどうなるかですね。

カスタムフィールドで思い出しましたけど、『表示オプション』って無くなったんですかね?

表示オプション

表示オプション

表示オプションが見あたらないので『カスタムフィールド』を表示できない。
Gutenberg では『カスタムフィールド』を表示しない設定なのでしょうか。
Custom Fields for Gutenberg プラグインを使えば『カスタムフィールド』を表示しますが、表示・非表示の切り替えが出来ないのはちょっと不便かな…

表示オプションで表示できる『スラッグ』も Gutenberg では何処にあるのかがわからなかった。

パーマリンクの設定

パーマリンクの設定

新規投稿でタイトルを記入しても何も表示されず、保存された時点で表示されるようになる。
まぁ、これも慣れの問題なのですが、以前のように『スラッグ』だけを記入できる方が、個人的にはありがたかったです。

また、カスタムフィールドではないですが、先日の『第93回 WordBench神戸』で紹介された、『Advanced Custom Blocks』というプラグインがあります。

Advanced Custom Blocksプラグイン

Advanced Custom Blocksプラグイン

ブロックを作るプラグインですが、今はまだベータ版の扱いなのかも知れません。
Field Type が『Text』と『Text Area』のふたつしかありませんが、Image や Repeater のような Type を選択できるようになれば色々と使い勝手のいいブロックを作れるような気がします。
設定画面は、かなり Advanced Custom Fields を意識しているのかな :-)

concrete5の Block Designer アドオンのようなプラグインになればいいなぁ…

カスタム投稿タイプはどうなる?

投稿タイプを使ったページの検証としては、アイキャッチ画像をサムネイルとして一覧表示、クリックすると Light Box で画像を表示するというページで、基本的には個々のページにはリンクしていません。

細かいことを書くと infinitescroll や、isotope を使ってサムネイルの並べ替えや日付によるフィルタリングをしていますが、Gutenberg には関係ないと思うので省略。

カスタム投稿タイプを使ったフォトギャラリー

カスタム投稿タイプを使ったフォトギャラリー

フォトアルバムのLight Box表示

フォトアルバムのLight Box表示

カスタム投稿タイプはプラグインを使って設定しています。

カスタム投稿タイプの設定画面

カスタム投稿タイプの設定

表示するのは、『タイトル、作成者、アイキャッチ画像、抜粋、リビジョン、属性』です。
上記のように個々のページにはリンクせず、サムネイルを Light Box で拡大表示するだけなので、エディターは表示しない設定にしています。
管理画面で見ると、

カスタム投稿タイプの編集画面

カスタム投稿タイプの編集画面

こんな感じですね。
投稿設定を『Gutenberg エディターをデフォルトで使い、旧エディターへのリンクを含める。』に変更しても変化がない。

現時点のGutenbergでは、supportsにeditorを入れておかないと動かない。画面が真っ白になってウンともスンとも言わなくなる。

画面が真っ白になることもなく、以前の管理画面の表示のままです。
ちなみにカスタム投稿タイプの設定で、エディターを表示するようにしても、特に変化はない。
ツールバーに『編集(旧エディター)』の表示が追加されるくらいです。

編集(旧エディター)を表示

編集(旧エディター)を表示

また、投稿一覧に表示するページのタイトルにも『Gutenberg』の文字は付かない。
投稿画面が Gutenberg の表示に切り替わってないので当然といえば当然か…
新規でページを追加しても変わらない。

ちなみに、カスタム投稿タイプをGutenbergで使う場合、show_in_restをtrueにしないと動かないのでご注意あれ。

ということなんだろうか。
まぁ、プラグインが Gutenberg に対応していないのは間違いなさそうですね。

ということで、プラグインをやめてカスタム投稿タイプの設定を functions.php に記述してみる。

同じ設定だと当然管理画面の表示も同じだろうから、『’show_in_rest’ => true』を追記してみたけど、管理画面の表示は変わらない。
次に’supports’に’editor’を追加してみたところ、Gutenberg の表示に変わった。

Gutenberg のカスタム投稿タイプの編集画面

Gutenberg のカスタム投稿タイプの編集画面

やはり、

現時点のGutenbergでは、supportsにeditorを入れておかないと動かない。
カスタム投稿タイプをGutenbergで使う場合、show_in_restをtrueにしないと動かないのでご注意あれ。

ということみたいですね。
高橋さん、ありがとうございます m(_ _)m

プラグインを使ってカスタム投稿タイプを設定している人は多いと思いますが、プラグインが Gutenberg に対応するまでは注意が必要ですね。
もしくは、プラグインをやめて functions.php に上記の点に気をつけて記述するか…
プラグインによっては設定を書き出せる機能があったりするので、その場合はそれほど難しくはないと思います。
頻繁にテーマを切り替える人はちょっと面倒ですけどねー。
カスタム投稿タイプも設定さえちゃんとすれば Gutenberg に移行しても問題なさそう。
ただし、準備は必要。

テキストエディターで HTML を記述している固定ページは?

固定ページでもエディターを使って普通に書いていれば特に問題はないはすだけど、テキストエディターで HTML をゴリゴリ書いている人もいるはず。
特に企業のサイトを作る場合、『会社概要』『沿革』などのページを作る際に『div タグ』を使ったり、『class 名』でスタイルを設定している例は多いのではないだろうか。
ほぼ、更新がなくクライアントは一切ページをさわらず、更新がある場合はこちら側で作業をするというのであれば、それほど問題にならないかも知れない。
とは言うものの、もしクライアントがうっかりページをさわって、Gutenberg に置き換わってしまったら、スタイルが変わって意図した表示にならなくなってしまうことも起こり得る。
Menu Editor プラグインなどを使ってメニューの『固定ページ』を非表示にしているのなら、それはそれでいいかもしれないけど…

でも、対策や準備をしておくことに越したことはない。
現時点では、どうするのが一番良い方法なのかは実際まだよくわからないけど…

というわけで、PC とスマートフォンで表示を変えたいこんなページで検証してみました。

PCでのタイムテーブル

PCでのタイムテーブル

スマートフォンでのタイムテーブル

スマートフォンでのタイムテーブル

表組なのでテーブルタグを使えばいいのだろうけど、PC とスマートフォンで表示を変えたい場合や、上映テーマによって色を変えたり、上映回のイベントも表示したいとなるとそれなりに HTML で記述しないと実現は難しい…
固定ページの編集画面はこんな感じ。

タイムテーブルの編集画面

タイムテーブルの編集画面

投稿設定を『Gutenberg エディターをデフォルトで使い、旧エディターへのリンクを含める。』に変更。

Gutenbergでの編集画面

Gutenbergでの編集画面

Before Gutenberg – WordPress 5.0になるまでに準備すべきこと – Capital Pにも書かれていますが、本文の表示されない『クラシックブロック』があるだけなので『ブロックに変換』を選択してみる…
むむっ、変換してくれない。

ブロックに変換を選択

ブロックに変換を選択

これは、ローカル環境の php のバージョンが古い?
それともブラウザのバージョン?

このままでは、検証が進まないので別の環境に再度構築。
結果、ブロックに変換できました。
やっぱり、php のバージョンなのかなぁ?
Gutenberg って使用条件とかありましたっけ?

クラシックブロックから変換した編集画面

クラシックブロックから変換した編集画面

しかし、タイムテーブルのページを確認すると

Gutenbergに変換後のページ

Gutenbergに変換後のページ

想像はしていましたが、表示は見事に崩れています。
コードを確認するためにツールバーの『編集(旧エディター)をクリック。
予想通り dl タグや class が削除されています。

Gutenbergに変換後のコード

Gutenbergに変換後のコード

やはり テキストエディターで HTML を記述している場合は、クラシックエディターのままにしておかないと大変なことになりそうですね。
自分で管理しているサイトであれば気をつけておけばいいですけど、お仕事で制作したサイトの場合クライアントさんに変換しないように伝えておくか、先ほど書いたように Menu Editor 等で『固定ページ』を非表示にするというような対応が必要になるかも知れません。

カスタム HTML ブロックに変換してみる

テキストエディターで HTML をゴリゴリ記述している場合にクラシックエディターから変換しないようにする以外に方法はないのだろうか。
Gutenberg のブロックには『カスタム HTML』というブロックがある。
その名の通り、HTML を記述するブロックだと思う…
テキストエディターで HTML を記述しているページをそのままクラシックエディターからブロックに変換するのではなく、カスタム HTML ブロックに変換できたら、とりあえずコードはそのまま保たれるのではないか…
先ほどのコードを見ると Gutenberg に変換されたコードには『<!– wp:paragraph –>』や『<!– wp:list –>』のようなコメントが入ります。
ということは、前もってカスタム HTML の『<!– wp:html –>』というコメントを入れておけば、そのままカスタム HTML に変換されるのではないかという単純な発想。

ということで、

<!-- wp:html -->
<ul class="cap">
<li class="specialty">「宝塚と映画」特集</li>
<li class="century">「100年」テーマ</li>
<li class="openning">特別企画</li>
</ul>
<div class="timetable">
<dl>
<dt>11/22(土)</dt>
<dd class="specialty"><p class="time">10:00</p><p><a href="http://2014.hogehoge.com/program/specialty/specialty-5/" title="蝶々夫人" rel="bookmark">蝶々夫人</a></p></dd>
.....
</dl>
</div>
<!-- /wp:html -->

というようにコメントを入れてみました。

前もってGutenbergのコメントを入れる

前もってGutenbergのコメントを入れる

Gutenberg として編集画面を見ると、

選択するボタンが表示されました

選択するボタンが表示されました

ここで『ブロックに変換』ではなく『HTMLとして保持』を選択すると、カスタム HTML ブロックとして変換されます。

カスタム HTML ブロックに変換

カスタム HTML ブロックに変換

別のページでも試してみると

開催概要ページにもコメントを入れてみる

開催概要ページにもコメントを入れてみる

Gutenbergでの開催概要編集ページ

Gutenbergでの開催概要編集ページ

開催概要ページの編集画面では、先ほどの『ブロックへ変換』『HTML を保持』という選択画面は表示されませんでした。
この違いは何だろう。
何か条件があるのかな…

とりあえず、テキストエディターで HTML をゴリゴリ記述しているページは、このような方法で HTML のコードを保持することができますね。
ただし、あまり前向きな対処法ではないので、お勧めできる方法ではないような気もするなぁ。
基本的にクライアントさんが更新をしないという前提で、あやまって Gutenberg に変換されるのを避けるために、どうしても必要な場合はこの方法でも仕方ないかな…

最後に今回 Gutenberg をさわってみて…

数ヶ月後には WordPress5.0がリリースされて Gutenberg が標準のエディターになるはずです。
今回、色々とさわってみて感じたことは、『今からでも遅くないから、絶対にさわってみた方がいい』ということですね。
皆さまも是非、Gutenberg やクラシックエディターをインストールして使ってみてください。
既存のサイトの場合は、WordPress のバージョンアップに備えて、必ずクラシックエディター(旧エディター)はインストールしておくべきです。

ちなみに Gutenberg を無効にする『Disable Gutenberg』というプラグインがあります。
まだ、使ったことはないですが、設定は簡単みたい。
無効にするのもどうかと思いますが、『準備が整うまで…』というならば、無効にするという選択肢もありなのかな…

WordPress5.0がリリースされてから慌てても取り返しのつかないことになる事もあり得ます。
ご自身のサイトの場合は、後悔するだけで済むかも知れませんが、お仕事で請け負ったサイトの場合はトラブルになる可能性もあります。
そのようなことにならないように今から Gutenberg を理解しておくべきです。
すべてを理解することは難しいかも知れませんが、最低限のことでもいいと思います。
レイアウト要素の『カラムブロック』は『カラム(ベータ)』となっているように、Gutenberg はこれからもバージョンアップしていくことでしょう。

日々の業務に追われて、なかなか Gutenberg に触れる機会がないのもわかりますが、もし保守やメンテナンスをしているサイトがあるのであれば、既存のサイトが Gutenberg に移行した時にどうなるかを検証することをお薦めします。

Gutenberg だと、お客さまが意図したレイアウトで記事を書く事が、今よりも簡単にできるようになると思います。
これは、素晴らしいことですよね。
私が、concrete5でサイトを作るようになったのも、これが大きな理由のひとつです。
Microsoft の Word をちょっと使えるような事務職の方が、 納品後に concrete5を使って更新しているのを見ると、より一層その思いが強いです。

Jimdo や Wix もそうだと思いますが、お客さまが更新しやすいサイトが求められているのだと思います。
Gutenberg を使えばそれも可能になるような気がします。

私もまだまだ Gutenberg を理解したわけではありませんが、色々と試してみてよかった。
もし、「これは違うよ」というようなことがあれば、コメントください。
そして、Gutenberg に詳しい人がいたら色々と教えてください m(_ _)m

また、WordBench 神戸では、もう1回くらい Gutenberg をテーマにして開催するはずですので、その時は是非 !!

WordPress5.0がリリースされるときには、現状と変わっている可能性もありますが、時間がある時にはできるだけ Gutenberg に触れてみようと思った、お盆休みでした。

 


 

リンクなどを追記(備忘録的メモ…)

検証してないサイトもあるので、とりあえず参考程度に…
そのうちこちらもいろいろと検証しなければいけないですね。

Gutenberg Manager をインストールしてみた…
Gutenberg を無効にする『Disable Gutenberg』というプラグインがあると書きましたが、Gutenberg Manager は『ブロック』もそれぞれ無効にできるみたい。

Gutenberg Manager

Gutenberg Manager

試しに画像ブロックを無効にしてみた。

画像ブロックを無効にする

画像ブロックを無効にする

デフォルトの状態

デフォルトの状態

Gutenberg Manager で画像ブロックを無効にした状態

Gutenberg Manager で画像ブロックを無効にした状態

このように画像ブロックが無効になりました。
このプラグインは、便利かも知れないですね。

スポンサーリンク

  • このエントリーをはてなブックマークに追加

フルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。