WordPress 連続ハイフン

編集エディタで半角ハイフンを連続して2つ入力しても、公開ページでは1つだけの表示になってしまいます。今回は、WordPressでの連続ハイフン表示に関するメモです。

HTMLでの記号入力

HTMLでは、「文字実体参照」または「数値文字参照」により記号を入力することができます。これにより、特定の環境で発生する文字化けを防ぐことができます。
※WordPressで連続ハイフン入力が反映されないケースがあるのは、自動変換されるためです。

アンパサンド「&」で始まり、セミコロン「;」で終わります。
次は、&の例です。

&amp;

Unicode文字10進数コードの場合は、「&#」で始まりセミコロン「;」で終わります。

&#(Unicode文字の10進数コード文字列);

例）ハイフン「-」
&#45;

Unicode文字16進数コードの場合は、「&#x」で始まりセミコロン「;」で終わります。

&#x(Unicode文字の16進数コード文字列);

例）ハイフン「-」
&#x2d;

ハイフン（ハイフンマイナス）のUnicodeは、U+002Dですので、
・数値文字参照（10進数）では、「-」
・数値文字参照（16進数）では、「-」
となります。

WordPressでは、コンテンツ本文の特定のテキストを自動変換する機能があります。連続ハイフンもその1つで、前述の文字コードを使用して、「--」と入力しても、保存時に変換されるケースがあります。

ビジュアルエディター「カスタムHTML(/html)」で、「--」と記述すれば自動変換されずに表示することができます。

※コードエディターで、段落(pタグ)等に「--」と直接入力しても保存時に自動変換されますのでご注意！
※カスタムHTMLでも、保存時に「-」は「-」へ変換されますので、再編集時は改めて記述すること。

ブロックエディター「整形済みテキスト(/pre)」または「コード(/code)」の場合は、キーボードから直接ハイフン入力しても大丈夫です。連続ハイフンは変換されずに表示されます。

PHP編集できる場合は、hookを使ってコンテンツ本文を自動変換しないようにします。

remove_filter( 'the_content', 'wptexturize' );

※functions.phpなどに追記すればok。

これにより、ビジュアルエディター「段落(/p)」等でも連続ハイフンを記述し、表示できるようになります。

変換される内容詳細など、wptexturizeの関数リファレンスはこちら
https://developer.wordpress.org/reference/functions/wptexturize/