WordPressのエディタ切替でタグ・コードが消えるのを防ぐテクニック

WordPressには、高機能なビジュアルエディタが標準でついています。

pタグで文章を囲ったり、imgタグやaタグのようなやたらと長いコードを打ち込まなくても、画像やリンクを数クリックで挿入できます。HTMLの仕組みがよくわからなくてもすぐ記事を書き始められるのが良いですよね。

通常の使い方なら何も問題ないでしょう。

ところが少し特殊なタグを挿入したときに、「エディタを切り替えたらタグが消えてなくなった」なんていうトラブルの経験はないでしょうか?

もし心当たりがあるのなら、この記事でご紹介する対策を試してみると解決できるかもしれません。

WordPressエディタの基本

エディタを熟知している人なら、この項目は読み飛ばして構いません。気になった人だけ読んでみてください。

2種類あるエディタの特徴を知る

wordpress管理画面にあるエディタには「ビジュアル」と「テキスト」という2種類のモードが存在します。

切替の意味は、この2つのモードを変更したときだと思ってください。

WordPress エディタ

(※WordPressバージョン4以前の旧エディタの場合。最近更新されたWordPressバージョン5以降の新エディタについては省略します)

見た目がブログの表示に近いエディタがビジュアルモードです。見出しにしたい文字を選択した後、見出し2のボタンを押せば文字を大きく見せることができます。多くの人がこのモードで記事を書いていると思います。

WordPress ビジュアルモード

実際には書かれている「<h2>」などのタグやコードがビジュアルモードのエディタだと見えません。すっきりした画面で作業を進められる点がメリットですね。

もう一つのテキストモードですが、切り替えてみるとすごくシンプルな作りに見えます。Windowsの付属ソフト「メモ帳」のように、入力した文字がそのまま表示されるエディタです。

WordPress テキストモード

<h2>などのタグもエディタ内にばっちり表示されます。HTMLの中身がどうなっているのかが一目瞭然で、細かい調整の際に便利です。

スポンサーリンク

テキストからビジュアルに切り替えたらコードが消える!

ビジュアルモードばかりで作業していると、記述したコードの確認が難しくなります。少し複雑なコードを挿入したいときにはテキストモードに切り替えて作業すると思います。

テキストモードに切り替えてコードを記述するまでの段階なら、特に問題ありません。

ところが、

(´-`).。oO「記述したコードが正しく表示されるか、ビジュアルモードで確認しよう」
(´-`).。oO「コードの記述も終わったし、後はビジュアルモードで記事を書こう」

みたいな感じに、「テキスト」→「ビジュアル」へモードを切り替えたとたん、問題が発生します。

ビジュアルモードに替えたらコードの内容が表示されない。

「あれ?きちんと反映されていない?」

テキストモードに切り替える。

「コードが消えている…」

なんて現象が起こるパターンもあるんですね。

この現象はすべてのコードで発生するわけではありません。

自分の経験だと、以下の例で発生しました。

  • spanの空要素を記述した時(<span class="test"></span>←こんなの)
  • AppStoreなど、アプリのページに対して画像リンクを張れる、公式の専用コードを記述した時

アプリの公式専用コードとは、以下のような画像リンクを張るためのものです。


(↑こんなの)

同じ空要素でもspanではなく、divタグならエディタのモードを切り替えても大丈夫です。

どうやらモードの切替時にWordPressの独自判断で、一部の不要なタグを除去する機能が自動的に働いている様子です。

「functions.php」に対策コードを追加する

この問題には本当に困ってネットで色々調べてみたんですが、解決に役立ちそうな記事を見つけました。その記事のとおりにやってみたところ、タグ消滅の問題が無事に解決。

参考にした記事はこちらです。

>>「【WordPress】ビジュアルモードでspanタグが消えたら、TinyMCEエディタの設定をしよう – イソップブログ

functions.phpファイルをいじるので知識のない人には少し敷居が高く感じるかもしれません。とはいえ、コードをコピペするだけですから、やること自体はとても簡単です。

同じ問題で困っているWordPressユーザーさんがいるなら、ぜひやってみてください。

対策コードを追加する方法

WordPressで現在使用中のテーマフォルダ内にある「functions.php」に対策用コードを追加します。

ただ、元のテーマフォルダにあるfunctions.phpに変更を加えるとテーマの更新でせっかく追加した対策用コードが消えてしまう場合があるため、おすすめしません。

必ず、子テーマのfunctions.phpにコードを書きましょう。

「子テーマって何だ?」という人の場合、この記事の説明だけだと厳しいかもしれません。「ほぼコピペでOK!WordPress子テーマの作り方 その手順をわかりやすく解説」の記事が参考になると思います。

日本人が作ったテーマを使っているなら、作成者が子テーマの作り方を紹介している例もよくあります。それを参考に子テーマを用意してみてください。

子テーマのfunctions.phpを開くまでの手順

WordPress管理画面のメニューから、「テーマの編集」を選びます。

WordPress メニュー テーマの編集

利用中の子テーマを選択した状態で、functions.phpを探し出し、中身を表示しましょう。

本番環境とローカル環境のファイルの扱いが分かっている上級者さんであれば、管理画面ではなく、ローカル環境の該当ファイルにコードを追加してからFTPソフトでアップロードしても良いかもしれません。

自分のやりやすい方法でやってみてください。

子テーマのfunctions.phpに対策コードをコピペ

functions.phpの最後の部分に、以下のコードをそのまま貼り付けます。

ちなみにコメント部分以外のコードは上のほうで紹介した、参考サイトさんのものをそのまま引用しています。

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::
** エディタのビジュアル・テキスト切替でコード消滅を防止
::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
function my_tiny_mce_before_init( $init_array ) {
    $init_array['valid_elements']          = '*[*]';
    $init_array['extended_valid_elements'] = '*[*]';
    return $init_array;
}
add_filter( 'tiny_mce_before_init' , 'my_tiny_mce_before_init' );

もしfunctions.phpの最後に?>という記述があった場合、その直前に貼り付けます。テーマ作成者が用意してくれた子テーマ専用のfunctions.phpを使っていて、「ここからここまで記入してください」といった案内があるなら、その範囲内に貼り付ければ大丈夫です。

冒頭の「/*~*/」の内部はコメントで、実際の動作に何も影響しません。単なるメモです。自分が管理しやすいコメントに変えても大丈夫です。邪魔なら消しちゃってください。

貼り付けたらファイルを保存します。

試しにエディタへ問題のタグやコードを入力してみる

functions.phpに先程のコードを追加できたら準備完了です。上手く対策できているか、テストしてみます。

WordPressのエディタを開き、「テキストモード」にしてください。テスト用の記事や下書き状態の記事などへ

<span></span>

と空要素のタグを入力してみましょう。

一旦、ビジュアルモードに切り替えます。そのまま何もせず、再びテキストモードへ切り替えてみてください。<span></span>の記述がそのまま残っていると思います。

次に、アプリのコードでテストしてみます。以下のコードをspanタグと同じようにテキストモードのエディタに貼り付けた後、ビジュアルモードに切り替えます。

<a href="https://itunes.apple.com/jp/app/chrome-google-%E3%81%AE%E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6/id535886823?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?releaseDate=2012-06-28&kind=iossoftware&bubble=ios_apps) no-repeat;width:135px;height:40px;"></a>

(AppStoreのアプリ「Google Chrome」への画像リンクです)

通常であれば切り替えた段階でアプリのボタン画像は消えてしまいますが、対策したおかげでビジュアルモードに切り替えても問題なく表示されているのに気づきます。

WordPress ビジュアルエディタ アプリ画像リンク表示

テーマの変更に注意!

今回ご紹介の対策コードは記述したfunctions.phpファイルに対応するテーマのみ反映されます。別のテーマに変更した後、エディタのモードを切り替えてしまうと以前のようにコードが消滅してしまうため注意しましょう

回避策として、まず変更したいテーマに対応する子テーマを作っておきます。子テーマのfunctions.phpに対策コードを記述してからテーマを変更すれば大丈夫です。