WordPressでプラグイン無しでカテゴリー設定画面にサムネイル画像の項目を追加する方法。
function.phpに以下のコードを追加
カテゴリー新規登録と編集画面に画像追加用のテキストエリアが表示されるようになる。
// カテゴリー一覧ページの新規追加エリアに要素を追加するフック
add_action( 'category_add_form_fields', 'my_category_add_form_fields' );
function my_category_add_form_fields( $taxonomy ) {
?>
<div class="form-field form-required term-image-wrap">
<label for="category-image">画像(URL)</label>
<input name="category-image" id="category-image" type="text" value="" size="40" aria-required="true"/>
<p>サムネイル用の画像を設定します。※写真は縦横比1:1になるようにしてください</p>
<input type="button" name="image_select" value="選択" />
<input type="button" name="image_clear" value="クリア" />
<div id="image_thumbnail" class="uploded-thumbnail">
</div>
</div>
<script type="text/javascript">
(function ($) {
var custom_uploader;
// ①選択ボタンを押した時の処理
$("input:button[name=image_select]").click(function(e) {
e.preventDefault();
if (custom_uploader) {
custom_uploader.open();
return;
}
custom_uploader = wp.media({
title: "画像を選択してください",
library: {
type: "image"
},
button: {
text: "画像の選択"
},
multiple: false
});
custom_uploader.on("select", function() {
var images = custom_uploader.state().get("selection");
images.each(function(file){
$("input:text[name=category-image]").val("");
$("#image_thumbnail").empty();
$("input:text[name=category-image]").val(file.attributes.sizes.full.url);
$("#image_thumbnail").append('<img src="'+file.attributes.sizes.full.url+'" style="width:50%;height:auto;"/>');
});
});
custom_uploader.open();
});
// ②クリアボタンを押した時の処理
$("input:button[name=image_clear]").click(function() {
$("input:text[name=category-image]").val("");
$("#image_thumbnail").empty();
});
})(jQuery);
</script>
<?php
}
// カテゴリー編集画面に要素を追加するフック
add_action( 'category_edit_form_fields', 'my_category_edit_form_fields', 10, 2 );
function my_category_edit_form_fields( $tag, $taxonomy ) {
?>
<tr class="form-field term-image-wrap">
<th scope="row"><label for="category-image">画像(URL)</label></th>
<td>
<input name="category-image" id="category-image" type="text" value="<?php echo esc_url_raw( get_term_meta( $tag->term_id, 'category-image', true ) ); ?>" size="40" aria-required="true"/>
<p>サムネイル用の画像を設定します。※写真は縦横比1:1になるようにしてください</p>
<input type="button" name="image_select" value="選択" />
<input type="button" name="image_clear" value="クリア" />
<div id="image_thumbnail" class="uploded-thumbnail">
<?php if (get_term_meta( $tag->term_id, 'category-image', true )): ?>
<img src="<?php echo esc_url_raw( get_term_meta( $tag->term_id, 'category-image', true ) ); ?>" alt="選択中の画像" style="width:50%;height:auto;">
<?php endif ?>
</div>
</td>
</tr>
<script type="text/javascript">
(function ($) {
var custom_uploader;
// ①選択ボタンを押した時の処理
$("input:button[name=image_select]").click(function(e) {
e.preventDefault();
if (custom_uploader) {
custom_uploader.open();
return;
}
custom_uploader = wp.media({
title: "画像を選択してください",
library: {
type: "image"
},
button: {
text: "画像の選択"
},
multiple: false
});
custom_uploader.on("select", function() {
var images = custom_uploader.state().get("selection");
images.each(function(file){
$("input:text[name=category-image]").val("");
$("#image_thumbnail").empty();
$("input:text[name=category-image]").val(file.attributes.sizes.full.url);
$("#image_thumbnail").append('<img src="'+file.attributes.sizes.full.url+'" style="width:50%;height:auto;"/>');
});
});
custom_uploader.open();
});
// ②クリアボタンを押した時の処理
$("input:button[name=image_clear]").click(function() {
$("input:text[name=category-image]").val("");
$("#image_thumbnail").empty();
});
})(jQuery);
</script>
<?php
}
// カテゴリーの追加、更新、削除の処理
function my_edit_category( $term_id ) {
$key = 'category-image';
if ( isset( $_POST[ $key ] ) && esc_url_raw( $_POST[ $key ] ) ) {
update_term_meta( $term_id, $key, $_POST[ $key ] );
} else {
delete_term_meta( $term_id, $key );
}
}
add_action( 'create_category', 'my_edit_category' );
add_action( 'edit_category', 'my_edit_category' );
// メディアアップローダーの起動設定
function my_admin_scripts() {
wp_enqueue_media();
}
add_action( 'admin_print_scripts', 'my_admin_scripts' );自作PHPファイルに
<div class="purchase_list">
<div class="purchase_grid">
<?php
$args = array(
'type' => 'post',
'child_of' => 0,
'parent' => '0',
'orderby' => 'name',
'order' => 'ASC',
'hide_empty' => 1,
'hierarchical' => 1,
'exclude' => '150',
'include' => '',
'number' => '',
'taxonomy' => 'category',
'hide_empty' => 0,//投稿のないカテゴリーも表示する
'pad_counts' => false
);
$categories = get_categories( $args );
foreach( $categories as $category ){
$category_image = get_term_meta( $category->term_id, 'category-image', true );
echo '
<div>
<a href="' . get_category_link( $category->term_id ) . '">
<img src="' .$category_image. '" alt="">
<p>' . $category->name . '</p>
</a>
</div>';
}
?>
</div>
</div>を追加して固定ページに読み込めばOK
下記のCSSでグリッドに並ぶ
.purchase_list {
width:100%;
border:solid 8px #9EC385;
margin-top:20px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.purchase_grid {
width: 100%;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background-color:#9EC385;
}
.purchase_grid div{
width:16.666%;
text-align:center;
background-color:#fff;
border:solid 4px #9EC385;
padding-bottom:5px;
}
.purchase_grid p{
text-align:center;
width:100%;
font-size:0.85em;
color:#111;
margin-top:6px;
box-sizing: border-box;
padding:0 6px 0 6px;
}
.purchase_list_item {
width:100%;
border:solid 8px #FF9966;
margin-top:20px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.purchase_grid_item {
width: 100%;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background-color:#FF9966;
}
.purchase_grid_item div{
width:16.666%;
text-align:center;
background-color:#fff;
border:solid 4px #FF9966;
padding-bottom:5px;
}
.purchase_grid_item p{
text-align:center;
width:100%;
font-size:0.85em;
color:#111;
margin-top:6px;
box-sizing: border-box;
padding:0 6px 0 6px;
}