[WordPress] 画像挿入時にリンク先が画像の時のみ、aタグに独自クラスを付与する方法

ライトボックス系で画像の拡大表示をしたい時など、aタグに独自クラスを付与したい場合があると思います。そんな時に自動的にHTMLにクラス付けする方法です。

image_send_to_editor フィルターフックを使う

image_send_to_editor フィルターフックを使用すると、投稿画面から画像挿入する際に出力されるHTMLを加工できるので、これを使うのがよいようです。

画像へのリンクタグに一律でクラス付与する場合は以下のように、functions.php へ記入すればOKです。

add_filter( 'image_send_to_editor', 'addClass' );
function addClass( $html ) {
	$class = 'myClass'; // ←付けたいクラス名が入ります。
	return str_replace( '<a ', '<a class="'. $class. '" ', $html );
}

リンク先が画像でないこともある場合

「メディアを挿入」画面で指定する画像のリンク先が「メディアファイル」のみと予想される場合はよいのですが、カスタムURLで画像ではなく別のサイトアドレス等になる可能性がある場合は不都合がおきることもあります。

「メディアを挿入」時の添付ファイル表示設定

そこで、リンク先(href属性)末尾がpng又はjpg又はgifの時にのみ独自クラスを付与するように条件分岐を追加します。
functions.php へ以下のように記入します。

add_filter( 'image_send_to_editor', 'addClass' );
function addClass( $html ) {
	$class = 'myClass'; // ←付けたいクラス名が入ります。
	if(preg_match('/<a href="https?:\/\/+[-_.\/a-zA-Z0-9]+(?:png|jpg|jpeg|gif)"><img/' , $html)){
		$html = str_replace( '<a ', '<a class="'. $class. '" ', $html );
	}
	return $html;
}

これでリンク先が画像の時にのみ、aタグに独自クラスが入るようになります。画像を挿入する時にクラスを付けるので、すでに投稿済みのものにはつきませんので注意です。

Related Article

3 Comments & Tracbacks

  • やまとも 2017-07-02 7:11 AM

    こんにちは。
    今回参考にさせて頂いたものですが記述ミスがあるようなのでご報告いたします。
    まず条件なしのほうですが、2行目のraddClassに”r”が多いようです。
    次に条件のほうですが、4行目の”if(”のあとに”!”が入っていないように思います。
    動かず無知が試行錯誤した結果動くようになったので本当に正しいかはわかりませんがご報告致します。

    Reply

    • saori 2017-07-02 11:58 AM

      やまもと さま
      ご指摘ありがとうございました。r は記述ミスでした修正しますね。

      Reply

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ seo Photoshop レスポンシブ Macアプリ ナビゲーション タクソノミー HTML5 WPセキュリティ Git カスタムメニュー サイドバー PHPリファレンス SVG API query_posts WP使い方 RSS iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能