文章缩略图右上角自定义角标教程-riprov2教学网

这是一个网友想在ripro主题上实现的功能，后面没回复了，就用在v2上吧

效果展示

教学开始：

第一步：

将以下css代码复制到riprov2-assets-app.css文件中

.demo{
    background-color: rgba(0,0,0,0.4);
  
    color: #fff;
    font-size: 5px;
    height: 25px;
    right: 0px;
    line-height: 25px;
    position: absolute;
    text-align: center;
    top: 0px;
    width: 50px;

}

第二步：

将以下代码复制到riprov2-functions.php文件底部

第三步：

将以下代码覆盖到ripro-v2/inc/template-tags.php文件中约686行处

图中所示位置：

       //加载前图片 lazyload
        // $lazyload_src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
        $lazyload_src = _cao('default_thumb_lazyload');
        
        //获取比例
        $ratio = $_size_px['height'] / $_size_px['width'] * 100 . '%';
  $tese_arr = get_post_meta( get_the_ID(), 'jxw_post_tese', true );
        if ( $video && !wp_is_mobile() && get_post_format($post->ID) == 'video' && $mp4 = _get_post_thumb_video_src($post) ) {
            $img   = '<div class="entry-media video-thum" data-mp4="'.$mp4.'">';
        }else{
            $img   = '<div class="entry-media">';
        }

        if(!empty($tese_arr['jxw-tese-tag-custom'])){
            $ymetaValue = $tese_arr['jxw-tese-tag-custom'];
              $yangshi = $tese_arr['jxw-yangshi'];                                
                                    }
                                   
         if ( $options['link'] ) {
           $img .= '<div class="'.$yangshi.'"><i>'.$ymetaValue.'</i></div>';
        } else {
            $img .= '<div class="'.$yangshi.'"><i>'.$ymetaValue.'</i></div>';
        }
      
 
        $img .= '<div class="placeholder" style="padding-bottom: ' . esc_attr($ratio) . '">';

        $img .= '<a'. _target_blank() .' href="' . get_permalink($post->ID) . '" title="' . get_the_title($post->ID) . '" rel="nofollow noopener noreferrer">';
        $img .= '<img class="lazyload" data-src="' . $src . '" src="'.$lazyload_src.'" alt="' . get_the_title() . '" />';
        
        $img .= '</a>';
        $img .= '</div>';
        $img .= '</div>';

封二 赞助

打赏 收藏 海报 链接