我认为最好的办法是allow tha admin choose the featured image 对于类别from Media Library. 这就是WooCommerce对产品类别所做的。我检查了WooCommerce是如何做到这一点的(在includes/admin/class-wc-admin-taxonomies.php中),下面是可重用代码(在functions.php或您的自定义插件中使用)。它可以与自定义帖子类型的分类一起使用。
<?php
/* Image thumbnail for category */
/* If this CPT, use scripts and styles to display Media Library popup */
function media_uploader() {
global $post_type;
if( \'YOUR_CUSTOM_POST_TYPE\' == $post_type) {
if(function_exists(\'wp_enqueue_media\')) {
wp_enqueue_media();
}
else {
wp_enqueue_script(\'media-upload\');
wp_enqueue_script(\'thickbox\');
wp_enqueue_style(\'thickbox\');
}
}
}
add_action(\'admin_enqueue_scripts\', \'media_uploader\');
/*show the form field*/
add_action( \'YOUR_CUSTOM_POST_TYPE-category_add_form_fields\', \'add_image_field\', 10, 2 );
add_action( \'YOUR_CUSTOM_POST_TYPE-category_edit_form_fields\', \'add_image_field\', 10, 2 );
function add_image_field($taxonomy) {
if(is_object($taxonomy)) // edit term not add term
$selectedimgid = get_term_meta( $taxonomy->term_id, \'YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id\', true );
?>
<div class="form-field term-thumbnail-wrap">
<label>Thumbnail</label>
<div id="YOUR_CUSTOM_POST_TYPE_cat_thumbnail" style="float: left; margin-right: 10px;"><img src="<?php if(isset($selectedimgid)) echo wp_get_attachment_image_src($selectedimgid)[0]; else echo "PLACEHOLDER-IMAGE-HERE.jpg";?>" width="60px" height="60px" /></div>
<div style="line-height: 60px;">
<input type="hidden" id="YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id" name="YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id" value="<?php if(isset($selectedimgid)) echo $selectedimgid; ?>" />
<button type="button" class="upload_image_button button">Upload/Add image</button>
<button type="button" class="remove_image_button button">Remove image</button>
</div>
<script type="text/javascript">
// Only show the "remove image" button when needed
if ( ! jQuery( \'#YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id\' ).val() ) {
jQuery( \'.remove_image_button\' ).hide();
}
// Uploading files
var file_frame;
jQuery( document ).on( \'click\', \'.upload_image_button\', function( event ) {
event.preventDefault();
// If the media frame already exists, reopen it.
if ( file_frame ) {
file_frame.open();
return;
}
// Create the media frame.
file_frame = wp.media.frames.downloadable_file = wp.media({
title: \'Choose an image\',
button: {
text: \'Use image\'
},
multiple: false
});
// When an image is selected, run a callback.
file_frame.on( \'select\', function() {
var attachment = file_frame.state().get( \'selection\' ).first().toJSON();
var attachment_thumbnail = attachment.sizes.thumbnail || attachment.sizes.full;
jQuery( \'#YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id\' ).val( attachment.id );
jQuery( \'#YOUR_CUSTOM_POST_TYPE_cat_thumbnail\' ).find( \'img\' ).attr( \'src\', attachment_thumbnail.url );
jQuery( \'.remove_image_button\' ).show();
});
// Finally, open the modal.
file_frame.open();
});
jQuery( document ).on( \'click\', \'.remove_image_button\', function() {
jQuery( \'#YOUR_CUSTOM_POST_TYPE_cat_thumbnail\' ).find( \'img\' ).attr( \'src\', \'PLACEHOLDER-IMAGE-HERE.jpg\' );
jQuery( \'#YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id\' ).val( \'\' );
jQuery( \'.remove_image_button\' ).hide();
return false;
});
jQuery( document ).ajaxComplete( function( event, request, options ) {
if ( request && 4 === request.readyState && 200 === request.status
&& options.data && 0 <= options.data.indexOf( \'action=add-tag\' ) ) {
var res = wpAjax.parseAjaxResponse( request.responseXML, \'ajax-response\' );
if ( ! res || res.errors ) {
return;
}
// Clear Thumbnail fields on submit
jQuery( \'#YOUR_CUSTOM_POST_TYPE_cat_thumbnail\' ).find( \'img\' ).attr( \'src\', \'PLACEHOLDER-IMAGE-HERE.jpg\' );
jQuery( \'#YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id\' ).val( \'\' );
jQuery( \'.remove_image_button\' ).hide();
// Clear Display type field on submit
jQuery( \'#display_type\' ).val( \'\' );
return;
}
} );
</script>
<div class="clear"></div>
</div>
<?php
}
/* and save it */
add_action( \'edited_YOUR_CUSTOM_POST_TYPE-category\', \'YOUR_CUSTOM_POST_TYPE_extra_fields_save\', 10, 2);
add_action( \'created_YOUR_CUSTOM_POST_TYPE-category\', \'YOUR_CUSTOM_POST_TYPE_extra_fields_save\', 10, 2);
function YOUR_CUSTOM_POST_TYPE_extra_fields_save( $term_id ) {
if ( !isset( $_POST[\'YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id\'] ) ) return;
update_term_meta( $term_id, "YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id", $_POST[\'YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id\'] );
}
?>
通往
show 模板中的图像还将使用
get_term_meta()
:
<?php
$termimgid = get_term_meta( $term->term_id, \'thamaterial_cat_thumbnail_id\', true );
if(isset($termimgid))
echo \'<img alt="\'.$term->name.\'" src="\'.wp_get_attachment_image_src($termimgid)[0].\'" /> \'.$term->name;