第18回WordBench羽田ーカスタムフィールドを活用しよう

LT資料
開催日：2018年3月25日

Transcript

1. 第18回WordBench羽田 カスタムフィールドを活用しよう。 （補足追記版） Ryu
2. 自己紹介 • ペットショップさくら 子犬の仲介販売サイトを運営しています。 http://pet-shop-sakura.com/ 動物取扱業登録 【販売】川崎市２４幸販第１号 【保管】川崎市２４幸保第１号 • 40代のおっさんです。
3. 得意分野・趣味など • ネットワーク系（IPルーティング、VPNなど） • 機械いじり（事務機器など） • 犬猫の飼育指導 • 一眼レフ（Canon EOS KISS X7i） • WordPress（勉強中） • Ruby on Rails（勉強を始めた超初心者） • ロードバイク
4. カスタムフィールドって何？ WordPress Codex 「カスタムフィールドの使い方」によると WordPress には、投稿者が投稿に「カスタムフィールド」を追加できる機能がありま す。この任意の情報は「メタデータ」と呼ばれており・・・ http://wpdocs.osdn.jp/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%95%E3% 82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E4%BD%BF%E3%81%84%E6%96% B9
5. つまり 任意の情報をメタデータとして、投稿に追加できる機能です。
6. 何に使えるの？ アイデア次第でいろいろなことに使えるかもしれません。 入力する場所が投稿記事と別れている為、記事を再編集するような場合（特に再編 集することがあらかじめわかっているような場合※1）に変更箇所を探す必要がなくな ります。 ※1：Example • ECサイトなどの商品のページで、ステータスが“販売中”→“売約済み”となるよう なもの • ユーザーに対して入力箇所を制限したいような場合
7. 例えば • サブループを使用して、複数の場所でデータを使用する • フラグをたてて、ステータスの変更をする • 固定ページ、投稿内で使用する • 他のプラグイン（Ex.Contact Form 7）と連携する ・・・・など
8. 使い方（登録方法１）
9. 使い方（登録方法２）
10. 使い方（登録方法３） 新規追加より 名前 ： helloworld 値 ： 任意の値（例えば、 WordPressの世界にようこそ！）
11. 使い方（値取得方法） カスタームフィールドに登録した値を取得する方法は、以下のようなものがあります。 1. ショートコードによる取得 2. WordPressのテンプレートファイルを編集する get_post_meta($post_id, $key, $single); 3. プラグインを使用する 例）：Advanced Custom Fields
12. 使い方（値取得：ショートコード１） テーマ（※1）functions.phpに以下のようなショートコードを記述する。 function getHelloworld(){ $helloworld = esc_html( get_post_meta( get_the_ID(), ‘helloworld', true ) ); return $helloworld; } add_shortcode('viewHelloworld', 'getHelloworld'); ※1 functions.phpはテーマを更新すると上書きされますので、子テーマを作成するな ど対策が必要です。
13. 使い方（値取得：ショートコード２） 投稿記事に以下のショートコードを追加して、公開すると、カスタムフィールドに登録 した値が表示されると思います。 [viewHelloworld]
14. 使い方（値取得：テンプレートファイル編集） テンプレートファイル内でカスタムフィールドの値を取得する場合、以下の関数を利用 します。 get_post_meta($post_id, $key, $single); ※ループ内で使用すること ※詳細はWordPress Codex 日本語版をご参照ください。 http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3% 83%AC%E3%83%B3%E3%82%B9/get_post_meta
15. 使い方（値取得：テンプレートファイル編集１-１） カスタムフィールドに登録したURLを使いリンクボタンを追加する
16. 使い方（値取得：テンプレートファイル編集１-２） ＜ブラウザで表示した場合＞
17. 使い方（値取得：テンプレートファイル編集１-３） ＜ Source code ＞ <?php // IFでカスタムフィールドに値が入っている場合のみHTMLタグを追加 if( get_post_meta( $post->ID, 'puppy-db-url', true ) ): ?> <!-- 追加するボタン（リンク）のHTMLタグ --> <div class="puppy-db-link"><a href="<?php echo esc_url( get_post_meta( $post->ID, 'puppy-db-url', true ) ); ?>" title="<?php the_title(); ?>" target="_blank">詳細・お問合せはこちら</a></div> <?php // IFここまで endif; ?>
18. 使い方（値取得：テンプレートファイル編集２-１） カスタムフィールドにフラグを登録してステータスを変更する場合
19. 使い方（値取得：テンプレートファイル編集２-２） ＜ブラウザ表示＞
20. 使い方（値取得：テンプレートファイル編集２-３） ＜ Source code ＞ <!-- IF文：値が”1”ではない場合 --> <?php if( !get_post_meta( $post->ID, 'selling-state', true ) == '1' ): ?> <!-- 追加されるHTMLタグ --> <div class="puppy-info-sale"><?php echo esc_html( 'オーナー様募集中' ); ?></div> <!-- 値が”1”の場合 --> <?php else: ?> <!-- 追加されるHTMLタグ --> <div class="puppy-info-sold-out"><?php echo esc_html( 'オーナー様決定しました。' ); ?></div> <?php endif; ?>
21. 使い方（Contact Form 7との連携１） カスタムフィールドの値をコンタクトフォームで使用する場合
22. 使い方（Contact Form 7との連携２） コンタクトフォームの編集に以下のコードを登録します。 <p class="no-display">子犬ID番号<br /> [text* puppy-id default:post_meta]</p> ※HTMLタグの<p>タグは別のタグでも問題ありません。 上記の場合、CSSで非表示（display: none;）にしています。
23. ご清聴ありがとうございました。 次回：WordPressのセキュリティー対策について考える おしまい