WordPressのグーテンベルク・ブロックエディタでHTMLコードを入力・編集する方法を解説します。
クラシックエディターでテキストエディタに切り替えたように全体的にHTMLを直接編集するコードエディターに切り替える方法とカスタムHTMLブロックを追加する方法の２種類があります。
- コードエディターを利用する
- カスタムHTMLブロックを利用する
どちらを利用してもHTMLコードを入力・編集可能ですが、コードエディターはビジュアルエディターに戻すとPタグが自動で付与される事があります。
グーテンベルク・ブロックエディタでHTMLコードのアフィリエイトリンクを貼る場合はカスタムHTMLブロックを利用しましょう。
コードエディターを利用する
コードエディターに切り替える方法はとても簡単で、右上にあるオプションをクリックして展開するとコードエディターという文字列が表示されるのでクリックするだけです。
下記のような画面に切り替わるので、HTMLコードを入力・編集する事が可能になります。
ビジュアルエディターに戻すには上部にあるコードエディターを終了をクリックするか、右側にあるビジュアルエディターをクリックすれば戻ります。
カスタムHTMLブロックを利用する
カスタムHTMLブロックを利用する手順は以下の通りです。
- ブロックを追加 or 選択
- カスタムHTMLブロックに変換
- HTMLコードを入力
ブロックを追加 or 選択
ブロックを追加 or 選択します。
背景が青い白十字のボタンもしくはブロック追加の黒背景の白十字ボタンをクリックします。
すべて表示をクリックするかブロックの検索に「HTML」と入力するとカスタムHTMLブロックが表示されるのでクリックします。
カスタムHTMLブロックに変換
カスタムHTMLブロック編集画面になります。
HTMLコードを入力
HTMLコードを入力します。
この例ではカスタムHTMLブロックにA8ネットのアフィリエイトリンクを貼り付けています。
カスタムHTMLブロックのプレビュータブをクリックするとプレビューが表示されます。
まとめ
グーテンベルク・ブロックエディタでHTMLコードを入力する時はコードエディターかカスタムHTMLブロックを利用しましょう。
アフィリエイトリンクを貼る場合はカスタムHTMLブロックがおすすめです。