公開日: 2020/08/17　 最終更新日: 2023/06/05

時代の流れに適応しようと、Gutenbergエディタを使っていたのですが
最近、とうとうGutenbergエディタに限界を感じ
クラシックエディタを入れました。

すると、
外部リンクのついた画像の隅っこに
文字につくべき外部リンクアイコンがくっついている…！

どうしてかと思ったら、
Gutenbergで画像に自動でついていた<figure>タグがなくなっていて
おまけに、<p>タグで囲われているではないか。

どうやらWordpressでは、コンテンツ内で画像を挿入すると
自動でpタグがつくみたいですね。

これ、なんとかならないかなぁと思って、調べてみました。

画像をラップしているpタグを削除する方法

<div>とか<figure>とかで画像を囲っておいた方が
色々使いやすくていいなぁと思うのですが
<p>はなんかちょっといやだ。

文字と一緒のくくりで扱うと、扱いにくいじゃないですか。
文字だけに適用したいCSSが一緒に反映されちゃったりするし。

とはいえ、毎回HTMLコード編集で手動で直すのは
何のためのCMSだよっていう感じで面倒すぎますよね…

ということで、画像をpタグで囲うのを
自動で解除してくれるコードと
後半では、別のコードに置換する方法もご紹介します！

画像を囲むpタグを削除するコード

まず、結論のコードから。
「画像をラップしているpタグを削除する」タグはこちら。

この関数自体は、色々なサイトさんで紹介されています。

function remove_p_on_images($content){
	return preg_replace('/<p>(\s*)(<img .* \/>)(\s*)<\/p>/iU', '\2', $content);
}
add_filter('the_content', 'remove_p_on_images');

というコードを、「functions.php」に書きます。

コピペOKですのでご自由にお使いくださいね。
（動作の不備や、別のタグに書き換えるなどの微調整は
適宜ご自身でお願いします～）

リンク付き画像のpタグも削除しちゃおう

ちなみに、上記のコードを少しアレンジして、
imgがaタグでラップされている、リンク付き画像のPタグも外せます。

バナー画像や、少し凝ったオリジナルのボタンを
記事の中に挿入することはよくありますよね。

コードは下記のようになります。

function filter_ptags_on_link_images($content)
{
	return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}
add_filter('the_content', 'filter_ptags_on_link_images');

コードの意味を解説

上記の「リンク付きimgのpタグを削除する」コードの
意味を紐解いていくと

「p＜a＜img＜a＜pという並びのコードが出てきたら

  • 1番目の丸かっこ（a）
  • 2番目の丸かっこ（img）
  • 3番目の丸かっこ（/a）

を出力する」という意味のようです。

「置き換える」という意味のpreg_replace

preg_replaceというのは、置き換えをする関数なので
上記の処理は「pタグを”空白”に置き換える」というような命令です。

pじゃない別のタグでラップしたい場合

ところで、pタグを削除する方法はわかったけど
これでは、<p>を消しただけで、imgが裸で配置されるわけで。

まぁ、悪いわけではないのだけど、
なんか後々扱いにくそうで落ち着かない。

figureとかdivとか、何らかのタグでラップしておきたい気がしますよね。

ということで、今回はこのコードの意味を踏まえたうえで
もう少し使いやすいように書き換えます！

pタグ削除だけじゃなくてタグの書き換えがしたい

<p>タグを消す方法はちょこちょこ見かけますが
意外と、<p>をほかのタグに置換するというコードが見つからなかったので
応用して作ったコードを備忘録的に置いておきます。
（見つからなかったのはわたしの探し方が下手なだけかもですが）

置き換えるものを空白ではなく
別のタグにする

preg_replaceというのは、置き換えをする関数で
上記の処理は「pタグを”空白”に置き換える」というような命令でしたね。

であれば、「空白」を他のタグにすれば
figureやdivに置換することもできそうです。

ということで、やってみたらうまくいきました！

実際のコードはこちら↓です。

画像のpタグをfigureに置換

記事に差し込む画像のpタグをfigureタグに置換して
記事内の画像をfigureでラップする場合はこちら↓

function remove_p_on_images($content){
	return preg_replace('/<p>(\s*)(<img .* \/>)(\s*)<\/p>/iU', '<figure class="wp-block-image">\2</figure>', $content);
}
add_filter('the_content', 'remove_p_on_images');

お好みでdivなどに変えて使って下さいね。

リンク付き画像のpタグをfigureに置換

バナーやボタン画像を囲うpタグも
他のタグに置換したい場合はこちら↓

function filter_ptags_on_link_images($content)
{
	return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '<figure class="wp-block-image">\1\2\3</figure>', $content);
}
add_filter('the_content', 'filter_ptags_on_link_images');

あとは使い勝手のよいように、
タグやクラス名を変えてくださいね。

コピペしてご自由にお使いください～。

参考サイト

以下のサイト様のソースを参考にさせていただきました！

→【WordPress】 画像のPタグを削除する方法
→PHP 文字列を置き換える(str_replace/preg_replace)

技術関連の他の記事

他にもやってみた系の記事を書いています。
よかったらこちら↓もどうぞ。

会員登録、ログイン不要で誰でも押せる「いいね！」ボタンのプラグイン「WP-PostRatings」が便利だった

【PHP初心者がやってみた】StripeのWordPressプラグインを編集して、入力項目を固定化する方法とコードの紹介。

ブログ・ホームページ作るなら
【エックスサーバー】が断然おすすめ

超大手で安定稼働＆明瞭な料金体系で、
運用の煩わしさゼロ！
わたしのクライアントさんにもおすすめしており、
このサイトもエックスサーバーで作っています◎

共感したら「いいね」してね

いいね！ (まだ評価がありません)
記事のURLをコピーする

記事一覧に戻る


先頭へ戻る