知っトク ナビたん

Read Article

【WordPress】記事に突然<p>タグが。なぜ?どうしたら戻る?

スポンサード リンク
【WordPress】記事に突然<p>タグが。なぜ?どうしたら戻る?
この記事の所要時間: 539

「テキストモード編集にて、いきなり<p></p>タグ<br/>タグが挿入されるようになってしまった!」

 

そんなことはないでしょうか?

 

じつはそれ、あるプラグインの設定が原因かもしれません。

この記事では、wordpressのテキストモードにて、いきなり文字が<p>で囲まれるようになった時の対処法を紹介します。

 

※仕様は変更されることがあります。この記事の情報は 2014 年 07 月 03 日時点のものです。

スポンサード リンク

 

邪魔するプラグインは「TinyMCE Advanced」。

 

あなたはTinyMCE Advancedというプラグインを使っているでしょうか?

 

記事を作成する際、“段落”“文字サイズの変更”“文字の色付け” などを指定するタグを、画面に表示させるというプラグインですね。

2014_07_03_1_7

TinyMCE Advanced導入後の記事作成画面

 

記事の作成効率が格段に良くなるプラグインなので、頻繁に記事を更新するワードプレスユーザーであれば、ほぼ確実に入れている機能でしょう。

しかし、このプラグインの設定によって、次のような障害(トラブル?)が発生することがあります。

 

『いきなりタグが表示されるようになった!』

 

まずはこちらの画像を見てください。

2014_07_03_1_2

ビジュアルモード

テキストモード

テキストモード

 

こちらは、かつての編集画面です。

“ビジュアルモード(上)”“テキストモード(下)” で、表示に大きな違いはありません

( “&nbsp;” は「改行されない空白文字」を意味します)

 

ところが、“TinyMCE Advanced” の設定を行った結果、こんな画面になりました。

2014_07_03_1_2

ビジュアルモード(先ほどと同じ)

2014_07_03_1_4

テキストモード

 

ビジュアルモードは変わりません。

が、テキストモードではなんと、すべての文頭に<p>が、文末に</p>が挿入されてしまうじゃないですか。

 

この<p>タグ、「段落分けをして 1 行空白をつくる」というもので、たしかにビジュアルモードではそうなっています。

それを親切に表示してくれているわけですが・・

 

『テキストモードは、余計な文字や装飾が入らないところがいい』と思っていた私にとって、このゴチャゴチャ感はNG。

テキストモードで改行しても、<p>や<br/>のコードを入れないとビジュアルモードでは反映されませんしね

すぐに解消するための方法を探りました。

 

問題の設定はココ!

 

この現象が起こったとき、合わせて他のプラグインも入れていたため、原因を特定するには時間がかかりました。

そして 1 つ 1 つ設定を戻して検証していったところ、、次の設定が原因だと判明。

2014_07_03_1_5

TinyMCE Advancedの設定画面

赤枠で囲まれた部分のチェックボックスですね。

 

もう、そのまま書かれているのですが、直訳すると、

テキストモードで表示・保存した時に、<p>タグや<br/>タグを省略するのをやめまっせーとなります。

 

つまり、チェックを入れなければ<p>タグや<br/>タグは非表示やでということですね。

チェックを外すことで、戻に戻りました。

 

 

この設定、しっかり読まずにチェックを入れていたのですが、その理由は他のブログで「チェックしておくことをオススメします」とあったから

そのブログの文を引用すると、

WordPressでは、一度、ビジュアルエディタで書いたものを、HTMLモードで修正し、再度ビジュアルエディタに戻った時に、不要なタグが追加されるという不具合が起きる場合がある。ここにチェックを入れておくことで、その不具合を少なくすることができる。

引用元:『バズ部|TinyMCE Advanced の設定法と使い方』

とあります。

 

改めて読んでみると、テキストモードでHTMLを直接書く人にとっては必要かもしれませんが、私のようにHTMLを書かない人にとっては不要ですね。

 

ちなみに、設定画面の開き方は、ダッシュボードの『設定 ⇒ TinyMCE Advanced』です。

2014_07_03_1_6

プラグイン一覧からは設定画面に入れませんので、ご注意を。

 

 

 

人付き合いのトラブルや、お客さんとのトラブルなんかより、こういう、

一見『起こった原因がわからない』トラブルが、一番ストレスを感じます

 

久しぶりに『イラっ』として、だけどそれは自分のせいで、

“PC操作が上手くできず、ついマウスを投げてしまう人” の気持ちが、少し分かった気がします。

 

この記事を通して、私の『イラっ』とした体験が、誰かの「スッキリ」につながれば幸いですね。

 

それでは。

 

 

 

また、世の中にはこういうサービスもあります。

 現役エンジニアが情報やノウハウを共有するSNSですね。

 

まだ他に抱えている問題があるのであれば、

覗いてみてはどうでしょうか。

 

 

 

ちなみに、、あなたは記事の中に目次を設けていますか?

その設定方法、メリット・デメリットをまとめました。

『ページ内ジャンプ。ブログの目次リンクの作り方。メリットは?』

Comments & Trackbacks

  • Comments ( 4 )
  • Trackbacks ( 0 )
  1. はじめまして。
    同様の件でドハマリし、どのコアファイルが悪さをしてるのか?と漁るも見つからず。
    途方にくれているときに、こちらの記事にたどりつきました。

    こんなシンプルなことだったとは。。。

    非常に助かりました、ありがとうございました!

    • >>なかのさん

      単純なことですが、厄介なトラブルですよね。
      私も初見はボーゼンとしました。

      解決したようで良かったです。

  2. 探し求めて・・・

    はじめまして。
    同様の件で私もハマリました。
    function.phpに
     remove_filter(‘the_excerpt’, ‘wpautop’);
     remove_filter(‘the_content’, ‘wpautop’);
    を記述でなおる  と 試したのですが効果なし^^;

    途方にくれているときに、こちらの記事にたどりつきました。

    複数HPを管理していて、あるところから「TinyMCE Advanced」を使用したいと…
     相性、動作検証のため 数か月前に
     テストサーバーにインストールをしていたのをこのページで思い出しました。

     なにせ 数ヶ月前。 編集画面が崩れているわけで・・

     非常に助かりました、ありがとうございました

     私には不要な機能なので、停止しました ^^ノ

    • 自分でコードを書いて作ったサイトならいざ知らず
      誰かが作った機能を利用していると、まま有ることですね。

      何にせよ、解決したようで良かったです!

      私の『イラッ』が、
      あなたの「スッキリ」に繋がったことを嬉しく思います(笑)

Leave a Reply

*

Facebookでコメント

スポンサード リンク
Return Top