【yamasaki 様】WordPressのthe_contentで出力したimgをｐタグから出したい

the_contentで出力したimgをｐタグから出したい（自動でpタグにならないようにしたい）というご相談を頂きました。

the_contentで出力したimgをｐタグから出したい

wordpressでオリジナルテーマを作っています。
投稿記事一覧（archive）のphpページを作っているのですが、

<div class="voice">
ここにthe_content（？）
</div>

で出力すると、HTMLが

<div class="voice">
<p><img class="○○○" src="○○○"></p>
<p>テキスト～。</p>
</div>

というように、画像がpタグで囲まれてしまいます。
imgタグを囲んでいるpタグを出力しないためにはどうすればようでしょうか。

どうぞよろしくお願い致します。

回答 pで囲むのがルールではあります。

＞yamasaki様
ご相談ありがとうございます！

PHPコードがフォームで送れないようなので補完してあります。（divタグの中にthe_contentで良いですよね）

一応、HTML上はimgはpタグなど囲むのが基本の考え方ということは申し上げておきます。

なぜ、pタグで囲みたくないのでしょうか。レイアウト等の問題なのでしょうか。それならば、まずはCSSでどうにかできないかを考える方が良いとは思います。
img class=”align-left”やrightでもダメなのでしょうか。
（サイトを拝見しても、特に問題があるように思えなかったもので･･･）

.voice p img {
 CSSの記述
}

などですね。

プラグインやfunctions.phpに記述を追加する

方法が無いことはありません。
投稿画面の自動生成されるタグを消したいという要望は昔から存在します。そういったプラグインもあります。「tinyMCE Advanced」などの投稿画面拡張プラグインにはその機能があったと記憶しています。

他、rawHTMLなど
投稿内の任意の部分のみ、自動改行や自動変換を無効化するプラグイン raw HTML

functions.phpに記述を追加する方法については、公式フォーラムに似たようなものがありました。
WPフォーラム 投稿記事で画像のみPタグで囲いたくないのですが…

僕自身は試していませんし、検証もしたわけではありませんが、こういったコードを取り上げた記事もありました。
ちょっと前なので要検証
http://wispyon.com/wpautop-img-delete/

投稿画面で画像をpタグで囲ませない方法1 空行を無くす

記事を書く際の方法になりますが、改行で空白を作らなければ

<p>
  <img>
  <br>
  テキスト
</p>

といった形にすることもできます。

<img src="sample">
テキストエディタにて、空の行が無ければ改行のみ出力される

↓↓↓↓出力

<p><img src="sample"><br>
テキストエディタにて、空の行が無ければ改行のみ出力される</p>

エディタにこの形で記述すればimgだけがpで囲まれることは無くなります。

以下は現在の形かと思います。（画像の後に空行でテキスト）

<img src="sample">
（空行）
テキストエディタにて、空行があればそれぞれがpタグで囲まれる

↓↓↓↓出力

<p><img src="sample"><p>
<p>テキストエディタにて、空行があればそれぞれがpタグで囲まれる</p>

このように、エディタの仕様を利用して調整する方法もあります。
ビジュアルエディタなら、Shift+Enter改行で空行なしの改行になります。
普通にEnterすると改段落になり、それぞれがpタグで囲まれます。

投稿画面で画像をpタグで囲ませない方法2 他のブロックレベル要素で囲う

他のブロックレベル要素で囲うという方法もあります。投稿などでimgタグを出力すると、特になにも囲まれていない状態で出力され、ソース上自動的にpタグで囲まれた状態になります。

しかし、p以外のブロックレベル要素で囲うと、pタグは自動生成されません。divやdl dt dd ul ol liなどですね。こういったタグで囲うと思ったようなスタイルにしやすいです。

<div><img src="sample"></div>

<dl class="XXX">
<dt><img src="sample"></dt>
<dd>text</dd>
</dl>

意味を持たないdivで囲うのはまたルール的によろしくありませんが、dl dt ddの定義型リストであればHTML的にも意味のあるものとなるでしょう。以下は参考のCSSです。

/* ※デフォルトの余白数値指定があると以下の設定だけではダメかもしれませんが、最低限の指定と考えてください */
.XXX dl {
  overflow: hidden;/*内部でfloatしていてもボックスの高さを有効に*/
  margin-bottom:適宜;
}
.XXX dl dt {
  width: 100px;
  float: left;
}
.XXX dl dd {
  padding-left: 110px;
}

他にもやり方は色々あると思います。
参考にして頂ければ幸いです。