今回はWordPressの標準エディタであるGutenbergを使ってコードを直接記述する方法である「カスタムHTML」と「コードエディタ」についてを紹介します。
Gutenbergとは、初心者でも扱い易くするためにブロックを積み重ねるようにレイアウトしていくWordPressの標準のエディタです。本来なら非常に扱い易く便利なエディタだが、細かなデザインやレイアウトなどを作ろうとすると応用が利かず使い辛いです。
そういった時に今回紹介するコードを直接記述する方法が活躍してきます。
HTMLを直接記述する方法①
まずGutenbergでHTMLを直接記述する方法はブロック選択→フォーマット→カスタムHTMLで可能です。
もしくはブロック上のタブメニューの「⁝」のHTMLとして編集で可能です。
カスタムHTMLはブロック内で自由にHTMLやCSSの記述が可能です。
ただあくまでもブロック内のみなので全体をHTMLで記述するのには向いていません。
一部だけ凝った要素や動きなどを付けたいって時に使えます。
HTMLを直接記述する方法②
もう一方の方法は、コードエディタで記述する方法です。
Gutenbergの右上の「…」からコードエディタを選択。もしくは以下のショートカットキーで開きます。
Command+option +Control+M
コードエディタでは100%投稿コンテンツ内をHTMLで記述する事が出来ます。
しかしブロックエディタでコンテンツを追加したものをコードエディタで弄ると自動的に元のブロックに戻る場合があります。更には意図しない表示崩れなども起きる場合があります。
そのためコードエディタを使うなら最初から最後までHTMLで記述していった方が良いです。
以上が「Gutenbergでコードを直接記述する方法【カスタムHTML】」でした。
カスタムHTMLやコードエディタで記述する際はHTMLとCSSしか書けません。phpやJavaScriptなどプログラミング言語は記述する事が出来ませんのでご注意下さい。
またHTMLでの記述はある程度のリテラシーのある方しか出来ないかと思います。
その辺の知識がない方はまずは勉強から初めて下さい。
下記の記事では基本的なGutenbergの使い方をまとめています。合わせてどうぞ。
