[wordpress]サイドバーのウィジェットにシェア数人気記事ランキングを設置する

wordpressでとあるサイトを作っている中で、
シェア数で並べた人気記事ランキングを作成したくて、
いろいろ試して実装したので、その備忘録を残します。

 

2つのサイトを参考にしました。
[試] 表示速度改善とシェア数ベースの人気記事ランキングを実現、WordPressプラグイン SNS Count Cache | 試行錯誤ライフハック
各種SNSの共有数別記事ランキングを作る方法

オリジナルは前者のようですが、繋がらないことも多かったので、
後者をメインで参考した形になります。

シェア数ランキング設置方法まとめ

1. プラグイン「SNS Count Cache」をダウンロードする
2. プラグイン「PHP Text Widget」をダウンロードする
3. ウィジェットで、テキストを編集して加える
4. CSSで体裁を整える。

1. プラグイン「SNS Count Cache」をダウンロードする

まずは、SNSからシェア数を引っ張ってくるプラグインをダウンロードします。
これで、facebook、twitter、Google+、はてなブックマークのシェア数を引っ張ってきてくれるみたいです。

ちなみに、「いいね!」もシェア数に入ってくるようでした。

2. プラグイン「PHP Text Widget」をダウンロードする

次に、PHP Text Widgetをダウンロードします。
これをダウンロードせずに、ウィジェットにテキストを書いてみたら、
どうもPHPが動作しないようで、みごとにプログラムの一部だけがかかれました。

ちーん。

3. ウィジェットで、テキストを編集して加える

次に、ウィジェットのテキストを編集します。
こんな感じで書きました。(というかコピペしました。)

<div class=”best_populer”>
<?php
$args = array(
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’,
‘meta_key’ => ‘scc_share_count_total’,
‘orderby’ => ‘meta_value_num’,
‘posts_per_page’ => 5
);

$myposts = new WP_Query($args);

if($myposts->have_posts()) : ?>
<?php while($myposts->have_posts()) : $myposts->the_post(); ?>
<?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
<div class=”best_pupuler_style”>
<a href=”<?php the_permalink(); ?>” class=”entry-image entry-image-link”><?php the_post_thumbnail( ‘thumb300’, array(‘class’ => ‘entry-thumnail’) ); ?><span class=”best_populer_count”><?php if(function_exists(‘scc_get_share_total’)) echo scc_get_share_total(); ?>&nbsp;Share</span></a>
<a class=”best_populer_title” href=”<?php echo esc_url(get_permalink($myposts->ID)); ?>”><?php echo esc_html(get_the_title($myposts->ID)); ?></a>
</div>
<?php else: // サムネイルを持っていない ?>
<div class=”best_pupuler_style”>
<a href=”<?php the_permalink(); ?>” class=”entry-image entry-image-link”><img src=”<?php echo get_template_directory_uri(); ?>/images/no-image.png” alt=”NO IMAGE” title=”NO IMAGE” class=”entry-thumnail no-image list-no-image” /><span class=”best_populer_count”><?php if(function_exists(‘scc_get_share_total’)) echo scc_get_share_total(); ?>&nbsp;Share</span></a>
<a class=”best_populer_title” href=”<?php echo esc_url(get_permalink($myposts->ID)); ?>”><?php echo esc_html(get_the_title($myposts->ID)); ?></a>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<p>記事が存在しません。</p>
<?php endif; wp_reset_postdata(); ?>
</div>

4. CSSで体裁を整える。

最後に体裁を整えます。
「外観」→「エディター」からテーマのスタイルシートに追記します。
色をサイトにあうように編集しました。

.best_pupuler_style{
position:relative;
margin:0 0 20px 0;
border: 1px solid #666;
width:100%;
}

.best_populer_count {
position:relative;
}

.best_populer span{
left: 0;
position: absolute;
text-align: center;
width: 100%;
background: rgba(204, 204, 204, 0.93);
color: #fff;
padding: 10px 0;
text-align: center;
}

.best_populer img{
width:100%;
height: 169px;
}

.best_populer_title{
position: absolute;
background: rgba(255,255,255,0.5);
color: #fff;
bottom: 0;
padding: 10px 5px;
text-decoration: none;
right: 0;
left: 0;
overflow: hidden;
display: block;
}

以上、

アイキャッチ画像を引っ張ってきているので、
アイキャッチ画像がないと不恰好になってしまいます。

リアルタイムではないとか書いてありましたが、
これで一定ニーズを満たす変更を加えることが出来ました。

めでたしめでたし。

参考にさせていただいたサイトの方々、
ありがとうございました。

※有効化時に発生したエラーと対処

別のサイトで、SNS Count Cacheをインストールしようとしたところ、
下記のようなエラーが発生しました。

重大なエラーを引き起こしたため、プラグインを有効化できませんでした。
Fatal error: Call to undefined function get_called_class() in wp-content/plugins/sns-count-cache/includes/class-data-crawler.php on line 76

色々調べたところPHPのバージョンの問題でエラーが起きていたようでした。
PHP5.2⇒PHP5.3に変更したことで、問題なくインストールすることができました。

About 2310 273 Articles
日系損保、外資系コンサルティングファームを経て、2012年、結婚を機に夫婦で365日世界一周。その後、日本と世界をつないで楽しい世の中を創れないかと観光で起業。日々試行錯誤中。趣味は旅行と食べ歩き。世の中にちゃんと付加価値をうみだしていきたい。ワクワクする世界を創っていきましょう。

Be the first to comment

Leave a Reply

Your email address will not be published.