[WordPress] アイキャッチで出力される img タグ中のサイズやクラスを変更したり削除したりする

[WordPress] アイキャッチで出力される img タグ中のサイズやクラスを変更したり削除したりする

<?php the_post_thumbnail(); ?>タグでアイキャッチ画像を表示すると以下のような形で img タグがHTMLに出力されます。
アイキャッチ画像HTML
この img タグ内の width/height 指定やクラス名を任意のものへ変更したり、削除する方法のメモです。

img タグ内のサイズ指定を変更する

the_post_thumbnail() に以下のように array( 橫, 縦 ) に表示したいサイズを渡します。

<?php the_post_thumbnail( array(200, 200) ); ?>

これで以下のように img タグが変更されます。
img タグ内のサイズ指定を変更する

独自のクラスを付ける

the_post_thumbnail() タグの第二引数に以下のように任意のクラス(myClass の部分)を入れます。

<?php the_post_thumbnail( 'thumbnail', array('class' => 'myClass') ); ?>

クラス名が変更されました。
独自のクラスを付ける

もっと独自のクラスにする

wp-post-image というクラス名は表示されている画像のサイズによって自動的に付けられます。例えば thumbnail サイズが表示されている場合は attachment-thumbnail というクラス名が付きます。

これにより実際の表示サイズが確認できるので便利ですが、これを削除して独自クラス名のみにしたいという場合は functions.php へ以下のように記入します。

add_filter( 'post_thumbnail_html', 'custom_attribute' );
function custom_attribute( $html ){
	$myclass = 'myclass'; // クラス名
	return preg_replace('/class=".*\w+"/', 'class="'. $myclass .'"', $html);
}

post_thumbnail_html フィルターフックを使うと、custom_attribute の第一引数でアイキャッチのHTMLを文字列で受け取ることができるので、受け取ったimgタグの文字列から preg_replace() を使ってクラス名を変更します。

↓ 変更後の HTML
もっと独自のクラスにする

クラス名を削除する

クラス指定そのものを削除する場合は functions.php へ以下のように記入します。

add_filter( 'post_thumbnail_html', 'custom_attribute' );
function custom_attribute( $html ){
	// class を削除する
	$html = preg_replace('/class=".*\w+"\s/', '', $html);
	return $html;
}

↓ 変更後の HTML
クラス名を削除する

サイズ指定を削除する

img タグへサイズ指定を入れたくない場合は functions.php へ以下を記入します。

add_filter( 'post_thumbnail_html', 'custom_attribute' );
function custom_attribute( $html ){
	// width height を削除する
	$html = preg_replace('/(width|height)="\d*"\s/', '', $html);
	return $html;
}

↓ 変更後の HTML
サイズ指定を削除する

Related Article

5 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能