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

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


WordpressのSEO対策ならRoot-013 Root-013ではWordPress・SEO対策・アフィリエイトなどサイト運営に関するご質問に無料でお答えしております。
WordPress SEO対策 アフィリエイト 無料相談 無料!WPインストール代行・集客サポート

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

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;
}

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

コメントをどうぞ

  1. 早速ご回答いただきましてありがとうございます!

    言葉足らずで申し訳ございませんでした。
    画像の下にテキストが回りこんでしまうので、
    overflow:hidden;で回り込み解除したかったのですが、
    imgがpタグで囲まれているとテキストだけに指示がきかなかったので困っていました。

    functions.phpに記述を記載する方法で解決できました。
    色々とご丁寧に教えていただきまして、本当にありがとうございます。

    1. yamasaki様
      コメントありがとうございます。参考にして頂けたようでなによりです。
      なるほど、回り込みの解除でしたか。
      それであれば、他にも画像を他のブロックレベル要素で囲う方法+CSSでスタイリングなどもあると思います。
      追記しておきますね。

      よろしくお願い致します。

      1. 追記ありがとうございます。
        なるほど、p以外のブロックレベル要素で囲うという方法もあるんですね。
        すごく勉強になりました!
        本当にありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。

wp-puzzle.com logo

コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。