を使って、ある企業サイトを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]
これでタバコの新規追加に下記の項目が追加されました。
タバコの入力項目が出来ました
早速タバコをいくつか登録してみましょう。登録が終わったら今度は表示です。
- タバコの詳細ページを作る
- 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 the_content(); ?>
[/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ページ
TOPページの解説
下記のように書きました。
[php]
< ?php $loop = new WP_Query( array( 'post_type' => ‘tabako’, ‘posts_per_page’ => 8 ) ); while ( $loop->have_posts() ) : $loop->the_post(); ?>
- “>< ?php echo wp_get_attachment_image(get_post_meta($post->ID,”画像”,true),’medium’); ?>
- < ?php the_title(); ?>
- < ?php echo get_post_meta($post->ID,”価格”,true); ?>円
< ?php endwhile; ?>
[/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>で囲っています。
最後に
このエントリーに記載されている「＜＞」「’ ’」「” ”」は全角だったりする場合があります…。
動かねーよコンニャロー！となったら全角になってないか見てみてくださいね。
