WordPressのメディア追加で画像挿入時にIMGタグに任意のクラスを挿入する方法

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

挿入されるIMGタグ

<img src="https://affi-sapo.com/img.png" alt="" width="597" height="176" class="aligncenter size-full wp-image-2397" />

このサイトで使っている賢威8は、クラス名に「outline」を指定すると画像に枠線を入れることができるのですが、毎回手打ちで入力するのが非常に面倒になってきました。
そこで画像挿入時に、クラスの内容が変更されるようにWordPressを調整してみようと思います。

なおこの記事は、WordPressの旧テキストエディタでの入力を想定しています。

独自プラグインを用意

今回はWordPressに独自コードを入力する必要があります。
独自コードはfunction.phpに入力するよう指示している記事が多いですが、僕の場合テーマがバージョンアップすると消えてしまうことや、他のサイトへの使いまわしに不便な点から、自分専用の独自プラグインの利用を勧めています。

独自プラグインの設置については次の記事をご覧ください。

WordPressカスタマイズの準備|自作したコードはテーマをバージョンアップしたら消えてしまう?

WordPressカスタマイズの準備|自作したコードはテーマをバージョンアップしたら消えてしまう?

質問 ネットで調べてみると、functions.phpを書き換えるように指示されていることが多いですね。 質問者様も、こちらを書き換える予定だと思います。 テーマのバージョンアップで配布されるファイルには、新しいfunc […]

続きを読む

PHPコードの入力

IMGタグのクラスは、get_image_tag_classフィルターで変更できます。
次のPHPコードを独自プラグインに入力して保存します。

任意のクラスを追加するPHPコード

PHPコード
function my_get_image_tag_class($defultclass){
 return $defultclass . ' ' . 'outline';
}
add_filter('get_image_tag_class', 'my_get_image_tag_class');

緑色の行の'outline'は、追加したいクラス名に変更してください。
なお'outline'の前に半角スペースが必要です。
今回はわかりやすくするために、' ' . 'outline'のような書き方をしています。

次のような書き方でも問題ありません。

書き方例
1) return $defultclass . ' outline';
2) return "{$defultclass} outline";

既存クラスを削除し任意のクラスのみに変更するPHPコード

PHPコード
function my_get_image_tag_class($defultclass){
 return 'outline';
}
add_filter('get_image_tag_class', 'my_get_image_tag_class');

my_get_image_tag_classの引数$defultclassは、デフォルトのクラス名です。
これを無視して任意のクラス名だけをリターンしています。

特定のクラスを残し任意のクラスを追加するPHPコード

WordPressは画像位置を指定する「alignleft」「aligncenter」「alignright」の3つのクラスがあり、これだけは残しておいた方がいいようです。
この3つだけの残して、任意のクラスを追加するPHPコードを考えてみます。

残したいクラスを全て指定するパターン

PHPコード
function my_get_image_tag_class($defultclass){
 // $classList:残したいクラス
 $classList=['alignleft','aligncenter','alignright'];
 $defultList = explode(' ',$defultclass);
 $resultList = [];
 foreach($defultList as $def){
    if( in_array($def,$classList)){
        $resultList[]=$def;
    }
    $resultList[]='outline';
    return implode(' ',$resultList);
 }
}
add_filter('get_image_tag_class', 'my_get_image_tag_class');

特定の文字列で始まるクラスのみ残すパターン

PHPコード
function my_get_image_tag_class($defultclass){
 // $leaveclass:残したいクラス
 $leaveclass='align';
 $defultList = explode(' ',$defultclass);
 $resultList = [];
 foreach($defultList as $def){
    if( 0 === strpos($def,$leaveclass)){
        $resultList[]=$def;
    }
    $resultList[]='outline';
    return implode(' ',$resultList);
 }
}
add_filter('get_image_tag_class', 'my_get_image_tag_class');

確認してみる

任意のクラスを追加するPHPコードを独自プラグインに入力し確認してみます。

IMGタグの確認

メディアの追加で画像した結果、上のようなIMGタグが挿入されました。
「outline」がクラス内に追加されているので成功です。

画像枠の追加忘れもなく、思った以上に快適に記事を書けるようになりました。