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

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

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

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

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

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

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

【手順】

 (1)編集したいブロックを選択

 (2)「詳細設定」-「HTMLとして編集」をクリック

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

補足

ポンちゃん

ども!ポンちゃんです!

…特に補足するとこないです~!

Gutenberg はリリースされたばかりなので、今後は細かく改善される面も出てくるんでしょうね。

ということで、記事アップしちゃいます。

この記事を書いた人

がんちゃん

TriggerWORKS:サイト運営の仕組み化・効率化担当兼「真面目」担当
ExcelやGoogleスプレッドシートの可能性を探求する二児のお父さん