スポンサーリンク

WordPress記事内にてソースコードを書く方法(プラグイン不要)

ブログ運営記録
この記事は約3分で読めます。

Webデザインを学ぶにあたって、HTMLやCSS等のコードを記事に載せたいなと思ったので、コードを記事内に何も考えずストレートに書きました。
結果、表示されませんでした。
筆者でいろいろ試した結果、改善するための最善の方法を見つけたので備忘録として記載します。

筆者
筆者

CSSについては別途コード記載欄があるので、主にHTMLを書いているときにこの事象に遭遇するのではと思います!

スポンサーリンク

検証

検証したWordPressのテーマは「Cocoon」です。

<pre></pre>で括ってみた

何も変化なし。
エディタから文字列が消えました。

上記のように、なぞのボックスが出現するだけでした。
※WordPressのテーマによって出てくるものは異なるとのこと

プラグインを入れてみた

ネットで調べると、「Crayon Syntax Highlighte」というプラグインが有名でした。

プラグイン画像

いざ、インストールしてみると、エラーが発生しました。
怖かったので即アンインストールしました。
最終更新日が4年以上前です。。
プラグインもあまり入れたくなかったので、特に気にせずスルー。

結局、<pre></pre>で括るが少しお手入れ

<pre></pre>で括ったときに反応がなかったのは、どうやら<>が影響してた模様。

<pre><ああああああああ</pre>

この><です。

改善には、置き換えが必要です。

WordPressの記事内での投稿時は自動的に置き換えてくれていたようです。
全く気づきませんでした・・・

置き換えに便利な手段

記事を書くたび、ひとつひとつ< >を変換するのは手間ですよね。
それを簡単にやってくれるのが、HTML Escapeというツールです。

HTML Escape / Unescape
テキストをHTMLエスケープしたり、戻したりするツールです。スマホ表示に最適化しています。

左側の窓にコードを貼り付けると、右側の窓に変換されたコードが表示されるので、右側の窓のコードをコピーして、記事にペーストしちゃってください。
これで問題解決です。

まとめ

HTML特殊文字コードというものがあり、記号をそのまま書いても表示されないことがたまにあります。
その場合は、ツール等で文字を置き換えて書いてみてください。

ブログの始め方は下記にまとめているので、ぜひご覧ください。

安く済ませたい。初心者による初心者向けのブログ作成概論
自分のブログを作ってみたいけど、どんなふうに進めていけばいいんだろうと、サイトを検索したら、いろんな解説ページが出てきていますよね。でも、そのページって割と古い情報だったりします。 筆者 この記事では初心者向けにブログ作成の手順をステップ形式に解説していきます。 いろんなページ見てきたけど、維持経費高いなーと思った方必見です。 一昔前、ブログ...

WordPress導入におすすめのレンタルサーバーはこちらをおすすめしています。

ブログを始めたばかりの初心者が、ConoHa WINGをおすすめする5つの理由
ブログを始めるにおいて、サーバーを用意しないといけないですが、レンタルサーバー会社選びに悩みますよね。 サイトで検索して比較してしまいますが、筆者も初心者なので苦労しました。 そのため、ばしっとココ!というレンタルサーバー会社を紹介します。 筆者 ・これからレンタルサーバー会社を比較しようと思っていた方 ・レンタルサーバー会社が多すぎて結局どの会社にすればいい...

ブログを始めるのにおすすめなパソコンの選び方記事もまとめています。

ブログを始めるのに必要なパソコンってどんなスペックがいるの?筆者のおすすめも記載。
ブログを始めてみたいと思っても何から手を付けたらいいのか、何をそろえればいいのか悩みますよね・・・ 調べてみると必要なものが多すぎるというのも事実です。 中でもパソコンが無ければ話になりません。 スマホでもできるのですが、タイピングやデータ処理の速さを考えると、パソコンが効率的です。 筆者もブログを始める前はどんなスペックのパソコンを用意すればいいのか悩みました。 そのため今回必...

スポンサーリンク
タイトルとURLをコピーしました