Cat Speak

札幌在住のWebデザイナー・コモモのブログ

ホーム > ウェブ制作Tips > WordPress > アイキャッチ画像を表示する

アイキャッチ画像を表示する

先日、5月14日のSaCSSにて、@ClaraKawaiさんのセッションで紹介のあったアイキャッチ画像の表示や投稿一覧のカスタマイズについて、当日はメモが追いつかなかったので忘れている部分もあると思いますが、自分なりに調べたこと等も含めてまとめています。

アイキャッチ画像を設定するには、functions.phpに下記を記述します。

functions.php

add_theme_support( 'post-thumbnails');

上記のように書くと、投稿・固定ページの新規追加画面どちらにも「アイキャッチ画像」の欄が表示されるようになります。

※下記のようにすると、投稿のみ、固定ページのみにだけ、有効にすることができます。

functions.php

add_theme_support( 'post-thumbnails', array( 'post' ) ); // 投稿のみ
add_theme_support( 'post-thumbnails', array( 'page' ) ); // 固定ページのみ

また、set_post_thumbnail_sizeで切り抜きサイズを指定することも可能です。

functions.php

add_theme_support( 'post-thumbnails');
set_post_thumbnail_size( 100, 100, true );

横100ピクセル、縦100ピクセルのサイズに切り抜きます。
3番目の引数にtrueとすると、画像を指定した大きさにリサイズしたとき、はみ出す部分はカットされます。何も指定しなければ、画像はカットされず、幅と高さにあうように縮小されます。

ループ内(loop.php等)で、サムネイルを表示したい箇所に、下記を記述します。

if (has_post_thumbnail()) {
 the_post_thumbnail();}

※デフォルトテーマのTwentyTenにも、新規投稿画面にアイキャッチ画像が追加できるようになっているので、どういう使われ方をしているのかなと思ったのですが、横940以上のアイキャッチ画像を追加した時には、その記事のカスタムヘッダーがアイキャッチ画像になるように設定されているようです。
MT Systems – WordPress 3.0 アイキャッチ画像とTwentyTenテーマ

※add_theme_supportは、カスタムヘッダーやカスタム背景なども指定することができるようですが、日本版のCodexでは、テーマで直接呼び出すべきではなく、add_custom_image_header()やadd_custom_background()を利用してください、となっていて、少し意味がわからないです。時間が出来たらもう少し調べてみたいです。

 


次に、投稿一覧にアイキャッチ画像を追加するには、manage_posts_columnsをフックします。

webOpixel – WordPress管理画面の投稿記事一覧をカスタマイズする」を参考にしています。

add_theme_support( 'post-thumbnails', array( 'post' ) );
set_post_thumbnail_size( 50, 50, true );

function manage_posts_columns($columns) {
 $columns['thumbnail'] = __('Thumbnail');
 return $columns;
}
function add_column($column_name, $post_id) {
 //アイキャッチ取得
 if ( 'thumbnail' == $column_name) {
 $thum = get_the_post_thumbnail($post_id, array(50,50), 'thumbnail');
 }
 //使用していない場合「なし」を表示
 if ( isset($thum) && $thum ) {
 echo $thum;
 } else {
 echo __('None');
 }
}
add_filter( 'manage_posts_columns', 'manage_posts_columns' );
add_action( 'manage_posts_custom_column', 'add_column', 10, 2 );

また、投稿一覧から不要な欄を削除するには、unsetとします。

function custom_columns($columns) {
 unset($columns['author']);
 return $columns;
}
add_filter( 'manage_posts_columns', 'custom_columns' );

デフォルトでは、以下の6つがセットされているようです。
$columns[‘title’] //タイトル
$columns[‘author’] //作成者
$columns[categories] //カテゴリー
$columns[tags] //タグ
$columns[comments] //コメント
$columns[date] //日付

3 Responses to “アイキャッチ画像を表示する”

  1. 美馬勝年 より:

    はじめまして、美馬と申します。
    来年は70歳になります。

    WordPress
    デザインワークブックで勉強させてもらっています。
    お陰様で、やっと勉強のコツがつかめたような気がします。

    勉強をしていて良いとこは沢山ありますが、急には書ききれません。実は、このページをたった今知ったからです。

    苦労話を一つ(決して悪意はありません)

    71ページです。

    (‘template_directory’) では、バナーが表示されませんでした。悪戦苦闘の末、(‘template_url’) を探し当てました。

    以降、このページにこんな事を書いては困るという事でしたら、言って下さい。

    その節は、こんな不躾なことはいたしません。

    おじゃまいたしました。

  2. コモモ komomo より:

    美馬さん。こんにちは。

    書籍のお買い上げありがとうございます。
    70歳での新たな挑戦!ぜひがんばってください!!

    さてご質問いただいた71ページのbloginfo(‘template_directory’)とbloginfo(‘template_url’)ですが、どちらも同じテーマディレクトリの絶対URLを出力するテンプレートタグなので、同じ結果になるはずなのです。

    本では、混乱をさけるために、表記を統一して、template_urlは使わず、template_directoryを使っています。

    template_urlでも問題ないのでそのままでもかまいませんが、結果は同じものが入るはずなので、気になるようでしたらもう一度お確かめいただけますか?

    どうぞよろしくお願いいたします。

コメントを残す

人気の記事