WordPressでhtml等のコードエディタを埋め込む方法について

私はWordPress初心者なので目次や見出しをカスタマイズするときに、いろんなサイトで調べたHTMLやCSSをコピペで貼り付けることが多いです。あのコードが書かれているエディターはどうやって記事に貼り付けているのか疑問だったので調べてみました。

今回は自分が作ったHTMLやCSSのコードを記事に貼り付けて紹介したいとき、どうすればエディター表示にすることができるのか紹介します。またおすすめプラグインのCrayon Syntax Highlighterの設定方法も合わせて説明します。

Contents

普通にコピペすると様々な反応

自分で作ったHTMLをそのまま記事にコピペすると、使用しているエディターやパソコンによって様々な形で記事に反映されます。普通にエディターのように表示される場合もあれば、htmlが反映して表示されたり、普通に文章のように表示されたり様々なWordPressは様々な反応を見せます。

（例１）

<ul>
  <li>箇条書きA</li>
  <li>箇条書きB</li>
  <li>箇条書きC</li>
</ul>

<ul>

<li>箇条書きA</li>

<li>箇条書きB</li>

<li>箇条書きC</li>

</ul>

（例２）

（例３）

<ul><li>箇条書きA</li><li>箇条書きB</li><li>箇条書きC</li></ul>

作ったHTML・CSSを記事に載せるには＜　＞コードを使うのが一番簡単です。

①ブロックの【+】から

②コードを選ぶだけです

③完成

プラグインに抵抗がない方は【Crayon Syntax Highlighter】を使うと便利です。

設定は簡単です。プラグインの検索でCrayon Syntax Highlighterと入力して
インストールして有効化するだけです。

しかし、こんな感じに文字化けしてしまうことが多いと思います。

文字化けを直すには、設定項目にチェックをつけるだけなので簡単です。

文字化けを直す設定↓↓

【コード内のHTMLエンティティを出力】にチェックをつけるだけです。
設定変更後は忘れずに必ず設定保存しましょう。

あとは今まで通り、ブロックの【+】から【＜　＞コード】を選んで
作ったHTML等を貼り付けるだけです。

こんな感じになります。

<ul>
  <li>箇条書きA</li>
  <li>箇条書きB</li>
  <li>箇条書きC</li>
</ul>

<ul>

<li>箇条書きA</li>

<li>箇条書きB</li>

<li>箇条書きC</li>

</ul>

すごく簡単です。カッコよくて良いです。

私もいろんなコードをかけるようになったら、記事でたくさん紹介したいと思います。