备案权重域名预定

不用插件或特定主题 通过自定义字段代码实现WordPress文章页添加多个特色图片

[复制链接]
小猪哼囔 发表于 2022-9-12 20:44:13 | 显示全部楼层 |阅读模式
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. function brain1981_feature_img_meta_box(){
  7.         //$post_types = array('post','page');//给原生的文章和页面开启额外缩略图
  8.         $post_types = array('my_cpt');
  9.         foreach($post_types as $post_type){
  10.                 add_meta_box('brain1981_feature_img_meta_box', __( 'More Product Images'), 'brain1981_feature_img_meta_box_cont', $post_type, 'side','low');
  11.         }
  12. }

  13. function brain1981_feature_img_meta_box_cont($post){
  14.         //以下这个数组可以任意扩展,比如featured_image_4,5,6...
  15.         $meta_keys = array('featured_image_2','featured_image_3');
  16.         foreach($meta_keys as $meta_key){
  17.                 $image_meta_val=get_post_meta( $post->ID, $meta_key, true);
  18.                 ?>
  19.                
  20.                         [url=###]" style="width:100%;" alt="">[/url]
  21.                         
  22.                         
  23.                         <input type="hidden" name="" id="" value="">
  24.                

  25.         

  26.                 wp_nonce_field( 'brain1981_feature_img_meta_box', 'brain1981_feature_img_meta_box_nonce' );
  27. }

  28. function brain1981_feature_img_meta_box_save($post_id){
  29.         if ( ! current_user_can( 'edit_posts', $post_id ) ){ return 'not permitted'; }
  30.         if (isset( $_POST['brain1981_feature_img_meta_box_nonce'] ) && wp_verify_nonce($_POST['brain1981_feature_img_meta_box_nonce'],'brain1981_feature_img_meta_box' )){
  31.                 //以下这个数组可以任意扩展,比如featured_image_4,5,6...,但必须和brain1981_feature_img_meta_box_cont函数中一致
  32.                 $meta_keys = array('featured_image_2','featured_image_3');
  33.                 foreach($meta_keys as $meta_key){
  34.                     if(isset($_POST[$meta_key]) && intval($_POST[$meta_key])!=''){
  35.                             update_post_meta( $post_id, $meta_key, intval($_POST[$meta_key]));
  36.                     }else{
  37.                             update_post_meta( $post_id, $meta_key, '');
  38.                     }
  39.                 }
  40.         }
  41. }
复制代码
发布页效果演示


页面调用这些特色图片代码参考

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

需要实现swiper效果的可以自己将图片链接写进模板当中。


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?加入我们

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 加入我们

本版积分规则 返回列表 发新帖

备案权重域名预定

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

快速回复 返回顶部 返回列表