Sponsored


Warning: Use of undefined constant HTTP_USER_AGENT - assumed 'HTTP_USER_AGENT' (this will throw an Error in a future version of PHP) in /home/realizarse/heeeehuuum.club/public_html/wp-content/themes/stinger8-child/functions.php on line 292

Webサイト作成 wordpress

【WordPress】<img>タグに自動挿入される属性と<a>タグ削除&class名変更&任意タグ追加

投稿日:

img_7194

投稿に、画像を追加すると、<img>タグが<a>タグが囲われいて、<img>タグには、『alt』『title』『width』『height』『class』などの属性がごちゃごちゃと自動的に挿入されます。 今日は、その不要なタグや属性を挿入させないようにする方法を紹介します。

通常時
<a href="http://heeeehuuum.club/wp-content/uploads/xxxxx.jpg"><img src="http://heeeehuuum.club/wp-content/uploads/xxxxx.jpg" alt="xxxxx" title="xxxxx" width="680" height="510" class="aligncenter size-full wp-image-xxxxx" /></a>

通常は、こんな風に、ごちゃごちゃと属性が挿入されています。 <a>タグは、画像を表示するだけではなく、クリックしたら画像ページを開くようにさせるためにあります。 『いやいや、表示させるだけで十分!』という人には、不要なタグですよね。 筆者は、邪魔だったので、毎回画像を追加するたびに、いちいち削除していました。

<img>タグに挿入される属性も、『alt』『title』『width』『height』『class』が自動的に挿入されます。 いらない属性もあったりしますよね? 筆者の場合は、『alt』『width』『height』は残しておきたくて、『title』は不要でした。

添付ファイルの表示設定

『class』なんて、3つもclass名が挿入されます。 まず一つ目が、画像を追加する時に選択出来る『添付ファイルの表示設定』(上の画像の赤枠内)で、『配置』が左なら『alignleft』、中央なら『aligncenter』、右なら『alignright』、なしなら『alignnone』というclass名が挿入されます。 筆者の場合は、基本どの画像も中央に配置しているので、この機能は不要でした。

二つ目が、サイズです。 これも、『添付ファイルの表示設定』で選択します。 フルサイズなら『size-full』、大なら『size-large』、中なら『size-middle』、サムネイルなら『size-thumbnail』というclass名が挿入されます。 筆者は、いつも元々のサイズ(フルサイズ)を使うため、この機能も不要でした。

三つ目が、画像個々に割り当てられるclass名です。 『wp-image-xxxx』(xxxxの部分は数字)という感じです。 必要な人もいるのかもしれませんが、筆者には必要性は感じられませんでした。

 

そこで、不要なタグも属性も挿入させないようにすることにしました。 不要なのは、<img>タグ前後に挿入される<a>タグと、『title』属性と、三つのclass名です。 そして、不要な三つのclass名を挿入させないかわりに、独自のclass名を挿入させることにしました。 独自のclass名を、『class=”xxx”』と一つだけ挿入させて、そのclassに、画像を配置やサイズなどを指定しておけば、<img>タグがシンプルにまとまります。

不要な<a>タグと属性を削除

まずは、不要な<a>タグと『title』属性を挿入させないようにします。

/wp-content/themes/stinger7child/function.php
//<img>タグの<a>タグと属性削除
add_filter( 'image_send_to_editor', 'remove_image_attribute', 10 );
add_filter( 'post_thumbnail_html', 'remove_image_attribute', 10 );
function remove_image_attribute( $html ){
	$html = preg_replace( '/title=[\'"]([^\'"]+)[\'"]/i', '', $html );
	$html = preg_replace( '/<a href=".+">/', '', $html );
	$html = preg_replace( '/<\/a>/', '', $html );
	return $html;
}

『function.php』に上記のような記述を追加します。

<img src="http://heeeehuuum.club/wp-content/uploads/xxxxx.jpg" alt="xxxxx" width="680" height="510" class="aligncenter size-full wp-image-xxxxx" />

これで、<a>タグと、『title』属性が挿入されなくなりました。

『width』『height』『class』を挿入させたくない場合は、以下のように記述します。

	$html = preg_replace( '/(width|height)="\d*"\s/', '', $html );
	$html = preg_replace( '/class=[\'"]([^\'"]+)[\'"]/i', '', $html );

<img>タグのclass名を変更する

/wp-content/themes/stinger7child/function.php
//<img>タグのclass名変更
function image_class_filter($class)
{
  $class = 'xxxxx';
  return $class;
}
add_filter('get_image_tag_class', 'image_class_filter');

xxxxxの部分に任意のclass名を記述します。

<img src="http://heeeehuuum.club/wp-content/uploads/xxxxx.jpg" alt="xxxxx" width="680" height="510" class="xxxxx" />

これで、不要な3つのclass名が挿入されず、独自のclass名が挿入されるようになりました。 あらかじめ、CSSを追記しておきます。

/wp-content/themes/stinger7child/style.css
.xxxxx {
    width: 680px;
    height: 510px;
    border: 1px solid #eee;
}

このような感じで追記しておきます。

<img>タグを<div>で囲う

例えばですが、いつも、<img>を<div>で囲っている場合、毎回手入力していくのは面倒なので、自動で挿入できたら便利ですよね。 筆者は、いつも、以下のようなタグで囲っています。

<div id="img"><span id="spacer"></span><img src="http://heeeehuuum.club/wp-content/uploads/xxxxx.jpg" alt="xxxxx" width="680" height="510" class="xxxxx" /></div>
/wp-content/themes/stinger7child/function.php
//<img>タグ前後に追加タグ
function image_wrap($html, $id, $caption, $title, $align, $url, $size, $alt){
	$html = '<div id="img"><span id="spacer"></span>'.$html.'</div>';
	return $html;
}
add_filter('image_send_to_editor','image_wrap',10,8);

上記のように追記しておけば、手入力しなくても、任意のタグで囲うことができます。

	$html = '<div id="img"><span id="spacer"></span>'.$html.'</div>';

上記の部分を

	$html = '任意の開始タグ'.$html.'任意の終了タグ';

任意のタグに変更すれば、思い通りのタグが挿入させられます。

さいごに

これで、<img>タグはスッキリして、自動的に任意のタグで囲うことも出来るようになったので、スピーディーになり、とっても便利になりました。 ぜひみなさんもお試しくださいね。

-Webサイト作成, wordpress

執筆者:

共有する

コメントを閉じる

comment

メールアドレスが公開されることはありません。

Sponsored

Sponsored

sponsored



 Heeee Huuumをフォローしてください

更新メール

メールアドレス送信で、更新メールを受信出来ます。

1人の購読者に加わりましょう