WordPressの便利なプラグイン②
前回はWordPressの便利なプラグイン①としてカスタム投稿を作るのに便利なCustom Post Type UIというプラグインをご紹介しました。
今回はこれまたど定番ですが、カスタムフィールドテンプレートのご紹介をしていきたいと思います。
こんなやつです。投稿のカスタマイズ方法としてすごく便利です。
ブログのようにタイトルと本文だけならカスタマイズな、必要はあまりないのですが、例えば…
製品の導入事例を詳しく見やすく紹介したい、決まったレイアウトに数枚の写真といくつかの文章を挿入したい、
などといった場合に大活躍するプラグインです。
このカスタムフィールドテンプレートは設定次第で幅広い案件に対応できます。
製品導入事例の場合
HPで製品導入事例を紹介したい場合に考えられる項目としては、
『製品名』、『導入日』、『お客様名』、『導入した経緯』、『導入した写真』かなと思います。
製品名はカテゴリー的な扱いにしたほうがいいと思うので投稿画面にはタイトルに『お客様名』、本文に『導入した経緯』をいれるとして、残りをカスタムフィールドテンプレートを利用し、カスタムフィールドを作ろうと思います。
Step.1 導入事例のカスタム投稿を用意
まずはCustom Post Type UIで『導入事例』というカスタム投稿を作りましょう。
Step.2 製品名のタクソノミーを用意
ブログでWordPressに関して記事を書いた場合、カテゴリーがブログ、タグがWordPressという関係のように、カテゴリーが導入事例というカスタム投稿、タグが製品名というタクソノミーとして扱っていきます。ですので製品名のタクソノミーをCustom Post Type UIで用意します。
Step.3 導入事例のカスタムフィールドを用意
Step.3にきてようやくカスタムフィールドテンプレートの登場です。
導入日など一つしか考えられない項目はこれでいいと思うのですが、文章よりも写真の方がわかりやすいので写真を1枚じゃなくて複数枚見せたい場合はその枚数分カスタムフィールドを用意する必要があります。
必ず3枚なら3つのカスタムフィールドを用意してあげればいいのですが、1枚しか写真を用意できなかった場合、3枚のせる前提のレイアウトだと2枚分は空白になってしまいます。
お客様が更新しやすいHPを!とした場合、1枚でも2枚でも10枚でも見せたいだけ写真を載せれてレイアウトも崩れないようにしてあげたいですよね。そこに予算があればの話ですが。
というわけで繰り返しフィールドを作ります。
Step.3.1 繰り返しフィールドを用意
繰り返しフィールド自体は簡単に作れます。
Step.4 カスタムフィールドを表示する
カスタムフィールドの値の取得は単純なのですが、画像を取得する場合はいくつか方法があります。
また、繰り返しフィールドの場合は1枚か複数枚かの条件分岐が必要になってきます。
今回の繰り返しフィールドはまだ簡単な方ですが、このHPのWORKSの個別ページではさらに複雑な繰り返しフィールドを作っているためだいぶ手間がかかっています。
この手間はWebデザイナーの仕事の領域を超えてる気もします。
しかし、コーディング出来るというならできなければいけないのか・・・謎は深まります。
Step.4.1 複雑な繰り返しフィールドを表示する
基本的には商品名、分類、価格という3つの繰り返しフィールドを作ったとします。
りんご、果物、100円
キャベツ、野菜、200円
スイカ、分類は・・・・わからないから空白！値段は400円
きゅうり、野菜、100円
よーしできたできた。ちゃんと表示されてるかな〜・・・あれ？
りんご、果物、100円
キャベツ、野菜、200円
スイカ、野菜、400円
きゅうり、空白、100円
となるか、エラーが吐き出されて表示されないのが定番です。
スイカは野菜でいいでしょという議論はおいといて、空欄があった場合でも対応できるようにしておきます。
ですので中身は増えますが空欄があった場合でもちゃんと表示されるようなコードを。
改めてコードを書くのが面倒なのでこのHPのWORKSの個別ページにつかっているコードで説明します。
誰が何に関わったかというクレジットの部分でカスタムフィールドテンプレートを使用しています。
name1はクライアント、ディレクション等の担当、
name2は名前、
urlはHPなどがあればname2にリンクとして埋め込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
[field0] type = fieldset_open legend = 詳細情報 multipul = true multipleButton = true [name1] type = select label = 担当 value = Client # Director # Illustration # Designer # Site construction # Photographer # Writer [name2] label = 会社名など type = text size = 35 [url] label = URL type = text size = 35 [field0] type = fieldset_close |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<ul> <?php $name1= post_custom('name1'); $name2= post_custom('name2'); $url= post_custom('url'); $field0 = post_custom('field0'); ?> <?php if ( !empty( $field0 ) ): ?> <li><?php if( $field0 == 1 ){ if( empty( $url )){ echo '<span>'.$name1.'</span>'; echo $name2; }else{ echo '<span>'.$name1.'</span>'; echo '<a href="'.$url.'" target="_blank">'.$name2.'</a>'; } }else{ global $wpdb; $query = "SELECT meta_id,post_id,meta_key,meta_value FROM $wpdb->postmeta WHERE post_id = $post->ID ORDER BY meta_id ASC"; $cf = $wpdb->get_results($query, ARRAY_A); $name1 = array(); $name2 = array(); $url = array(); foreach( $cf as $row ){ if( $row['meta_key'] == "name1" ){ array_push( $name1, $row['meta_value'] ); } if( $row['meta_key'] == "name2" ){ array_push( $name2, $row['meta_value'] ); } if( $row['meta_key'] == "url" ){ array_push( $url, $row['meta_value'] ); } } $field0 = count( $name2 ); for( $i = 0; $i < $field0; $i++ ){ if( empty( $url[$i] )){ echo '<span>'.$name1[$i].'</span>'; echo $name2[$i]; }else{ echo '<span>'.$name1[$i].'</span>'; echo '<a href="'.$url[$i].'" target="_blank">'.$name2[$i].'</a>'; } if( $i < $field0 -1 ){ echo '<li>'; } } } ?> <?php endif;?> </ul> |
Step.4.2 繰り返しフィールドで画像を表示する
画像だけを複数枚使いたいときなどが多いと思いますので、このHPのWORKSの個別ページでWebサイトの各ページのスクリーンショットを掲載するのにつかっているコードで説明します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php $size = 'full'; $images = post_custom('images'); if($images) { echo '<div>'; foreach($images as $var) { $postImg = wp_get_attachment_image_src($var, $size); list( $url, $w, $h) = $postImg; ?> <a href="<?php echo $url; ?>" rel="lightbox" data-rel="lightbox-gallery-works"><img src="<?php echo $url; ?>" ></a> <?php } echo '</div>'; ?> <?php } ?> |
画像がない場合はimgを囲んでいるdivも表示しないように分岐の中に仕込んであります。
rel=”lightbox”はライトボックスで画像を表示させるためのプラグインとの連動ですので不必要な場合は消してください。
data-rel=”lightbox-gallery-works”もライトボックスにギャラリー表示をさせるためなのでこちらも。
これでいろんな場合に応用がきくと思うので案件に応じてカスタマイズしてみてください。
まとめ
カスタムフィールドテンプレートを使うならCustom Post Type UIと組み合わせると便利！