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

かみいち
かみいちです

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

この記事では、

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

を書いてきます。

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

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

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

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

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

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

それではまいります。

SPONSERD LINK

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

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

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

Sns-count-Cacheの管理画面

↑こんなかんじ。

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

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

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

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

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

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

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

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

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

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

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

SNS count Cache ツイッターの設定

↑ こんなかんじ

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

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

SimplicityでSNS Count Cacheプラグインを使いつつcount.jsoonでTwitterシェア数を復活させる方法【wordpress】
今回書くのは、Simplicityという Wordpressのテーマで、 「count.jsoon」というTwitterのシェア数を復活させるサービス 「SNS count Cache」というSNSシェア数を取得&表示するプラグイン を同時に設定し、利用する方法...

SPONSERD LINK

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; /* 内側余白 */
}

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

SPONSERD LINK

まとめ

これで、

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

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

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

参考にした記事

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

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

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

かみいち
かみいちでした

この記事が参考になったら
いいね!しよう

Facebookから最新情報をお届けします。

Twitterでかみいちを