メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

WordPress ver 4.4から、wp_termmetaというものが追加され、カテゴリ・タグ・タクソノミーそれぞれのタームにもカスタムフィールドが使える様になっています。

カテゴリごとに英語表記が必要だったり、イメージカラーを設定しなければならない場合などは、wp_termmetaを仕様すればそういったことが簡単に実装できるようになりました。

もうwp_optionに余計なデータを追加する必要はありません!

今回は、そんなwp_termmetaをプラグインなしで活用する方法をメモしていきます。

例として、タームを英語表記するための情報を追加していきます。

目次

    ターム新規追加時の入力エリアを追加

    まずはタームを新規追加する時の画面に独自フィールドを追加していきます。

    まずは概要から。function.phpに以下の様な記述をします。

    // ターム一覧ページの新規追加エリアに要素を追加する関数
    function add_term_fields() {
      //inputタグなどのhtmlを記述
    }
    //フック
    add_action( '{$taxonomy}_add_form_fields', 'add_term_fields');

    add_term_fieldsという関数を、{$taxonomy}_add_form_fieldsにフックさせます。

    {$taxonomy} には適用させたいタクソノミーのスラッグを記述してください。

    • カテゴリの場合は ‘category
    • タグの場合は ‘post_tag
    • カスタムタクソノミーの場合はそのスラッグを。

    *タグの ‘post_tag’ は ‘post_tags’ の書き間違いではないです。この辺が統一されてないのはWordPressのご愛嬌ということで。笑

    では、具体例を。

    例 : カテゴリ新規追加画面に英語表記用のテキストボックスを追加

    function add_term_fields() {
      $html_src = '<div class="form-field">'
                  .'<label for="term_eng">英語表記</label>'
                  .'<input type="text" name="term_eng" id="term_eng" value="" size="40">'
                  .'<p>カテゴリー名の英語表記を入力してください。</p>'
                 .'</div>';
      echo $html_src;
    }
    //フック
    add_action('category_add_form_fields', 'add_term_fields');

    divにつけている”form-field“というクラスや、inputsize属性の値はデフォルトで用意されている要素に合わせています

    「name属性」と「id」には両方”term_eng”と書いていますが、ここは分けても大丈夫です。また、後の処理で必要なのはname属性の方の”term_eng”になります。

    以下の様に要素が追加されます。

    上の例では、htmlソースとなる文字列を変数に繋げてからechoしていますが、ここはお好きなスタイルでどうぞ。

    ターム編集時の入力エリアを追加

    もう一つ、タームの編集画面にも独自フィールドを追加しておきましょう。

    まずは概要から。新規追加画面の時と流れはほぼ一緒です。

    // ターム一覧ページの編集画面に要素を追加する関数
    edit_term_fields( $tag ) {
      //すでに設定されている情報を取得
      $value = get_term_meta($tag->term_id, '登録したキー', 1);
    
      //inputタグなどのhtmlを記述
    }
    //フック
    add_action( '{$taxonomy}_edit_form_fields', 'edit_term_fields');

    edit_term_fieldsという関数を、{$taxonomy}_edit_form_fieldsにフックさせます。

    {$taxonomy}には先ほどと同様、適用させたいタクソノミーのスラッグを記述します。

    • カテゴリの場合は ‘category
    • タグの場合は ‘post_tag
    • カスタムタクソノミーの場合はそのスラッグを。

    新規追加画面では必要なかった処理がひとつ増えている点に注意してください。

    編集画面では、すでに設定済みの情報をinputなどのvalue属性にセットしなくてはなりません。

    そのため、wp_termmeta用に追加された関数 get_term_meta を使用します。カスタムフィールドではお馴染みの get_post_meta のターム版ですね。

    では、具体例を。

    例 : カテゴリ編集画面に英語表記用のテキストボックスを追加

    function edit_term_fields( $tag ) {
      // すでにtermmetaに値があれば取得
      $value = get_term_meta($tag->term_id, 'term_eng', 1);
      //htmlソース
      $html_src = '<tr class="form-field">'
                    .'<th><label for="term_eng">英語表記</label></th>'
                    .'<td>'
                     .'<input type="text" name="term_eng" id="term_eng" size="40" value="'.$value.'">'
                     .'<p class="description">カテゴリー名の英語表記を入力してください。</p>'
                    .'</td>'
                   .'</tr>';
      echo $html_src;
    }
    //フック
    add_action ( 'category_edit_form_fields', 'edit_term_fields');

    編集画面はtableタグにそれぞれの要素がセットされているので、htmlのソースはtrタグで追加します。

    こちらも、クラスやsize属性の値はデフォルトで用意されている要素に合わせています

    「name属性」などには、先ほどと同様 “term_eng“を記述しています。ここは新規追加画面のname属性値に合わせましょう。

    *別のname属性値でも実装できますが、保存処理などが面倒になるだけでメリットはありません。

    以下の様に要素が追加されます。

    入力内容の保存方法

    最後に、保存方法です。

    追加した入力エリアがpostされた時に、その情報をwp_termmetaに保存します。

    以下の様なコードを、function.phpに追記します。

    例 : 英語表記用の入力情報を保存する

    function save_terms( $term_id ) {
      if( array_key_exists('term_eng', $_POST) ) {
        update_term_meta( $term_id, 'term_eng', $_POST['term_eng']);
      }
    }
    add_action( 'create_term', 'save_terms' );  //新規追加用フック
    add_action( 'edit_terms', 'save_terms' );   //編集ページ用フック

    「term_eng」というキーがpostされていれば、update_term_meta という関数を使用してその値をwp_termmetaに保存します。

    update_post_meta のterm版ですね。

    今回の例である英語表記入力エリアのname属性は「term_eng」なので「term_eng」を検出していますが、この値は適宜変更してください。

    フック先は2つあります。2箇所に入力エリアを追加しているので、それぞれに対応して「新規追加ページ」での保存用と、「編集ページ」での保存用の2つです。

    フック先について

    また、フック先については「create_term」と「edit_terms」の2つを使用していますが、他に「created_term」と「edit_terms」でも構いません。

    他の情報が保存される前にフックするか、他の情報が保存された後にフックするかの違いです。

    //新規追加用フック
    create_term   //他が保存される前
    created_term  //他が保存された後
    
    //編集画面用フック
    edit_terms    //他が保存される前
    edited_terms  //他が保存された後
    - Thank you for reading this to the end. -

    コメントする

    CAPTCHA


    TOPへ Top