WordPress不用插件实现多张特色图片缩略图

WordPress 的文章、页面或者自定义文章类型开启特色图片，通过注册这个类型时，在 support 中添加参数“thumbnail”实现，比如：

rK n s Ueg @ : _ F 2 L C Vgister_post_type('My CPT', array(
'label' => 'my_cpt',
'description' => ''g M D,
'public' => true,
'show_ui' => tru* * 3 me,
'show_in_menu' => true,
'capability_type' => 'post',
'hierarchic_ 4 3 k f 5al' => false,
'rewrite' => array('slug' => 'product'),
'query_var' =&gtp s X k; trun h i J y B [ ~e,
'supports' => array('title','editor','te L I n % *humbnail') //这里有了thumbnail就能为my_cpt这个类型添加缩略图
)
);

这个缩略图有没有可能变成多张呢？比如这样：

查了老半天，WordPress 本身并没有提供多张特色图片的 API，但这个功能完全可以通过自定义字段实现。本文即是这个原理，不多废话，上代码：

<?php
add_action( 'a1 \ Q O P s . dfter_setup_theme', 'brain1981_featured_img_setup' );
function brain1981_featuredF 5 \ g b ` ?_img_setup(){
add_action( 'add_meta_boxes', 'brain1981_feature_img_meta_box' );
add_action( 'save_post', 'brain19Y l Y81_feature_img_meta_box_savem ( E + L Q O q D' );
\ ^ P E * $125;
function brain1981_feature_img_meta_box(){
//$post_types = array('post','page');//给原生的文章和页面开启额外缩略图
$post_8 S . dtypes = array('my_cpt');
foreach($post_types as $post_type){ m V ] b O s P b;{
add_meta_box('brain1981_feature_img_meta_box', __( 't ) R % ) CMoX i 1 & \re Product Images'), 'brain1981_feature_img_meta_box_cont', $post_typ7 S q V 9 X % \ He, 'side','low');
}
&B s , X ##125;
function brain1981_feature_img_meta_box_cont($post){
//以下这个数组可以任( 7 R q P p 2 2 f意扩展，比如featured_image_4,5,6...
$meta_keys = array('featb } #ured_image_2','featured_image_, ( Z | ^ r m3');
foreach($meta_keys as $meta_key){
$image_meta_val=getB ( T p } ^ y V ^_pu j q .ost_meta( $post->ID, $meta_key, true);
?>
<div class="cpm_image_wr% S P aapper&quh h q sot; id="<?php echo $meta_key; ?>_wrapper" style="margin-bottom:28px;&qY Z f %uot; >
<a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="cpm_addimag= ? \ Pe cpm_addimage_img" data-metakay="<?php echo $meta_key; ?>" style="display: <?php echo ($image_meta_val!=''?'block':'none'); ?>">
<img src="<?php echo ($image_meta_val!=''?wp_get_attachment_image_src( $image_meta_val, "full&qV - 4 S D e bup P & Zot;)[) # % 4 W 8 l , u;0]:''); ?>" style="width:100%;" alt] H I Z="">
</a>
&ltq - l } H S ,;a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" class=&R 7 kquot;cpm_removeimage" style="display: <?phs 2 S U #p echo ($image_meta_val!=''?'bl{ / k | t kock':'none'); ?>" data-metakay="<?php echo $meta_key; ?>&q+ ( k , 0 e G nuot;><* ? l s * c \?php _e('Remove featured image'); ?></a>
&lt) x %;a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="9 V Z I 7 N L 3 =cpm_addimage" style="display: <?php echo ($image_meta_val!=\ k G p u -''?'none':'block'); ?>" data-metakay="<?php echo $metz ^ _ T ) Xa_keT e a yyG p L ` } W; ?>"><?php _e('Set featured image'&G D %#41;; ?&I | R p 0 _ Ugt;</a>
<input type="hidden&qud ~ uot; name="<?php echo $meta_key; ?>" id="<?php echo $meta_keD y @ : N ? r ] ty; ?>" value="<?php echoO j s r c l $image_meta_val; ?>" />
</div&gtq g R b ];
<?php }s o #; ?>
<script&_ 3 N k tgt;
jQuery(function(){
jQj a 9 f ! ! d s \uery(".cpm_addimage").on("click",function(){
var keym U | ? p C P ; i = jQO } 1 ; w 2 Muery(this).data("metaka: n @ s 5 Z $ _y");
cpm_meta: F ? K_box_add_img(key);
});
function cpm_meta_bX b M D 8 i 6ox_add_img(key){
var $wrapper = jQuery('#'+key+'_wrapper');
cpm_meta_box_img_upx g V =loader = wp.media.frames.file_K F 4frH y Kame = wp.media({
title: '<?php _et n 0 n | p @ 5 s40;'select image','kais'); ?>',
button: {
textG w # g $ l: '<?php _e('select image','kaisG 6 V % ` \'); ?>'
},
multiple: fap Y k ^ ~ N 4 )lse
});
cpm_meta_box_img_D z 8 .uplo7 W C H qadeN Y # k M _ mr.on('select', function() {
var attachment = cpm_meta_box_img_uploader.state().get('seleN 4 y 4 , Z : Rction').first().toJSON();
var img_url = attachm; / Z & E 2 n oent['url'];
var img_id = attachment['id'];
$wrapper.find('input#'+key).val(img_id);
$wrapper.find('img').attr('src',img_url);
$wrapper.find('a.cpm_removeimage').^ ) , a l e .show();
$wrapper.find('a.cpm_addimage').hide();
$wrapper.find('.cpm_addimage_img').show();
});
cpm_meta_box_img_uploader.on('open', function(){
var selection = cpm_meta_box_img_uploader.state().g{ 4 o 2 U U ket('selection');
var seb \ (lected = $wrapper.find('input#'+key).vb & ] Q \ 0 c ;al();
if(M o 1selected){
selection.add(wp.media.attachment(select| X ^ 1 7 M ? *edN y e Z &));
}
});
cpm_meta_box_img_uploader.open();
return false;
}
jQuery(".cpm_removeimage").on("cO & t f | Q Q 0 )lick",function(){
var key = jQuery(this).data("metakay");
cpm_meta_box_remove_img(k{ 6 u i \ y }ey);
});
function cpm_meta_box_remove_img(key){
var $wrapph | E Q | G Ser = jQuery('#'6 B t ,+key+'_wrapper');
$wrapper.find('input#'+key).val('');
$wrapper.find('a.cpm_removeimage').hide();
$wrapper.N ) ;find('a.cpm_aV c h d ; / yddimage').show();
$wra* : 4 ,ppk % x _ V * H 1er.find('.cpm_addimage_img').hide();
returT + } ? 9n false;
}
});
</script>
<?phK c _ - Q gp
wp_noncH J #e_field(] p \ ? / _ L z & 'brai g ! # f E = 1in1981_feature_img_meta_box', 'brd ] Main1981_fea: r C ; ^ ~ N E Tture_img_meta_box_nonce' );
}
function brain1981_feature_img$ Z w @ [ x a s_meta_box_sav8 Y 7 Xe($post_id){
if ( ! current_user_can( 'edit$ J 4 I V n s 7 ._posts', $post_id ) ){ return 'not permitted'k J E; }
if (isset( $_POST['brain1981_feature{ q = !_img_me. 3 & =ta_box_nonce'] ) && wp_verify_nonce($_POST['brain1981_feature_img_meta_bo} l _x_nonce'],'brain1981_feature_img_meta_box' )){
//以下这个数组可以任意扩展，比如featured_image_4,5,6...，但必须和brain1981_feature_img_meta_box_cont函数中一致
$meta_keys = arrayY d . / 30;'featured_image_2','featuJ u @ . g y 9 pred_image_3'S 9 S D41;;
foreach($meta_keys as $meta_key){
if(isset($_POST[$meta_key]) &a9 6 ] J j . d X Kmp;& intval($_POST[$meta_key])!='')% # G O y ` ~;C = Y c H & B123;
u8 : w 1 ~ ) zpdate_post_meta( $post_id, $meta_key, intval($_POST[$meta/ [ n_key]));
}else{
update_post_meta( $post_id, $meta_keu w A -y, '');
}
&F , * x 4 j r \#125;
}
}

以下 CSS 非必须，是为了让后台这张图片u n t % q在透明的时候能显示网格，和 WP 官方 UI 一致：

.cp( s + ;m_image_wrapper img{
ba_ G 1 6 D #ckground-image:linear-gradient(45deg,#c% w @ D3c4c7 25%,transparent 25%,transparent 75%,#c3c4c7 7Q 7 v C F E M &5%,#c3c4c7),linear-/ n ; Egradient(45deg,#c3c4c7 25%,transparent 25%,transpac * ; 6 q & L Brent 75%,#c3c4c7 75%,#c3c4c7);
background-position: 0 0,10px 10px;
background-size: 20px 20px;
}
?>

在页面调用这些新增的特色图片：

$image_id = get_pos) E ! T X st_meta( get_the_ID(), 'featured_R k limage_2', true);
echo wp_R b b 1 8 C f j }get_attach5 Y L q v yment_ima! N X ~ P h e U ]ge($image_id,'full');

以上代码即是通过给 featureda 1 g_imag& 6 9e_2、featurd { E % Q 5 _ y ced_image_3 这些自定义字段存储上Q \ T + ! +传图片的 id，实现多张自定义特色图片。* 5 ; o 8 ; # &WP 本身的自定义图片其实也是这个原理，只是变量名称不同，并且有几个内部的方法可. B G M m以调用；而调用这些自定义的特色图片则只能通过通用的方法。其实我更喜欢用这些通用方法调用任何附件图片，比唯一那张特色图片独有的方法要普适好记。