投稿や固定ページの編集時に文字のCSSが変わってて「あれっ！？」と思うことが、たまにないでしょうか？

よく遭遇する案件。

1.コーダー等が「テキストエディタ」で編集。

2.クライアント等が「ビジュアルエディタ」で編集。

この場合、1の時に書いたHTMLが下記の場合。

<h2><span>BLOG</span>の見出しですよ。</h2>

1から2のビジュアル編集した際に下記の様にHTMLがかわります。

<h2>BLOGの見出しですよ。</h2>

これは、「WYSIWYG」と呼ばれるビジュアルエディタの整形機能が働くみたいです。
この「WYSIWYG」はコーダーにとっては、勝手にHTMLを変えちゃったりするんで厄介な場合もあるんですが、HTMLが分からないクライアント等にとっては非常に心強い味方になります。

それで、この解決策なんですが、大まかに3種類ありそうです。

1つめは、プラグインを入れる。しかし、エラーもあるみたいですし、プラグインばかり増えるのも…。

2つめは、functionsに整形しない様に記述する。これは、比較的簡単ですが他への影響が懸念される。

そこで、私がおすすめする方法の3つめですが、「span」に「class」をつける事です。これだと、他への影響がないだけでなく、CSSの拡張性も出ておすすめです。

<h2><span class="blog-h2-span">BLOG</span>の見出しですよ。</h2>

クラス名は適当に付けましたが上記のようにクラスを付ける事で「span」が消えなくなります。
さらに、CSSの拡張性（CSSが増えた際に他への影響や優先度等を考え競合しないようにする必要がある。）も出ると思います。