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

29488b25081807806dc8826f2a41b714?s=47 ryuh_a
March 26, 2018

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

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

29488b25081807806dc8826f2a41b714?s=128

ryuh_a

March 26, 2018
Tweet

Transcript

  1. 第18回WordBench羽田 カスタムフィールドを活用しよう。 (補足追記版) Ryu

  2. 自己紹介 • ペットショップさくら 子犬の仲介販売サイトを運営しています。 http://pet-shop-sakura.com/ 動物取扱業登録 【販売】川崎市24幸販第1号 【保管】川崎市24幸保第1号 • 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. 使い方(登録方法1)

  9. 使い方(登録方法2)

  10. 使い方(登録方法3) 新規追加より 名前 : helloworld 値 : 任意の値(例えば、 WordPressの世界にようこそ!)

  11. 使い方(値取得方法) カスタームフィールドに登録した値を取得する方法は、以下のようなものがあります。 1. ショートコードによる取得 2. WordPressのテンプレートファイルを編集する get_post_meta($post_id, $key, $single); 3.

    プラグインを使用する 例):Advanced Custom Fields
  12. 使い方(値取得:ショートコード1) テーマ(※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. 使い方(値取得:ショートコード2) 投稿記事に以下のショートコードを追加して、公開すると、カスタムフィールドに登録 した値が表示されると思います。 [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. 使い方(値取得:テンプレートファイル編集1-1) カスタムフィールドに登録したURLを使いリンクボタンを追加する

  16. 使い方(値取得:テンプレートファイル編集1-2) <ブラウザで表示した場合>

  17. 使い方(値取得:テンプレートファイル編集1-3) < 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. 使い方(値取得:テンプレートファイル編集2-1) カスタムフィールドにフラグを登録してステータスを変更する場合

  19. 使い方(値取得:テンプレートファイル編集2-2) <ブラウザ表示>

  20. 使い方(値取得:テンプレートファイル編集2-3) < 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との連携1) カスタムフィールドの値をコンタクトフォームで使用する場合

  22. 使い方(Contact Form 7との連携2) コンタクトフォームの編集に以下のコードを登録します。 <p class="no-display">子犬ID番号<br /> [text* puppy-id default:post_meta]</p>

    ※HTMLタグの<p>タグは別のタグでも問題ありません。 上記の場合、CSSで非表示(display: none;)にしています。
  23. ご清聴ありがとうございました。 次回:WordPressのセキュリティー対策について考える おしまい