カスタムフィールドを作成する

カスタムフィールドの作成には、”Custom Field Templateプラグイン”を使用します。
以下よりダウンロードして、サーバーにアップロードし、有効化しておいてください。
⇒ Custom Field Template
※今回、Custom Field Templateの使用方法に関する詳細は、割愛いたします。

Custom Field Templateでカスタムフィールドを作成する

補足

●テンプレートタイトル(“1″の箇所)
テンプレートタイトルを入力します。
例えば、”商品カタログ”等。

●投稿タイプ(“2″の箇所)
両方･･･投稿・固定ページ両方
投稿･･･投稿ページのみ
ページ･･･固定ページのみ
カスタム投稿タイプで使用したい場合は、”両方”を選択し、”3″の項目にポストタイプ名を入力してください。

●カスタムポストタイプ(“3″の箇所)
カスタム投稿タイプで使用したい場合は、ここにポストタイプ名を入力します。
カンマ区切りで複数のカスタム投稿タイプにも対応します。
※“カスタムポストタイプ(カンマ区切り)：”を押すと入力項目が表示されます。

●テンプレートコンテンツ(“4″の箇所)
投稿ページで表示させたいフィールドを入力します。
▼入力例
[画像1]
type=file
label = 画像をアップロードしてください(※この画像が一覧ページのサムネイル画像として表示されます)

[画像2]
type=file
label = 画像をアップロードしてください

[画像3]
type=file
label = 画像をアップロードしてください

今回は画像をアップロードしたいので、”type”にはfileを指定します。
[画像1]を一覧ページでサムネイル表示したいので、”label”には注意文を入れます。
“label”のテキスト部分には、HTMLも使用できますので、注意文を赤文字にしたら分りやすいですね。

カスタムフィールド経由で画像をアップロードした場合のイメージ

サムネイル画像の表示設定

一覧ページでは、”100px×100pxのサイズで中心部分をトリミング表示”します。
詳細ページでは、”150px×150pxのサイズで中心部分をトリミング表示”します。

中心部分をトリミング表示させるのは、はじめに説明したように｢クライアントさんが写真撮影時、写真の縦横比を意識して撮影してもらうのが難しい場合(縦向き・横向き関係なくアップロードしちゃうような場合)の対策｣です。
リサイズ表示・トリミング表示は、時と場合により変更すればよいですね。

functions.php

// サムネイル画像の表示設定
add_theme_support('post-thumbnails');
set_post_thumbnail_size(100, 100, true);
add_image_size('custom_size', 150, 150, true);

補足

2行目は、”サムネイル画像を使用します”という記述。

3行目は、”サムネイル画像を横幅100px、高さ100pxでトリミング表示”という記述。
※リサイズ表示させたい場合は、”true”を外します。
また、このサムネイル画像は、一覧ページで使用します。

4行目は、”サムネイル画像を横幅150px、高さ150pxでトリミング表示”という記述。
3行目は、”デフォルト設定されているサムネイルサイズ(管理画面で設定しているサムネイルサイズ)を使用しますが、”add_image_size”と記述することで、別のサムネイルサイズを追加できます。
この場合、表示サイズの前にハンドル(サムネイル画像のサイズ名)を追記します。
“custom_size”としました。
また、このサムネイル画像は、詳細ページで使用します。

サムネイル画像(WordPressでいうところのアイキャッチ画像)やカスタムサムネイルサイズに関しては、以下記事でも紹介していますので、一度ご参照ください。
⇒ ｢WordPressのアイキャッチ画像｣
⇒ ｢WordPressのFacebook用OGP出力テンプレート｣
※記事内容は違いますが、カスタムサムネイルサイズにも触れています。

テンプレートファイルへの出力

次に、functions.phpで設定したサムネイルサイズでテンプレートファイルに出力されるようにします。

テンプレートファイルに以下を記述

// 一覧ページ(category.php等)
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php echo wp_get_attachment_image(get_post_meta($post->ID, '画像1', true),'thumbnail'); ?></a>

// 詳細ページ(single.php等)
<?php if(get_post_meta($post->ID, '画像1', true)): ?><a href="<?php $Image = wp_get_attachment_image_src(get_post_meta($post->ID, '画像1', true), 'full'); echo $Image[0]; ?>" class="lightbox"><?php echo wp_get_attachment_image(get_post_meta($post->ID, '画像1', true),'custom_size'); ?></a><?php else : ?><?php endif; ?>
<?php if(get_post_meta($post->ID, '画像2', true)): ?><a href="<?php $Image = wp_get_attachment_image_src(get_post_meta($post->ID, '画像2', true), 'full'); echo $Image[0]; ?>" class="lightbox"><?php echo wp_get_attachment_image(get_post_meta($post->ID, '画像2', true),'custom_size'); ?></a><?php else : ?><?php endif; ?>
<?php if(get_post_meta($post->ID, '画像3', true)): ?><a href="<?php $Image = wp_get_attachment_image_src(get_post_meta($post->ID, '画像3', true), 'full'); echo $Image[0]; ?>" class="lightbox"><?php echo wp_get_attachment_image(get_post_meta($post->ID, '画像3', true),'custom_size'); ?></a><?php else : ?><?php endif; ?>

補足

●一覧ページ(category.php等)
aタグ部分は、画像をクリックすると詳細ページにリンクします。
<?php the_permalink(); ?>がパーマリンクのURLです。
<?php the_title_attribute(); ?>は、画像をアップロードした際に入力するテキストをtitle属性に使います。

画像の出力には”wp_get_attachment_image”を使用します。
“get_post_meta($post->ID, ‘画像1′, true),’thumbnail'”でカスタムフィールドを取得します。”true”はトリミング表示、”thumbnail”はサムネイルサイズを使用。

●詳細ページ(single.php等)
“<?php if(get_post_meta($post->ID, ‘画像1′, true)): ?>～<?php else : ?><?php endif; ?>”は条件文。”画像1″がアップロードされていたらその画像を表示し、アップロードされていなかったら何も表示しません(※“画像2″と”画像3″に関しても同じです)。

“wp_get_attachment_image_src”は画像のURLを取得します。
lightboxで表示させる画像のURLのことですね。
“full”は、lightboxで表示させる画像サイズをアップロードしたサイズで表示します。
“full”ではまずい場合、”large”等も設定可能です。
“large”を使用する場合、WordPressの管理画面のメディア設定で、画像サイズの大サイズを設定しておきましょう。
※fullと比べて、リサイズされる分どうしても画像はボケた感じになります。
“class=”lightbox””は、Lightboxに｢jQuery lightBox plugin｣を使用した場合の記述となります(2014.3.1追記：現在、jQuery lightBox pluginのダウンロードページはなくなっているようです)。

後は、一覧ページの時と同じように”wp_get_attachment_image”で画像を出力し、”get_post_meta($post->ID, ‘画像1′, true),’custom_size'”でカスタムフィールドを取得します。”true”はトリミング表示、”custom_size”はfunctions.phpで追加したサムネイルサイズを使用。

カスタムフィールドとサムネイル画像を組み合わせることで、よくある商品ページの｢一覧ページ｣や｢詳細ページ｣のCMS化ができます。例えば、以下のような感じのサイト。

サイトイメージ

↓

↓