アイキャッチ画像取得の方法！【フルサイズ（width100%）設定が可能な方法】【WordPress】

どうも、Tommy(@SitommyBlog)です。

今回は、WordPressでアイキャッチを取得する方法について紹介していきたいと思います。

また、フルサイズでの取得方法について、なかなか調べても出てこなかったので参考に出来るかと思っています。

アイキャッチ画像を有効にする

まず始めに、アイキャッチ画像を有効にしないとそもそも使えないのでその設定をしましょう。

add_theme_support('post-thumbnails');

『functions.php』に設定を書きます。
アイキャッチ画像の機能を利用することで記事の新規追加や編集画面にアイキャッチ画像設定が追加されますので、もし編集画面にない場合はこの設定をしましょう。

アイキャッチ画像サイズの設定

デフォルトサイズの設定と、各それぞれ使うサイズを設定できます。
この場合、widthやheightは設定されるのでその大きさに切り向きかリサイズされます。

// アイキャッチ画像サイズ設定
set_post_thumbnail_size(90, 90 ,true);

// サイドバー用画像サイズ設定
add_image_size('small_thumbnail', 61, 61, true);

// アーカイブ用画像サイズ設定
add_image_size('large_thumbnail', 120, 120, true);

// サブページヘッダー用画像サイズ設定
add_image_size('category_image', 658, 113, true);

『ture』に設定すると、切り抜きで表示されます。『false』にすると、リサイズされます。

『add_image_size()』で、各シーンで利用する可能性のある画像サイズを追加できます。

横幅設定100%での取得方法

WordPressのサイト制作していると上記のように、アイキャッチ画像をいろいろ設置することがあります。
このブログサイトも同様にTOPページの記事一覧エリア、スライドで記事を表示するエリア、サイドナビのランキングエリア、関連記事エリアなどたくさんあります。

上記で紹介したように、各それぞれの画像サイズに設定をしておき、そのエリアのアイキャッチ画像を設置するときに設定した引数を記述するといった方法が一般的ですが私はめんどくさいと思っています。

また、切り抜き設定にしてしまうと画像が予期せぬ場所で切り取られるので見栄え的にも良くないですよね。

同じ記述で、全てが横幅100%で表示させることで使い分ける必要がないと考えました。

基本的に、アイキャッチ画像を取得すると『width』『height』が設定されるのでレスポンシブフルリキッドデザインに対応することができないです。

そのため、『width』は100%に設定し、『height』は設定しないというように取得したい。

そうすることで、アイキャッチ画像の比率を保ったまま可変することができます。是非参考にしてみてください。

まずアイキャッチ画像を貼り付け時の『width』『height』の自動挿入タグを削除させます。

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('post-thumbnails', array('width' => '100%', 'alt' => the_title_attribute('echo=0'))); ?>

これだけで横幅100%のアイキャッチ画像を取得出来るようになります。

『alt』には、記事のタイトルが入るように設定しています。

まとめ

私自身、画像に対してwidth設定やheight設定をするのが嫌なタイプでなんとかアイキャッチ画像にも100%設定ができないかと試行錯誤してました。

自らコードを書く人じゃないとこの気持はわからないかと思いますが、同じ気持ちの人がいれば参考にしてもらえればと思います。