アイキャッチを利用する[add_theme_support]

2016年6月22日

テーマを一から作成する 第11回目

 

アイキャッチ画像を表示できるようにします。アイキャッチの機能を有効にし、記事一覧ページなどで画像を表示させてみます。また記事にアイキャッチを設定しない場合は「No Image」画像を表示させるようにしました。

 

第10回目

ウィジェットを作成する[register_sidebar][dynamic_sidebar]

 

 

スポンサーリンク

 

 

functions.phpに下記コードを追記します。

 

 

add_theme_support(‘post-thumbnails’)でアイキャッチの機能を有効にしています。custom_theme_setup関数を定義してafter_setup_themeアクションフックのタイミングで呼び出すようにしています。

 

上記コードを追記すると、投稿の編集画面等にてアイキャッチ画像を設定する項目が表示されます。

 

アイキャッチ

 

画像を表示させるにはthe_post_thumbnailタグを利用します。

 

 

the_post_thumbnailタグには以下のパラメータがあります。

 

the_post_thumbnail(‘thumbnail’) //サムネイルのサイズ

the_post_thumbnail(‘medium’) //中サイズ

the_post_thumbnail(‘large’) //大サイズ

the_post_thumbnail(‘full’) //フルサイズ

the_post_thumbnail( array( 100, 100 ) ); //arrayでサイズを指定

 

それぞれのサイズは 設定>メディア のメディア設定画面にて変更することができます。

 

メディア設定

 

 

記事にアイキャッチ画像を設定しない場合もあります。その場合には下記画像を表示させるようにしました。テーマディレクトリ(/wp-content/themes/sample/以下)にimagesディレクトリを作成し、no-image.png画像をアップロードして下さい。

 

no-image.png

no-image

 

 

トップページ(index.php)を下記のように変更します。

 

index.php

 

13〜17行目
has_post_thumbnail関数でそれぞれの記事においてアイキャッチ画像が設定されているかを判定し、もし設定していない場合にはno-image.png画像を表示させています。

 

 

「PHP応用」の記事にだけアイキャッチを設定しています。

indexアイキャッチ

 

 

 

 

これまで(第1〜11回目)の解説を、まとめて整理したテーマファイルは以下のリンクからダウンロードできます。

 

ダウンロード

 

 

次回はカスタム投稿タイプの機能を追加します。

第12回目

カスタム投稿タイプを作成する[register_post_type]

 

 

参照ページ


 

WordPress
Codex日本語版

テンプレートタグ/the post thumbnail

関数リファレンス/add theme support 投稿サムネイル

関数リファレンス/has post thumbnail

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー