フリーランス WEBデザイナー 【キングサイト】
最近のウェブ制作技術
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目を追加する設定方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目を追加する設定方法
ホームページ制作簡単作成ツールWix(ウィックス)
WEB屋になる為の知識と技術
ホームページ制作簡単作成ツールWix(ウィックス)
WordPress(ワードプレス)で記事編集画面でカテゴリーを維持する方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)で記事編集画面でカテゴリーを維持する方法
 WordPress(ワードプレス)でカスタム投稿タイプ(タクソノミー)を利用して投稿記事に設定しているカテゴリーを表示させる時に、子カテゴリーのみを取得して表示する方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)でカスタム投稿タイプ(タクソノミー)を利用して投稿記事に設定しているカテゴリーを表示させる時に、子カテゴリーのみを取得して表示する方法
ウェブ制作カテゴリ
Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

WordPress(ワードプレス)でカテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法

10.02.17 03:08 | コメント(0)

カテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法

WordPress(ワードプレス)で記事の投稿にはカテゴリーを作成し、カテゴリーを設定できますが、初期段階ではカテゴリー名、スラッグ名、カテゴリー説明を入力することが出来ます。
記事カテゴリーの使い方によっては、カテゴリーにもっと別の情報を設定したり別の項目を追加したい場合もあります。
以前の記事でカテゴリーに項目の追加をする方法をご紹介いたしましたが、テキスト項目以外にも画像をアップロードする機能の追加も出来ます。

今回は「カテゴリー編集画面」に新しい項目と「画像アップロード機能」を追加する設定方法をご紹介したいと思います。

カテゴリー編集画面

カテゴリー編集画面

 1. functions.phpに項目を追加するコードを記載
 2. カテゴリー編集画面から追加した項目の確認
 3. functions.phpにデータの保存用コードを記載
 4. 画像アップロード用のupload.jsファイルを作成
 5. 作成したupload.jsファイルを読み込む
 6. 追加した項目の内容をWeb画面に表示

functions.phpに項目を追加するコードを記載

最初に管理画面のカテゴリー編集画面に項目を新しく追加する為には、「functions.php」ファイルに項目追加用のコードを追加します。
functions.php」ファイルに下記のコードを記載しましょう。
※例として「追加項目」と「画像URL」という2つの項目を新しく追加します。

【functionsコード】
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
}

カテゴリー編集画面から追加した項目の確認

functions.php」ファイルに項目追加のコードを追加した後、管理画面でカテゴリー編集画面を見ると新しく「追加項目」と「画像URL」というフィールドが追加されているのが確認できます。

カテゴリー編集画面

カテゴリー編集画面確認

functions.phpにデータの保存用コードを記載

「追加項目」というフィールドが追加された事が確認出来ましが、今の段階で項目を追加しただけだと入力されたデータは保存されません。
保存する処理行う為に「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 );
    }
}

画像アップロード用のupload.jsファイルを作成

次に、追加した項目がテキストフィールドだけなら必要ありませんが、今回は画像アップロード機能もあるので、画像がアップロード出来るようにjavascriptファイルを読み込みます。
新しく「upload.js」というファイルを作成します。 「upload.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);

作成したupload.jsファイルを読み込む

upload.js」ファイルをサーバーにアップロードしたら、次に「functions.php」ファイルに「upload.js」ファイルを読み込むコードを追記します。
functions.php」ファイルに下記のコードを記載しましょう。

【upload.jsファイルを読み込むコード】
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');
	}
}

追加した項目の内容をWeb画面に表示

最後に項目に入力があった場合、Webサイト側で表示させなくてはいけません。
Webサイト側で表示させたい箇所に下記の表示用のコードを追加しましょう。

【表示用コード(テキスト項目)】
<?php echo wpautop($cat_data['extra_text']); ?>

【表示用コード(画像項目)】
<img src="<?php echo esc_html($cat_data['img']) ?>" width="40" height="30" />

Web画面に表示

Web画面に表示

以上でWordPress(ワードプレス)でカテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法になります。
カテゴリ:WordPress(ワードプレス)構築と技術, カスタマイズ方法(WordPress), ブログツール【CMS】情報とWEBコンテンツ技術
  • このエントリーをはてなブックマークに追加
  • Facebookでコメントする

    コメントする

    おすすめの記事

    PAGE TOP