WordPress Go Go

Size: px

Start display at page:

Download "WordPress Go Go"

みちしげみやまる
5 years ago
Views:

1 Custom Field Template の事例紹介不動産検索サイトの構築 WordCamp Kobe イーティーネット株式会社宮下裕章

2 WordPress Go Go

3 プラグイン販売サイト CMS WP

ビジネスに役立つプラグインネットショップ管理プラグインネットショップ EC サイト有料会員制サイトダウンロード販売サイトフロントエンドユーザー管理プラグイン会員制サイトメールマガジンニュースレタープラグイン配信ユーザーの絞り込み可能 Twitter ジョイントマネージャープラグイン Twitter と連携した画像投稿サイト CSV 投稿マネージャープラグイン CSV

4 ビジネスに役立つプラグインネットショップ管理プラグインネットショップ EC サイト有料会員制サイトダウンロード販売サイトフロントエンドユーザー管理プラグイン会員制サイトメールマガジンニュースレタープラグイン配信ユーザーの絞り込み可能 Twitter ジョイントマネージャープラグイン Twitter と連携した画像投稿サイト CSV 投稿マネージャープラグイン CSV ファイルで投稿ページ管理 What's New メーカープラグインサイトの更新情報最新情報の一覧 CMS 管理画面コントローラプラグイン WordPress の管理画面カスタマイズページウィジェット Ext プラグインウィジェット拡張カテゴリーウィジェット Ext プラグインウィジェット拡張カスタム投稿タイプ対応営業日カレンダープラグインイベントカレンダー CMSWP アップグレードプラグイン自動アップグレード対応プラグイン販売サイト CMS WP

5 Custom Field Template とは? カスタムフィールドの入力支援プラグイン 2008 年 8 月公開 WordPress の公式プラグインディレクトリで 20 万以上ダウンロード Highest Rated で 35 位 (16,163 中 ) 15 か国語に翻訳ちなみに Contact Form 7 は 5 位 (462 万 DL 51 か国語 ) マニュアルがなくて分かりにくいごめんなさい早く作ります

6 デフォルトでは名前と値のみテキストボックスチェックボックスラジオボックスセレクトボックステキストエリアファイルアップロード

7 テンプレートタイトルとコンテンツを最低限入力テンプレートはいくつでも設定可能 (#1 まで入力し保存すると #2 が出現 #2 まで入力すると #3 が出現 ) 該当のタイトルとコンテンツを空にして保存でテンプレートを削除投稿タイプカスタム投稿タイプ投稿 ID カテゴリー ID ページテンプレートファイル名など様々な条件で表示制限可能

8 テンプレートコンテンツの書式 php.ini と同じスタイル [keyname] type = text size = 10 label = キー [ 好きな果物 ] type = checkbox value = apple # orange # banana # grape valuelabel = りんご # オレンジ # バナナ # ぶどう default = orange # grape 基本の type は 6 つ text テキストボックス checkbox チェックボックス radio ラジオボックス select セレクトボックス textarea テキストエリア file ファイルアップロードオプションはオプションリストを見る

9 不動産検索サイトの構築

13 入力のポイント

14 カスタム投稿タイプ

15 JavaScript でプルダウン生成 JavaScript で Google Maps のジオコーディング

16 バリデーション jquery Validation plugin テンプレートのフィールドに class を追加するだけ必須 : class = required 数値 : class = number class = グローバル設定で jquery バリデーションを使用するを忘れずにチェックする

17 2 列表示 type = break を使用して ADMIN CSS で設定する [break1] type = break class = break 3 列表示 ADMIN CSS #cft.break { clear:both; } #cft.break dl { width:33%; float:left; }

18 出力のポイント

19 カスタムフィールドを出力する方法 [cft] ショートコードテーマの編集必要なし簡単に出力 WordPress の関数 get_post_meta() get_post_custom() テーマで自由にデータを出力

[cft] ショートコード特定のキーの値を出力 [cft key= zipcode ] 投稿 ID を指定 [cft key= zipcode post_id=35] 特定のテンプレートをまとめて出力 (output = true を指定したキーのみ ) [cft template=1] フォーマットを使用する ( おすすめ ) [cft format=0] file タイプの画像を簡単出力

20 [cft] ショートコード特定のキーの値を出力 [cft key= zipcode ] 投稿 ID を指定 [cft key= zipcode post_id=35] 特定のテンプレートをまとめて出力 (output = true を指定したキーのみ ) [cft template=1] フォーマットを使用する ( おすすめ ) [cft format=0] file タイプの画像を簡単出力 [cft key= photo" image_size="large"] [zipcode] type = text size = 10 label = 郵便番号 output = true <table class="cft"> <tbody> <tr> <th> 郵便番号 </th> <td>[zipcode]</td> </tr> <tr> <th> 住所 </th> <td>[address]</td> </tr> </tbody> </table>

21 WordPress の関数 get_post_meta() <?php $zipcode = get_post_meta($post_id, zipcode, true);?> $post_id データを取得したい投稿のID $key 取得したい値のキー名の文字列 $single true の場合は文字列 false の場合は配列 get_post_custom() <?php $custom_fields = get_post_custom($post_id);?> カスタムフィールドを配列でまとめて取得 <?php echo $custom_fields[ zipcode ][0];?> 詳しくは CODEX をチェック

22 おまけショートコードをテーマのテンプレートファイルから直接呼び出す方法 <?php echo do_shortcode('[cft format="0" post_id="'.get_the_id().'"]');?> Auto Hook of `the_content()` Custom Field Template のおまけ機能ショートコードを含め特定のコンテンツを簡単に読み込める

23 検索のポイント

25 検索フィールドの出力 [cftsearch] ショートコードを使用 format search_label button フォーマットID 検索ボタンのラベル false を指定するとボタンの自動出力なし例 [cftsearch format=1 search_label= 検索するよ ] 例 [cftsearch format=1 button=false] ボタンをフォーマットの中に追加する必要あり <input type= image src= image.jpg alt= 検索 />

26 [cftsearch] フォーマット 1 [cft] ショートコードと仕組みは同じ [pref] type = select value = 北海道 # 青森県 label = 都道府県 FORMAT #0 都道府県 :[pref] [cftsearch format=0]

[cftsearch] フォーマット 2 入力タイプと検索タイプが異なる場合 [rent] type = text size = 5 label = 賃料 searchtype = array('select', 'select'); searchvalue = array( 50000 # 100000 # 150000', '50000 #

27 [cftsearch] フォーマット 2 入力タイプと検索タイプが異なる場合 [rent] type = text size = 5 label = 賃料 searchtype = array('select', 'select'); searchvalue = array( # # ', '50000 # # '); searchoperator = array('>=', '<='); searchvaluelabel = array( 5 万円 # 10 万円 # 15 万円, 5 万円 # 10 万円 # 15 万円 '); FORMAT #0 賃料 : [rent][1] ~ [rent][2] [cftsearch format=0]

28 検索の追加フィールド投稿タイプを指定 <input type= hidden name= post_type value= wpre /> カテゴリーを指定 <input type= hidden name= cftcategory_in[] value= 3 /> キーで並び替え <input type= hidden name= orderby value= rent /> <input type= hidden name= order value= DESC /> 表示数を変更 <input type= hidden name= limit value= 25 />

30 カスタムフィールドの入力出力検索全部 Custom Field Template におまかせ

31 Custom Field Template で WordPress をもっと楽しく To be continued

32 ご静聴ありがとうございました! WordPress Go Go WordPress のプラグイン販売サイト

PowerPoint プレゼンテーション

PowerPoint プレゼンテーションショートコードの使い方 & 作り方 Copyright (C) 2011 co.,ltd. 本日のお題目 chapter 0 自己紹介 chapter 1 ショートコードって? chapter 2 ショートコードの活用例 chapter 3 ショートコードの仕組み chapter 4 つくってみよう chapter 5 実践的ショートコードの紹介 Copyright (C) 2011 co.,ltd.