SimplicityのトップページにSNSトータルシェア数を表示!SNS count Cacheで取得するよ【WordPress】

SNSトータルシェア数 スマホ表示

かみいち
かみいちです

ぼくのブログは、Wordpressの Simplicityというテーマを使って作っています。

この記事では、

 

Simplicityのテーマで、トップページの各記事リストに「SNSトータルシェア数」を表示する方法

 

を書いてきます。

 

  • ① どの phpファイルを編集したらいいか?
  • ② SNSトータルシェア数を表示させるコードは?
  • ③ デザインを整えるCSSは?

この3つの疑問が分かれば、すぐ解決するはずです。

 

ちなみに、今回使用するのは SNS count Cacheというプラグインです。

 

ちなみにちなみに、Twitterのシェア数も合算したい場合は、

Simplicity で SNS Count Cacheプラグインを使いつつ Twitterシェア数を復活させる方法

を参考にしてみてください。

 

それではまいります。

SNS count Cacheプラグインを導入しよう

このプラグインは便利です。

管理画面で、SNSのシェア数を一元管理できるようになります。

 

Sns-count-Cacheの管理画面

↑こんなかんじ。

SNS count Cacheプラグインをインストール

今回のやり方だと、このプラグインがないと、トップページにシェア数を表示できません。

ということでインストールしてください。

 

① 管理画面のプラグインから「新規追加」に進み、”SNS Count Cache”を検索する

②「今すぐインストール」と「有効化」を実行する

 

※公式のダウンロードページから、ZIPファイルをダウンロードしてインストールする方法もあります。(ぼくは管理画面からインストールしました)

https://wordpress.org/plugins/sns-count-cache/

「ツイート数」をどうするかを設定しよう

ツイート数は、今現在は取得されません。

なので、無駄な処理をさせないように、設定しておいた方が良さそうです。

 

ダッシュボードから「SNS count Cache」「設定」へと進み、

「シェア基本キャッシュ機能」の “Twitter”のチェックボックスを外しておきましょう。

 

SNS count Cache ツイッターの設定

↑ こんなかんじ

 

ツイート数を取得したい場合は、もちろんチェックは外しません。

意外と簡単にできるので、よかったらこの記事を参考にカスタマイズしてみて下さい。

 

http://d-kamiichi.com/archives/4013

Simplicityのカスタマイズをスタート!

…の前に、

しっかりバックアップを取りながら、カスタマイズすることをオススメします。

 

※テーマのカスタマイズは、子テーマを利用するのが一般的な方法ですね。

子テーマをダウンロードしに行く

entry-card-content.phpを編集する

① まず、親テーマから子テーマフォルダ内に entry-card-content.phpファイルをコピーしてください

 

② 子テーマの編集画面から entry-card-content.phpファイルを開きます

 

③ 次のコードを、表示させたい場所に記入する

<span class="share-total"><?php if(function_exists('scc_get_share_total')) echo scc_get_share_total(); ?>&nbsp;Shares</span>

 

今回は、こういう表示にしてみました!

オーソドックスなタイプですね。

 

④ 具体的にどこに表示するかを決めてください



<div class="<?php echo $entry_class; ?>”>



候補A:ここだと、「記事タイトルの上」になります!



<h2><a href="<?php the_permalink(); ?>" class="entry-title entry-title-link" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>



候補B:ここだと、「記事タイトルと投稿日の間」になります!



 <?php if ( is_create_date_visible() ): //投稿日を表示する場合?>
 <span class="post-date"><span class="fa fa-clock-o fa-fw"></span><span class="published"><?php the_time( get_theme_text_date_format() ) ;?></span></span>
 <?php endif; //is_create_date_visible?>

 <?php if ( is_category_visible() && //カテゴリを表示する場合 get_the_category() ): //投稿ページの場合?>
 <span class="category"><span class="fa fa-folder fa-fw"></span><?php the_category(', ') ?></span>
 <?php endif; //is_category_visible?>

 <?php //コメント数を表示するか if ( is_comments_visible() && is_list_comment_count_visible() ): $comment_count_anchor = ( get_comments_number() > 0 ) ? '#comments' : '#reply-title'; ?>
 <span class="comments">
 <span class="fa fa-comment"></span>
 <span class="comment-count">
 <a href="<?php echo get_the_permalink() . $comment_count_anchor; ?>" class="comment-count-link"><?php echo get_comments_number(); ?></a>
 </span>
 </span>
 <?php endif ?>

<!-- /.post-meta —>



候補C:ここだと、「投稿日・カテゴリと抜粋の間」になります!



<?php echo get_the_custom_excerpt( get_the_content(''), get_excerpt_length() ); //カスタマイズで指定した文字の長さだけ本文抜粋?>

 <?php if ( get_theme_text_read_entry() ): //「記事を読む」のようなテキストが設定されている時 ?>
<a href="<?php the_permalink(); ?>" class="entry-read-link"><?php echo get_theme_text_read_entry(); //記事を読む ?></a>
 <?php endif; ?>

 

↑ 候補を3つほど書いてみました。

いろいろと試してみるのが良いかなと思います。

ぼくのブログの表示位置は?

ちなみにぼくは、今のところ「候補B」の場所に表示しています。

スマホ表示のことも考えると、ここの収まりが良かったのでそうしました。

 

SNSトータルシェア数 スマホ表示

↑ こんなかんじ。

CSSでデザインを整える!

最後です。

 

.share-total {
	font-size: 13px; /* 文字のサイズ */
	font-weight: bold; /* 文字の太さ */
	text-decoration: underline; /* 下線 */
	vertical-aline: 1px; /* 文字位置 */
	background: #ffcbcb; /* 背景色 */
	color: #ff0707; /* 文字色 */
	padding: 1px 1px 1px 0; /* 内側余白 */
}

 

ほんの一例です。デザインは自由に変えてみてください!

まとめ

これで、

  • ① SNSシェア数が一目で分かる
  • ② プラグインの管理画面でシェア数を管理できる
  • ③ これを応用して色々な場所に設置できる

ようになったと思います。

 

ぼくも ③に挑戦して、オススメの設置方法があったらまたご紹介します!

参考にした記事

参考)ツイート数やはてブ数を取得して高速表示できるSNS Count Cache

参考)[試] 表示速度改善のその先へ!進化するWordPressプラグイン SNS Count Cache

 

ありがとうございました!

かみいち
かみいちでした