WordPressで記事を作成していると、「'たまご'」とか「'test'」だとか、文字を「'」マークで囲みたくなる場面が出てくると思います。
しかし記事を完成させてサイトを表示してみると、'マークの表示が微妙に違う結果になった覚えはないでしょうか？
違うそうじゃない、自分は'を表示させたいんだ！と思う人のための記事です。
クォーテーションとWordPressの表示の関係
'マークは、クォーテーション（コーテーション）と読みます。日本語だと引用符です。
'なら、シングルクォーテーション（一重引用符）"なら、ダブルクォーテーション（二重引用符）
文字を囲む際によく使われる記号ですが、この半角のクォーテーションをWordPressに打ち込むと、以下のように表示されます。
‘wagashi’
“いちご大福”
あっているようでいて、なんかイメージしているのとは違う…。
そう、上の表示は左右の向きに違いがあるクォーテーションです。
クォーテーションには左右の向きに違いがないもの「" "」と、左右の向きに違いがあるもの「” “」の2種類が存在します。
WordPressでは、クォーテーションを左右の向きに違いがあるものへと自動変換する機能が備わっているんです。表示が変わってしまう原因はここにあります。
そこで、左右の向きに違いがあるものではなく、左右の向きに違いがないクォーテーションを、WordPressで表示させるための対策をやってみましょう。
クォーテーション部分をpreやcodeタグで囲めば良いだけ
WordPressのおせっかいを止める方法は簡単。
HTMLの
<pre>もしくは<code>タグで、文字を囲ってしまえば即解決します。
<pre>'wagashi'</pre> <code>"いちご大福"</code>
【表示結果】
'wagashi'
"いちご大福"
左右の向きに違いがないシングルクォーテーション、ダブルクォーテーションが表示されました。
ちなみに各コードの意味は以下のとおりです。目的に合わせてどちらか一方、もしくは両方組み合わせて使ってみましょう。
<pre>- 整形済みテキストを表示させるタグ。キーボードによる改行、スペースがそのまま反映される。
- →参考：<pre>: 整形済みテキスト要素 – HTML: HyperText Markup Language | MDN
<code>- 囲まれた内容がプログラムなどのコードであることを示すタグ。
- →参考：<code>: 行内コード要素 – HTML: HyperText Markup Language | MDN
使用中のWordPressテーマによってはpreもしくはcodeタグで囲むと、CSSの影響でデザインが変わる場合があります。気に入らなければCSSで調整を加えてみてください。
今回の対策で得られるメリット
CSSやPHPなどのコードを書くときに有効です。
例えば、CSSだと
<p class="aaa">みたいなコードを書くことが多いと思います。
これをWordPressで運営するサイトの記事で紹介したいとき、自動変換で左右の向きに違いがあるクォーテーションが表示されてしまったらどうなるでしょう？
記事を読んでいる人が紹介されているコードをそのままコピーした後、テキストエディタなどに貼りつけると、左右の向きに違いがあるクォーテーションが適用されてしまいます。
その影響で、サイトの表示やプログラムでエラーが出ることになれば…
「おいおい、上手くいかないじゃん！嘘教えるんじゃねーよぉ！！」
とかなんとか、怒られてしまう結果になりかねません。
自分は間違いなくクォーテーションを打ち込んでいても、WordPressの仕様のせいで表示が変わってしまう。そしてユーザーさんから怒られる。この流れを避けるために、今回の対策は使えると思いますよ。
その他にも、単なる見た目的な理由から、左右の向きに違いがないクォーテーションを表示したい場合にも有効です。
