投稿の本文をpタグで囲む処理そのものは、WordPress本体の関数 wpautop で行われています。
Function Reference/wpautop « WordPress Codex
pタグで囲む条件は、大雑把にいうと下記のようになっています（詳細はWordPress本体のformatting.phpにあるコードを見てください）
- 2個以上の連続する改行で区切られた複数行をひとかたまりとしてpタグで囲む
- 特定のタグ（preなど）で囲まれている行はpタグで囲まない
アイデアだけですが、wpautopはフィルターフックthe_contentを使って呼び出されるので、新しく「divで囲む」関数を作って同じフィルターフックから呼び出せば実現できると思います。「divで囲む」関数を作るのは難しいかもしれませんが。
ところで、最初に戻りますが、divで囲みたい目的やimgタグをpタグで囲みたくない目的はなんでしょう。その目的によっては別のアプローチがあるかもしれません。
トピック投稿者
ru_
(@ru_)
gblsmさん
ご教授ありがとうございます。
「divで囲む」関数を作れれば、同じフィルターフックで呼び出せばいいのですね
目的は、ビジュアルテキストで投稿された場合に、挿入された画像と文章を
自動的に画像は左側に、文章は右側に配置して、枠線で囲まれているようにしたいと思っています。
現状は、cssで「p:first-of-type{border-top: 1px solid #******;」と「p:last-of-type{border-bottom: 1px solid #******;}」で無理矢理枠線で囲まれているようにしています。
しかし、p毎にスタイルが掛かっているので、文字数などでずれてしまいます。
テンプレートタグthe_contentの代わりにget_the_contentを使うと、フィルターフックthe_contentが適用される前の投稿本文を取得できます。つまり関数wpautopがpタグを付加する前の本文です。これを利用して、テーマ側でget_the_contentを使って本文を取得し（pタグが付く前）、それに対して自分の希望するHTMLタグ・class・idを付ければどうですか。
トピック投稿者
ru_
(@ru_)
ご教授いただいた内容読ませていただきました。
get_the_contentだとタグが付けられる前の投稿本文が取得出来るのですね。
ありがとうございます。
<?php
$content = get_the_content();
$content =preg_replace(“/^|$/”,”<div>”,$content);
echo $content;
?>
早速、無い知恵をしぼって・・・上記をとりあえず試してみました。
結果、
<div><img *** />
aaaaaa
bbbbbb
cccccc<div>
のような感じになりました。
理想には、もう少し勉強が必要のようでした・・・
ru_ さん、もしかするとpreg_replaceだけではご自身の希望は実現できないかもしれませんが、例えば WordPress の wpautop 関数のPHPコードを参考にしてみてはどうでしょう。 /wordpress/wp-includes/formatting.php の中にあります。
下記のコードは、もう結果をご存知な訳ですが
$content = preg_replace( "/^|$/", "<div>", $content );
/^|$/ が「先頭または末尾のどちらか」なので、$content 全体の先頭と末尾それぞれに <div> を入れる、という処理になります。preg_replaceのパラメータに指定するパターンを勉強するにはPHPの正規表現のドキュメントを読むとよいと思います。
目的は、ビジュアルテキストで投稿された場合に、挿入された画像と文章を
自動的に画像は左側に、文章は右側に配置して、枠線で囲まれているようにしたいと思っています。
まったく別のアプローチですが、画像はアイキャッチ（またはカスタムフィールド）に登録するようにして本文から省き、テンプレート側でアイキャッチの有無によって表示の仕方を分けるようにしてはどうでしょうか。
既に多数の記事があるなど、運用方法が変わってしまうことに問題があるなら別ですが、preg_replaceで頑張るよりは簡単だと思います。
こんにちは、
見た目の調整という事であれば、
正規表現を使わなくても、本文部分にボーダーを付けることは、CSSで可能だと思います。
画像一枚という限定ですが、
例 テーマは、twentytwelve
http://kwout.com/cutout/f/37/9i/feh_bor.jpg
article{
position:relative;
}
.entry-content{
border:1px solid #ccc;
margin-left:160px;
padding:1em;
}
.entry-content img{
position:absolute;
left:0;
top:auto;
width:150px;
height:auto;
}
このような事で、解決という事にはなりませんか？
