WordBench埼玉でお話しさせていただいた、WordCampKansaiの再演です

1. これから使おう！
Term Metadataの使い方
小川 果純

2. 自己紹介
• 小川 果純（おがわ かすみ）
• WordPressエンジニア
↓
セールスエンジニア
↓
Webディレクター兼Webエンジニア ←いまここ
• カピバラとポテチとピザが好き
• Facebook: kasumi.ogawa.399
• https://minkapi.style/

4. 今日お話しすること

5. 今日お話しすること
 Term Metadataとは
 利用するメリット
 実装方法
• 管理画面の実装方法
• フロント画面の実装方法
 少しだけ4.6のregister_meta()のお話し

6. Term Metadataとは

7. Term Metadataとは
• WordPress4.4で実装された、投稿のメタ情報のカテゴリー版。
• termmetaというテーブルが追加。
• termmeta用の関数ももちろん追加。

9. 『投稿のメタ情報のカテゴリー版』ということは、
投稿みたいに、こういうチェックボックスがあって…

10. こういうフィールドが出てくるはず！！

12. カスタムフィールドがない！？

13. Term Metadataとは
投稿のカスタムフィールドのように、
管理画面上でメタ情報の追加が行えない。

14. Term Metadataとは
投稿のカスタムフィールドのように、
管理画面上でメタ情報の追加が行えない。
↓

15. Term Metadataとは
投稿のカスタムフィールドのように、
管理画面上でメタ情報の追加が行えない。
↓
入力フィールドの用意や保存のプログラムなど、
１から実装する必要がある。

16. 面倒！！！！

17. 面倒！！！！
＝誰も使ってくれない…

18. しかも

19. カテゴリーにカスタムフィールド
追加できるプラグインもたくさん！

20. それでもせっかくの新機能。
使ってもらいたいので、

21. 利用するメリット

22. 利用するメリット
とあるプラグインを例に挙げると、
カテゴリーにカスタムフィールドを追加した際にデータが保存され
るのは、termmetaテーブルではなくoptionsテーブル。
option_name
→[タクソノミー名]_[term_id]_[管理画面で指定するフィールドの名前]

23. 利用するメリット
Term Metadata実装前にこういった機能を実現していたプラグイ
ンは以下の対応がほとんど。
• optionsテーブルに独自のoption_nameをつけて保存
• 独自テーブルを追加し、そこに保存

24. 利用するメリット
• optionsテーブルに独自のoption_nameをつけて保存
×optionsテーブルが肥大化してしまう
×データの保存の仕方がプラグインの実装に依存してしまう
→他のプラグインに変えることが難しくなる
×配列で保存された場合に、
like検索でデータ取得しなくてはならなくなる
×optionsテーブルの本来の使い方ではない

25. 利用するメリット
• optionsテーブルに独自のoption_nameをつけて保存
×optionsテーブルが肥大化してしまう
×データの保存の仕方がプラグインの実装に依存してしまう
→他のプラグインに変えることが難しくなる
×配列で保存された場合に、
like検索でデータ取得しなくてはならなくなる
×optionsテーブルの本来の使い方ではない
Term Metadataなら
問題なし！！

26. 利用するメリット
• 独自テーブルを追加し、そこに保存
×データの保存の仕方がプラグインの実装に依存してしまう
→他のプラグインに変えることが難しくなる
×Term Metadata実装により、termmetaテーブルと独自
テーブルの名前が被ってしまい、「そのプラグイン使ってたら
WordPressアップデートできない問題」が多発

27. 利用するメリット
• 独自テーブルを追加し、そこに保存
×データの保存の仕方がプラグインの実装に依存してしまう
→他のプラグインに変えることが難しくなる
×Term Metadata実装により、termmetaテーブルと独自
テーブルの名前が被ってしまい、「そのプラグイン使ってたら
WordPressアップデートできない問題」が多発
Term Metadataなら
問題なし！！

28. でも、実装方法がわからない…

29. 実装方法

31. 管理画面の実装方法

32. 管理画面の実装方法
1. 必要なメタ情報とメタキー名などを決める
2. カテゴリー新規追加画面に入力フィールド
3. カテゴリー編集画面に入力フィールド
4. 保存と削除のプログラム
5. ポイント

33. 1. 必要なメタ情報とメタキー名などを決める
2. おすすめマークの表示・非表示
メタキー：osusume_flag
1. カテゴリーのよみがな
メタキー：term_kana

34. 1. 必要なメタ情報とメタキー名などを決める
$meta_array = array(
'term_kana' => array(
'name' => 'よみがな',
'note' => 'よみがなを入力してください',
),
'osusume_flag' => array(
'name' => 'おすすめマーク',
'note' => 'おすすめマークを表示する際は表示にチェックを入れてください‘,
),
);
新規追加画面と編集画面、
それぞれにフィールドを実装する必
要があるので、フィールド名と注釈は
連想配列で管理する。

35. 1. 必要なメタ情報とメタキー名などを決める
function return_meta_array() {
$meta_array = array(
'term_kana' => array(
'name' => 'よみがな',
'note' => 'よみがなを入力してください',
),
'osusume_flag' => array(
'name' => 'おすすめマーク',
'note' => 'おすすめマークを表示する際は表示にチェックを入れてください‘,
),
);
return $meta_array;
}
その配列を返す関数にしておく。

36. 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()の処
理を行い、エスケープする。

37. 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にフックし、
カテゴリー新規追加画面に入力
フィールドを追加する。

38. 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で分ける。

39. 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>

40. 2. カテゴリー新規追加画面に入力フィールド
一番下に追加される

41. 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;
}
編集画面では、現在編集を行ってい
るタームとタクソノミーの情報が引数
として受け取れる。

42. 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にフックし、
カテゴリー編集画面に入力フィールド
を追加する。

43. 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()で現在保存されてい
る値を取得する。

44. 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要素で分ける。

45. 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>

46. 3. カテゴリー編集画面に入力フィールド
一番下に追加される

47. 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' );
フィールドの配列をループで回し
て一気に処理する。

48. 5. ポイント
1. nonceの実装は不要！
→デフォルトのカテゴリー新規追加画面や編集画面に実装されている
nonceと、同一のformタグに囲まれているため。
2. サニタイズ処理は不要！
→それぞれの関数の中で、サニタイズやアンサニタイズ処理が行われ
ている。
→sanitize_meta()にあるフィルターにフックしよう！
3. 適宜入力内容のチェックなどを実装しよう！

49. フロント画面の実装方法

50. <?php $categories = get_categories(); ?>
<ul>
<?php foreach ( $categories as $category ) :
$cat_name = esc_html( $category->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()で必要なものを取
得して整形

51. フロント画面の実装方法

52. それでも確かに使いづらいところ…
管理画面のカスタムフィールドは欲しいですね。

53. 少しだけ…
4.6のregister_meta()のお話し

54. • WordPress4.6以前にもあったが、4.6で項目が追加された。
メタ情報を定義する関数。
• 他にもget_registered_metadata()などが追加。
• get_registered_metadata()などは、register_meta()で定義していないと使
えないようになっている。
register_meta()

55. ご清聴ありがとうございました