時代の流れに適応しようと、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)
技術関連の他の記事
他にもやってみた系の記事を書いています。
よかったらこちら↓もどうぞ。
【PHP初心者がやってみた】StripeのWordPressプラグインを編集して、入力項目を固定化する方法とコードの紹介。
ブログ・ホームページ作るなら
【エックスサーバー】が断然おすすめ
超大手で安定稼働＆明瞭な料金体系で、
運用の煩わしさゼロ！
わたしのクライアントさんにもおすすめしており、
このサイトもエックスサーバーで作っています◎
共感したら「いいね」してね
(まだ評価がありません)
