Cocoon(コクーン)のブログカードではてブを表示【カスタマイズ】

Wordpress

ちまちまとCocoon(コクーン)のカスタマイズをやっています。cssやphpのコードをまとめていきます。

Cocoon(コクーン)のブログカードではてブを表示(内部リンクの完成版)

第一弾としては、現在、Cocoon(コクーン)のブログカードで、はてブを表示する機能はありません。そのため表示しました。

完成品はこんな感じです。はてブは画像ではありません。

電子書籍おすすめ徹底比較(2019) 漫画や小説で安いアプリ/サイトはどこ!?
2019年改めて電子書籍のおすすめサイトを徹底比較してみることにしました。電子書籍元年(2010年)から電子書籍ユーザーであり、はてぶ・いいねも充実している記事なので見ていってくださいね。 この記事とこの記事から分岐する記事で以下のこ...
Wordpressの子テーマの作り方〜header.phpやfooter.phpやsingle.phpもあると便利
Wordpressの子テーマの作成方法をまとめておきます。覚書をかねています。 style.cssやfunctions.phpだけではなく、header.phpやfooter.phpやsingle.phpもあると便利だと思います。 ...

そもそもはてブがあまり多くはありませんが…。。

スポンサーリンク

電子書籍のおすすめ比較

Cocoon(コクーン)のブログカードではてブを表示(作り方)

コクーンのサイトをみると、lib内の関数をカスタマイズする場合、子テーマのfunctions.phpにオーバーロードして利用できるようになったようです。あいかわらず丁寧に解説してくれているため、ありがたいです。コクーンを使う理由のひとつとしてソースコードが読みやすい点もあるでしょう。

lib内に、blogcard-in.phpがあります。simplicityと違って、ブログカードは内部リンクと外部リンクはファイルわけしたようですね。

途中でssl化したサイトのため、httpとhttpsのはてブを足して表示することにしました。簡単ではありますが、コメントを入れて解説しておきます。

// urlを置換してhttpのアドレスを用意
$http_url = str_replace( 'https://', 'http://', $url );
// httpとhttpsのはてぶ数をテキストで取得して合算(画像はあまりよろしくない)
$http_hatebu_count= @file_get_contents("http://api.b.st-hatena.com/entry.count?url={$http_url}");
$https_hatebu_count = @file_get_contents("http://api.b.st-hatena.com/entry.count?url={$url}");
$hatebu_count = $http_hatebu_count + $https_hatebu_count;

寝ログさんのサイトなどを参考にしました。

参考 [PHP]はてなブックマークのAPIを使って特定のURLのブックマーク数を取得する « Codaholic

参考 WordPressで個別ページのはてブ数をPHPで取得する方法

注意点ですがhttpのサイトで上記のコードを使うとはてブが2倍返しになってしまうので、不要なコードは省いてください。httpのサイトは下記のコードでいいですね。

$hatebu_count = @file_get_contents("http://api.b.st-hatena.com/entry.count?url={$url}");

はてぶは画像なので、テキストで取得することにしました。コクーンの標準機能から画像ではてブを表示する機能は高速化の都合上、外されたようです。

余談ですが、いきなり合算値を取ろうと、get_hatebu_count();まわりのコードをみたのでけど、うまくいきそうな感じではありませんでした。リンク先ではなく記事のはてブをとってしまう。

記事上下に表示されているはてブですが、sns count cacheを使っている場合はそちらの値を拾ってくるようになっていましたね。sns count cacheを利用しているため、助かりましたね。sns count cacheは長らく更新されていませんが、Β版が公式からダウンロードできるようになっていましたね。

余談のめもが多くなりました。取得はokなので、あとは表示するだけです。

0の場合、表示しないためケースわけし、はてブの表示するコードを追加します。

  //取得した情報からブログカードのHTMLタグを作成
  //_v($url);
	if ($hatebu_count == 0) {

	  $tag =
	  '<a href="'.$url.'" title="'.esc_attr($title).'" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"'.$target.'>'.
	    '<div class="blogcard internal-blogcard'.$additional_class.' cf">'.
	      '<figure class="blogcard-thumbnail internal-blogcard-thumbnail">'.$thumbnail.'</figure>'.
	      '<div class="blogcard-content internal-blogcard-content">'.
	        '<div class="blogcard-title internal-blogcard-title">'.$title.'</div>'.
	        '<div class="blogcard-snipet internal-blogcard-snipet">'.$snipet.'</div>'.
	      '</div>'.
	      '<div class="blogcard-footer internal-blogcard-footer cf">'.
	        $site_logo_tag.$date_tag.
	      '</div>'.
	    '</div>'.
	  '</a>';
		
	}else{

	  $tag =
	  '<a href="'.$url.'" title="'.esc_attr($title).'" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"'.$target.'>'.
	    '<div class="blogcard internal-blogcard'.$additional_class.' cf">'.
	      '<figure class="blogcard-thumbnail internal-blogcard-thumbnail">'.$thumbnail.'</figure>'.
	      '<div class="blogcard-content internal-blogcard-content">'.
	        '<div class="blogcard-title internal-blogcard-title">'.$title.'</div>'.
	        '<div class="blogcard-snipet internal-blogcard-snipet">'.$snipet.'</div>'.
	      '</div>'.
	      '<div class="blogcard-footer internal-blogcard-footer cf">'.
	        $site_logo_tag.'<span class="hatebu">'.$hatebu_count.'user</span>'.$date_tag.
	      '</div>'.
	    '</div>'.
	  '</a>';

   }

$site_logo_tag.の後方に追加しました。

ちなみに、ブログカードにはてブに飛ぶリンクにいらないかな、と思って省きました。記事に飛んでほしいので。。そのあとはてブするか否かでいいかなっと。

最後にスタイルシートで装飾です。はてぶのスタイルシートは寝ログさんのサイトからそのまま拝借しました。

.hatebu{
    background-color: #FFD5D5 !important;
    color: #FF7979 !important;
    font-weight: bold;
    font-size: 12px;
    margin-left: 8px;
    padding: 1px;
}
WordPressで個別ページのはてブ数をPHPで取得する方法
Wordpressカスタマイズではてなブックマーク数を表示する方法です。

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

ブログカードの外部リンクはblogcard-out.phpに記載があり、別コードのため、別途対応が必要です。とりあえず、外部リンクは対応していませんのでご了承ください。

お役に立てば幸いです。

人気記事  【比較表あり】安いオンラインプログラミングスクールはおすすめ?【無料あり】
  1. プログラミングスクールは格安に!cssやphpも楽勝に!
  2. 電子書籍並みの価格で買える格安のプログラム動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
Wordpress
neruをフォローする
スポンサーリンク
ebookbrain

コメント

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