arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

[WordPress]自動挿入される<p>タグを取り除こう

記事を書いていくうちに気になったので、このブログに手を入れ始めました。
画像を載せて続けて文章を書いていくと行間がおかしくなったり、かと思えば詰まったりと見栄えがちぐはぐな感じだったので、原因は何だろうとブラウザの開発ツールを開いたら、なんと入れていない<p>が入っているではないですか…pタグにはmarginが入っていてこれは外さないと、というわけで調べて解決方法が幾つかあることが分かったので紹介します。

なぜ自動挿入されるの?

ざっと調べたところ、いっぱい検索結果に出てきました(笑)。
原因はどうやらWordpressは、wpautop という関数でタグが勝手に挿入され、記事が自動的に成形される仕組みの所為らしいのです。
これはテキスト主体で記事を書く分にはいいのでしょうけれども、詳細を伝えるために画像やコードを挿入したりする人にはちょっと厄介な機能ですね。
というわけで、少しWordpressの中身に手を加えることにします。

functions.phpを変更する

私は実際このやり方を採用しました(記事数が少ないので^^;)。
functions.phpにremove_filter関数を含む以下を記述して wpauto 関数を無効化します。

…下の章にも言えることなのですが、問題が一つありまして、これを有効にすると全体の<p>タグと<br>タグが削除されて今まで書いてきた記事やページの改行がなくなったり、レイアウトが崩れてしまうことがあり得るので、慎重な取り扱いが必要ですね。

テンプレートを変更する

全部じゃなくて、投稿だけ自動挿入なしにしたい、固定ページだけ自動挿入を止めたいという場合はこちらです。
<p>タグを挿入させたくないページのテンプレートを開いて、このコードを探します。

これは「ここに本文が入ります」というコードですので、この上にコードを追加しちゃいます。

先ほどfunctions.phpに書いたコードと同じです。
phpがわからないうちはこちらの方法が融通が利きそうでいいですね。

おまけ – ビジュアルエディタを使う人向け?

私は表の成形にテキストモードではなく、ビジュアルモードを使うのですが、どうやらテキストモードからビジュアルモードへ切り替えるとせっかく打った<p>や<br>が消えてしまうらしいです…
これもfunctions.phpの変更で設定可能ですが、前もって入力補助機能に Tiny MCE Advanced という便利プラグインを入れておいたので、そこで設定しました。

他のプラグインと組み合わせると意外に便利なので、よかったらインストールしてみてくださいね。


これらの方法以外にもプラグインで解決できたりするのですが、プラグイン自体が現在のWordpressのバージョンでテストされていないので、今回は除外しました。
コピーして貼り付けるだけの簡単作業なので、気になる方はお試しください。ねこま(@necomacustom)でした。

Share

Leave a comment

PAGE TOP