WordPressで「カスタム投稿」と「カスタムフィールドテンプレート」
を使って、ある企業サイトをWordpressで納品した時の、思い出備忘録エントリーです。
1.お知らせ情報を公開できるように。
2.会社のコンセプト等を公開できるように。
3.商品を公開できるように。
というご要望の案件でした。
1.は普通の投稿で。2.は固定ページで。3.をカスタム投稿とカスタムフィールドテンプレートを合わせて使ったのですが、この3.の備忘録です。
WordPressでタバコを商品として登録してみる
例で「タバコ」を商品として登録する流れを書きます。
なんでタバコかって言いますと、今くわえてるからです。はい。嫌煙家の方ごめんなさい…。
単にタバコと言っても
- 商品名
- 商品のちょっとした説明
- 箱の見た目（画像）
- 価格
- タールの数値
- ニコチンの数値
- メンソールかそうでないか
- 入っている本数
など、情報として公開したい”項目”がいろいろあります。
商品名は＜?php the_title(); ?＞で入力してもらって、商品のちょっとした説明は＜?php the_content(); ?＞で入力してもらって、その他はカスタムフィールドテンプレートで生成した項目から入力してもらいます。最終的に下記の図のような入力項目を作り、公開するのが目的です。
![Wordpressで商品登録[タバコ]](http://8works-web.com/wp/wp-content/uploads/2011/06/20110610_01.jpg "Wordpressで商品登録[タバコ]")
では、まず最初に「カスタム投稿」の用意をします。
カスタム投稿を用意する
プラグインは使わず、現在のテーマのfunction.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,
)
);
}
?>
これで左メニューにタバコというリンクができます。
カスタム投稿についてもっと詳しく知りたい方は、他のブログですばらしいエントリーがたくさんあります！そちらをどうぞm( _ _ )m
プラグイン「カスタムフィールドテンプレート」
次にプラグイン「カスタムフィールドテンプレート」をインストールして、タバコの各情報を入力できる項目をつくります。インストール後、左メニューの設定内にあるカスタムフィールドテンプレートをクリックして入力項目をカスタマイズしていきます。
カスタムポストタイプ （カンマ区切り）:
ここにfunction.phpの4行目で書いたtabakoを書きます。
テンプレートコンテンツ:
下記を書きました。
[画像] 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本
これでタバコの新規追加に下記の項目が追加されました。
早速タバコをいくつか登録してみましょう。登録が終わったら今度は表示です。
- タバコの詳細ページを作る
- TOPページに新しく登録したタバコのコンテンツを作る
をやっていきます。
タバコの詳細ページを作る
single.phpと別にsingle-tabako.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); ?>
ｈｔｍｌとｃｓｓを少しだけゴネゴネして、このようにしました。
詳細ページの解説
下記のように書きました。
<h2 id="title"><span><?php the_title(); ?></span></h2>
<div id="detail_header">
<div id="detail_header_left">
<p><?php echo wp_get_attachment_link(get_post_meta($post->ID,"画像",true),'medium'); ?></p>
</div>
<div id="detail_header_right">
<?php if(get_post_meta($post->ID,'メンソール?',true) == 'メンソールです'): ?>
<img src="<?php bloginfo('template_directory');?>/img/ill_mentol.jpg" />
<?php endif; ?>
<div id="status">
<div id="status_left">
<p>価格<span class="price f_40"><?php echo get_post_meta($post->ID,"価格",true); ?></span>円</p>
</div>
<div id="status_right">
<ul>
<li>タール <span><?php echo get_post_meta($post->ID,"タールの数値",true); ?>mg</span></li>
<li>ニコチン<span><?php echo get_post_meta($post->ID,"ニコチンの数値",true); ?>mg</span></li>
<li>本 数 <span><?php echo get_post_meta($post->ID,"入っている本数",true); ?></span></li>
</ul>
</div>
</div>
</div>
</div>
<div id="text"><?php the_content(); ?></div>
4行目で画像を表示しています。
<?php echo wp_get_attachment_link(get_post_meta($post->ID,”画像”,true),’medium’); ?>
で拡大リンク付の画像を表示しています。Wordpressの設定→メディア→画像のサイズの中サイズを表示したかったので、’medium’と書いてます。
サムネイルを出したい場合は’thumbnail’。大サイズを出したい場合は’large’で。
7～9行目で分岐文を書いています。
メンソール?の項目で、メンソールですにラジオのチェックが入ったら表示。と書いています。
TOPページに新しく登録したタバコを
次はTOPページの表示についてです。新しく登録したタバコを8件表示する。でいきたいと思います。完成画像は下記。
TOPページの解説
下記のように書きました。
<div id="item_loop"> <?php $loop = new WP_Query( array( 'post_type' => 'tabako', 'posts_per_page' => 8 ) ); while ( $loop->have_posts() ) : $loop->the_post(); ?> <ul> <li><a href="<?php the_permalink() ?>"><?php echo wp_get_attachment_image(get_post_meta($post->ID,"画像",true),'medium'); ?></a></li> <li><?php the_title(); ?></li> <li><span class="price f_15"><?php echo get_post_meta($post->ID,"価格",true); ?></span>円</li> </ul> <?php endwhile; ?> </div>
2行目からloop開始です。
‘post_type’ => ‘tabako’ でカスタム投稿「タバコ」を、
‘posts_per_page’ => 8 で8回ループするように。
今回カスタム投稿は「タバコ」だけしかありませんが、複数ある場合、たとえば「酒」もあるよっ！って時は、
<?php
$loop = new WP_Query( array( 'post_type' => array('tabako', 'sake'), 'posts_per_page' => 8 ) );
while ( $loop->have_posts() ) : $loop->the_post();
?>
こんな風に書けばおｋです。
4行目で画像を表示しています。
詳細ページの画像は拡大リンク付でしたが、今回は詳細ページに誘導したかったので、リンク無しで表示するように
<?php echo wp_get_attachment_image(get_post_meta($post->ID,”画像”,true),’medium’); ?>と書きました。画像だけを表示させて、<a href=”<?php the_permalink() ?>”> 画像 </a>で囲っています。
最後に
このエントリーに記載されている「＜＞」「’ ’」「” ”」は全角だったりする場合があります…。
動かねーよコンニャロー！となったら全角になってないか見てみてくださいね。
はじめまして。こんなにわかりやすいカスタム投稿とカスタムフィールドテンプレートの解説さがしていました。
両方の事が一気に理解できてとても感謝しています。
嬉しすぎて今日はもう仕事したくなくなりました。＾＾
やっとわかった。。。。涙
はじめまして。
仕事したくなくなる程、喜んで頂いてなによりです＾＾
画像が表示されなくて、いろいろ探してたどり着きました。
ID,”画像”,true),’medium’); ?> と入れると、
「添付ファイルが見つかりません」と表示されます。
画像はアップされているのですが、ページには表示されません。
どうやったらカスタムフィールドで画像が表示されるようになるのでしょうか？
教えていただければ大変助かります。
よろしくお願いいたします。
はじめまして。
画像が表示されないとのことですが、
画像以外の表示。例えばtextarea・check・radioは正常に動きましたでしょうか？
また画像は
[画像拡大リンクあり]
<?php echo wp_get_attachment_link(get_post_meta($post->ID,"画像",true),’medium’); ?>
[画像拡大リンクなし]
<?php echo wp_get_attachment_image(get_post_meta($post->ID,"画像",true),’medium’); ?>
では表示されませんでしたか？
PS.上のコードの「 ’ ’ 」は全角になっています。
はじめまして。
質問させていただきます。
ダッシュボードに出来上がった追加投稿から新規追加をしてみたのですが、
”カスタムフィールドテンプレート （プルダウン部分） 読込”
となってしまいます。このページの一番上のイメージのように、
フィールドのタイトルも変更したいのですが、
何が欠けてるのでしょう？
はじめまして。
エントリー本文に、この件を表記してませんでしたね…。；；
フィールドのタイトルを変更する手順は、
1.Wordpress 管理左メニュー「カスタムフィールドテンプレート」をクリック
2.ページ下部 グローバル設定内の「ボックスタイトルをテンプレートタイトルで置き換える場合」にチェック。
これでご希望の形になるかと思います。
余談ですが、この時の案件には無くてもいいボタンや入力枠は
できるだけ減らしたかったので、下記にもチェックを入れました。
・初期化ボタンの使用を禁止する場合:
└誤って押したらかわいそう。
・保存ボタンの使用を禁止する場合:
└保存ボタンは１つでいいので。
・デフォルトのカスタムフィールドの使用を禁止する場合:
└この時は必要ありませんでした。
・クイック編集の使用を禁止する場合:
└カスタムフィールドで作った項目は編集できない。
ご返信は以上です。
ご参考になれば幸いです。
ありがとうございます！解決しました！
よかったです！ご苦労様です！
[...] WordPressで「カスタム投稿」と「カスタムフィールドテンプレート」 [...]
質問させて下さい。
記事の詳細ページ内に表示する画像について
初期画像(no phot)を予め設定し、画像がアップロードされなければ初期画像を表示し
アップロードされた場合はその画像を有効にする。
という形をとりたいのですが、お知恵をお借りできないでしょうか。
宜しくお願いいたします。
こんばんは！
質問にお答えしますね。
この形をとるにはif文を書くのがいいかと思います。
if文の書き方はいろいろありますが、下記のように書くのはいかがでしょうか。
<?php if(get_post_meta($post->ID,'画像',true)): ?>
<!–画像が登録されたら表示–>
<?php echo wp_get_attachment_link(get_post_meta($post->ID,"画像",true),'medium'); ?>
<?php else : ?>
<!–画像が未登録なら表示–>
<img src="予め用意したNo photo画像のパスを。">
<?php endif; ?>
ありがとう御座いました。
出力できるようになりました。
ご協力感謝いたします。
よかったです。
いいサイトができるといいですね！
タバコやめようとおもってたのにー！！キィーッ
あっでも、ありがとうございました！
> タバコやめようとおもってたのにー！！キィーッ
あっ ごめんなさい＞＜;
当方も禁煙失敗組ですｗ
このエントリー。お役に立てれば幸いです。
PS.フォローありがとうございました！
[...] http://8works-web.com/2011/06/29/wordpress_register_post_type_custom_field_template/ [...]
[...] —– ◆WordPressで「カスタム投稿」と「カスタムフィールドテンプレート」 | 8works ◆WordPress 3.1 から使う、カスタムポストタイプの設定から表示までのまとめ …的なもの – We [...]
素晴らしい情報ありがとうございます。
とてもよく理解できました！
お役に立てて良かったです！
ほんとに役に立ちました！
神様！！
お役に立ててよかったです！
でも神様はやめてくださいｗ
[...] こちらの記事が詳しいです。 WordPressで「カスタム投稿」と「カスタムフィールドテンプレート」 Custom Post Type [...]
[...] こちらの記事が詳しいです。 WordPressで「カスタム投稿」と「カスタムフィールドテンプレート」 Custom Post Type [...]
とても分かりやすくて、助かりました。
しかし、1つだけ上手くいかないところが
singleページに表示は出来たのですが、ナビを付けても1ページ目しか表示されません。
‘seminar’, ‘posts_per_page’ => 1 ) ); while ( $loop->have_posts() ) : $loop->the_post(); ?>
//中略
プログラムが全く分からなくコピペだけなので、肝心な記述が入っていないのかもしれません。
お教えいただけますでしょうか?
> ナビを付けても1ページ目しか表示されません。
singleページにページング機能(次へ・前へのリンク)を表示させたい。
リンク自体は表示されるけど、リンクをクリックしても表示しない。（ページ移動しない）
という理解でよろしいでしょうか？
こんばんわ。
次のページのタイトル名・前のページのタイトル名のリンクは表示しました。
リンクをクリックするとURLが変わっているので次のページへ行っているよう？ですが、表示されるのは1ページ目のデータです。
本当は固定ページへナビを表示させたかったのですが、次へにリンクするとID2となってしまい「ページがありません」となってしまうので、singleページじゃないとダメなのかな？と思って付けてみました。
上手く表現できなくてすみません。
ご返事が遅れて申し訳ないです。
「次ページへ・前ページへ」を正常に動作させるために、
プラグインを利用されるのはどうでしょうか？
こちらでやってみて実際に動いたのでご紹介させてもらいますね。
プラグイン：WP-PageNavi
インストールして、使用中状態にしてから、
「次ページへ・前ページへ」を表示したい場所に
下記コードを書くと表示されますよ～
＜?php wp_pagenavi(); ?＞ （←＜＞は全角で書いています。）
初めまして、こんなに丁寧に書いていて大変助かりました。
これからも頑張って下さい。
ありがとうございます。
初めまして。
お役に立ててよかったです。
いいサイトになるといいですね！
koujiさんもがんばってください~