More Related Content
Similar to これから使おう!Term metadataの使い方 in WordBench Saitama (20)
これから使おう!Term metadataの使い方 in WordBench Saitama
- 2. 自己紹介
• 小川 果純(おがわ かすみ)
• WordPressエンジニア
↓
セールスエンジニア
↓
Webディレクター兼Webエンジニア ←いまここ
• カピバラとポテチとピザが好き
• Facebook: kasumi.ogawa.399
• https://minkapi.style/
- 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;
}
その配列を返す関数にしておく。
- 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>
- 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>
- 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' );
フィールドの配列をループで回し
て一気に処理する。
- 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()で必要なものを取
得して整形