ワードプレス5.0でHTMLを編集したい！「Gutenberg」エディタの操作方法

こんにちは。がんちゃんです。

先日、こちらのサイトにお問い合わせフォームを作成するために、WordPress5.0の新エディタ「Gutenberg」のHTML編集機能を使ってみました。

やはり、新エディタということもあり、いろいろ戸惑うところがありました。そこで、今日は「Gutenberg」でHTMLを編集する方法について紹介します。

新エディタ「Gutenberg」については、ポンちゃんがこちらで紹介しています。

ワードプレス5.0～が使いにくい！元に戻す？！慣れる？使い方講座

ワードプレス5.0が使いにくい！元に戻したい！その気持ちよくわかります。ここでは元に戻す方法はもちろんですが、新しいエディタGutenbergに慣れるための使い方もお知ら…

triwk.com

GutenbergでHTML編集するには・・・「HTMLとして編集」

ページの一部でHTMLの編集を行う・追加するのであれば、当該ブロックをHTMLとして編集という形で編集します。

【手順】

　（１）編集したいブロックを選択

　（２）「詳細設定」-「HTMLとして編集」をクリック

　これで当該ブロックのHTML編集ができます。

GutenbergでHTML入力するには・・・「コードエディタ」

ページ全体を編集したい場合には、「コードエディタ」を利用します。Gutenbergでは、デフォルトでビジュアルエディタが開きます。その他にHTML編集用に用意されているエディタが「コードエディタ」です。

コードエディタの開き方は次の２通りがあります。

・画面右上の「・・・」-「コードエディタ」を選択

・ ショートカットキー「Ctrl+Shift+Alt+M」

コードエディタを開かなくても、HTMLを挿入すれば、自動的にコードエディタが開きます。

編集が終わったら、右上の「コードエディターを終了」を押せば、元の画面に戻ります。

旧Verで作成した記事の編集ならプラグインの方が良いかも

「Gutenberg」のコードエディタを使って、作成中の記事を開いてみると「<!– wp:html –>」など、旧Verでは見なかったタグが出てきます。

やはり、旧Verで作成された記事は、「 Classic Editor 」というプラグインをインストールして編集するのが安心かと思います。

まとめ

ワードプレス5.0で「Gutenberg」を使ったHTML編集について紹介しました。お問い合わせ・アンケートフォームなど、ちょっと複雑なものを作成する場合に使うHTML編集機能。

こちらも少しずつ慣れていきましょう。

ポンちゃん、補足説明よろしくお願いします！

補足