Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

これから使おう!Term metadataの使い方

824 views

Published on

WordCamp Kansai 2016で行ったセッションのスライドです。

Published in: Engineering
  • Be the first to comment

これから使おう!Term metadataの使い方

  1. 1. これから使おう! Term Metadataの使い方 小川 果純
  2. 2. 自己紹介 • 小川 果純(おがわ かすみ) • WordPressエンジニア ↓ セールスエンジニア ↓ Webディレクター兼Webエンジニア ←いまここ • カピバラとポテチとピザが好き • Facebook: kasumi.ogawa.399 • https://minkapi.style/
  3. 3. 突然ですが…
  4. 4. Term Metadata、 知っていますか?
  5. 5. Term Metadata、 使ったことありますか?
  6. 6. 知らない、使ったことない方はぜひ、
  7. 7. 今日から使ってみてください!
  8. 8. Term Metadataとは
  9. 9. Term Metadataとは • WordPress4.4で実装された、投稿のメタ情報のカテゴリー版。 • termmetaというテーブルが追加。 • termmeta用の関数ももちろん追加。
  10. 10. 『投稿のメタ情報のカテゴリー版』ということは、 投稿みたいに、こういうチェックボックスがあって…
  11. 11. こういうフィールドが出てくるはず!!
  12. 12. カスタムフィールドがない!?
  13. 13. Term Metadataとは 投稿のカスタムフィールドのように、 管理画面上でメタ情報の追加が行えない。
  14. 14. Term Metadataとは 投稿のカスタムフィールドのように、 管理画面上でメタ情報の追加が行えない。 ↓
  15. 15. Term Metadataとは 投稿のカスタムフィールドのように、 管理画面上でメタ情報の追加が行えない。 ↓ 入力フィールドの用意や保存のプログラムなど、 1から実装する必要がある。
  16. 16. 面倒!!!!
  17. 17. 面倒!!!! =誰も使ってくれない…
  18. 18. しかも
  19. 19. カテゴリーにカスタムフィールド 追加できるプラグインもたくさん!
  20. 20. それでもせっかくの新機能。 使ってもらいたいので、
  21. 21. 利用するメリット
  22. 22. 利用するメリット とあるプラグインを例に挙げると、 カテゴリーにカスタムフィールドを追加した際にデータが保存され るのは、termmetaテーブルではなくoptionsテーブル。 option_name →[タクソノミー名]_[term_id]_[管理画面で指定するフィールドの名前]
  23. 23. 利用するメリット Term Metadata実装前にこういった機能を実現していたプラグイ ンは以下の対応がほとんど。 • optionsテーブルに独自のoption_nameをつけて保存 • 独自テーブルを追加し、そこに保存
  24. 24. 利用するメリット • optionsテーブルに独自のoption_nameをつけて保存 ×optionsテーブルが肥大化してしまう ×データの保存の仕方がプラグインの実装に依存してしまう →他のプラグインに変えることが難しくなる ×配列で保存された場合に、 like検索でデータ取得しなくてはならなくなる ×optionsテーブルの本来の使い方ではない
  25. 25. 利用するメリット • optionsテーブルに独自のoption_nameをつけて保存 ×optionsテーブルが肥大化してしまう ×データの保存の仕方がプラグインの実装に依存してしまう →他のプラグインに変えることが難しくなる ×配列で保存された場合に、 like検索でデータ取得しなくてはならなくなる ×optionsテーブルの本来の使い方ではない Term Metadataなら 問題なし!!
  26. 26. 利用するメリット • 独自テーブルを追加し、そこに保存 ×データの保存の仕方がプラグインの実装に依存してしまう →他のプラグインに変えることが難しくなる ×Term Metadata実装により、termmetaテーブルと独自 テーブルの名前が被ってしまい、「そのプラグイン使ってたら WordPressアップデートできない問題」が多発
  27. 27. 利用するメリット • 独自テーブルを追加し、そこに保存 ×データの保存の仕方がプラグインの実装に依存してしまう →他のプラグインに変えることが難しくなる ×Term Metadata実装により、termmetaテーブルと独自 テーブルの名前が被ってしまい、「そのプラグイン使ってたら WordPressアップデートできない問題」が多発 Term Metadataなら 問題なし!!
  28. 28. でも、実装方法がわからない…
  29. 29. 管理画面の実装方法
  30. 30. 管理画面の実装方法 1. 必要なメタ情報とメタキー名などを決める 2. カテゴリー新規追加画面に入力フィールド 3. カテゴリー編集画面に入力フィールド 4. 保存と削除のプログラム 5. ポイント
  31. 31. 1. 必要なメタ情報とメタキー名などを決める 2. おすすめマークの表示・非表示 メタキー:osusume_flag 1. カテゴリーのよみがな メタキー:term_kana
  32. 32. 1. 必要なメタ情報とメタキー名などを決める $meta_array = array( 'term_kana' => array( 'name' => 'よみがな', 'note' => 'よみがなを入力してください', ), 'osusume_flag' => array( 'name' => 'おすすめマーク', 'note' => 'おすすめマークを表示する際は表示にチェックを入れてください‘, ), ); 新規追加画面と編集画面、 それぞれにフィールドを実装する必 要があるので、フィールド名と注釈は 連想配列で管理する。
  33. 33. 1. 必要なメタ情報とメタキー名などを決める function return_meta_array() { $meta_array = array( 'term_kana' => array( 'name' => 'よみがな', 'note' => 'よみがなを入力してください', ), 'osusume_flag' => array( 'name' => 'おすすめマーク', 'note' => 'おすすめマークを表示する際は表示にチェックを入れてください‘, ), ); return $meta_array; } その配列を返す関数にしておく。
  34. 34. 2. カテゴリー新規追加画面に入力フィールド function add_termmeta_form() { $meta_array = return_meta_array(); array_map( "esc_html", $meta_array ); $html = <<<EOM //よみがなのHTML //おすすめマークのHTML EOM; echo $html; } メタ情報配列を取得して、array_map() を使用して各要素にesc_html()の処 理を行い、エスケープする。
  35. 35. 2. カテゴリー新規追加画面に入力フィールド function add_termmeta_form() { $meta_array = return_meta_array(); array_map( "esc_html", $meta_array ); $html = <<<EOM //よみがなのHTML //おすすめマークのHTML EOM; echo $html; } add_action( 'category_add_form_fields', 'add_termmeta_form' ); category_add_form_fieldsにフックし、 カテゴリー新規追加画面に入力 フィールドを追加する。
  36. 36. 2. カテゴリー新規追加画面に入力フィールド //よみがなのHTML <div class="form-field term_kana-wrap"> <label for="term_kana">{$meta_array['term_kana']['name']}</label> <input name="term_kana" id="term_kana" type="text" value="" size="40"> <p>{$meta_array['term_kana']['note']}</p> </div> カテゴリー新規追加画面はそれぞれ の入力フィールドをdivで分ける。
  37. 37. 2. カテゴリー新規追加画面に入力フィールド //おすすめマークのHTML <div class="form-field osusume_flag-wrap"> <label for="osusume_flag">{$meta_array['osusume_flag']['name']}</label> <ul> <li><label><input type="radio" name="osusume_flag" value="0" checked>非表示</label></li> <li><label><input type="radio" name="osusume_flag" value="1">表示 </label></li> </ul> <p>{$meta_array['osusume_flag']['note']}</p> </div>
  38. 38. 2. カテゴリー新規追加画面に入力フィールド 一番下に追加される
  39. 39. 2. カテゴリー編集画面に入力フィールド function edit_termmeta_form( $tag, $taxonomy ) { $meta_array = return_meta_array(); array_map( "esc_html", $meta_array ); //現在保存されている値の取得 $html = <<<EOM //よみがなのHTML //おすすめマークのHTML EOM; echo $html; } 編集画面では、現在編集を行ってい るタームとタクソノミーの情報が引数 として受け取れる。
  40. 40. 2. カテゴリー編集画面に入力フィールド function edit_termmeta_form( $tag, $taxonomy ) { $meta_array = return_meta_array(); array_map( "esc_html", $meta_array ); //現在保存されている値の取得 $html = <<<EOM //よみがなのHTML //おすすめマークのHTML EOM; echo $html; } add_action( 'category_edit_form_fields', 'edit_termmeta_form', 10, 2 ); category_edit_form_fieldsにフックし、 カテゴリー編集画面に入力フィールド を追加する。
  41. 41. 2. カテゴリー編集画面に入力フィールド //現在保存されている値の取得 $term_kana_value = ''; $osusume_flag_value = ''; $term_kana_value = esc_attr( get_term_meta( $tag->term_id, 'term_kana', true ) ); $osusume_flag_value = esc_attr( get_term_meta( $tag->term_id, 'osusume_flag', true ) ); if ( $osusume_flag_value == 1 ) { $osusume_flag_1 = ' checked'; $osusume_flag_0 = ''; } elseif ( $osusume_flag_value == 0 ) { $osusume_flag_1 = ''; $osusume_flag_0 = ' checked'; } get_term_meta()で現在保存されてい る値を取得する。
  42. 42. 2. カテゴリー編集画面に入力フィールド //よみがなのHTML <tr class="form-field term_kana-wrap"> <th scope="row"><label for="term_kana">{$meta_array['term_kana']['name']}</label></th> <td> <input name="term_kana" id="term_kana" type="text" value="{$term_kana_value}" size="40"> <p class="description">{$meta_array['term_kana']['note']}</p> </td> </tr> カテゴリー編集画面はそれぞれの入 力フィールドをtable要素で分ける。
  43. 43. 2. カテゴリー編集画面に入力フィールド //おすすめマークのHTML <tr class="form-field osusume_flag-wrap"> <th scope="row">{$meta_array['osusume_flag']['name']}</th> <td> <ul> <li><label><input type="radio" name="osusume_flag" value="0"{$osusume_flag_0}>非表示</label></li> <li><label><input type="radio" name="osusume_flag" value="1"{$osusume_flag_1}>表示</label></li> </ul> <p class="description">{$meta_array['osusume_flag']['note']}</p> </td> </tr>
  44. 44. 3. カテゴリー編集画面に入力フィールド 一番下に追加される
  45. 45. 4. 保存と削除のプログラム function update_term_meta_array( $term_id ) { $meta_array = return_meta_array(); foreach ( $meta_array as $meta_key => $value ) { if ( ! isset( $_POST[$meta_key] ) || ! stripslashes_deep( $_POST[$meta_key] ) ) { delete_term_meta( $term_id, $meta_key, get_term_meta( $term_id, $meta_key, true ) ); } elseif ( ! get_term_meta( $term_id, $meta_key ) ) { add_term_meta( $term_id, $meta_key, stripslashes_deep( $_POST[$meta_key] ), true ); } elseif ( stripslashes_deep( $_POST[$meta_key] ) != get_term_meta( $term_id, $meta_key, true ) ) { update_term_meta( $term_id, $meta_key, stripslashes_deep( $_POST[$meta_key] ) ); } } } add_action( 'created_category', 'update_term_meta_array' ); add_action( 'edited_category', 'update_term_meta_array' ); フィールドの配列をループで回し て一気に処理する。
  46. 46. 5. ポイント 1. nonceの実装は不要! →デフォルトのカテゴリー新規追加画面や編集画面に実装されている nonceと、同一のformタグに囲まれているため。 2. サニタイズ処理は不要! →それぞれの関数の中で、サニタイズやアンサニタイズ処理が行われ ている。 3. 適宜入力内容のチェックなどを実装しよう!
  47. 47. フロント画面の実装方法
  48. 48. <?php $categories = get_categories(); ?> <ul> <?php foreach ($categories as $category) : $cat_name = esc_html( $category->cat_name ); $cat_link = esc_url( get_category_link( $category->term_id ) ); $cat_kana = esc_html( get_term_meta( $category->term_id, 'term_kana', true ) ); $cat_flg = get_term_meta( $category->term_id, 'osusume_flag', true ); if ( $cat_flg == 1 ) { $cat_class = ' class="osusume"'; } else { $cat_class = ''; } $html = '<li' . $cat_class . '><a href="' . $cat_link . '">'; $html .= '<ruby>'. $cat_name . '<rt>' . $cat_kana . '</rt></ruby>'; $html .= '</a></li>'; echo $html; endforeach; ?> </ul> フロント画面の実装方法 get_term_meta()で必要なものを取 得して整形
  49. 49. フロント画面の実装方法
  50. 50. それでも確かに使いづらいところ… 管理画面のカスタムフィールドは欲しいですね。
  51. 51. さいごに
  52. 52. $post->meta_key $user->meta_key はあるのに、
  53. 53. $term->meta_key はなかったので、
  54. 54. tracにチケット作ってみました!
  55. 55. これで更に Term Metadata が使われること間違いなし!
  56. 56. Term Metadataの今後に期待! ぜひ使ってみてね!
  57. 57. ご清聴ありがとうございました ※今回紹介したコードはGithubにて公開しています。 https://github.com/minkapi/wckansai2016_termmeta

×