WordPressで「カスタム投稿」と「カスタムフィールドテンプレート」

を使って、ある企業サイトをWordpressで納品した時の、思い出備忘録エントリーです。

1.お知らせ情報を公開できるように。
2.会社のコンセプト等を公開できるように。
3.商品を公開できるように。

というご要望の案件でした。

1.は普通の投稿で。2.は固定ページで。3.をカスタム投稿とカスタムフィールドテンプレートを合わせて使ったのですが、この3.の備忘録です。

WordPressでタバコを商品として登録してみる

例で「タバコ」を商品として登録する流れを書きます。
なんでタバコかって言いますと、今くわえてるからです。はい。嫌煙家の方ごめんなさい…。

単にタバコと言っても

• 商品名
• 商品のちょっとした説明
• 箱の見た目（画像）
• 価格
• タールの数値
• ニコチンの数値
• メンソールかそうでないか
• 入っている本数

など、情報として公開したい”項目”がいろいろあります。

商品名は＜?php the_title(); ?＞で入力してもらって、商品のちょっとした説明は＜?php the_content(); ?＞で入力してもらって、その他はカスタムフィールドテンプレートで生成した項目から入力してもらいます。最終的に下記の図のような入力項目を作り、公開するのが目的です。

では、まず最初に「カスタム投稿」の用意をします。

カスタム投稿を用意する

プラグインは使わず、現在のテーマのfunction.phpに下記を書きました。（かなり簡単に…）
[php]
< ?php
add_action( 'init', 'create_post_type' );
function create_post_type() {
register_post_type( 'tabako',
array(
'labels' => array(
‘name’ => __( ‘タバコ’ ),
‘singular_name’ => __( ‘タバコ’ )
),
‘public’ => true,
‘has_archive’ => true,
‘menu_position’ => 100,
)
);
}
?>
[/php]

これで左メニューにタバコというリンクができます。

カスタム投稿についてもっと詳しく知りたい方は、他のブログですばらしいエントリーがたくさんあります！そちらをどうぞm( _　_ )m

プラグイン「カスタムフィールドテンプレート」

次にプラグイン「カスタムフィールドテンプレート」をインストールして、タバコの各情報を入力できる項目をつくります。インストール後、左メニューの設定内にあるカスタムフィールドテンプレートをクリックして入力項目をカスタマイズしていきます。

カスタムポストタイプ （カンマ区切り）:

ここにfunction.phpの4行目で書いたtabakoを書きます。

テンプレートコンテンツ:

下記を書きました。
[html]
[画像]
type=file

[価格]
label = 半角数字で入力してください
type = text
size = 40

[タールの数値]
type = text
size = 40

[ニコチンの数値]
type = text
size = 40

[メンソール?]
type=radio
value=メンソールじゃないです#メンソールです
default = メンソールじゃないです

[入っている本数]
type=radio
value=5本#10本#15本#20本#25本#30本
default = 20本
[/html]

これでタバコの新規追加に下記の項目が追加されました。

早速タバコをいくつか登録してみましょう。登録が終わったら今度は表示です。

1. タバコの詳細ページを作る
2. TOPページに新しく登録したタバコのコンテンツを作る

をやっていきます。

タバコの詳細ページを作る

single.phpと別にsingle-tabako.phpを作成し、そこで登録したタバコ情報を公開します。
それぞれの項目を表示するために下記を。
[php]
▼商品タイトル
< ?php the_title(); ?>

▼商品説明
< ?php the_content(); ?>

▼画像
< ?php echo wp_get_attachment_link(get_post_meta($post->ID,”画像”,true),’medium’); ?>

▼価格
< ?php echo get_post_meta($post->ID,”価格”,true); ?>

▼タールの数値
< ?php echo get_post_meta($post->ID,”タールの数値”,true); ?>

▼ニコチンの数値
< ?php echo get_post_meta($post->ID,”ニコチンの数値”,true); ?>

▼メンソール
< ?php echo get_post_meta($post->ID,”メンソール?”,true); ?>

▼入っている本数
< ?php echo get_post_meta($post->ID,”入っている本数”,true); ?>
[/php]
ｈｔｍｌとｃｓｓを少しだけゴネゴネして、このようにしました。

詳細ページの解説

下記のように書きました。
[php]

< ?php the_title(); ?>

< ?php echo wp_get_attachment_link(get_post_meta($post->ID,”画像”,true),’medium’); ?>

< ?php if(get_post_meta($post->ID,’メンソール?’,true) == ‘メンソールです’): ?>
/img/ill_mentol.jpg” />
< ?php endif; ?>

価格< ?php echo get_post_meta($post->ID,”価格”,true); ?>円

• タール　< ?php echo get_post_meta($post->ID,”タールの数値”,true); ?>mg
• ニコチン< ?php echo get_post_meta($post->ID,”ニコチンの数値”,true); ?>mg
• 本　数　< ?php echo get_post_meta($post->ID,”入っている本数”,true); ?>

[/php]

4行目で画像を表示しています。

<?php echo wp_get_attachment_link(get_post_meta($post->ID,”画像”,true),’medium’); ?>
で拡大リンク付の画像を表示しています。Wordpressの設定→メディア→画像のサイズの中サイズを表示したかったので、’medium’と書いてます。
サムネイルを出したい場合は’thumbnail’。大サイズを出したい場合は’large’で。

7～9行目で分岐文を書いています。

メンソール?の項目で、メンソールですにラジオのチェックが入ったら表示。と書いています。

TOPページに新しく登録したタバコを

次はTOPページの表示についてです。新しく登録したタバコを8件表示する。でいきたいと思います。完成画像は下記。

TOPページの解説

下記のように書きました。
[php]

[/php]

2行目からloop開始です。

‘post_type’ => ‘tabako’　でカスタム投稿「タバコ」を、
‘posts_per_page’ => 8　で8回ループするように。
今回カスタム投稿は「タバコ」だけしかありませんが、複数ある場合、たとえば「酒」もあるよっ！って時は、
[php]
< ?php
$loop = new WP_Query( array( 'post_type' => array(‘tabako’, ‘sake’), ‘posts_per_page’ => 8 ) );
while ( $loop->have_posts() ) : $loop->the_post();
?>
[/php]
こんな風に書けばおｋです。

4行目で画像を表示しています。

詳細ページの画像は拡大リンク付でしたが、今回は詳細ページに誘導したかったので、リンク無しで表示するように
<?php echo wp_get_attachment_image(get_post_meta($post->ID,”画像”,true),’medium’); ?>と書きました。画像だけを表示させて、<a href=”<?php the_permalink() ?>”> 画像 </a>で囲っています。

最後に

このエントリーに記載されている「＜＞」「’　’」「”　”」は全角だったりする場合があります…。
動かねーよコンニャロー！となったら全角になってないか見てみてくださいね。