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(); ?> 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(); ?> 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に変更したことで、問題なくインストールすることができました。
コメント