BLOG

ワードプレス[WordPress]にサムネイル(アイキャッチ画像)を設置する関数まとめ

ワードプレス[WORDPRESS]の標準機能にはアイキャッチ画像、いわゆるサムネイルを取得や表示する機能があります。
このアイキャッチ画像を取得や表示について待てめてみました。

ポイント

  • アイキャッチ画像(サムネイル)は投稿記事管理ページの右側に設定するフィールドが標準である

  • アイキャッチはサムネイル関数で表示または取得ができる

  • アイキャッチ画像の有無は「has_post_thumbnail()」で条件分岐ができる

アイキャッチやサムネイルって何?

アイキャッチは管理ページ(記事ページ)の右側に設定項目があります。
この項目を設定することによって、サムネイルや記事のヘッダー画像などに表示させることができます。

アイキャッチ画像はワードプレス記事(管理画面)の右側にある画像を設置するフィールドです。

ワードプレスのサムネイル関数

ワードプレスでアイキャッチ画像(サムネイル)を取得や表示をさせたい時には、ワードプレスの独自関数(ワードプレスで用意されているPHP関数)を使用します。
下の項目で紹介しているのでテーマ製作時やカスタマイズするときなどにご参考にして頂ければ嬉しいです。

基本的なサムネイル表示の関数「 the_post_thumbnail(); 」

the_post_thumbnailは記事のメインループ内で、サムネイルを表示しなさいという関数で下記のように記述します。

<?php the_post_thumbnail(); ?>

サムネイルがあるか無いか判断をさせる関数「has_post_thumbnail()」

has_post_thumbnail関数はサムネイルが設置されていれば「true」、設置されていなければ「false」と返ってきます。
この関数をIF文の条件に与えると下のように記述します。

<?php
//書き方1
if ( has_post_thumbnail() ) {
    the_post_thumbnail();

} else {
    echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/thumbnail-default.jpg" />';
}
?>
<?php
//書き方2
if ( has_post_thumbnail() ) :
    the_post_thumbnail();

else :
    echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/thumbnail-default.jpg" />';

endif;
?>

取得のみをしたい場合は「wp_get_attachment_image_src」関数で作成する

下のコードはサムネイル画像を取得する一例です。独自クラスや特殊な処理をさせたい時はワードプレス関数の「the」などを使用せず、取得してから表示させると良いでしょう。

<?php
//reset
$image_src	= array();
$img_url	= '';

if ( has_post_thumbnail() ) :
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'full' );//サムネイルの配列取得
$img_url = $image_src&#91;0&#93;;//URL取得
?>
<figure class="thumb"><img src="<?php echo $img_url; ?>" /></figure><!-- 画像表示 -->
<?php endif; ?>