wordpressのアイキャッチ関連の便利なコード一覧

アイキャッチ関連でfunctions.phpに記述するコード

アイキャッチ画像の機能の設定

使用しているテーマがそもそもアイキャッチ機能がない場合は、funcitons.phpに以下のコードを追記して使用可能に出来ます。

アイキャッチ画像機能を使うためのコード

<?php
add_theme_support('post-thumbnails');
?>

<?php

add_theme_support('post-thumbnails');

サムネイルのサイズの設定

サムネイルの画像は、デフォルトで以下の3サイズあります

サムネイル:150 x 150px
中サイズ:300 x 225px
フルサイズ:600 x 450px

このサイズ以外のサムネイルのサイズを設定したい場合は、以下のコードで設定することが出来ます。

サムネイルのサイズ指定

<?php

set_post_thumbnail_size(150, 150, true); // 通常の投稿サムネイル
add_image_size('thumbnailSmall' ,100, 100 ,true ); // オリジナルサムネイルサイズ 小
add_image_size('thumbnailMidium',250, 250 ,true ); // オリジナルサムネイルサイズ 中
add_image_size('thumbnailBig'  ,500, 500 ,true ); // オリジナルサムネイルサイズ 大

?>

<?php

set_post_thumbnail_size(150, 150, true); // 通常の投稿サムネイル

add_image_size('thumbnailSmall' ,100, 100 ,true ); // オリジナルサムネイルサイズ小

add_image_size('thumbnailMidium',250, 250 ,true ); // オリジナルサムネイルサイズ中

add_image_size('thumbnailBig' ,500, 500 ,true ); // オリジナルサムネイルサイズ大

自動で挿入される余計なタグを外す

画像を挿入する時際に自動で挿入される属性(title、width、height、class）が邪魔な場合以下のコードで外す事が可能です。

自動で挿入される余計なタグを外すコード

<?php
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( '/(width|height)="\d*"\s/', '', $html );
	$html = preg_replace( '/class=[\'"]([^\'"]+)[\'"]/i', '', $html );
	return $html;
}
?>

<?php

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( '/(width|height)="\d*"\s/', '', $html );

$html = preg_replace( '/class=[\'"]([^\'"]+)[\'"]/i', '', $html );

return $html;

}

テーマカスタマイズの際に設定するアイキャッチ画像関連のコード

このサイトで設定しているアイキャッチ関連のコード

<?php
/*---------------------------------------------------------------------------------*/
//アイキャッチ画像　サムネイル関連
/*---------------------------------------------------------------------------------*/
add_theme_support('post-thumbnails');

set_post_thumbnail_size(150, 150, true); // 通常の投稿サムネイル
add_image_size('thumbnailSmall' ,100, 100 ,true ); // オリジナルサムネイルサイズ 小
add_image_size('thumbnailMidium',250, 250 ,true ); // オリジナルサムネイルサイズ 中
add_image_size('thumbnailBig'  ,500, 500 ,true ); // オリジナルサムネイルサイズ 大

//画像貼り付け時の自動挿入タグを削除
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( '/(width|height)="\d*"\s/', '', $html );
	$html = preg_replace( '/class=[\'"]([^\'"]+)[\'"]/i', '', $html );
	return $html;
}
?>

<?php

/*---------------------------------------------------------------------------------*/

//アイキャッチ画像　サムネイル関連

/*---------------------------------------------------------------------------------*/

add_theme_support('post-thumbnails');

set_post_thumbnail_size(150, 150, true); // 通常の投稿サムネイル

add_image_size('thumbnailSmall' ,100, 100 ,true ); // オリジナルサムネイルサイズ小

add_image_size('thumbnailMidium',250, 250 ,true ); // オリジナルサムネイルサイズ中

add_image_size('thumbnailBig' ,500, 500 ,true ); // オリジナルサムネイルサイズ大

//画像貼り付け時の自動挿入タグを削除

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( '/(width|height)="\d*"\s/', '', $html );

$html = preg_replace( '/class=[\'"]([^\'"]+)[\'"]/i', '', $html );

return $html;

}

アイキャッチ関連でテンプレートファイルで使用するコード

アイキャッチを表示するコード

以下のコードでアイキャッチが表示されます。アイキャッチが設定されてない場合は何も表示されません。

アイキャッチ表示

<?php
the_post_thumbnail();
?>

<?php

the_post_thumbnail();

サムネイルのサイズを指定して表示させるコードは以下になります。

画像サイズの指定は ‘thumbnail’, ‘medium’, ‘large’で、追加で設定している場合は設定した名前で、例えば、先述の設定内容では「thumbnailBig」になります。

サイズを指定してサムネイル表示

<?php
the_post_thumbnail('thumbnailBig');
?>

<?php

the_post_thumbnail('thumbnailBig');

アイキャッチの有無のIF文

テンプレートファイル内で、記事のアイキャッチ画像が設定されている場合は、それを表示してアイキャッチ画像が設定されていない場合は、代わりの画像（今回は、テーマファイルのimgフォルダに格納されているno_image.png）を表示するコードになります。

imgタグでアイキャッチ画像を表示するIF文

<?php
if ( has_post_thumbnail()) {
    the_post_thumbnail();
}
else {
    echo '<img src="' . get_bloginfo('url'). '/img/no_image.png">';
}
?>

<?php

if ( has_post_thumbnail()) {

the_post_thumbnail();

}

else {

echo '<img src="' . get_bloginfo('url'). '/img/no_image.png">';

}

アイキャッチのイメージ画像をURLで取得して表示するIF文

<img src="<?php if ( has_post_thumbnail() ) {
    $image_id = get_post_thumbnail_id ();
    $image_url = wp_get_attachment_image_src ($image_id, true);
    echo $image_url[0];
} else {
    echo get_bloginfo( 'template_directory' ) . '/img/no_image.png;
} ?>" alt="アイキャッチ画像">