wpカスタマイズ 2014-06-06

WordPressのアイキャッチ機能を有効化しページに表示・出力しよう

thumbnail

今回は、タイトル通りなのですが、WordPressのアイキャッチ機能を有効化してページに表示させたいと思います。
ブログなどでは、アイキャッチ画像があるかないかで全然イメージも違いますし記事のクリック率にも影響する大事な部分だとは思いますので、もしアイキャッチなんてしていないよ。ていう方はこの機会に有効化してみましょう。

現在有効化しているテーマによってアイキャッチ機能が有効になっているのかが変わってきます。
最近のテーマなんかではほとんどのテーマが最初から有効化してあると思います。
ただ、ご自身でテーマを作成する時は、デフォルトではアイキャッチ機能は【OFF】になっていますので、ご自身で有効化する必要があります。
登録したアイキャッチ画像をページに個別記事リンク付きで表示する手順もテーマをご自身でカスタマイズするときなんかに使えるとは思いますので、ご参考頂ければと思います。

アイキャッチ機能を有効化

まずは、WordPressのアイキャッチ機能を有効化していきたいと思います。
下記のコード(関数)をご自身のテーマ内にある【functions.php】に記載しましょう。
※すでに記載されているテーマなどをお使いの場合は、スルーして下さい。※

//アイキャッチ機能を有効化
add_theme_support( 'post-thumbnails' );
thumbnail

上記のコードでアイキャッチ機能が有効化されていること確認したいので【投稿(固定ページ)の作成・編集】画面のページを開きます。
そうしますと上記の画像のようにアイキャッチ画像の項目が表示されていれば【有効化】されています。
アイキャッチ画像の設定方法は、アイキャッチ画像の設定のリンクをクリックするとメディアライブラリやアップローダーなどが表示されますので、投稿に画像を挿入する方法と同じとなります。
ワードプレス 投稿画面にて記事内に画像を挿入・アップロード方法

アイキャッチ画像を出力

アイキャッチ画像の出力するテンプレートタグもテーマによっては、テンプレートタグが入って無かったり、出力するタグは入っているけどサイズを変えたい場合などは、ご自身でテーマ内に追加したりカスタマイズする必要があります。
なので、上記のアイキャッチ機能を有効化して画像を登録しても出力タグを挿入していない場合はどこにも表示はされませんのでご注意下さい。

基本的にアイキャッチを出力するテンプレートタグは、【ループ】の中で使います。
今回は、アイキャッチ画像が登録されているか調べ、登録されている場合はアイキャッチ画像を表示し登録されていない場合は、no-image.jpgという画像を表示するようにしたいと思います。

has_post_thumbnail

上記のような流れとなります。
今回、アイキャッチ画像が投稿に登録されているかを確認する為に【has_post_thumbnail()】という関数を利用します。
has_post_thumbnail()は、下記のように利用します。

<?php if(has_post_thumbnail()):?>
	//投稿にアイキャッチ画像が登録されていない場合の処理
<?php else:?>
	//投稿にアイキャッチ画像が登録されていない場合の処理
<?php endif;?>

次にアイキャッチ画像を出力する【the_post_thumbnail()】という関数を利用します。
サイズの指定なども色々とありますので下記コードをご参考下さい。

<?php the_post_thumbnail(); ?> // パラメータなし -> サムネイル

<?php the_post_thumbnail('thumbnail'); ?> // サムネイル (管理画面で設定したサイズ)
<?php the_post_thumbnail('medium'); ?> // 中サイズ (管理画面で設定したサイズ)
<?php the_post_thumbnail('large');  ?> // 大サイズ (管理画面で設定したサイズ)
<?php the_post_thumbnail('full'); ?> // フルサイズ (アップロードした画像の元サイズ)

<?php the_post_thumbnail( array(300,300) ); ?> //任意のサイズ()

【任意のサイズ】の場合200,150にした場合は、小さい方のサイズに合わせて正方形になる場合があります。
それでは、上記の関数を利用して個別記事へのリンク付きアイキャッチ画像の出力コードをループ内や個別記事ページに記載していきたいと思います。

<?php if(has_post_thumbnail()):?>
	<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
	<?php the_post_thumbnail('thumbnail');?>
	</a>
<?php else:?>
	<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
	<img src="<?php bloginfo('template_url');?>/img/no-image.jpg">
	</a>
<?php endif;?>

上記のコードでは、最初に投稿にアイキャッチ画像が登録されているか調べ登録されている場合は、アイキャッチ画像と個別記事リンクを出力しています
また、アイキャッチ画像が登録されていない場合はno-image.jpgと個別記事リンクを表示させています。(no-image.jpgがあるフォルダ名などはご自身のフォルダ名などに変更して下さい。)

上記の手順でwordpressのアイキャッチ画像の有効化と出力が完了となります。
また、アイキャッチ画像を有効化するコードは、【functions.php】に記載します。
アイキャッチ画像を出力するコードは、ページが表示されるファイルのループ内に記載します。(例 : index.php/single.php/archive.phpなど・・・)

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS timer

サクッと導入出来るjavascriptを使ったカウントダウンタイマー

NEXT photoshop-brush-circle

ファンタジー系みたいな魔法陣や様々なサークルを描けるphotoshop ブラシ