WordPressでメディアを追加から画像を挿入すると、次のような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に入力するよう指示している記事が多いですが、僕の場合テーマがバージョンアップすると消えてしまうことや、他のサイトへの使いまわしに不便な点から、自分専用の独自プラグインの利用を勧めています。
独自プラグインの設置については次の記事をご覧ください。
PHPコードの入力
IMGタグのクラスは、get_image_tag_classフィルターで変更できます。
次の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コード
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コードを考えてみます。
残したいクラスを全て指定するパターン
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');
特定の文字列で始まるクラスのみ残すパターン
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タグが挿入されました。
「outline」がクラス内に追加されているので成功です。
画像枠の追加忘れもなく、思った以上に快適に記事を書けるようになりました。
■Googleで他サイト検索
■僕がおススメするアフィリエイト教材
■マーケティング施策ツール