不用插件或特定主題 通過自定義字段代碼實現WordPress文章頁添加多個特色圖片

WordPress不用插件實現多張特色圖片/縮略圖Featured Images

WordPress的文章、頁面或者自定義文章類型開啟特色圖片，通過註冊這個類型時，在support中添加參數「thumbnail」實現，比如：

1. register_post_type('My CPT', array(
   
2.         'label' => 'my_cpt',
   
3.         'description' => '',
   
4.         'public' => true,
   
5.         'show_ui' => true,
   
6.         'show_in_menu' => true,
   
7.         'capability_type' => 'post',
   
8.         'hierarchical' => false,
   
9.         'rewrite' => array('slug' => 'product'),
   
10.         'query_var' => true,
    
11.         'supports' => array('title','editor','thumbnail') //這裡有了thumbnail就能為my_cpt這個類型添加縮略圖
    
12.         )
    
13. );

複製代碼

一般我們在使用WordPress任何主題發佈文章時，都可以設置單張特色圖片，以便博客頁面和列表頁面調用，而對於想要在發佈文章時，同時發佈多個特色圖片到文章頁的效果，比如很多用WordPress做外貿電商站的，需要做產品信息，那可以採取如下方法。

1. add_action( 'after_setup_theme', 'brain1981_featured_img_setup' );
   
2. function brain1981_featured_img_setup(){
   
3.         add_action( 'add_meta_boxes', 'brain1981_feature_img_meta_box' );
   
4.         add_action( 'save_post', 'brain1981_feature_img_meta_box_save' );
   
5. }
   
6. 
   
7. function brain1981_feature_img_meta_box(){
   
8.         //$post_types = array('post','page');//給原生的文章和頁面開啟額外縮略圖
   
9.         $post_types = array('my_cpt');
   
10.         foreach($post_types as $post_type){
    
11.                 add_meta_box('brain1981_feature_img_meta_box', __( 'More Product Images'), 'brain1981_feature_img_meta_box_cont', $post_type, 'side','low');
    
12.         }
    
13. }
    
14. 
    
15. function brain1981_feature_img_meta_box_cont($post){
    
16.         //以下這個數組可以任意擴展，比如featured_image_4,5,6...
    
17.         $meta_keys = array('featured_image_2','featured_image_3');
    
18.         foreach($meta_keys as $meta_key){
    
19.                 $image_meta_val=get_post_meta( $post->ID, $meta_key, true);
    
20.                 ?>
    
21.                
    
22.                         [url=###]" style="width:100%;" alt="">[/url]
    
23.                         
    
24.                         
    
25.                         <input type="hidden" name="" id="" value="">
    
26.                
    
27. 
    
28.         
    
29. 
    
30.                 wp_nonce_field( 'brain1981_feature_img_meta_box', 'brain1981_feature_img_meta_box_nonce' );
    
31. }
    
32. 
    
33. function brain1981_feature_img_meta_box_save($post_id){
    
34.         if ( ! current_user_can( 'edit_posts', $post_id ) ){ return 'not permitted'; }
    
35.         if (isset( $_POST['brain1981_feature_img_meta_box_nonce'] ) && wp_verify_nonce($_POST['brain1981_feature_img_meta_box_nonce'],'brain1981_feature_img_meta_box' )){
    
36.                 //以下這個數組可以任意擴展，比如featured_image_4,5,6...，但必須和brain1981_feature_img_meta_box_cont函數中一致
    
37.                 $meta_keys = array('featured_image_2','featured_image_3');
    
38.                 foreach($meta_keys as $meta_key){
    
39.                     if(isset($_POST[$meta_key]) && intval($_POST[$meta_key])!=''){
    
40.                             update_post_meta( $post_id, $meta_key, intval($_POST[$meta_key]));
    
41.                     }else{
    
42.                             update_post_meta( $post_id, $meta_key, '');
    
43.                     }
    
44.                 }
    
45.         }
    
46. }

複製代碼

發佈頁效果演示


頁面調用這些特色圖片代碼參考

1. $image_id = get_post_meta( get_the_ID(), 'featured_image_2', true);
   
2. echo wp_get_attachment_image($image_id,'full');

複製代碼

需要實現swiper效果的可以自己將圖片鏈接寫進模板當中。