【WordPress】管理画面でカテゴリ別画像を登録・サムネイルに設定【メディアアップロード追加方法】

// 見た目
function my_add_tax_upload_image($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 type="text" name="Cat_meta[img]" value="<?php if (isset($cat_meta['img'])) echo esc_html($cat_meta['img']) ?>" id="upload_image" />
            <input type="button" name="media-upload" value="画像をアップロード" id="js-media-btn" />
            <input type="button" name="media-clear" value="画像を削除" id="js-media-remove-btn" />
            <div id="thumbnail" class="form-field thumbnail">
                <img class="uploded-thumbnail" src="<?php if (isset($cat_meta['img'])) echo esc_html($cat_meta['img']) ?>" alt="選択中の画像">
            </div>
        </td>
    </tr>
<?php
}
add_action('edit_category_form_fields', 'my_add_tax_upload_image');



// 保存処理
function my_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('edited_term', 'my_save_extra_category_fileds');

// 画像アップのための処理
function my_admin_scripts() {
    global $taxonomy;
    if ('category' == $taxonomy) {
        wp_enqueue_media();
        wp_register_script('my-upload', get_template_directory_uri() . '/js/manage/myUpload.js');
        wp_enqueue_script('my-upload');
    }
}
add_action('admin_print_scripts', 'my_admin_scripts');

jQuery(document).ready(function ($) {
	var custom_uploader;
	/*##############################*/
	/* 画像選択ボタンがクリックされた場合の処理 */
	/*##############################*/
	$('#js-media-btn').click(function (e) {
		e.preventDefault();
		if (custom_uploader) {
			custom_uploader.open();
			return;
		}
		custom_uploader = wp.media({
			title: 'Choose Image',

			// ライブラリの一覧を画像のみにする
			library: {
				type: 'image',
			},

			button: {
				text: 'Choose Image',
			},

			// 複数選択：falseにすると画像を1つしか選択できない
			multiple: false,
		});
		custom_uploader.on('select', function () {
			var images = custom_uploader.state().get('selection');

			// file の中に選択された画像の各種情報が格納されている
			images.each(function (file) {
				// テキストフォームと表示されたサムネイル画像があればクリア
				$('#upload_image').val('');
				$('#thumbnail').empty();

				// テキストフォームに画像の url を表示
				// idを表示する場合は.val(file.id)
				$('#upload_image').val(file.attributes.sizes.full.url);

				// プレビュー用に選択されたサムネイル画像を表示;
				$('#thumbnail').append(
					'<img src="' + file.attributes.sizes.full.url + '" />'
				);
			});
		});
		custom_uploader.open();
	});
	/*##############################*/
	/* 削除がクリックされた場合の処理 */
	/*##############################*/
	$('#js-media-remove-btn').click(function () {
		e.preventDefault();
		e.stopPropagation();

		$('#upload_image').val('');
		$('#thumbnail').empty();
	});
});

// カラム設置
function add_tax_columns($columns) {
    $index = 4; // 追加位置

    return array_merge(
        array_slice($columns, 0, $index),
        // カラム名
        array(
            'id' => 'ID',
            'image' => '画像'
        ),
        array_slice($columns, $index)
    );
}
add_filter('manage_edit-category_columns', 'add_tax_columns');
add_filter('manage_edit-post_tag_columns', 'add_tax_columns');


// 表示設定
function add_taxonomy_custom_fields($content, $column_name, $term_id) {
    if ('id' === $column_name) {
        echo $term_id;
    }
    if ('image' === $column_name) {
        $cat_data = get_option('cat_' . intval($term_id));
        if ($cat_data) {
            echo '<img src="' . esc_html($cat_data['img']) . '" style="width: 50%;">';
        }
    }
}
add_action('manage_category_custom_column', 'add_taxonomy_custom_fields', 10, 3);
add_action('manage_post_tag_custom_column', 'add_taxonomy_custom_fields', 10, 3);

// ソートを可能にする
function sort_taxonomy_columns($columns) {
    $columns['id'] = 'ID';
    return $columns;
}
add_filter('manage_edit-category_sortable_columns', 'sort_taxonomy_columns');
add_filter('manage_edit-post_tag_sortable_columns', 'sort_taxonomy_columns');

// ~~ ループ途中 ~~

// カテゴリ情報取得
$cat = get_the_category($post->ID);
$cat = $cat[0];
$cat_data = get_option('cat_' . intval($cat->term_id)); // ★ここで画像取得

// 子カテゴリで画像がない場合は、親カテゴリの画像を取得する
if ($cat_data === false && $cat->parent != 0) {
  $parent_id = $cat->category_parent;
  $parent = get_category($parent_id);
  $cat_data = get_option('cat_' . intval($parent->term_id));
}

// サムネイルが登録されている場合は、サムネイルを表示
if (has_post_thumbnail()) {
  the_post_thumbnail($size);

// サムネイル登録なし＆カテゴリ画像ありの場合は、カテゴリ画像を表示
} elseif (!has_post_thumbnail() && $cat_data !== false) {
  echo '<img src="' . esc_html($cat_data['img']) . '">';

// それ以外は、デフォルト画像を表示
} else {
  echo '<img src="（デフォルト画像のパス）">';
};

// ~~ ループ続く ~~