【図解】CocoonでTwitterのシェア数を表示させる方法

CocoonでTwitterのシェア数を表示させる方法Cocoon(コクーン)の設定・使い方

CocoonではTwitterのシェア数が表示されません。これは本家Twitter側がツイート数取得APIをやめてしまったためです。

代替として「count.jsoon」というサービスに登録してツイート数を取得する方法がありますが、カウントが表示されたりされなかったりする事もあるためCocoonでは採用されてません。

という事でTwitterのシェア数を表示したい場合には自分で「count.jsoon」に登録してphpのファイルを編集する必要があります。

今回は「count.jsoon」の登録とTwitterシェア数表示のカスタマイズを紹介していきます。

Twitterのシェア数を表示する手順と流れ

Twitterのシェア数を表示する手順は3ステップです。

  1. count.jsoonに登録
  2. 子テーマのfunctions.phpにコードを追加
  3. phpファイルを編集してTwitterカウント数を表示する記述に変更する

それぞれ注意点もあるのでその都度紹介していきます。

※カスタマイズ前にはバックアップとっておくと安心です。ファイル編集などは自己責任でお願いします。

手順1.count.jsoonに登録

count.jsoonに登録していきます。

count.jsoon

サイト登録申請ボタンをクリック。

cont.jsoonに登録申請をする手順2

利用規約の同意にチェックを入れてサイトURLとメールアドレスを入力して「サイト登録」をクリック。

cont.jsoonに登録申請をする手順4

以上で登録申請は完了です。

cont.jsoonに登録申請をする手順5

登録処理が終わるまで1日~2日かかりますのでその間にファイルの編集をしていきます。

手順2.子テーマのfunctions.phpにコードを追加

子テーマのfunctions.phpにコードを追加していきます。

functions.phpは記述ミスしたり、重複する記述をしたりするとサイトが真っ白になりますので慎重に。

ただ、記述ミスで真っ白になっても追加した記述を削除して元に戻せば大丈夫です。

WordPressの管理画面から「外観」⇒「テーマエディター」⇒「テーマのための関数(functions.php)」と進みます。

Twitterシェア数をカウントコード追加

functions.phpに以下の記述を追加。

//count.jsoonからTwitterのツイート数を取得
function fetch_twitter_count($url){
  $url = rawurlencode( $url );
  $subscribers = wp_remote_get( "http://jsoon.digitiminimi.com/twitter/count.json?url=$url" );
  $res = '0';
  if (!is_wp_error( $subscribers ) && $subscribers["response"]["code"] === 200) {
       $body = $subscribers['body'];
    $json = json_decode( $body );
    $res = ($json->{"count"} ? $json->{"count"} : '0');
  }
  return $res;
}

CocoonでTwitterカウントを表示させる方法3

手順3.phpファイルを編集してTwitterカウント数を表示する記述に変更する

最後の手順は「tmp/sns-share-buttons.php」というファイルの

<?php echo get_twitter_count(); ?>

という記述を

<?php echo fetch_twitter_count( get_permalink() ); ?>

に書き換えるのですが、やり方は2通りあります。

  1. 親テーマのファイルを編集する
  2. 子テーマにファイルを追加して編集する

親テーマを編集するのが簡単なんですが、テーマ自体が更新したら再度編集が必要になります

子テーマの編集だとテーマが更新しても再度編集は必要ありません。

ただ、Cocoonの子テーマには「sns-share-buttons.php」ファイルがないので、追加してから編集する必要があります。

また、親テーマに大きな変更があったりすると不具合出る可能性もなくはないって感じですね。

どちらも重要なテーマ編集なので自己責任でお願いします。

※「親テーマの編集」「子テーマの編集」両方する必要はありません。どちらかの編集だけでOKです

1.親テーマのファイルを編集する場合

WordPressの管理画面から「外観」⇒「テーマエディター」⇒右上の「編集するテーマを選択」で「Cocoon(親テーマ)」を選択。

CocoonでTwitterカウントを表示させる方法4

「tmp」フォルダの中の「sns-share-buttons.php」をクリック。

CocoonでTwitterカウントを表示させる方法5

「sns-share-buttons.php」から以下の記述を探します(私のは18行目にありました)。

<?php echo get_twitter_count(); ?>

CocoonでTwitterカウントを表示させる方法1

この部分を以下のように書き換えます。

<?php echo fetch_twitter_count( get_permalink() ); ?>

CocoonでTwitterカウントを表示させる方法2

2.子テーマのファイルを編集する場合(エックスサーバーの場合)

レンタルサーバーはエックスサーバーの例でやっていきます。

まずは親テーマの「sns-share-buttons.php」をコピーする必要があります。

ファイルマネージャーから「自分サイトのドメイン」⇒「public_html」⇒「wp-content」⇒「themes」⇒「cocoon-master」⇒「tmp」と進み、「sns-share-buttons.php」にチェックを入れて「編集」。

Twitterシェア数をカウントするためのファイル編集1

これが親テーマの「sns-share-buttons.php」なので内容をまるっとコピーします。

Twitterシェア数をカウントするためのファイル編集2

コピーできたらこんどは子テーマの方へいきます。

ファイルマネージャーから「自分サイトのドメイン」⇒「public_html」⇒「wp-content」⇒「themes」⇒「cocoon-master」と進み「tmp」というフォルダを作成。

Twitterシェア数をカウントするためのファイル編集4

作成した「tmp」フォルダをクリックしてtmpフォルダ内に今度は「sns-share-buttons.php」ファイルを作成。

Twitterシェア数をカウントするためのファイル編集5

次に追加した「sns-share-buttons.php」にチェックを入れて「編集」。

Twitterシェア数をカウントするためのファイル編集6

後は親テーマからコピーした「sns-share-buttons.php」の内容を子テーマの「sns-share-buttons.php」に貼り付け。

Twitterシェア数をカウントするためのファイル編集8

後は

<?php echo get_twitter_count(); ?>

という記述を

<?php echo fetch_twitter_count( get_permalink() ); ?>

に書き換えて保存したらOKです。文字コードは「UTF-8」で保存。

Twitterシェア数をカウントするためのファイル編集7

以上で編集は完了です。

count.jsoonの登録が完了してればTwitterのシェア数が表示されます。

Twitterシェア数をカウントするためのファイル編集9

このSNSシェアボタンが表示されない場合はフォルダの追加やファイルの記述ミスがありますので再度確認してみて下さい。

参考:PHPとcount.jsoonを用いてTwitterのシェア数を取得するWordPressカスタマイズ方法|寝ログ

アフィリエイトの始め方と稼ぐ方法のまとめ
アフィリエイトの始め方や基礎的な知識、具体的な手法などアフィリエイトで稼ぐ方法ま...

コメント

タイトルとURLをコピーしました