WEBOPIXEL

WordPressのカテゴリーにカスタムフィールドを追加する

Posted: 2011.08.18 / Category: WordPress / Tag: ,

カテゴリーごとに独自の画像やテキストを表示させたい場合、テンプレートで条件分岐を使用すれば簡単ですが、それだとカテゴリーが増える度にテンプレートを編集しなくてはいけないので不便ですね。
ここではカテゴリー編集画面にカスタムフィールドを追加して、管理画面で画像や新たなテキストを追加できるようにしてみます。

Sponsored Link

この記事ではWordpress3.2を使用しています。

カテゴリー編集に項目を追加

さっそくですがカテゴリー編集画面に項目を追加してみましょう。
現在使用している「functions.php」に以下を追加します。

functions.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="extra_text">その他テキスト</label></th>
		<td><input type="text" name="Cat_meta[extra_text]" id="extra_text" size="25" value="<?php if(isset ( $cat_meta['extra_text'])) echo esc_html($cat_meta['extra_text']) ?>" /></td>
	</tr>
	<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
	}
	

項目を追加したい場合は「$cat_meta」の配列名を変更して追加してください。
これでカテゴリー編集画面を見ると下図のようになっているはずです。

カテゴリー編集に項目が追加された

メタデータの保存

項目を追加しただけでは保存されませんので、保存する処理を記述しましょう。
先ほど記述した「extra_category_fields」の下に追加します。

functions.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 );
	    }
	}
	

画像アップ用のjs&cssの読み込み

追加した項目がテキストフィールドだけなら必要ありませんが、今回は画像フィールドもあるので、その場でアップロードできるようにcssとjsを読み込みます。
まずは新しいjavascriptを作成します。

upload.js

	(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);
	

このjsファイルは「upload.js」として現在使用しているテーマの「js」フォルダに保存します。

次に「functions.php」に戻って下記を追加します。

functions.php

	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') .'/js/upload.js');
			wp_enqueue_script('my-upload');
		}
	}
	function my_admin_styles() {
		global $taxonomy;
		if( 'category' == $taxonomy ) {
			wp_enqueue_style('thickbox');
		}
	}
	

これで画像を追加の横のアイコンをクリックすると、いつもの画像を挿入するウィンドウが表示されます。

画像をアップロード画面

テンプレートファイルでの表示

入力したデータをテンプレートで表示してみます。
ここではリスト表示をしてみます。

	<ul class="clearfix">
	<?php
	$tag_all = get_terms("category", "fields=all");
	foreach($tag_all as $value):
	$cat_data = get_option('cat_'.intval($value->term_id));
	?>
	<li>
	<?php echo esc_html($value->name) ?>
	<img src="<?php echo esc_html($cat_data['img']) ?>" width="110" height="110" />
	<?php echo esc_html($cat_data['extra_text']) ?><br />
	</li>
	<?php endforeach; ?>
	</ul>
	

カテゴリーで追加したカスタムフィールドのデータは「wp_options」に保存されていますので、「term_id」でidを取得したら「get_option」で取得できます。

タグ編集画面にカスタムフィールドを追加

タグ編集にもカスタムフィールドを追加することはできます。
基本的にはアクションフックを下記に置き換えるだけです。

functions.php

	add_action ( 'edit_tag_form_fields', 'extra_tag_fields');
	

カスタム分類(タクソノミー)の場合は下記です。

	add_action ( '[タクソノミー名]_edit_form_fields', 'extra_taxonomy_fields');
	

[タクソノミー名]の部分は作成した名称に置き換えてください。

[ 参考サイト ]
WordPress Category Extra Fields
Using the WordPress Uploader in Your Plugin or Theme

COMMENTS

詠み人知らず 2011-08-18 11:30 

ちょっと思ったのですが、カテゴリーに付けられるということは、(カスタム)タクソノミーにつけることができるということでしょうか?

TK 2011-08-18 15:19 

MovableTypeではカテゴリー毎にカスタムフィールドを設定できますが、WordPressでは設定できないものと思っておりましたので、非常に参考になりました。

上記のようなことを「カスタム投稿タイプ」で実現することは可能でしょうか?

「タグ編集画面にカスタムフィールドを追加」する要領で、簡単に「edit_category_form_fields」を「edit_post_type_form_fields」等に変更してもできないようでしたので、ご質問させていただきました。

WordPress/PHP初心者ですが、アドバイス等頂けると助かります。

webOpixel 2011-08-18 22:38 

追記しましたが、カスタム分類(タクソノミー)の場合は下記のようにすればできると思います。
add_action ( ‘[タクソノミー名]_edit_form_fields’, ‘extra_taxonomy_fields’);

詠み人知らず 2011-08-19 00:08 

なるほど
ありがとうございます

Takeo 2012-04-26 02:13 

カテゴリーのタイトルを英語で表記し、カタカナ部分を追加したフィールドで表記したいと思っています。
(英語とカタカナの装飾を変えたいからです)

single_cat_titleの後に、extra_text を併記したいのですが、どのように書けばよいのか判りません。お手数ですが、ご教授いただければ幸いです。

Takeo 2012-04-26 02:16 

コードを書きましたが消えてしまいました。
archive.phpの中の

カテゴリーのタイトルを書く部分です。

webOpixel 2012-04-26 13:20 

「extra_text」だけなら保存されて表示することはできていますか?
「single_cat_title」が表示できないということですか?

Takeo 2012-04-26 20:32 

ありがとうございます。
Wordpress のカテゴリー編集画面には、「extra field」があり、保存もされているようです。
デフォルトの「single_cat_title」は表示されています。
「 」
のような感じで書き出したいのですが、上手く行きません。。。
文法が目茶目茶かと思います。すみません。。。

Takeo 2012-04-26 20:33 

コードがこちらに書かれませんでしたので、再度書かせていただきます。
「printf(__(‘%s’), single_cat_title(”, false));」「single_cat_title」はこのようにして書き出しています。

webOpixel 2012-04-27 17:17 

「archive.php」ページに表示したいということであれば下記でどうでしょうか。

$cat_data = get_option(‘cat_’.intval($cat));
echo esc_html($cat_data[‘extra_text’]);

Takeo 2012-04-27 22:09 

ありがとうございます。
実は、まだ表示できていないのですが(汗
私のPHPレベルの低さです。
もう少し粘ってから、ご返信させていただきます。

tah 2012-05-23 15:10 

初めまして、今こちらの記事で色々試させて頂いております。
現在の内容ではカテゴリーのカスタムフィールを値一覧をリスト表示していますが、
これを「個別表示」にはできますか?どうやっても登録したカテゴリーの全てが一覧で出てしまうので、
AのカテゴリーにはAの内容だけ、BのカテゴリにはBの内容だけを出せればいいな。と思っています。
もし何か方法あれば是非お願い致します。

webOpixel 2012-05-25 09:25 

↑のコメント欄の部分は参考になりませんか?

gadget 2012-06-11 16:35 

初めまして。
こちらの記事を参考にカテゴリに画像を追加できたのですが
カテゴリ名にリンクがどうしてもうまくいきません。
よろしければ教えて頂けますと助かります。

webOpixel 2012-06-12 15:21 

カテゴリーページにリンクしたいということでしょうか?
パーマリンクによって変更する必要があるかもしれませんがこれでどうでしょう。

<a href="/category/<?php echo esc_html($value->slug); ?>">
<?php echo esc_html($value->name) ?>
</a>

nyagonyago 2012-07-30 20:59 

はじめまして。
カテゴリー編集画面から画像を追加したいと思い記事を探してしたら辿り着きました。ありがとうございます。
カスタム分類でも実装したく、追記にありました、カスタム分類(タクソノミー)の方法で、管理画面にうまくフィールドが表示されたのですが、「画像を追加:」テキストの横にある★みたいな画像ボタンを押しても、tickboxがオープンされませんでした。
function.phpの記述に変更を加えないといけないでしょうか?

webOpixel 2012-08-01 08:55 

JS & CSS を追加している部分
if( ‘category’ == $taxonomy )

if(‘【カスタム分類名】’ == $taxonomy )
に変更してみてください。

ktshin1 2012-09-10 15:52 

とても参考になりました。ありがとうございます。
ただ、私の環境で実装してみたところ、「カテゴリーの編集」のときにしか項目が追加されませんでした。
そこで、いろいろ調べて、項目追加の際には「category_add_form_fields」、保存の際には「create_term」をadd_actionで追加することで、うまく反映されたのかな?と思っています。

add_action (‘edit_category_form_fields’,’extra_category_fields’);
add_action (‘category_add_form_fields’,’extra_category_fields’);

add_action ( ‘edited_term’, ‘save_extra_category_fileds’);
add_action ( ‘create_term’, ‘save_extra_category_fileds’);

この書き方でカテゴリー追加の際にも項目が追加できました、、が
書き方として、これでよいのか?等々教えていただければうれしいです。

webOpixel 2012-09-11 11:06 

そうです。新規追加にも表示するときは「category_add_form_fields」ですね。
あと、ちゃんとしたものを作る場合「delete_term」で削除時の処理も追加した方がいいかもしれません。

ktshin1 2012-09-11 17:13 

カテゴリの削除時に追加項目も連動して削除したり。。ということですね。
ありがとうございます。

amakko 2012-10-21 18:27 

はじめまして。
一点質問があるのですが、
タクソノミーページで使用しているのですが、
カスタム投稿のタクソノミー毎に、
表示させるにはどうすればよろしいでしょうか。
現在どのタクソノミーページにも、全てのタクソノミーに登録した内容が表示されます。
AのタクソノミーにはAの内容だけ、BののタクソノミーにはBの内容だけを表示させる方法がありましたら、教えていただけないでしょうか。
よろしくお願いいたします。

コードはこんな感じです・・。
<?php
$tag_all = get_terms("タクソノミー名", "fields=all");
foreach($tag_all as $value):
$cat_data = get_option(‘cat_’.intval($value->term_id));
?><?php echo esc_html($value->name) ?> <?php echo esc_html($cat_data[‘img1’]) ?>" />
<?php echo esc_html($cat_data[‘extra_text1’]) ?> <?php echo esc_html($cat_data[‘extra_ttl1’]) ?>
<?php endforeach; ?>

webOpixel 2012-10-30 11:31 

ちょっと質問がわかりずらく、答えになっているかわかりませんが、
所属している記事のカスタム分類を取得するには以下でできます。
get_the_terms($post->ID, ‘タクソノミー名’)

A-ko 2012-11-04 20:29 

こちらの、カテゴリーページのカスタマイズには感動しました!
カテゴリーページの管理画面にカスタムフィールドを作り、
新しいテキストや画像を追加することもできました。

ただ、他の方も質問されているように、こちらに載ってある『テンプレートファイルでの表示』では、
カテゴリの一覧がリストアップされて、それぞれのカテゴリの横にカスタムフィールドで入力したテキストが表示されます。

各カテゴリページ(category.php)の中に、それぞれのカテゴリページ管理画面のカスタムフィールドで入力したテキストが表示されるようにしたいのですが、category.phpにどういう風に記述したらいいのでしょうか。

今はcategory.php のコンテンツ部分は以下のようになっています。

*********************************************

*********************************************

ちなみに、現在はカテゴリ編集ページの『説明』の部分を

で表示させるようにしていて、そのほかに新しくオリジナルテキストや画像を表示させたいのです。

他の方の質問と似ていると思うのですが、お答えされているやり方がどうしてもうまくいかなくて。。。

よろしくお願いいたします。

A-ko 2012-11-04 20:33 

すみません。category.phpのソースを入力したのですが、表示されません(汗)。
カスタムフィールドで入力した新しいテキスト、画像をテンプレートにどう組み込むかを教えてください(涙)

webOpixel 2012-11-05 13:33 

基本的にget_optionにカテゴリーのIDを入れるだけなので、
category.phpの場合は「$cat」に変更すれば表示できると思います。

$cat_data = get_option(‘cat_’.intval($cat));
echo esc_html($cat_data[‘extra_text’]);

A-ko 2012-11-05 15:59 

ありがとうございます。
PHP初心者なので、ほんとに初歩的な質問かもしれませんが・・・

教えていただいたコードを 『category.php』 のコンテンツ部分に

このように記述したのですが、なにも表示されません。
カテゴリーページの編集画面のカスタムフィールドにはその他のテキストと画像を指定してあります。

上で説明しておられた、テンプレートファイルでの表示(リスト表示)のとおりに記述すると、ちゃんとリストは表示されるのですが。。。

A-ko 2012-11-05 16:01 

すみません。なぜかコードが表示されません。
教えていただいた2行を PHPのタグで囲んでいるのですが、ダメでしょうか。

<?php

webOpixel 2012-11-06 13:13 

すみません「‘cat_’.」の「‘」の部分が投稿すると変わってしまうみたいなので打ち直してください。

A-ko 2012-11-10 17:21 

できました!
あれこれやっているうちに出来ました!
カテゴリーページにテキストを入れられるようになって、SEOにも役立っています!本当にありがとうございました!

通りすがり 2012-12-13 18:10 

凄い!!ありがとうございます!!
散々漂流してやっと答えを見つけました!!

Toshi 2013-02-11 23:04 

プラグインなどを探しても見当たらず、途方に暮れていました。本当に助かりました。どうもありがとうございました!

yama 2013-11-03 01:21 

皆さんが書いていらっしゃるように本当にすばらしいカスタマイズだと思います。
画像についてなのですが、さまざまな局面でサムネイルを使い分けたいと思うのですが、the_post_thumbnail(‘medium’); のようにサムネイルサイズを指定して表示する書き方があれば、よろしくご教示お願いします。

webOpixel 2013-11-05 13:21 

サンプルはURLをのまま保存しているのですが、メディアIDを保存すればサムネイルなどで表示することもできます。
URLの取得は「upload.js」の部分を変更して頂ければできると思います。
(ゆくゆく新しいバージョンに対応したものに修正したいと思いますが、すぐにできそうにないのですみません)

IDについては下記が多少参考になるかもしれません。
http://www.webopixel.net/wordpress/779.html

yama 2013-11-06 15:55 

アドバイス、ありがとうございます。
早速URLを参考にいろいろといじくってみましたが、
自分にはちょっとハードルが高いみたいです(泣)
でもまあ気長にチャレンジしていこうと思います。
ありがとうございました。

amisan 2014-06-13 14:29 

こちらのサイトを参考にされたというサイト(http://wald-grun.biz/wp/4697/)を拝見して、カスタム分類の管理画面にカスタムフィールドを追加しました。管理画面での入力、保存はうまくいってるようなのですが、どうしても出力することが出来ず、すがる思いでコメントさせていただきました。とはいえ、結構時間が経過しているのでどうかとは思いつつ。

「category.php」に出力する際に貴殿のこの手段を使わせていただいたのですが、この時には、

term_id)); ?>

この2行を記載することで、カテゴリーに追加したカスタムフィールドのテキストを出力してくれました。しかし今回はカスタム分類に追加して、なおかつそれを固定ページで作成したページに出力したいのですが、その出力手段が全く思いつかず苦戦しております。

カスタム分類へカスタムフィールドを追加した際の、出力手段をご教授いただければ幸いです。

webOpixel 2014-06-24 11:11 

カスタム分類の場合「get_terms」で作成した分類名を指定すると取得できたのと思うのですが、その辺は大丈夫ですかね?

Jさん 2015-03-10 11:54 

通常のタグにカスタムフィールド(テキスト)を追加して、
タグページ(tag.php)毎にそのテキストを出力したいのですが、
function.php内に↓を追記して、

add_action ( ‘edit_tag_form_fields’, ‘extra_tag_fields’);

function extra_tag_fields( $tag ) {
$t_id = $tag->term_id;
$cat_meta = get_option( “cat_$t_id”);
?>

追加テキスト

<?php
}

add_action ( 'edited_term', 'save_extra_tag_fields');

function save_extra_tag_fields( $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 );
}
}

tag.php内に↓を記述したら出ますでしょうか?

よろしくお願いいたします。

アシベ 2015-12-17 14:46 

こんにちは、カスタムフィールドをどう使いするのかを検索していたらヒットしました。
記事内の説明で画像も扱い方も紹介されていましたが、PDFもカスタムフィールドとして追加することは可能なのでしょうか?

アシベ 2015-12-17 15:32 

連投ですみません。
記事の投稿・編集画面に独自のカスタムフィールドを追加したいと思い、
参考サイトを見ながらfunctions.phpにメタボックスや入力フィールドを追加しています。
参考サイトのコードを試しに入力してみて入力タイプがテキストは成功しましたが、
入力フィールドのタイプはテキストも可能ならばpdfや画像挿入用の種類をfileにして画像専用の入力フィールドを作成したいと考えています。
やっぱり普通にプラグインを利用したほうがいいのでしょうか?

アシベ 2015-12-17 16:09 

カスタムフィールドテンプレートのプラグインを利用したらうまく行きました。
連投ばかりしてすみませんでした。

Nobuo 2015-12-18 14:01 

分かりやすい記事を書いて頂いてありがとうございます。
一つ質問させてください。

タグやカテゴリーに設定したカスタムフィールドを更新する関数は存在しないのでしょうか?
投稿ページ、固定ページのカスタムフィールドは、update_post_metaで更新できるのですが。。

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。