WordPressのカスタムフィールドは投稿画面に任意の入力項目をつくることが出来て便利ですよね。
実はカテゴリー追加や編集時の画面にも、カスタムフィールドを利用すれば新たな入力項目を追加することができます。
カテゴリー作成時により多くの情報を登録できれば、テーマファイルに書くカテゴリーごとの条件分岐も減らすことができそうです。
そんな便利な方法をwebOpixelさんがまとめてくれていましたのでご紹介します。
WordPressのカテゴリーにカスタムフィールドを追加する | webOpixel
実際に記事に掲載されているコードを見ていきたいと思います。
カテゴリー追加・編集画面にカスタムフィールドを追加
まずはfunctions.phpに次のコードを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <?php add_action ( 'edit_category_form_fields', 'extra_category_fields'); function extra_category_fields( $tag ) { $t_id = $tag->term_id; $cat_meta = get_option( "cat_$t_id" ); ?> <tr class="form-field"> <th><label for="upload_image">画像URL</label></th> <td> <input id="upload_image" type="text" size="36" name="Cat_meta[img]" value="<?php if(isset ( $cat_meta['img'])) echo esc_html($cat_meta['img']) ?>" /><br /> 画像を追加: <img src="images/media-button-other.gif" alt="画像を追加" id="upload_image_button" value="Upload Image" style="cursor:pointer;" /> </td> </tr> <?php } add_action ( 'edited_term', 'save_extra_category_fileds'); function save_extra_category_fileds( $term_id ) { if ( isset( $_POST['Cat_meta'] ) ) { $t_id = $term_id; $cat_meta = get_option( "cat_$t_id"); $cat_keys = array_keys($_POST['Cat_meta']); foreach ($cat_keys as $key){ if (isset($_POST['Cat_meta'][$key])){ $cat_meta[$key] = $_POST['Cat_meta'][$key]; } } update_option( "cat_$t_id", $cat_meta ); } } add_action('admin_print_scripts', 'my_admin_scripts'); add_action('admin_print_styles', 'my_admin_styles'); function my_admin_scripts() { global $taxonomy; if( 'category' == $taxonomy ) { wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); wp_register_script('my-upload', get_bloginfo('template_directory') .'/upload.jsへのパス'); wp_enqueue_script('my-upload'); } } function my_admin_styles() { global $taxonomy; if( 'category' == $taxonomy ) { wp_enqueue_style('thickbox'); } } |
これでカテゴリー追加・編集画面にカスタムフィールドが現れます。
extra_category_fields()でカテゴリー追加・編集画面にカスタムフィールドを表示させています。
入力した情報はsave_extra_category_fields()が保存するようにしてくれています。
my_admin_scripts()とmy_admin_styles()は画像アップロードのカスタムフィールドがJavaScriptやCSSと連携してちゃんと動くようにします。
というわけで画像アップロードのためのjQueryも追加しなければいけません。
次のコードのjsファイルをupload.jsとして作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | (function($) { $(function() { $('#upload_image_button').click(function() { formfield =$('#upload_image').attr('name'); tb_show('', 'media-upload.php?type=image&post_id=&TB_iframe=true'); return false; }); window.send_to_editor = function(html) { imgurl = $('img',html).attr('src'); $('#upload_image').val(imgurl); tb_remove(); } }); })(jQuery); |
登録したカテゴリー情報をWordPressサイトに表示する
入力したカテゴリー情報をテンプレートに表示させる場合は次のコードを参考にしてください。
1 2 3 4 5 6 7 8 9 | <?php $tag_all = get_terms("category", "fields=all"); foreach($tag_all as $value): $cat_data = get_option('cat_'.intval($value->term_id)); ?> <p><?php echo esc_html($value->name) ?></p> <p><img src="<?php echo esc_html($cat_data['img']) ?>" width="110" height="110" /></p> <p><?php echo esc_html($cat_data['extra_text']) ?></p> <?php endforeach; ?> |
カテゴリー名を表示させた後に、カテゴリーIDと紐付いたカテゴリー情報を拾って表示させています。
echoで表示する際に使用するesc_html()は、特殊記号などをエンティティ化してくれます。
タグ編集画面やカスタム分類（タクソノミー）編集画面にカスタムフィールドを追加する場合はアクションフックを次のように書き換えます。
1 2 3 4 | // タグ編集画面にカスタムフィールドを追加する場合 add_action ( 'edit_tag_form_fields', 'extra_tag_fields'); // カスタム分類（タクソノミー）編集画面にカスタムフィールドを追加する場合 add_action ( '[タクソノミー名]_edit_form_fields', 'extra_taxonomy_fields'); |
以上、WordPressでカテゴリーの入力項目を追加する方法でした。
カテゴリーにカスタムフィールドを追加するのはプラグインでも可能ですが、個人的にはこの方法がスマートで気に入っています。
簡単に任意の項目をいくつも増やせるので重宝しています。
参考記事
WordPressのカテゴリーにカスタムフィールドを追加する | webOpixel
ネットショップ、採用向けサイト、ランディングページなど、様々なホームページ制作に対応いたします。
