【WordPress】 画像のPタグを削除する方法

今後のためにレイアウトをいろいろ試していたのですが、1つ問題が発生しました。

CSSでPタグにインデント(文字下げ)を追加すると画像までインデントされてしまうことに気が付きました。
自動整形で画像にもPタグが追加されるためです。

今回はこの問題の対処法について調べてみましょう。

スポンサーリンク

まず何が問題?

記事の段落始めにインデント(文字下げ)を入れたい場合は、CSSでPタグにインデントを設定すればそれで完了です。
では実際に以下のサンプル記事を使って試してみましょう。

remove_ptags_05b

これに以下のCSSを追加しました。

remove_ptags_02b

するとこうなりました。

remove_ptags_06b

画像にもインデントがついています。
ソースを見てみましょう。

remove_ptags_07b

案の定、画像もPタグ内にあります。

画像の場合のみPタグを削除することができないでしょうか?

functions.phpで対応する方法

functions.phpに書き換え用をコードを追加して画像のPタグを削除するという方法です。

●こちらのサイトを参考にさせていただきました。

・画像のみ、pタグで囲わないようにする(kachibit.net)
http://kachibito.net/wp-code/stop-wordpress-wrapping-images-in-a-p-tag

・WordPressのコンテンツ自動整形で画像だけは<p>で囲われないようにする方法(いのらぼ)
http://www.inolabo.net/2928

・Stop WordPress Wrapping Images In A “P” Tag(WordPres Answers)
http://wordpress.stackexchange.com/questions/7090/stop-wordpress-wrapping-images-in-a-p-tag

子テーマのfunctions.phpに以下のコードを追加します。

大雑把に流れを見てみると、

remove_ptags_08b

正規表現が使われていいるのでこれも調べてみると以下のとおり。

/ : デリミタ 正規表現の始まりと終わりを示す区切り文字
¥s : 半角スペース、タブ、改行のどれか1文字
* : 直前の文字の0回以上の繰り返し
¥s* : この組み合わせで半角スペース、タブ、改行の任意の文字列、または文字無し
. : 任意の一文字
.* : この組み合わせで任意の文字列、または文字無し
i : パターン修飾子 大文字小文字ともにマッチさせる
u : パターン修飾子 UTF-8対応(マルチバイト)
¥2 : 2番めの()の内容 上記のコードではIMGタグとなる

 これを踏まえてもう少し詳しく見てみるとこうなります。

remove_ptags_09b

このようにPタグで囲まれたIMGタグがあった場合はIMGタグだけに置き換えるという処理になります。
すなわちPタグを消すということです。

これをfunctions.phpに追加した結果がこちら。

remove_ptags_10b

画像のインデントがなくなりました。

しかし画像とテキスト間の段落もなくなりました。
通常Pタグ間には段落ができますが、画像のPタグなくなったことで繋がって見えるためです。

これはCSSで画像にmargin-bottomをつける、もしくはテキストモードで

(改行)
&nbsp;
(改行)

などを追加して対応できます。

ただしこのfunctions.phpにコードを追加する方法にはいくつか注意点があります。

preg_replaceを使ってPタグを消す場合の注意点

このfunctions.phpにコードを追加する方法ではあくまでも「Pタグ内にIMGタグのみがあった場合」に機能します。
以下の場合では条件に合っていないため機能しません。

remove_ptags_11c

その結果はこうなります。

remove_ptags_12b

画像のインデントが復活してしまいました。

ソースを見てみましょう。

remove_ptags_13b

Pタグの中にBRタグとテキストが追加されています。
書き換えの条件は「Pタグ内にIMGタグのみがあった場合」ですので、条件外と判断されたためです。

その場合はこうするとよいでしょう。

remove_ptags_14b

追加したテキストの前に空改行を入れましょう。
こうすることで追加したテキストのみPタグで囲まれます。

remove_ptags_15b

remove_ptags_16b

画像と追加したテキストの間に空改行を入れることでPタグを分割しています。これによりIMGタグを包むPタグのみが消えたのです。

もう一つ注意点があります。
実は画像にリンクが付いている場合は機能しないのです。

リンク付き画像の場合

「Pタグ内にIMGタグのみがあった場合」にPタグが消される処理のため、リンクのAタグがあると機能しません。

試しにリンク付き画像を追加してみましょう。

remove_ptags_17b

ソースを見てみると、

remove_ptags_18b

リンク付き画像にはAタグが付いているために機能しなかったようです。

これに対応するにはfunctions.phpに別のコードを追加する必要があります。
下半分を追加しました。

これはPタグ内にAタグがあり、Aタグ内にIMGタグがある場合のみPタグを消す」という処理です。

これを追加するとこうなります。

remove_ptags_19b

リンク付き画像のインデントも消えました。

まとめ

今回は「Pタグにインデントを付ける」という例で検証してきましたが、画像にリンクが付いている場合は別のコードが必要だったり空改行の有無で変化したりと一筋縄ではいきませんでした。とりあえず対応方法は理解出来ましたが、使いこなせるかと問われると正直微妙です。
特に正規表現は腰を据えて勉強しないといけませんね。

シンプルな構成の記事ならば装飾するテキストのみをクラス付きDIVタグで囲み、そこにインデントなどのCSSを設定したほうが後々メンテナンスがしやすいかもしれません。


スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA