WordPressで 私は 主にビジュアルエディタを使っています。したがって、文字が勝手に変換されるトラブルが生じたときは、本当に困ってしまいます。しかし、いろいろ調べてみると、文字が勝手に変換されるケースは4種類もあって、それらを混同しないことが大切なことに気がつきました。最初、私はそれらを混同し、対応がわからなくなっていました。
HTMLを十分に理解していれば簡単なことなのかもしれません。しかし、ワープロと同じ感覚でエディタを使い始めた私は、最初はこの違いに気づきませんでした。この記事では、私自身が「なるほど！」と思ったことを整理したいと思います。 なお、 2019/5/25の記事であり、Gutenberg( Ver.5.7.0)を使っています。
文字が勝手に変換されるケースは以下の4通りです。順番に説明したいと思います。
・ビジュアルエディタ上の「表示のみ」の自動変換
・ビジュアルエディタの機能による自動変換
・ビジュアル・コードエディタの機能による自動変換
・サイトの最終的な「表示のみ」の自動変換
１．変換される主なタイミング
変換されるタイミングとしては、基本的に 以下の タイミングで変換されます。以後、「記事の更新時など」と表現します。入力直後は、変換されていなくても、その後、これらのタイミングで変換されることがありますので、注意が必要です。
・コードエディタとビジュアルエディタを切り替えた場合。
・下書きとして保存、あるいは、更新した場合。
・保存、更新を行ったあと、エディタで編集画面を立ち上げなおしたとき。
2．ビジュアルエディタ上の「表示のみ」の自動変換(Case.1)
ビジュアルエディタ上の「表示のみ」が自動変換されます。コードエディタに切り替えてみると、入力したコードのままになっています。つまり、ビジュアルエディタの表示と、実際にHTMLのコードとして保存されている内容が違います。
直感的に編集できることを目的としたビジュアルエディタにおいて、「表示のみ」を見やすい記号に自動変換したものです。
具体例
特に問題が生じた例ではありませんが、具体例を以下に示します。なお、自動変換のタイミングは 「記事の更新時など 」です。
ビジュアルエディタで「&」「>」「<」と記述しても、「記事の更新時など」にビジュアルエディタ上での表示が、「&」「>」「<」に自動変換されます。ただし、コードエディタに切り替えてみると、「&」「>」「<」のままであり、ビジュアルエディタ上の「表示のみ」の自動変換であることがわかります。
なお、「<」「<」といった見慣れない記号（エスケープシーケンス）は、ただのテキストであることを明示するための書き方です。HTLMでは「<」「&」などが、文法的に特別な意味をもつ記号であるため、そのまま表示するときには注意する必要があります。これらについては、「HTML」「特殊文字」のキーワードで検索すれば、色々な記事を参照できます。
3．ビジュアルエディタの機能による自動変換(Case.2)
ビジュアルエディタの機能による自動変換で、ビジュアルエディタを使用しなければ、自動変換は生じません。なお、 入力したコードが変換され、入力したコードが完全に書き換えられます。
Gutenbergになってからは、ビジュアルエディタの機能に起因する弊害は少なくなったようです。自分は、以下のような場合に悩みました。
(a) 具体例
この具体例では、1．で説明した「記事の更新時など」のタイミングではなく、段落ブロックでEnterキーを使ったときに自動変換されました。Gutenbergでは、段落ブロックをEnterキーを使うと、改行ではなく、その位置で段落ブロックが2つに分割されます。
さて、サイト上で「<」と表示したい場合に、ビジュアルエディタの段落ブロックで「<」と入力すると、サイトでは「<」となってしまいます。そこで、対応として、「<」の最初の「&」がテキストであることを示すために「&lt;」と記述しました。思った通りの表示になり大満足！
しかし、その後、この段落ブロックをEnterキーで2つのブロックに分割すると、突然、ビジュアルエディタの表示が「&lt;」から、「<」に変わりました。びっくりして、コードエディタに切り替えてみてみると、コードエディタでは、「&lt;」となっており、サイトの表示も想定どおり「<」となっているので、ほっとしました。また、念のため、一旦、保存して編集画面を立ち上げ直してみましたが、さらに自動変換されることもありませんでした。
ここまでは、先ほど説明した「ビジュアルエディタ上の「表示のみ」の自動変換(Case.1)」です。
しかし、さらにもう一度、「<」と表示された状態でこの段落ブロックをEnterキーで2つのブロックに分割すると、ビジュアルエディタの表示が「<」から「<」となり、コードエディタでは、「<」に変換されていました。
当然、これでは、サイトでの表示が「<」ではなく、「<」になってしまいます。
(b) 自動変換への対応
対応としては、次の2つの方法が考えられます。
（方法1）出来上がった段落ブロックはEterキーで分割しない。
（方法2）カスタムHTMLブロックで記事を書く。
この記事では、（方法2）で編集しています。知らないうちに自動で変換されると怖いからです。カスタムHTMLブロックも<p>タグと<br>タグの使い方だけ覚えれば簡単な記事は十分に対応できます。
4．ビジュアル・コードエディタ共通の機能による自動変換(Case.3)
これは、ビジュアルエディタで入力しても、コードエディタで入力しても、同様に自動変換されてしまう機能です。 入力したコードが変換され、入力したコードが完全に書き換えられます。
(a) 具体例
これも、「問題が生じて困った」という具体例ではありませんが、知っておいた方がすっきりすると思います。なお、自動変換のタイミングは、「記事の更新時など」です。
①「"」「'」は、「"」「'」に自動変換されます。
②「&」「>」「<」は、「&」「>」「<」に自動変換されます。
ただし、例えばHTMLのタグである「<p>」を入力した場合は、当然「<」「>」は「<」「>」に変換されませんから、必ず、上記の通りに変換される訳ではなく、変換するかどうかは、自動で判断されています。
また、「<」を「コードエディタ」や「ビジュアルエディタのカスタムHTMLブロック」で入力した場合は、「<」のまま「<」には変換されません。そして、コードエディタからビジュアルエディタに切り替えたり、保存してエディタでその記事の編集画面を立ち上げ直すと、「このブロックには、想定されていないか無効なコンテンツが含まれています」というエラーが表示されます。つまり、HTMLの文法に適合しない「<」があると判断され、自動変換が保留された状態になります。
そして、この自動変換が保留された状態が問題となります。WordPressは、エラーがありそうな保留の状態でも、なんらかの表示をしようとしますので、カスタムHTMLブロックに「<」などを記号のまま入力すると、意図せぬ解釈のまま表示される可能性があり、部分的に文字が消えたり、文字化けすることがあります。カスタムHTMLで「&」「>」「<」などをテキストとして表示したい場合には、「&」「>」「<」と記述しましょう。
意外だったのは、せっかく、テキストであることを明示するために「"」「'」と入力しても、「"」「'」に変換されてしまうことです。まあ、確かに、明らかにテキストとわかる部分は「"」「'」のような記号にもどしてくれた方が、読みやすいですが、自動変換が誤っていた場合には、面倒なことになりそうです。
５．サイトの最終的な「表示のみ」の自動変換(Case.4)
特定の記号において、エディタの中では記号はそのまま変換されていないのに、 出来上がったサイトを見ると表示が自動変換されます。自動変換のタイミングというものはなく、いつも、サイトの実際の表示だけが入力とは別の記号で表示されます。
これは、自動で変換すると便利だろうと判断されるものを表示だけ自動で変換してくれるものですが、用途によっては、おせっかいな機能です。
(a) 具体例
入力「...」（半角ドット×3）
表示「…」（全角、三点リーダー）
入力「''」（半角シングルクオーテーション × 2）
表示「”」（全角ダブルクォーテーション）
入力「"」（半角ダブルクォーテーション）
表示「”」（全角ダブルクォーテーション）
プログラム言語のPythonでは「'''」（半角シングルクォーテーション×3）を使うのですが、私がPythonの記事を書くときに、これを段落ブロックで記述すると「”'」となってしまい、気持ちが悪いです。
詳しい説明は省略しますが、その他にも「'」、「''」、 「 - 」、「--」、「---」 、「...」(3連ドット) 「x」、「 (tm)」などは要注意です。半角が全角になったり、両側の半角スペースが消えたりします。いずれも、編集画面では問題なくとも、プレビューや最終表示がおかしくなります。
(b) 自動変換への対応
対応としては、カスタムHTMLブロックで編集し、自動変換されたくないところを「<code>」「/<code>」で挟むことで対応できます。なお、挟んだ部分はフォントも変わります。
なお、「<」を「「<code>」「/<code>」ではさんでも、「<」をテキストとして認識する機能はありません。「<code>」「/<code>」は、サイトの最終的な表示が自動変換される場合に有効な方法であり、エディタの機能による自動変換には対応できません。混同しないようにしましょう。
また、別の対応としては、「Wordpress画面」→左側の「外観」→「テーマエディタ」→右側の「functions.php」と進み、 functions.php の 一番下に、以下のコードを追記することで、おせっかいな機能を停止することができます。
add_filter( 'run_wptexturize', '__return_false' );おせっかいな機能を停止するときに、便利な機能も一緒に停止されないか不安になると思いますが、ワードプレスの公式オンラインマニュアル（日本語版）で「wptexturize」を検索すると、どのような記号が、どのように自動変換されるかが示されています。停止しても、困るようなことはないのではないでしょうか。
いかがでしょうか。私はプログラム言語のPythonの記事を書いているので、不等号やシングルクォーテーションマークなどを多用します。コードを美しく表示するプラグインを選定するときにも、これらの知識が必要になるので、備忘録的にまとめてみました。
その他
以下、私が光回線を導入した時の記事一覧です。
(1) 2020年「光回線は値段で選ぶ」では後悔する ←宅内工事の状況も説明しています。
(2) NURO光の開通までWiFiルーターを格安レンタルできる
(3) NURO光の屋外工事の状況をご紹介。その日に開通！
(4) 光回線開通！実測するとNURO光はやっぱり速かった
(5) ネット上のNURO光紹介特典は個人情報がもれないの？
