Soumettre la recherche
Mettre en ligne
これから使おう!Term metadataの使い方
•
Télécharger en tant que PPTX, PDF
•
4 j'aime
•
1,813 vues
Kasumi Ogawa
Suivre
WordCamp Kansai 2016で行ったセッションのスライドです。
Lire moins
Lire la suite
Ingénierie
Signaler
Partager
Signaler
Partager
1 sur 61
Télécharger maintenant
Recommandé
20120118 titanium
20120118 titanium
Hiroshi Oyamada
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query
Hidekazu Ishikawa
WordBeach @kurudrive
WordBeach @kurudrive
Hidekazu Ishikawa
Let’s make elastic cms together!
Let’s make elastic cms together!
Shinichi Takahashi
WordPress RESTful API & Amazon API Gateway - WordCamp Kansai 2016
WordPress RESTful API & Amazon API Gateway - WordCamp Kansai 2016
崇之 清水
Make the 3D Wapuu model and printing by the 3D printer.
Make the 3D Wapuu model and printing by the 3D printer.
Takeshi Kashihara
An example of how to make the accessibility ready theme
An example of how to make the accessibility ready theme
Takeshi Kashihara
Wapuu 5th - WordCamp Kansai 2016
Wapuu 5th - WordCamp Kansai 2016
kazuko kaneuchi
Recommandé
20120118 titanium
20120118 titanium
Hiroshi Oyamada
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query
Hidekazu Ishikawa
WordBeach @kurudrive
WordBeach @kurudrive
Hidekazu Ishikawa
Let’s make elastic cms together!
Let’s make elastic cms together!
Shinichi Takahashi
WordPress RESTful API & Amazon API Gateway - WordCamp Kansai 2016
WordPress RESTful API & Amazon API Gateway - WordCamp Kansai 2016
崇之 清水
Make the 3D Wapuu model and printing by the 3D printer.
Make the 3D Wapuu model and printing by the 3D printer.
Takeshi Kashihara
An example of how to make the accessibility ready theme
An example of how to make the accessibility ready theme
Takeshi Kashihara
Wapuu 5th - WordCamp Kansai 2016
Wapuu 5th - WordCamp Kansai 2016
kazuko kaneuchi
これから使おう!Term metadataの使い方 in WordBench Saitama
これから使おう!Term metadataの使い方 in WordBench Saitama
Kasumi Ogawa
ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門
muracchi
Inside Movable Type
Inside Movable Type
純生 野田
Movable Type カスタムフィールドのまとめ
Movable Type カスタムフィールドのまとめ
Yujiro Araki
Ec cubeの基礎からcms連携まで
Ec cubeの基礎からcms連携まで
Makoto Nishimura
コードビュー中心で開発するDreamweaverテンプレート
コードビュー中心で開発するDreamweaverテンプレート
Akira Maruyama
a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」
Seiko Kuchida
Movable TypeのWebアプリケーションフレームワークの基本
Movable TypeのWebアプリケーションフレームワークの基本
Hajime Fujimoto
カラーミーショップ「カスタマイズスクール第1期vol.1」
カラーミーショップ「カスタマイズスクール第1期vol.1」
ec-campus
第3回 Magento Cafe Plus モジュール開発入門
第3回 Magento Cafe Plus モジュール開発入門
Hirokazu Nishi
Wp html5
Wp html5
regret raym
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013
純生 野田
WordPressのテンプレートタグを理解する
WordPressのテンプレートタグを理解する
Yoshinori Kobayashi
XPages 開発 Tips 百連発
XPages 開発 Tips 百連発
Mitsuru Katoh
Apexコアデベロッパーセミナー070726 配布用
Apexコアデベロッパーセミナー070726 配布用
stomita
DW テンプレートをマスターして 楽々サイトメンテナンス
DW テンプレートをマスターして 楽々サイトメンテナンス
Akira Maruyama
2006 03 18_osc2006_x_cube_template
2006 03 18_osc2006_x_cube_template
Tom Hayakawa
WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法
regret raym
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
switch3000
Rpscala2011 0601
Rpscala2011 0601
Hajime Yanagawa
Contenu connexe
Similaire à これから使おう!Term metadataの使い方
これから使おう!Term metadataの使い方 in WordBench Saitama
これから使おう!Term metadataの使い方 in WordBench Saitama
Kasumi Ogawa
ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門
muracchi
Inside Movable Type
Inside Movable Type
純生 野田
Movable Type カスタムフィールドのまとめ
Movable Type カスタムフィールドのまとめ
Yujiro Araki
Ec cubeの基礎からcms連携まで
Ec cubeの基礎からcms連携まで
Makoto Nishimura
コードビュー中心で開発するDreamweaverテンプレート
コードビュー中心で開発するDreamweaverテンプレート
Akira Maruyama
a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」
Seiko Kuchida
Movable TypeのWebアプリケーションフレームワークの基本
Movable TypeのWebアプリケーションフレームワークの基本
Hajime Fujimoto
カラーミーショップ「カスタマイズスクール第1期vol.1」
カラーミーショップ「カスタマイズスクール第1期vol.1」
ec-campus
第3回 Magento Cafe Plus モジュール開発入門
第3回 Magento Cafe Plus モジュール開発入門
Hirokazu Nishi
Wp html5
Wp html5
regret raym
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013
純生 野田
WordPressのテンプレートタグを理解する
WordPressのテンプレートタグを理解する
Yoshinori Kobayashi
XPages 開発 Tips 百連発
XPages 開発 Tips 百連発
Mitsuru Katoh
Apexコアデベロッパーセミナー070726 配布用
Apexコアデベロッパーセミナー070726 配布用
stomita
DW テンプレートをマスターして 楽々サイトメンテナンス
DW テンプレートをマスターして 楽々サイトメンテナンス
Akira Maruyama
2006 03 18_osc2006_x_cube_template
2006 03 18_osc2006_x_cube_template
Tom Hayakawa
WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法
regret raym
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
switch3000
Rpscala2011 0601
Rpscala2011 0601
Hajime Yanagawa
Similaire à これから使おう!Term metadataの使い方
(20)
これから使おう!Term metadataの使い方 in WordBench Saitama
これから使おう!Term metadataの使い方 in WordBench Saitama
ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門
Inside Movable Type
Inside Movable Type
Movable Type カスタムフィールドのまとめ
Movable Type カスタムフィールドのまとめ
Ec cubeの基礎からcms連携まで
Ec cubeの基礎からcms連携まで
コードビュー中心で開発するDreamweaverテンプレート
コードビュー中心で開発するDreamweaverテンプレート
a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」
Movable TypeのWebアプリケーションフレームワークの基本
Movable TypeのWebアプリケーションフレームワークの基本
カラーミーショップ「カスタマイズスクール第1期vol.1」
カラーミーショップ「カスタマイズスクール第1期vol.1」
第3回 Magento Cafe Plus モジュール開発入門
第3回 Magento Cafe Plus モジュール開発入門
Wp html5
Wp html5
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013
WordPressのテンプレートタグを理解する
WordPressのテンプレートタグを理解する
XPages 開発 Tips 百連発
XPages 開発 Tips 百連発
Apexコアデベロッパーセミナー070726 配布用
Apexコアデベロッパーセミナー070726 配布用
DW テンプレートをマスターして 楽々サイトメンテナンス
DW テンプレートをマスターして 楽々サイトメンテナンス
2006 03 18_osc2006_x_cube_template
2006 03 18_osc2006_x_cube_template
WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
Rpscala2011 0601
Rpscala2011 0601
これから使おう!Term metadataの使い方
1.
これから使おう! Term Metadataの使い方 小川 果純
2.
自己紹介 • 小川 果純(おがわ
かすみ) • WordPressエンジニア ↓ セールスエンジニア ↓ Webディレクター兼Webエンジニア ←いまここ • カピバラとポテチとピザが好き • Facebook: kasumi.ogawa.399 • https://minkapi.style/
3.
4.
突然ですが…
5.
Term Metadata、 知っていますか?
6.
Term Metadata、 使ったことありますか?
7.
知らない、使ったことない方はぜひ、
8.
今日から使ってみてください!
9.
Term Metadataとは
10.
Term Metadataとは • WordPress4.4で実装された、投稿のメタ情報のカテゴリー版。 •
termmetaというテーブルが追加。 • termmeta用の関数ももちろん追加。
11.
12.
『投稿のメタ情報のカテゴリー版』ということは、 投稿みたいに、こういうチェックボックスがあって…
13.
こういうフィールドが出てくるはず!!
14.
15.
カスタムフィールドがない!?
16.
Term Metadataとは 投稿のカスタムフィールドのように、 管理画面上でメタ情報の追加が行えない。
17.
Term Metadataとは 投稿のカスタムフィールドのように、 管理画面上でメタ情報の追加が行えない。 ↓
18.
Term Metadataとは 投稿のカスタムフィールドのように、 管理画面上でメタ情報の追加が行えない。 ↓ 入力フィールドの用意や保存のプログラムなど、 1から実装する必要がある。
19.
面倒!!!!
20.
面倒!!!! =誰も使ってくれない…
21.
しかも
22.
カテゴリーにカスタムフィールド 追加できるプラグインもたくさん!
23.
それでもせっかくの新機能。 使ってもらいたいので、
24.
利用するメリット
25.
利用するメリット とあるプラグインを例に挙げると、 カテゴリーにカスタムフィールドを追加した際にデータが保存され るのは、termmetaテーブルではなくoptionsテーブル。 option_name →[タクソノミー名]_[term_id]_[管理画面で指定するフィールドの名前]
26.
利用するメリット Term Metadata実装前にこういった機能を実現していたプラグイ ンは以下の対応がほとんど。 • optionsテーブルに独自のoption_nameをつけて保存 •
独自テーブルを追加し、そこに保存
27.
利用するメリット • optionsテーブルに独自のoption_nameをつけて保存 ×optionsテーブルが肥大化してしまう ×データの保存の仕方がプラグインの実装に依存してしまう →他のプラグインに変えることが難しくなる ×配列で保存された場合に、 like検索でデータ取得しなくてはならなくなる ×optionsテーブルの本来の使い方ではない
28.
利用するメリット • optionsテーブルに独自のoption_nameをつけて保存 ×optionsテーブルが肥大化してしまう ×データの保存の仕方がプラグインの実装に依存してしまう →他のプラグインに変えることが難しくなる ×配列で保存された場合に、 like検索でデータ取得しなくてはならなくなる ×optionsテーブルの本来の使い方ではない Term Metadataなら 問題なし!!
29.
利用するメリット • 独自テーブルを追加し、そこに保存 ×データの保存の仕方がプラグインの実装に依存してしまう →他のプラグインに変えることが難しくなる ×Term Metadata実装により、termmetaテーブルと独自 テーブルの名前が被ってしまい、「そのプラグイン使ってたら WordPressアップデートできない問題」が多発
30.
利用するメリット • 独自テーブルを追加し、そこに保存 ×データの保存の仕方がプラグインの実装に依存してしまう →他のプラグインに変えることが難しくなる ×Term Metadata実装により、termmetaテーブルと独自 テーブルの名前が被ってしまい、「そのプラグイン使ってたら WordPressアップデートできない問題」が多発 Term
Metadataなら 問題なし!!
31.
でも、実装方法がわからない…
32.
管理画面の実装方法
33.
34.
管理画面の実装方法 1. 必要なメタ情報とメタキー名などを決める 2. カテゴリー新規追加画面に入力フィールド 3.
カテゴリー編集画面に入力フィールド 4. 保存と削除のプログラム 5. ポイント
35.
1. 必要なメタ情報とメタキー名などを決める 2. おすすめマークの表示・非表示 メタキー:osusume_flag 1.
カテゴリーのよみがな メタキー:term_kana
36.
1. 必要なメタ情報とメタキー名などを決める $meta_array =
array( 'term_kana' => array( 'name' => 'よみがな', 'note' => 'よみがなを入力してください', ), 'osusume_flag' => array( 'name' => 'おすすめマーク', 'note' => 'おすすめマークを表示する際は表示にチェックを入れてください‘, ), ); 新規追加画面と編集画面、 それぞれにフィールドを実装する必 要があるので、フィールド名と注釈は 連想配列で管理する。
37.
1. 必要なメタ情報とメタキー名などを決める function return_meta_array()
{ $meta_array = array( 'term_kana' => array( 'name' => 'よみがな', 'note' => 'よみがなを入力してください', ), 'osusume_flag' => array( 'name' => 'おすすめマーク', 'note' => 'おすすめマークを表示する際は表示にチェックを入れてください‘, ), ); return $meta_array; } その配列を返す関数にしておく。
38.
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()の処 理を行い、エスケープする。
39.
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にフックし、 カテゴリー新規追加画面に入力 フィールドを追加する。
40.
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で分ける。
41.
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>
42.
2. カテゴリー新規追加画面に入力フィールド 一番下に追加される
43.
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; } 編集画面では、現在編集を行ってい るタームとタクソノミーの情報が引数 として受け取れる。
44.
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にフックし、 カテゴリー編集画面に入力フィールド を追加する。
45.
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()で現在保存されてい る値を取得する。
46.
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要素で分ける。
47.
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>
48.
3. カテゴリー編集画面に入力フィールド 一番下に追加される
49.
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.
5. ポイント 1. nonceの実装は不要! →デフォルトのカテゴリー新規追加画面や編集画面に実装されている nonceと、同一のformタグに囲まれているため。 2.
サニタイズ処理は不要! →それぞれの関数の中で、サニタイズやアンサニタイズ処理が行われ ている。 3. 適宜入力内容のチェックなどを実装しよう!
51.
フロント画面の実装方法
52.
<?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()で必要なものを取 得して整形
53.
フロント画面の実装方法
54.
それでも確かに使いづらいところ… 管理画面のカスタムフィールドは欲しいですね。
55.
さいごに
56.
$post->meta_key $user->meta_key はあるのに、
57.
$term->meta_key はなかったので、
58.
tracにチケット作ってみました!
59.
これで更に Term Metadata が使われること間違いなし!
60.
Term Metadataの今後に期待! ぜひ使ってみてね!
61.
ご清聴ありがとうございました ※今回紹介したコードはGithubにて公開しています。 https://github.com/minkapi/wckansai2016_termmeta
Télécharger maintenant