【追記・カスタムフィールドの編集】定着しつつあるWordPressのエディタ・Gutenberg（グーテンベルク）の便利機能 | ポータルサイトHack

2020/4/01

リリース当初は更新ができないなどのトラブルがあり、導入に躊躇していたWordPressエディタであるGutenberg（グーテンベルク）ですが、最近では特に問題なく使えるようになりました。
以前のエディタと比べて良かった点など気づいたことをまとめたいと思います。

Gutenbergの特徴

Gutenbergの最大の特徴は「ブロック」と呼ばれる要素を追加できる点にあります。
例えば文章を入れたい場合は「段落」というブロック、写真を掲載したい場合は「画像」というブロックを利用する事でページを簡単に作成できます。

またレイアウト要素には、コンテンツを並列に並べる「カラム」や画像の横に文章を掲載する「メディアと文章」など頻繁に利用するであろう機能がついています。
以前のエディタだとちょっと面倒くさいことがいとも簡単にできてしまます。

もちろんHTMLも利用できるので、ブロック要素で解消できない細かい調整も可能です。
併用するのがベストであると判断しています。

Gutenbergの一押し機能

ページを作成する際に共通の要素（お問い合わせのボタンとリンク等）をページ毎に入力していたりしませんか？
これが結構面倒な上に、修正をする際はすべてのページを編集しないといけないという地獄のような作業を強いられます。
そこで利用したいのが「再利用ブロック」。
設定したものが再利用ブロックとして登録され、他のページにも共有が可能になります、
登録されたブロックを編集すればすべてのページにも反映されるため、作業時間が大幅に短縮できます。

他サイトで記事を読み込むとき

ワードプレスで管理している記事を他サイトで読み込む場合、サイトの校正にあわせて出力するなど若干面倒くさい設定を行わなくてはなりません。
また記事を丸ごと読み込む場合はスタイルシートの設定などが必要になります。

何とか工数を少なくしたいと考え、Gutenbergのスタイルシートを読み込んでしまうという荒業を利用する事を考えました。
Gutenbergのスタイルシート（ブロックをコントロールするもの）は「wp-includes」のフォルダにあるcssの中に含まれているので、読み込むサイトかページにスタイルシートを読み込んで表示させましょう！

<link rel='stylesheet' id='app-css'  href='※※※※/wp-includes/css/dist/block-library/style.min.css' type='text/css' media='all' />
※※※※の部分はサイトのアドレスやワードプレスを置いてあるフォルダを記述

YouTubeの設定ボックスも利用したい

Gutenberg にはYouTubeを読み込む専用のボックスが用意されてますが、こちらもきちんと設定しないと表示されません。
iframeのタグを持ってくれば良いのですが、できればそのまま使いたいという事で、こちらはJavascriptで強引に表示させるようにします。

<script>
$(function () {
    $('.wp-block-embed__wrapper').each(function() {
        var code = $(this).text().replace("https://www.youtube.com/watch?v=", "").replace("https://youtu.be/", "");
        $(this).html('<div class=""><iframe src="https://www.youtube.com/embed/'+code+'" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>');
    });
});
</script>

解説をするとYouTubeの読み込みボックスを利用すると出力として wp-block-embed__wrapper のクラスが付いたdivの中に入力したURLがそのまま表示されます。
URLからコードだけを取り出しiframeに設定すれば見事表示されるという仕組みです。
複数掲載も対応できたのでこれでほぼ問題ないでしょう。

カスタムフィールドの利用

Gutenberg以前はデフォルトでカスタムフィールドの設定欄が表示されていましたが、ひと手間かけないと設定できないようになっています。
下記の方法で簡単に設定できますので、
「カスタムフィールドがない！」
「カスタムフィールドが消えてしまった！」
とお困りの場合はご参考ください。

記事編集ページの右上のメニューをクリックしてオプションを選択

「カスタムフィールド」を選択してリロード

カスタムフィールドの入力欄が出ていることを確認する。

カスタムフィールドを設定するプラグイン（ Advanced Custom Fields など）を設定していると表示されないので注意が必要です。
※ プラグインを入れた場合は必要なくなると思いますが・・・

まとめ

Gutenbergがリリースされた直後は冒頭にも説明した通りトラブルに見舞われ、本当に使えるようになるのか不安だったものの、最近では動作も安定し、直観的な編集ができるようになりました。
まだまだ便利な機能がたくさんあるので、さらに探っていこうかと思います。