Lognote

ネット集客に強い整体院サイトを制作

share-count-display-thumbnail

WordPressの記事トップにSNSのシェア数を表示する

公開日:2016-04-23
最終更新日:

ブログをやるうえで、記事をバズらせるというのは一つの夢でもあります。

こちらのサイトによると、バズるブログの60%はファーストビュー(ページを開いたとき最初に目に見える範囲)にSNSのシェア数とボタンが設置されているのだそうです。

シェア数が見えることによって、この記事がどれだけの人に評価されているのかが読む前にわかるという点ではすごく読み手に親切ですよね。

ただ、ボタンを設置すると読み込むのに時間がかかってしまったりで不利になる点もあったりします。

そこで今回は、ボタンはなしのシェア数だけ表示するというカスタマイズをしてみたので参考になればと思います。

読み手に親切なシェア数の表示カスタマイズ

「Font Awesome」のアイコンフォントを使ってシンプルにカスタマイズしたいと思います。

最終完成イメージ

カスタマイズ完成イメージです。

23205235

「Font Awesome」のリンク

まず、「Font Awesome」をWordpressに導入していない方はこちらを参考にヘッダーにリンクを追加してください。

コードを追加する

下記コードをsingle.phpのループ内に記述します。使用環境に応じて全体をdivで囲み、cssで整えてください。

閲覧数はプラグイン「WordPress Popular Posts」をインストールしていれば表示可能です。

SNSのシェア数はプラグイン「SNS Count Cache」から取ってきています。

<div class="blogbox">
  <p><span class="kdate"><i class="fa fa-calendar"></i> //記事投稿日
    <time class="entry-date date updated" datetime="<?php the_time(DATE_W3C); ?>">
      <?php the_time( 'Y/m/d' ); ?>
    </time>

  <i class="fa fa-eye" aria-hidden="true"></i> //閲覧数
    <?php if (function_exists('wpp_get_views')) { echo wpp_get_views( get_the_ID() ); } ?> views

  <i class="fa fa-twitter"></i> //Twitter
    <?php if(function_exists('scc_get_share_twitter')) echo scc_get_share_twitter(); ?>

  <i class="fa fa-facebook"></i> //Facebook
    <?php if(function_exists('scc_get_share_facebook')) echo scc_get_share_facebook(); ?>

  <i class="fa fa-google-plus"></i> //Google Plus
    <?php if(function_exists('scc_get_share_gplus')) echo scc_get_share_gplus(); ?>

  <i class="fa fa-hatena"></i> //はてなブックマーク
    <?php if(function_exists('scc_get_share_hatebu')) echo scc_get_share_hatebu(); ?>

  <i class="fa fa-get-pocket"></i> //Pocket
    <?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?>

  <i class="fa fa-rss"></i> //feedly
    <?php if(function_exists('scc_get_follow_feedly')) echo scc_get_follow_feedly(); ?>

  <i class="fa fa-commenting-o" aria-hidden="true"></i> //コメント数
    <a href="<?php comments_link(); ?>"><?php comments_number('(0)','(1)','(%)'); ?></a></span></p>
</div>

必要のないものは適当に省いてください。

CSSはSTINGER7ではこのようになっています。ちなみに私はこのまま使用しています。

/* 記事タイトル下 */
.blogbox p {
  font-size: 12px;
  margin: 0px;
  color: #666666;
  line-height: 15px;
}

.blogbox {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #666666;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: #666666;
  margin-bottom: 20px;
  padding: 5px;
}

コピペで同じように表示されるはずです。

あとはシェアされるような記事を頑張って書くだけです。これが一番難しいんですけどね。

以上、「WordPressの記事トップにSNSのシェア数を表示する」という記事をお届けしました。

-WordPress

この記事のタイトルとURLをコピーする
WordPressの記事トップにSNSのシェア数を表示する
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

letter-spacing-thumbnail

ブログ記事右端にできる不自然な空白をCSSで修正する

ブログ記事を作成して公開した文章をチェックすると、まれにテキストの右端が不自然なところで改行されていることはな …

mb-substr-wordpress-thumbnail

WordPressの抜粋表示には「mb_substr」ではなく「the_excerpt」を使った方がいい理由

最近、SEO的に画像にaltとキャプションを入れるのも無視はできないという記事を読み、わたしも実践するようにな …

font-awesome-thumbnail

アイコンフォント「Font Awesome」をWordPressに導入する方法

アイコンフォント「Font Awesome」を、WordPressに導入する方法を紹介します。 目次Font …

instagram-bug-cause-tw-autolink-thumbnail

WordPressでInstagramの埋め込みが表示されない原因はこれだった!

Instagramの埋め込みが表示されないバグが発生しました。原因はfunctions.phpに記述した「Twitterの自動...

advanced-code-editor-thumbnail

テーマ編集で行数を表示するWordPressプラグイン「Advanced Code Editor」

WordPress内でテーマを編集するとき行数表示がなくて不便だなと感じることはないでしょうか。今日はそんな悩 …

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい