当前位置：
  1. 首页
  2. WordPress世界
  3. 正文

RiProV2主题二开背景

RiProV2主题作为资源下载站点，其简单易用的特点深得大家的喜爱。今天盛龙科技和大家分享如何给在文章栏目基础上，添加软件亲测评分功能。

在素材站日益内卷的当下，总得给自己的站点做出些不一样的东西，站长亲测软件，并给软件打分，给访客提供选择软件的参考，确实可以给站点加分！

RiProV2主题，更强大的全资源/素材类主题，无需插件，集成强大的支付，后台管理，用户体验舒服。支持卡密，充值，积分，会员，高级筛选，推广佣金，作者佣金，前台创建文章，统计，自定义币种，自定义会员标识，全站功能实现AJAX，图片全站真正懒加载，支持SEO。日主题RiProV2确实不错！

RiProV2主题二开：给文章栏目添加软件测试评分功能

RiProV2二开功能规划

1、能在后台添加软件评分；

2、在前端内容页较为美观的显示测试评分和测试对象的基本信息（点击返回软件本身的下载页面）；

3、亲测栏目文章列表显示较为明显的测评分数和亲测如“检”字字样。

4、下载软件 和 亲测项目页产生关联： 在下载内容页面显示已检测字样如“检”字，并在下载小工具显示测评分数；下载列表显示检测字样。

RiProV2二开功能实现1：后台添加软件评分

修改 /ripro-v2/inc/options 下的metabox-options文件，给文章添加自定义字段，添加位置在完成的付费视频模块代码后面添加

在如上代码最后一个"));"后添加自定义检测评分代码
在如上代码最后一个”));”后添加自定义检测评分代码

需添加代码如下，代码实现功能，写文章时，打开软件测试按钮（如下id为 cao_ceshi的字段），则便是启用软件测试功能，则前端需显示相应的测试项目。特别注意的是，cao_downid文本字段为下载栏目软件的文章id，让测试页面和下载软件产生关联。如某软件的文章id是309则在本字段填写“309”。

最终实现效果如下：

RiProV2二开功能实现1：后台添加软件评分

//////////////软件测试开始//////////////

$prefix_post_opts_ceshi = 'ceshi-postmeta-box';
CSF::createMetabox($prefix_post_opts_ceshi, array(
    'title'     => '软件测试',
    'post_type' => 'post',
    'data_type' => 'unserialize',
));
CSF::createSection($prefix_post_opts_ceshi, array(
    'fields' => array(
        array(
            'id'    => 'cao_ceshi',
            'type'  => 'switcher',
            'title' => '开启测试',
            'label' => '',
        ),
        
        array(
                'id'       => 'cao_downid',
                'type'     => 'text',
                'title'    => '测试对象id',
	        	'dependency' => array('cao_ceshi', '==', 'true'),
              ),
       array(
                'id'       => 'ceshi2',
                'type'     => 'text',
                'title'    => '推荐程度',
	        	'dependency' => array('cao_ceshi', '==', 'true'),
              ),     
              
	   array(
                'id'       => 'ceshi3',
                'type'     => 'text',
                'title'    => '运行速度',
	        	'dependency' => array('cao_ceshi', '==', 'true'),
              ),
      
       array(
                'id'       => 'ceshi4',
                'type'     => 'text',
                'title'    => '使用难度',
	        	'dependency' => array('cao_ceshi', '==', 'true'),
              ),
    ),
    
));

同样的，为告诉软件下载对象，此软件已测试，需要在metabox-options.php 文件中，添加一个自定义字段，即在发布软件时，如软件已测试，则填写对应的测试文章id。代码添加位置为付费下载模块自定义按钮下方（最后一个“),”下），位置如下：

RiProV2二开功能实现1：后台添加软件评分

添加的代码及实现的效果如下：

  array(
                'id'         => 'cao_downceshi',
                'type'       => 'text',
                'title'      => '是否已测试',
                'desc'      => '填写测试文章id，无则留空',
                'dependency' => array('cao_status', '==', 'true'),
            ),
RiProV2二开功能实现1：后台添加软件评分

RiProV2二开功能实现2：测试页面测评内容显示

先看运行效果，在文章内容页中实现柱状条显示分数，在边栏实现所测试软件的基本信息（参考下载付费小工具）。

RiProV2二开功能实现2：测试页面内容显示

添加代码到 \ripro-v2\template-parts\content下的内容页文件 single.php ，显示前端评分内容

修改位置为 下：

代码如下（注意 php代码的闭合符号）：

<?php
          ////////测试得分//////
          $isce=get_post_meta($post->ID, 'cao_ceshi', true);
          if ($isce){
              $ce2=(int)get_post_meta($post->ID, 'ceshi2', true);
              $ce3=(int)get_post_meta($post->ID, 'ceshi3', true);
              $ce4=(int)get_post_meta($post->ID, 'ceshi4', true);
              $ce1=round(($ce2+$ce3+$ce4)/3);
          ?> 
          
           <div class="wpceshi">
               <div id="skills">
                  <div class="skillbar" data-percent="<?php  echo $ce1  ?>%" >
                      <div class="skillbar_title textColor" >总体得分</div>
                      <div class="skillbar_bar" ></div>
                      <div class="skillbar_percent metaColor" > <?php  echo $ce1  ?>分</div>
                      <div class="skillbar_bg" ></div>
                  </div>
                  <div class="skillbar" data-percent="<?php  echo $ce2  ?>%" >
                      <div class="skillbar_title textColor" >推荐程度</div>
                      <div class="skillbar_bar" ></div>
                      <div class="skillbar_percent metaColor" > <?php  echo $ce2  ?>分</div>
                      <div class="skillbar_bg" ></div>
                  </div>
                  <div class="skillbar" data-percent="<?php  echo $ce3  ?>%" >
                      <div class="skillbar_title textColor" >运行速度</div>
                      <div class="skillbar_bar" ></div>
                      <div class="skillbar_percent metaColor" > <?php  echo $ce3  ?>分</div>
                      <div class="skillbar_bg" ></div>
                  </div>
                  <div class="skillbar" data-percent="<?php  echo $ce4  ?>%" >
                      <div class="skillbar_title textColor" >使用难度</div>
                      <div class="skillbar_bar" ></div>
                      <div class="skillbar_percent metaColor" > <?php  echo $ce4  ?>分</div>
                      <div class="skillbar_bg" ></div>
                  </div>
               </div>
              <script type="text/javascript">
                        jQuery('.skillbar').each(function() {
                            jQuery(this).find('.skillbar_bar').animate({
                                width: jQuery(this).attr('data-percent')
                            }, 2000);
                        });
              </script>
                
            </div>  
         <?php }  //////////测试得分结束

如上代码，jQuery框架主题已经有了，无需理会；但CSS代码需要自己编写添加，在主题\ripro-v2\ripro-v2\assets\css下打开app.css样式表文件，在文件末尾添加如下代码：

/*软件测评*/
.wpceshi *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.wpceshi{width:100%;display:block;padding:0 40px} 
#skills{margin:30px 50px 30px 120px} 
.skillbar{position:relative;margin-bottom:16px;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear}
.skillbar .skillbar_bar{background:-o-linear-gradient(right, #FAD961, #F76B1C);background:-moz-linear-gradient(right, #FAD961, #F76B1C);background:linear-gradient(to right, #FAD961, #F76B1C);border-radius:12px 0 0 12px;position:absolute;height:10px;width:0px;top:4px;left:4px;right:4px}
 .skillbar .skillbar_bg{background-color:#fff;border-style:solid;border-width:2px;height:18px;width:100%;border-radius:20px;border-color:rgba(39, 176, 25, 0.08);border-style:solid;border-top-width:4px;border-left-width:4px;border-right-width:4px;border-bottom-width:4px;}
 .wpceshi .home_title{margin-bottom:24px}
.skillbar .skillbar_title{position:absolute;top:-4px;left:-120px;font-size:13px;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;width:120px;padding-right:8px;overflow:hidden} 
 .skillbar .skillbar_percent{position:absolute;width:50px;top:-4px;right:-50px;text-align:right} 
  .textColor {color:#5B6B82;}.textColor svg{fill:#5B6B82;}
  .metaColor a,.metaColor{color:#9AA7B9;}

测评内容页边栏显示软件信息：

参考ripro-v2付费下载小工具的写法，我们也写一个测试小工具：



在 \ripro-v2\ripro-v2\inc\options 下的widget-options.php 小工具代码文件的最顶端，在“<?php if (!defined('ABSPATH')) {die;} // Cannot access directly.”这段代码下面添加如下测试页小工具代码：


//测试页小工具
CSF::createWidget('ripro_v2_ceshi', array(
    'title'       => 'RI-文章侧边栏 : 测试页组件',
    'classname'   => 'ripro-v2-ceshi',
    'description' => '在测试页面显示',
    'fields'      => array(
        array(
            'id'      => 'is_paynum',
            'type'    => 'switcher',
            'title'   => '显示已售数量',
            'default' => true,
        ),

        array(
            'id'      => 'is_downnum',
            'type'    => 'switcher',
            'title'   => '显示下载数量',
            'default' => true,
        ),
        array(
            'id'      => 'is_modified_time',
            'type'    => 'switcher',
            'title'   => '显示最近更新时间',
            'default' => true,
        ),
    ),
));

if (!function_exists('ripro_v2_ceshi')) {
    function ripro_v2_ceshi($args, $instance) {
        // 不是single，是下载页面则返回空
        if (!is_single() || is_post_shop_down()) {
            return;
        }
        // 不是测试页或无测试对象则返回空
        global $post;
        $post_id     = $post->ID; //本文章ID
        $isce=get_post_meta($post_id, 'cao_ceshi', true);
        $isdid=get_post_meta($post_id, 'cao_downid', true);
        if (!$isce || empty($isdid) || $isdid=='' || !$isdid ) {return;}

        $instance = array_merge(array(
            'is_paynum'        => true,
            'is_downnum'        => true,
            'is_modified_time' => true,
        ), $instance);

        echo $args['before_widget']; 
        echo '<div class="ripro-v2-widget-shop-down"><div class="price"><h3><i class="fas fa-code mr-1"></i>测试软件</h3></div>';  
        echo '<div class="entry-media1"><div class="placeholder" style="padding-bottom: 66.666666666667%">'. _get_post_media($isdid,'thumbnail').'</div></div>' ; 
         echo '<div class="down-info"><h5><a'. _target_blank() .' href="' . esc_url( get_permalink( $isdid ) ) . '">' . esc_html__( get_the_title($isdid)) . '</a></h5></div>';
        

        ///演示地址
        if ($cao_demourl = get_post_meta($isdid, 'cao_demourl', true)) {
            echo '<a target="_blank" rel="nofollow noopener noreferrer" href="' . trim($cao_demourl) . '" class="btn btn-info btn-block mt-2">在线演示</a>';
        }
        
 
        //// 其他信息
        $cao_info = get_post_meta($isdid, 'cao_info', true);
        if ($cao_info == '' || empty($cao_info)) {
            $cao_info = array();
        }

        ////自定义按钮
        $cao_diy_btn = get_post_meta($isdid, 'cao_diy_btn', true);
        $btn_array   = explode('|', $cao_diy_btn);
        if (!empty($cao_diy_btn)) {
           $cao_info[] = array('title' => esc_html__('链接', 'ripro-v2'), 'desc' => '<a target="_blank" rel="nofollow noopener noreferrer" href="' .  trim($btn_array[1]) . '" class="badge badge-secondary-lighten"><i class="fas fa-link"></i> ' . esc_html__(trim($btn_array[0]), 'ripro-v2') . '</a>');
        }
        
         //////添加版本信息-开始
	     $arr = get_post_shop_downurl($isdid);
         if (is_array($arr)){
           $cao_info[] = array('title' => esc_html__('版本信息', 'ripro-v2'), 'desc' => $arr[0]['name']);
         }
         //////添加版本信息-结束
        
        if ($instance['is_paynum'] && $cao_paynum = get_post_meta($isdid, 'cao_paynum', true)) {
            $cao_info[] = array('title' => esc_html__('累计销量', 'ripro-v2'), 'desc' => $cao_paynum);
        }
        //显示下载次数统计
        if ($instance['is_downnum'] && $down_num = _get_post_down_num($isdid)) {
            $cao_info[] = array('title' => esc_html__('累计下载', 'ripro-v2'), 'desc' => $down_num);
        }

        if ($instance['is_modified_time']) {
            $cao_info[] = array('title' => esc_html__('最近更新', 'ripro-v2'), 'desc' => get_the_modified_time('Y年m月d日',$isdid));
        } 

         if ($cao_info) {
            echo '<div class="down-info">';
            echo '<ul class="infos">';
            foreach ($cao_info as $key => $value) {
                echo '<li><p class="data-label">' . $value['title'] . '</p><p class="info">' . $value['desc'] . '</p></li>';
            }
            echo '</ul>';
            echo '</div>';
        }
         echo '</div>';
        echo $args['after_widget'];
    }
}

在这段小工具代码中，特别指出： 1、不是single页面，或者时下载页面则返回 ；2、不是测试开启项目则返回，就是不执行页面测试小工具代码，以此来节省不必要的资源开销。

if (!is_single() || is_post_shop_down()) { return; }

RiProV2二开功能实现3：测试栏目列表显示分数及”检“字

显示效果如下，首先测试栏目，我想用grid网格显示，所以修改文章列表网格循环代码：

在 \ripro-v2\template-parts\loop 下的item-grid.php 文件，如下位置添加代码，测试文章自定义字段是否为测试文章

$aid=get_the_ID(); //本文章id
$cao_downceshi= get_post_meta($aid, 'cao_downceshi', true); //是否已测试1（检测软件对象）
$isce=get_post_meta($aid, 'cao_ceshi', true); //是否已测试2 （检测是否为测评文章）

在item-grid.php文件下，添加如下代码，显示测评文章“检”子标识：

代码如下：

 if( $cao_downceshi || $isce ){
           echo '<span class="meta-post-type"> 检 </span>';         
         }

在item-grid.php文件下，添加如下代码，显示测评文章软件测试分数 ：

代码如下：

if(  $isce ){
                 $ce2=(int)get_post_meta($aid, 'ceshi2', true);
                 $ce3=(int)get_post_meta($aid, 'ceshi3', true);
                 $ce4=(int)get_post_meta($aid, 'ceshi4', true);
                 $ce1=round(($ce2+$ce3+$ce4)/3);
                 echo '<span class="meta-shhop-icon" style="color:red;"><i class="fas fas fa-shield-alt"></i> '.$ce1.'分</span>';     
             }

最后提醒一下：在后台添加测评栏目分账分类时，列表风格一定要选择“网格” 。

RiProV2二开功能实现4：下载软件 和 亲测项目页产生关联

在 \ripro-v2\inc\options 目录下shop-widget-options.php 付费下载组件代码添加，添加到演示地址代码的上面：

这样即可以实现下载页面查看测评页面，并在下载页面显示测评分数。

代码如下：

 //是否测试
        $cao_downceshi= get_post_meta($post_id, 'cao_downceshi', true); 
        if($cao_downceshi){
                     $isce=get_post_meta($cao_downceshi, 'cao_ceshi', true);
                     if ($isce){
                        $ce2=(int)get_post_meta($cao_downceshi, 'ceshi2', true);
                        $ce3=(int)get_post_meta($cao_downceshi, 'ceshi3', true);
                        $ce4=(int)get_post_meta($cao_downceshi, 'ceshi4', true);
                        $ce1=round(($ce2+$ce3+$ce4)/3);
                         echo '<a target="_blank"  href="' . esc_url( get_permalink( $cao_downceshi ) ) . '" class="btn btn-info btn-block mt-2">已测试 <b>['.$ce1.'分]</b></a>';
                     }
                   }

到这里，已实现了软件测评及评分的基本功能，大家可以在 本站测试栏目体验：WordPress主题插件测评-为你的选择保驾护航_盛龙科技 (slongw.net)

上一篇 WooSearch 测评- WooCommerce商城产品快速检索
下一篇 3D FlipBook 汉化版-图片与PDF 动画翻页WordPress插件

相关文章

发表回复

后才能评论