PHP

【WordPress】メディア画像で挿入されるimgタグのクラスやsrcを変更する方法

更新日：2022/12/23

WordPressの投稿画面で、メディア追加で挿入される画像タグをカスタマイズする方法をお伝えします。

 

やりたいこと

投稿画面で画像をメディアから追加すると、次のようなタグが記事に挿入されます。

メディアで挿入されるimgタグ：リンク・キャプションあり


<a href="https://ドメイン/wp-content/uploads/image.jpg">
<img src="https://ドメイン/wp-content/uploads/image.jpg" alt="あああ" width="300" height="450">
</a> キャプション

aligncenter以外のクラスは定義されていないのでムダだから削除したいとか、scr属性のＵＲＬを相対ＵＲＬに変更したいとか、タグの内容を変えたいことがあります。
さらに「キャプションは絶対入れたくない」とか、構造を変更したいケースもあります。

これらは、タグ挿入後に手作業で変更すればいいのですが少し面倒ですね。

最初から好みの形式のタグを挿入してくれたら楽なので、フィルターを使ってタグを変更してみます。

 

クラスを変更する：get_image_tag_classフィルター

imgタグのクラスを変更する場合、get_image_tag_classフィルターを使用します。

get_image_tag_classフィルター使用例

add_filter('get_image_tag_class',function($class, $id, $align, $size){
        // align と 独自クラスmy_image_class のみに変更
    return 'align' . $align . ' my_image_class';
},10,4);

get_image_tag_classフィルターは、コールバック関数に４つの引数を渡します。

  • $class:

    class属性にセットされる文字列。
    クラスが複数ある場合はスペースで区切られている。

    初期値は、

    'align' .  esc_attr( $align ) . ' size-' .  esc_attr( $size_class )  . ' wp-image-' . $id
  • $id：

    画像のID

  • $align：

    配置についての文字列

    'left'（左） 'center'（中央） 'right'（右） 'none'（なし）

  • $size：

    画像サイズについての文字列

    'thumbnail'（サムネイル） 'medium'（中） 'full'（フルサイズ）等

戻り値

コールバック関数は、class属性にセットする文字列を返します。

空の文字列を返しても class属性(class="")は削除されません。
削除する場合はimage_send_to_editorフィルターで行います。

 

挿入タグの置き換え：image_send_to_editorフィルター

クラス以外の変更は、image_send_to_editorフィルターで行います。
image_send_to_editorフィルターは、最終的に生成されたタグをコールバック関数に渡します。

image_send_to_editorフィルター使用例

add_filter('image_send_to_editor',function($html, $id, $caption, $title, $align, $url, $size, $alt, $rel){
      // ＵＲＬを相対ＵＲＬに変換。class属性が空の場合削除
    $domain = str_replace( home_url('','relative'),'',home_url());
    $search = ['src="'.$domain , 'href="'.$domain
                ,'class=""'];
    $replace = ['src="','href="',''];
    return str_replace($search,$replace,$html);
},30,9);

image_send_to_editorフィルターにはキャプションショートコード（[caption][/caption]）を追加する、image_add_caption()関数が優先度20で登録されています。
上の例はキャプション追加後のタグを処理するために優先度30を指定しています。

image_send_to_editorフィルターは、コールバック関数に４つの引数を渡します。

  • $html:

    生成されたタグ。

  • $id：

    画像のID

  • $title：

    WordPressではimgタグにtitle属性を使用しないため、空文字（''）

  • $caption：

    メディア追加画面の「キャプション」に入力された文字列

  • $align：

    配置についての文字列

    'left'（左） 'center'（中央） 'right'（右） 'none'（なし）

  • $url：

    画像のＵＲＬ

  • $size：

    画像サイズについての文字列 または [幅,高さ]の配列

  • $alt：

    メディア追加画面の「代替テキスト」に入力された文字列

  • $rel：

    imgタグのrel属性

戻り値

コールバック関数は、記事に挿入するタグを返します。

例では受け取った文字列をstr_replace()で置き換えていますが、その他のパラメーターを使用してタグを組み立ててもＯＫです。

WordPressはHTMやCSSの知識も必要。総合的な知識を身につけよう。

更新日：2022/12/23

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。