クラシックエディタを使用しています

Gutenberg（グーテンベルグ）にもチャレンジしましたが、クラシックエディタが使いやすく戻しました。
グーテンベルグの場合は、これから紹介する方法が使えないコードもあったので、その場合は他の方法をお試しください。

初期設定時の<img>タグ

初期設定時のメディアを追加(画像を追加)

// 初期設定時のメディアを追加(画像を追加)
<img src="https://xxxx.com/wp-content/uploads/1234.jpg" alt="お花の画像" width="800" height="500" class="alignnone size-full wp-image-xxx" />

リンク先をメディアファイルに設定している場合

// リンク先をメディアファイルに設定している場合
<a href="https://xxxx.com/wp-content/uploads/1234.jpg"><img src="https://xxxx.com/wp-content/uploads/1234.jpg" alt="お花の画像" width="800" height="500" class="alignnone size-full wp-image-xxx" /></a>

alt属性、サイズ属性、クラス属性がごちゃごちゃと追加されています。
『ａｌｔ』『ｗｉｄｔｈ』『ｈｅｉｇｈｔ』『ｃｌａｓｓ』が自動的に挿入されますが、不要な属性もあったりしますよね?
筆者の場合は、『ａｌｔ』は残しておきたくて、その他の属性は不要。

それから、<img>タグを囲うのは、<a>(リンクタグ)ではなく、別のタグ<div>で囲いたくて、毎回手入力していました。
<a>リンクタグの有無は、メディア追加時の設定によります。
<a>リンクタグは、画像を表示するだけではなく、クリックしたら画像ページを開くためにあります。
『表示させるだけで十分！』という人には、不要なタグですよね。

メディアを追加時の設定

ｃｌａｓｓ属性なんて、3種類のｃｌａｓｓ名が挿入されるので長くなります。
まず一つ目が、画像を追加する時に選択出来る『添付ファイルの表示設定』（上記画像の赤枠内）の、『配置』の設定によって、下記のようなクラス名が挿入されます。

筆者の場合、投稿記事内の画像はCSSで配置を指定しているので、この機能は全く必要ありません。
そのため、このクラスは不要な属性という事になります。

二つ目が、画像サイズのクラス名です。
これも、『添付ファイルの表示設定』での、サイズによって、下記のようなクラス名が挿入されます

これもCSSにて指定するため不要でした。

三つ目は、画像個々に割り当てられるｃｌａｓｓ名です。
『ｗｐ-ｉｍａｇｅ-ｘｘｘｘ』（ｘｘｘｘの部分は数字）という感じです。
これもやはり不要でした。

<img>を囲っている<a>リンクタグを削除したい

<img>タグを<a>リンクタグで囲いたくない、削除したい場合、『添付ファイル表示設定』の『リンク先』を『なし』に設定しておくと、リンクタグは挿入されません。
すでに、投稿済の記事内の画像については、ひとつひとつ設定変更していくしかないです。
もしくは、『Search Regex』のようなプラグインを使用して、全投稿記事内のリンクタグ部分を一括で変更や削除するという方法もあります。
データベースを検索して、該当の文字列を検索し、任意の文字列に置き換えるというものです。
複雑な文字列やコードの場合、正規表現をある程度理解する必要があるのと、失敗すると面倒な事になるので少し学習する必要があります。

function.phpにコードを追加する

https://xxxx.com/wp-content/themes/(テーマ名)/function.php

親テーマフォルダ内にあるfunction.phpにコードを追加するのはおすすめしません。
function.phpは、記述ミスなどがあると、大変な事になります。
子テーマフォルダ内のfunction.phpに追記する事をおすすめします。
その際は、必ずこまめにバックアップをとり、何かあった時は、直前の内容へすぐ戻せるようにするのが安全です。

画像挿入時と画像出力時

2通りがあります。

画像挿入時に機能するコード

これから紹介するコードは、すでに投稿済の記事には機能しません。
投稿記事作成の際の画像挿入時に、どのような状態でタグや属性が追加されるかを事前に設定するものです。

画像挿入時に、サイズ属性、終了タグ手前のスラッシュを削除

// 画像挿入時に、サイズ属性、終了タグ手前のスラッシュを削除
function remove_img_tag($html){
    $html = preg_replace('/(width|height)="\d*"\s/', '', $html);
    $html = str_replace('" />','">',$html);
    return $html;
}
add_filter('get_image_tag', 'remove_img_tag');

<img src="https://xxxx.com/wp-content/uploads/1234.jpg" alt="お花の画像"  class="alignnone size-full wp-image-xxx">

これで、『width=”800″ height=”500″』このサイズ属性が追加されなくなりました。
『 />』これも『/(スラッシュ)』のみ削除しています。
<img>の終了タグです。

画像挿入時に、クラス名変更

// 画像挿入時に、クラス名変更
function img_class_filter($class){
    $class = 'default';
    return $class;
}
add_filter('get_image_tag_class', 'img_class_filter');

<img src="https://xxxx.com/wp-content/uploads/1234.jpg" alt="お花の画像"  class="default">

これで、不要なクラス名が追加されず、独自のクラス名『default』一つのみになりました。

画像挿入時に、<img>前後にタグ追加

// 画像挿入時に、<img>前後にタグ追加
function add_img_tag( $html, $id, $caption, $title, $align, $url, $size ) {
    $html = '<div class="img_guard"><span class="guard_nopic"></span>'.$html.'</div>';
    return $html;
}
add_action( 'image_send_to_editor', 'add_img_tag', 10 ,7);

<div class="img_guard"><span class="guard_nopic"></span><img src="https://xxxx.com/wp-content/uploads/1234.jpg" alt="お花の画像"  class="default"></div>

これで、<img>タグを希望のタグで囲う事ができました。
画像を装飾したい場合に便利です。
筆者の場合、画像にコピーガードのフィルターをかけるためこのようにしています。
以前、このサイト用に用意した自前の画像を無断で使用されていたため、そのような対策をしています。

画像出力時に機能するコード

次に紹介するのは、先ほど紹介した画像挿入時に機能するコードとは違い、投稿済の画像などを表示する時に機能するコードです。

画像出力時に、リンクタグ、サイズ属性を削除

// 画像出力時に、リンクタグ、サイズ属性を削除
function custom_img_tag($html) {
    $html =preg_replace(
        array('{<a(.*?)(wp-att|wp-content\/uploads)[^>]*><img}',
            '{ wp-image-[0-9]*" /></a>}'),
        array('<img','">'),
        $html );
    $html = preg_replace( '/(width|height)="\d*"\s/', '', $html );
    return $html;
}
add_filter( 'the_content', 'custom_img_tag' );

コード追加前

<a href="https://xxxx.com/wp-content/uploads/1234.jpg"><img src="https://xxxx.com/wp-content/uploads/1234.jpg" alt="お花の画像" width="800" height="500" class="alignnone size-full wp-image-xxx"></a>

コード追加後

<img src="https://xxxx.com/wp-content/uploads/1234.jpg" alt="お花の画像"  class="alignnone size-full wp-image-xxx" />

これで、<a>リンクタグと、サイズ属性が削除されました。

画像出力時に、クラス属性の削除

// 画像出力時に、クラス属性の削除
function img_class_remove($content) {
    global $post;
    $pattern        = '/<img(.*?)class=\"(.*?)\"(.*?)>/i';
    $replacement    = '<img$1 $3>';
    $content        = preg_replace($pattern,$replacement,$content);
    return $content;
}
add_filter('the_content','img_class_remove');

<img src="https://xxxx.com/wp-content/uploads/1234.jpg" alt="お花の画像" >

これで、クラス属性も削除されました。

画像出力時に、<img>前後にタグ追加

// 画像出力時に、<img>前後にタグ追加
function img_tag_plus($content) {
    global $post;
    $pattern        = '/<img(.*?)>/i';
    $replacement    = '<div class="img_guard"><span class="guard_nopic"></span><img$1></div>';
    $content        = preg_replace($pattern,$replacement,$content);
    return $content;
}
add_filter('the_content','img_tag_plus');

<div class="img_guard"><span class="guard_nopic"></span><img src="https://xxxx.com/wp-content/uploads/1234.jpg" alt="お花の画像"></div>

このように、出力時に任意のタグを追加する事もできます。
後からタグを変更したくなった場合、この方法ならアレンジしやすくなりますね。

<img src="https://xxxx.com/wp-content/uploads/1234.jpg" alt="お花の画像" >

元々の投稿記事内の<img>タグは上記の状態です。
他のタグで囲っているような場合は、コードを変更する必要があります。

参考にしたサイト

さいごに

これで、<img>タグは、不要なタグや属性もなくなり、思い通りのスッキリした表示になりました。
無駄にタグを手入力する必要もなくなり、スピーディーに投稿できるようになりました。
ぜひみなさんもお試しくださいね。