WordPressで引用符が自動変換されるのを<code>で止める

2019.05.26

プログラム言語Pythonの記事で、「'''」（半角のシングルクォーテーション×3）と記述したのに、できあがったサイトでの表示が「”’」（全角ダブルクォーテーション＋全角シングルクォーテーション ）になってしまいます。そこで、HTMLの<code>タグを使って、そのまま表示する方法を紹介します。また、WordPressで自動変換されてしまうケースは、いくつかありますので、区別する必要があります。

参考記事： WordPressで勝手に変換されるケースは4種類あるので区別しよう

上記の記事でも紹介しましたが、 「'''」が、「”’」 に文字化けする現象は、「Wordpress画面」→　左側の「外観」→「テーマエディタ」→　右側の「functions.php」と進み、functions.php の 一番下に、以下のコードを追記することで、停止することができます。

add_filter( 'run_wptexturize', '__return_false' );

しかし、カスタムHTMLブロックを使って、文字化けするところを <code></code>で、挟むことによっても、文字化けを止めることができます。この記事では、<p> <pre> <code>の違いも簡単に紹介しながら、具体的な使い方を紹介してみたいと思います。

結局、私もどちらの方法にするか悩んで、functions.php にコードを追加する方法を採用しました。判断するまでに時間がかかりましたが、比較する上で、 <p> <pre> <code> といった HTMLの タグの概要を知ることができて、よかったと思っています。

私はビジュアルエディタをメインで使っており、HTMLの知識は後回しにしてきましたが、やはり、少しずつでもHTMLの知識は増やしていった方がよいと思いました。

1．文字化けの発生状況

私が遭遇した文字化けは、段落ブロックの中の「'''」→「”’」、「"」(半角)→「”」(全角)、「...」→「…」です。「...」→「…」は特に実害はないのですが、「'''」、「"」(半角)はプログラム言語Pythonの文字列を表すときに使う記号なので、半角なのか、全角なのかは重要なことであり、文字化けして欲しくありません。この文字化けは、実はWordPressが、書式ミスなどを自動で補正してくれる便利機能なのですが、はっきりいって迷惑です。しかも、エディタ内の実際のコードは自動変換されず、プレビューやサイトの最終的な表示のみが自動変換されるので、うっかりすると見落としてしまいます。

ワードプレスの公式オンラインマニュアル（日本語版）で「wptexturize」を検索すると、どのような記号が、どのように自動変換されるかが示されていますので、その他、どんな場合に自動変換の機能が働くかについて、目を通してみてください。

2．文字化けになるケースの検証

それでは、以下、「段落ブロック」「ソースコードブロック」「カスタムHTMLブロック」で、「'''」や「...」を使ったときに、具体的にどのような表示になるか比較してみたいと思います。

(1) 段落ブロック

段落ブロックで使用すると、以下のように文字化けしました。

「”’」シングルクォーテーション×3
「…」ドット×3

(2) ソースコードブロック

ソースコードブロックで使用すると、文字化けしません。等幅フォントに変換されています。段落ブロックの場合とちがい、色付きの枠で囲まれました。

「'''」シングルクォーテーション×3
「...」ドット×3 コードブロック

(3) カスタムHTMLブロック（Prism Syntax Highlighter）

Prism Syntax Highlighterとは、コードをハイライト表示するプラグインです。カスタムHTMLブロックの中で、 Prism Syntax Highlighter を使用してみました。この場合もソースコードブロックの場合と同じで、文字化けしません。

♪入力コード

<pre class="line-numbers">
<code class="language-python">「'''」シングルクォーテーション×3
「...」ドット×3</code>
</pre>

♪出力start

「'''」シングルクォーテーション×3
「...」ドット×3

♪出力end

(4) カスタムHTMLブロック（タグなし）

カスタムHTMLブロックで、タグで囲まずに、下のコードを直接入力してみました。

♪入力コード

「'''」シングルクォーテーション×3
「...」ドット×3

表示は以下の通りです。文字化けしました。しかも、改行が消えています。

♪出力start

「”’」シングルクォーテーション×3 「…」ドット×3

♪出力end

(5) カスタムHTMLブロック（<p>タグ）

カスタムHTMLブロックを使い、最初と最後に<p>タグを用いました。 <p>タグは段落を意味するタグで、ビジュアルエディタの段落ブロックで、Enterキーを押したときのように、<p>タグで囲んだ両側で段落が変わります。

(a) <p>>タグを用いた例

以下の入力コードは、先ほどのコードの最初に<p>、最後に </p>を追加したものです。

♪入力コード

<p>「'''」シングルクォーテーション×3
「...」ドット×3</p>

出力はHTMLブロックを使い、タグなしの場合と同じです。文字化けし、改行が消えます。
段落が１つしかない場合は、あっても、なくても同じ出力になるかもしれませんが、HTMLでは、それぞれの記述がなにを示すものなのかを明示することが基本なので、省略しないようにしましょう。

♪出力start

「”’」シングルクォーテーション×3 「…」ドット×3

♪出力end

(b) <br>タグを用いた例

なお、少し横道にそれますが、<br>タグは、段落ブロックでShift＋Enterキーとしたときのように、<br>の部分で改行されるタグですので、<p>タグと混同しないようにしましょう。

参考までに、<p>タグの中で改行する場合の例を示します。

♪入力コード

<p>あいうえお<br>かきくけこ</p>
<p>さしすせそ<br>たちつてと</p>

以下の出力を見ると、<p>タグで段落が変わる部分と、<br>タグで改行された部分で行間隔が違うことが分かります。

♪出力start

あいうえお
かきくけこ

さしすせそ
たちつてと

♪出力end

(6) カスタムHTMLブロック（<pre>タグ）

次に<pre>タグを使ってみます。<pre>は、空白や改行などが既に整形済みのテキストであることを示すタグです。

(a) 全体を <pre>タグ で囲む

カスタムHTMLブロックでテキスト全体を<pre>タグで囲みました。入力は以下の通りです。

♪入力コード

<pre>「'''」シングルクォーテーション×3
「...」ドット×3</pre>

入力で改行した部分は、そのまま改行されます。等幅フォントとなり、 文字化けしません。 コードブロックで表示したときのような色つきの枠が現れました。

枠で囲まれてしまうので、段落ブロックなどと同じ背景色で記述したい場合には、この方法は使えません。

♪出力start 

「'''」シングルクォーテーション×3
「...」ドット×3

♪出力end

(b) ドット部分だけを <pre>タグ で囲む

次に、ドット部分だけを<pre>で囲んでみました。なお、下の入力では、<pre>で囲んだ外側は、タグで囲まれていないので、実際には文法的におかしな表記です。

♪入力コード

「'''」シングルクォーテーション×3
「<pre>...</pre>」ドット×3

<pre>で囲んだドットの部分の両側が改行されてしまいました。<pre>タグの前後は段落がわかれてしまうようです。

♪出力start

「'''」シングルクォーテーション×3 「
...
」ドット×3

♪出力end

(7) カスタムHTMLブロック（<p>タグの中で<code>タグを使う）

<code>タグは、<p>タグや<pre>タグの内側で使うタグです。ここでは、<p>タグの中で<code>タグを使ってみます。

(a) 全体を <code>タグ で囲む

入力は以下の通りです。<p>タグのすぐ内側に<code>タグを記述しました。

♪入力コード

<p><code>「'''」シングルクォーテーション×3
「...」ドット×3</code></p>

入力で改行した部分は、改行が消えます。等幅フォントとなり、 文字化けはしません。 コードブロックで表示したときのような色つきの枠は現れません。

♪出力start

「'''」シングルクォーテーション×3 「...」ドット×3

♪出力end

(b) ドット部分だけを <code>タグ で囲む

次に、「…」の部分だけ、<code>で囲んでみました。

♪入力コード

<p>「'''」シングルクォーテーション×3
「<code>...</code>」ドット×3</p>

入力で改行した部分は、改行が消えます。<code>で囲んだドットの部分だけ等幅フォントとなり、 文字化けはしません。<code>で 囲んでいない部分のフォントは等幅になっていません。コードブロックで表示したときのような色つきの枠は現れません。

♪出力start

「”'」シングルクォーテーション×3 「...」ドット×3

♪出力end

色付きの枠も現れないので、引用符などが自動変換されるのを止めるには、この方法を用いるのがよいと思います。

(8) カスタムHTMLブロック（<pre>タグの中で<code>タグを使う）

今度は、 <pre>タグの中で<code>タグを使ってみましょう。

(a) 全体を <code>タグ で囲む

<pre>タグのすぐ内側を<code>タグで囲んでみます。

♪入力コード

<pre><code>「'''」シングルクォーテーション×3
「...」ドット×3<code></pre>

ブラウザによって出力が違うかもしれませんが、下記の出力結果は、<pre>タグだけを使った場合と全く同じです。しかし、プログラムなどのソースコードを記述する場合には、<pre>だけではなく、<pre><code>とすることが推奨されています。出力が同じならば、<pre>だけでもよいのではないかと思いますが、それぞれのタグの意味は以下の通りであり、<pre>タグだけでは、プログラムなどのソースコードであるかどうかが明示されていません。

<pre>：空白や改行などが既に整形済みのテキストであることを示すタグ。
<code>：プログラムのソースコードであることを示すタグ。

つまり、結果は同じになったとしても、<pre><code>とすることで、「既に整形済み」であり、更に「プログラムのソースコードである」ことを明確に示すことができます。

♪出力start 

「'''」シングルクォーテーション×3
「...」ドット×3

♪出力end

(b) <pre>タグの中のフォントを指定

以下のコードでは、<pre>タグの中のフォントをMS P明朝に指定していますが、プログラムのソースコードの部分を<code>タグで挟むことで、ソースコードだけが等幅フォントになります。それぞれのタグの意味の違いが明快なのではないでしょうか。なお、<span>タグは、<span>タグで囲んだ範囲のフォントを指定するなど、書式を調整するときによく使われるタグです。

♪入力コード

<pre><span style="font-family: ＭＳ Ｐ明朝">HELLO WORLD...プログラムを作成した。
実行するとHELLO WORLD...が10回出力される。
このプログラムの説明はMS P明朝で表現したい。
でも、当然、プログラムの部分は等幅フォントでなければならない。
<code>'''HELLO WORLD...プログラム'''
for i in range(10):
    print('HELLO WORLD...')</code></span></pre>

♪出力start 

HELLO WORLD...プログラムを作成した。
実行するとHELLO WORLD...が10回出力される。
このプログラムの説明はMS P明朝で表現したい。
でも、当然、プログラムの部分は等幅フォントでなければならない。
'''HELLO WORLD...プログラム'''
for i in range(10):
    print('HELLO WORLD...')

♪出力end

(c) <code>タグの中のフォントを指定

余談ですが、以下のコードのように、<code>タグの中でフォントを指定すると、等幅フォント以外のフォントを指定できます。しかし、考え方からすれば、フォントを変えるにしても、<code>タグの中は等幅フォントを指定すべきだと思います。

♪入力コード

<pre><code>
<span style="font-family: ＭＳ Ｐ明朝">'''HELLO WORLD...プログラム'''
for i in range(10):
    print('HELLO WORLD...')</span>
</code></pre>

以下の出力において、<code>タグの中でありながら、等幅フォントではありません。なお、文字化けは生じていません。

♪出力start 

'''HELLO WORLD...プログラム'''
for i in range(10):
    print('HELLO WORLD...')

♪出力end

３．特殊文字の記述

「'''」や「...」が「”'」や「…」に文字化けする話は、入力したコードはそのままなのに、サイトの表示が自動変換されるケースです。

一方、カスタムHTMLブロックや、コードエディタで「<」「>」「&」「"」「'」といった特殊文字を記述する場合にエラーが発生したり、思ったような表示にならなかったりすることがあります。これらは、特別な意味を持った記号なので、ただのテキストとして使うのか、特別な意味をもって使うのかを明示する必要があるからです。

注意しなければならないのは、「<」のような特殊文字は、<pre>タグ、<code>タグ、プラグインのPrism Syntax Highlighterの中で使ったとしても、「<」をそのまま記述するとエラーになる可能性があります。したがって、「&lt;」のような書きかたをしなければなりません。

この記事では詳細説明はしませんが、「'''」や「...」の文字化けは、WordPressのおせっかいな便利機能であるのに対し、特殊文字の文字化けは、HTMLの文法的な問題なので、原因が違う別物としてとらえる必要があります。

４．まとめ

(1) 文字化けが生じるケース

「段落ブロック」「見出しブロック」などでは「'''」や「...」が「”'」や「…」に文字化けする。

なお、カスタムHTMLブロックや、コードエディタで「<」「>」「&」「"」「'」といった特殊文字が原因でエラーが生じるケースとは区別する必要がある。例えば、「<」「>」「&」「"」「'」などを<code>タグで囲んでも、解決にはならない。

参考記事： WordPressで勝手に変換されるケースは4種類あるので区別しよう

(2) 文字化けを防止する方法

文字化けを止める方法として、以下の(a)～(c)の方法があり、(a)の方法がお勧め。

(a)functions.php に以下のコードを追加

add_filter( 'run_wptexturize', '__return_false' );

(b)枠がついてもかまわない場合の対応例

・ソースコードブロックを使用する。
・Prism Syntax Highlighterなどのプラグインを使用する。
・カスタムHTMLブロックで、<pre>タグと<code>タグを併用する。

(c) 枠がつくのがいやな場合の対応

カスタムHTMLブロックで<p>タグを用い、文字化けする部分だけ両側を<code></code>で囲む。

(4) 基本的なタグの説明

主にビジュアルエディタを用いる場合においても、最低限知っておいた方がよいタグについて、列挙します。

<p>タグ：

段落を表すタグで、段落ブロックにおいてEnterキーを押したときのように、<p>タグで囲んだ両側では段落が変わる。

<pre>タグ：

空白や改行などが既に整形済みのテキストであることを示すタグ。

<code>タグ：

プログラムのソースコードであることを示すタグ。

<br>タグ：

改行を表すタグで、段落ブロックにおいてShiftキーを押しながら、Enterキーを押したときのように、<br>の部分で改行される。

※なお、<code>タグ、<br>タグなどは、<p>タグや<pre>タグなどの中で用いるタグです。

その他

・Twitterへのリンクです。SNSもはじめました♪

以下、私が光回線を導入した時の記事一覧です。
　(1) 2020年「光回線は値段で選ぶ」では後悔する ←宅内工事の状況も説明しています。
　(2) NURO光の開通までWiFiルーターを格安レンタルできる
　(3) NURO光の屋外工事の状況をご紹介。その日に開通！
　(4) 光回線開通！実測するとNURO光はやっぱり速かった
　(5) ネット上のNURO光紹介特典は個人情報がもれないの？