[wordpress] Simple GA Rankingにサムネイルと抜粋を追加する方法

軽量な記事ランキング機能を追加できるSimple GA Rankingだが、デフォルトではサムネイルや抜粋が追加されないため、独自にサムネイルと抜粋(excerpt)を追加する方法は以下の通り

functions.phpに以下のコードを追加して、新しいウィジェットを追加

/**
 * 人気記事表示ウィジェット-ページランキングサムネイル表示
 **/
class Post_Rank_Disp_Widget extends WP_Widget {
 function __construct() {
 parent::__construct(
 false,
 $name = '人気記事表示ウィジェット', array( 'description' => 'googol GA Ranking 人気記事表示', )
 );
 }
 
 /* ウィジェットが呼ばれた際の表示処理を書く */
 function widget($args, $instance) {
 extract( $args );
 // タイトル名を取得
 $title = apply_filters( 'widget_title_new', empty( $instance['title_new'] ) ? '人気記事' : $instance['title_new'], $instance, $this->id_base );
 
 echo $before_widget;
 if ( $title )
 echo $before_title . $title . $after_title;
 
 // 表示数を取得
 $entry_count = apply_filters( 'widget_entry_count', $instance['entry_count'] );
 if ( !$entry_count ) $entry_count = 5; //表示数が設定されていない時は5にする
 ?>
 <div id="n-p-r">
 <?php
 if (function_exists('sga_ranking_get_date'))
 $ranking = sga_ranking_get_date();
 $args = array(
 'post__in' => $ranking,
 'posts_per_page' => $entry_count,
 'orderby' => 'post__in',
 'ignore_sticky_posts' => true,
 'post_type' => 'any',
// 'cat' => array( 除外したいカテゴリIDにマイナス記号をつけて),
 );
 $my_query = new WP_Query($args);
 
 if($my_query->have_posts()):
 while ($my_query->have_posts()) : $my_query->the_post();
 ?>
 
 <div class="n-p-r-card toc clearfix">
 <div class="term n-p-r-img"><a href="<?php the_permalink() ?>">
 <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
 <?php the_post_thumbnail( 'thumb100' ,array( 'alt' =>get_the_title())); ?>
 <?php else: // サムネイルを持っていないときの処理 ?>
 <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="<?php the_title(); ?>" width="100" height="100" />
 <?php endif; ?></div>
 <div class="n-p-r-titlea excerpt">
 <p class="n-p-r-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
 <p class="n-p-r-excerpt"><?php echo apply_filters( 'thk_excerpt_no_break', 40 ); ?></p>
 </div>
 </div>
 <?php endwhile; endif; ?>
 <?php wp_reset_postdata(); ?>
 </div>
 <?php
 echo $after_widget;
 }
 
 /*　管理画面の設定とか表示用コードを書く　*/
 function form($instance) {
 if(empty($instance)) {
 $instance = array('title_new' => null, 'entry_count' => null);
 }
 $title_new = esc_attr($instance['title_new']);
 $entry_count = esc_attr($instance['entry_count']);
 ?>
 <?php //タイトル入力フォーム ?>
 <p>
 <label for="<?php echo $this->get_field_id('title_new'); ?>">
 <?php echo('人気記事ランキングのタイトル'); ?>
 </label>
 <input class="widefat" id="<?php echo $this->get_field_id('title_new'); ?>" name="<?php echo $this->get_field_name('title_new'); ?>" type="text" value="<?php echo $title_new; ?>" />
 </p>
 <?php //表示数入力フォーム ?>
 <p>
 <label for="<?php echo $this->get_field_id('entry_count'); ?>">
 <?php echo('表示数（半角数字、デフォルト：5）'); ?>
 </label>
 <input class="widefat" id="<?php echo $this->get_field_id('entry_count'); ?>" name="<?php echo $this->get_field_name('entry_count'); ?>" type="text" value="<?php echo $entry_count; ?>" />
 </p>
 <?php
 }
 
 /*　管理画面で設定を変更した時の処理を書く　*/
 function update($new_instance, $old_instance) {
 $instance = $old_instance;
 $instance['title_new'] = strip_tags($new_instance['title_new']);
 $instance['entry_count'] = strip_tags($new_instance['entry_count']);
 return $instance;
 }
}
add_action('widgets_init', function(){register_widget("Post_Rank_Disp_Widget");});
?>

CSSに以下のコードを追加

/************************************
**　GA
************************************/
.n-p-r-img img{
 margin: 0 10px 0 0;
 padding: 1px;
}
.n-p-r-titlea {
}
.n-p-r-title {
font-weight: bold;
font-size: 1.35rem;
}
.n-p-r-excerpt {
font-size: 1.25rem;
}
.n-p-r-card {
 padding: 15px 0;
 border-bottom: 1px dotted #ccc;
}