これから使おう！term metadataの使い方
TRANSCRIPT
これから使おう！Term Metadataの使い方
小川 果純
自己紹介
• 小川 果純（おがわ かすみ）
• WordPressエンジニア↓セールスエンジニア↓Webディレクター兼Webエンジニア ←いまここ
• カピバラとポテチとピザが好き
• Facebook: kasumi.ogawa.399
• https://minkapi.style/
突然ですが…
Term Metadata、知っていますか？
Term Metadata、使ったことありますか？
知らない、使ったことない方はぜひ、
今日から使ってみてください！
Term Metadataとは
Term Metadataとは
• WordPress4.4で実装された、投稿のメタ情報のカテゴリー版。
• termmetaというテーブルが追加。
• termmeta用の関数ももちろん追加。
『投稿のメタ情報のカテゴリー版』ということは、
投稿みたいに、こういうチェックボックスがあって…
こういうフィールドが出てくるはず！！
カスタムフィールドがない！？
Term Metadataとは
投稿のカスタムフィールドのように、
管理画面上でメタ情報の追加が行えない。
Term Metadataとは
投稿のカスタムフィールドのように、
管理画面上でメタ情報の追加が行えない。
↓
Term Metadataとは
投稿のカスタムフィールドのように、
管理画面上でメタ情報の追加が行えない。
↓
入力フィールドの用意や保存のプログラムなど、
１から実装する必要がある。
面倒！！！！
面倒！！！！＝誰も使ってくれない…
しかも
カテゴリーにカスタムフィールド追加できるプラグインもたくさん！
それでもせっかくの新機能。使ってもらいたいので、
利用するメリット
利用するメリット
とあるプラグインを例に挙げると、
カテゴリーにカスタムフィールドを追加した際にデータが保存され
るのは、termmetaテーブルではなくoptionsテーブル。
option_name
→[タクソノミー名]_[term_id]_[管理画面で指定するフィールドの名前]
利用するメリット
Term Metadata実装前にこういった機能を実現していたプラグイ
ンは以下の対応がほとんど。
• optionsテーブルに独自のoption_nameをつけて保存
• 独自テーブルを追加し、そこに保存
利用するメリット
• optionsテーブルに独自のoption_nameをつけて保存
×optionsテーブルが肥大化してしまう
×データの保存の仕方がプラグインの実装に依存してしまう
→他のプラグインに変えることが難しくなる
×配列で保存された場合に、
like検索でデータ取得しなくてはならなくなる
×optionsテーブルの本来の使い方ではない
利用するメリット
• optionsテーブルに独自のoption_nameをつけて保存
×optionsテーブルが肥大化してしまう
×データの保存の仕方がプラグインの実装に依存してしまう
→他のプラグインに変えることが難しくなる
×配列で保存された場合に、
like検索でデータ取得しなくてはならなくなる
×optionsテーブルの本来の使い方ではない
Term Metadataなら問題なし！！
利用するメリット
• 独自テーブルを追加し、そこに保存
×データの保存の仕方がプラグインの実装に依存してしまう
→他のプラグインに変えることが難しくなる
×Term Metadata実装により、termmetaテーブルと独自
テーブルの名前が被ってしまい、「そのプラグイン使ってたら
WordPressアップデートできない問題」が多発
利用するメリット
• 独自テーブルを追加し、そこに保存
×データの保存の仕方がプラグインの実装に依存してしまう
→他のプラグインに変えることが難しくなる
×Term Metadata実装により、termmetaテーブルと独自
テーブルの名前が被ってしまい、「そのプラグイン使ってたら
WordPressアップデートできない問題」が多発
Term Metadataなら問題なし！！
でも、実装方法がわからない…
管理画面の実装方法
管理画面の実装方法
1. 必要なメタ情報とメタキー名などを決める
2. カテゴリー新規追加画面に入力フィールド
3. カテゴリー編集画面に入力フィールド
4. 保存と削除のプログラム
5. ポイント
1. 必要なメタ情報とメタキー名などを決める
2. おすすめマークの表示・非表示メタキー：osusume_flag
1. カテゴリーのよみがなメタキー：term_kana
1. 必要なメタ情報とメタキー名などを決める
$meta_array = array('term_kana' => array(
'name' => 'よみがな','note' => 'よみがなを入力してください',
),'osusume_flag' => array(
'name' => 'おすすめマーク','note' => 'おすすめマークを表示する際は表示にチェックを入れてください‘,
),);
新規追加画面と編集画面、それぞれにフィールドを実装する必要があるので、フィールド名と注釈は連想配列で管理する。
1. 必要なメタ情報とメタキー名などを決めるfunction return_meta_array() {
$meta_array = array('term_kana' => array(
'name' => 'よみがな','note' => 'よみがなを入力してください',
),'osusume_flag' => array(
'name' => 'おすすめマーク','note' => 'おすすめマークを表示する際は表示にチェックを入れてください‘,
),);return $meta_array;
}
その配列を返す関数にしておく。
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()の処理を行い、エスケープする。
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にフックし、カテゴリー新規追加画面に入力フィールドを追加する。
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で分ける。
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>
2. カテゴリー新規追加画面に入力フィールド
一番下に追加される
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;
}
編集画面では、現在編集を行っているタームとタクソノミーの情報が引数として受け取れる。
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にフックし、カテゴリー編集画面に入力フィールドを追加する。
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()で現在保存されている値を取得する。
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要素で分ける。
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>
3. カテゴリー編集画面に入力フィールド
一番下に追加される
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' );
フィールドの配列をループで回して一気に処理する。
5. ポイント
1. nonceの実装は不要！→デフォルトのカテゴリー新規追加画面や編集画面に実装されているnonceと、同一のformタグに囲まれているため。
2. サニタイズ処理は不要！→それぞれの関数の中で、サニタイズやアンサニタイズ処理が行われている。
3. 適宜入力内容のチェックなどを実装しよう！
フロント画面の実装方法
<?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()で必要なものを取得して整形
フロント画面の実装方法
それでも確かに使いづらいところ…管理画面のカスタムフィールドは欲しいですね。
さいごに
$post->meta_key$user->meta_keyはあるのに、
$term->meta_keyはなかったので、
tracにチケット作ってみました！
これで更にTerm Metadata
が使われること間違いなし！
Term Metadataの今後に期待！
ぜひ使ってみてね！
ご清聴ありがとうございました
※今回紹介したコードはGithubにて公開しています。https://github.com/minkapi/wckansai2016_termmeta