WordPressにHTMLコードを埋め込む方法

  • 2020.11.18
  • 2021.01.24
  • Blog
WordPressにHTMLコードを埋め込む方法

ワードプレスにHTMLのタグが埋め込めなくてその解決方法となります。

解決方法は簡単でしたが、結構調べたので誰かのためになればと思います。
私が試したことに興味がない人は「解決方法」に飛んでください。

現象

問題現象は下記になります。

①<h2>WordPressにHTMLタグが埋め込めない</h2>
②WordPressにHTMLタグが埋め込めない

①は埋め込めて②はHTMLタグが反映されませんでした。
①と②は入力方法に違いがあります。

①→手打ち入力
②→コピペ

これで解決。

では、ありません。
こんなもん一行だから手打ちで入力できるのであってプログラムのコードなんて何百、何千行なんてザラです。
根性を出して手打ちで全部打ち込んだとしても、打ち間違えはあると思うので正常に動くかは疑問が残ります。

試した事①マックの設定

私が疑ったのはMacのコピペの設定。
下記設定だとコピペ元の書式を引き継がなくなります。
これでは治りませんが、コピペ元の書式を引き継ぐのウザかったので私はそのままにしています。

①メニューバーのアップルマークから「システム環境設定」を開きます。
②「キーボード」を選択します。
③タブの「ショートカット」を選択
④アプリケーションを選択
⑤「+」をクリックします。

⑥メニュータイトルに「ペーストしてスタイルを合わせる」と入力します。
⑦キーボードショートカットにカーソルを合わせて「commandとv」を同時に押します。
⑨追加で設定終了です。

この設定だけではコピペして埋め込もうとしてもダメでした。。

試した事②置換

HTMLタグは特殊な文字なので置換することが有効らしいということで置換して表示してみることにしました。

下記コピペで自分のWordPressに貼り付けて見てください。

<h2>これならコピペでも埋め込める</h2>

下記貼り付けた結果です。

<h2>これならコピペでも埋め込める</h2>

Atomなどのエディタで一括置換ができるので試してみてください。。
私は超めんどくさがりなのでこの方法は却下です。

一応調べたので
誰かのためによく使いそうな特殊文字を書いておきます。
※「&」←これが アンパサンドって呼ぶの初めて知った。

< → <   (小なり)
> → >   (大なり)
& → &  (アンパサンド)
" → " (ダブルクォーテーション)
' → ' (シングルクォーテーション)

解決方法

ここからが本題です。

コピペで、置換なしで、HTMLタグをWordPressに埋め込む方法!!

プラグインを入れましょう!!

個人的には「Highlighting Code Block」というプラグインがオススメです。

プラグインの「新規追加」をクリックしてプラグインの検索に「Highlighting Code Block」と入力します。

私はすでに「有効」としてしまったので、表示がないですがまだインストールしていない方は「今すぐインストール」のボタンがあるはずなのでクリックして有効にしてください。

使い方も簡単で「有効」にした後はすぐに使えるようになっていました。
WordPressのブロックを追加する「+」を押します。

これを選べばすぐに使えます。ここにない場合は「すべて表示」から探してみてください。

このプラグインを使用すればHTMLタグを埋め込めるはずです。

私はここまでたどり着くのに3時間はかかりました。。。(調べ方が悪い)
皆さんこの記事でサクッと解決できると嬉しいです。

Blogカテゴリの最新記事