WordPressの追加CSSは疑似要素に特殊文字を使用できない問題

WordPressに独自のスタイルを追加したいとき、追加CSSを使用するのが手っ取り早いです。
しかしafterやbeforeなどの疑似要素に特殊文字を使用するとうまくいきません。

そこで今回は、どうすればいいのかをお伝えします。

現象の確認

テスト用のスタイルとして、追加CSS（メニュー：外観→カスタマイズ）に次のコードを挿入してみます。

テスト用CSS

.testClass:before{
	content:"▶"
	color:red;
}

補足

WordPressは特殊文字は絵文字に変換されるようになっていて、通常なら▶はのように変換されます。
しかし、この記事では変換されないようにしてあります。
詳しくは次の記事を読んでみてください。

WordPressの絵文字変換をオフにして特定記事のみオンにする

上のスタイルを使用して、次のタグを表示してみます。

テスト用html

<p class="testClass">テスト</p>

これをWebサイトで表示すると次のようになるはずです。

▶テスト

しかし実行結果は、次のようになります。

テスト

文字化けしました。
「なんじゃこりゃ」ですね。

特殊文字が文字化けする原因

追加CSSを含めてWordPressのエディタで特殊文字を入力すると、文字コードに変換されて保存されます。

普通の漢字はそのまま保存されます。

あ → 「あ」で保存

特殊文字は、文字コードに置き換わります。

▶ → 「▶」で保存

つまり最初のcssは、データベースに次のように保存されています。

データベース内のイメージ

.testClass:before{
	content:"&#x25b6;"
	color:red;
}

cssで文字コードを記述する場合、&#xは文字コードとして認識してくれません。
そのため、そのままWebページ上に表示されてしまったわけです。

cssで文字コードとして認識させるには、「&#x」ではなくて「\0」を使用します。

つまり、次のように記述する必要があります。

正しい文字コード指定

.testClass:before{
	content:"\025b6;"
	color:red;
}

こうすると、次のように表示されます。

▶テスト

WordPressでの対処法

では、特殊文字を疑似要素に使用するときの対処法を２つお伝えします。

対処法1：コードで指定する

一つ目は、文字ではなくてコードで指定する方法です。

コードは、僕が以前作成したツールで調べることができます。
■HTMLエンティティ変換ツール

使い方：

変換したい文字列に特殊文字を入力
オプションを開き、「全てを数値に変換」と「16進数に変換」にチェックを入れる
変換結果下の「クリップボードへコピー」を押す
WordPressのエディタに貼り付ける
「▶」を「\0」に書き換える

ぜひ使ってみてください。

対処法2：テーマが用意した入力欄やプラグインを使用する

テーマで用意されている入力欄があるときは、そちらでスタイルを記述してみてください。
入力欄の設置方法によっては、文字コードに変換されないケースがあります。

またスタイルをWebページに追加するプラグインも、入力欄の設置方法によっては、文字コードに変換されないケースがあります。

変換されないかどうかは、やってみないと判断できません。

対処法3：自作プラグインでスタイルを追加する

プラグインやテーマのコードエディタで入力すると、特殊文字はそのまま保存されます。
そこで、自作プラグインのコードでスタイルを追加します。

自作プラグインの設定方法は次の記事を見てください。

WordPressカスタマイズの準備｜自作したコードはテーマをバージョンアップしたら消えてしまう？

スタイル属性をWebページに組み込むコード

function myAddCss(){
	$addCss = <<<EOF
	h5:not(.title_no-style):before{
	content:"▶";
	margin-right: 1em;
	}
	h5:not(.title_no-style):after{
	content:"▶";
	margin-left: 1em;
	}
EOF;
	wp_register_style( 'my-add-style', false );
	wp_enqueue_style( 'my-add-style' );
	wp_add_inline_style( 'my-add-style', $addCss );
}
myAddCss();

EOFからEOF;までに緑の部分が、そのままスタイル属性としてWebページに出力されます。
自分のサイトに合わせて、変更してみてください。