ずーーーっと気になってたけど、めんどくさくて後回しにしてて。
試しにプラグイン入れてみたけど、なんか好きになれなくて。
とうとう重い腰上げて直したったわ！旅日記の続き書きたいんだけど本当はね！
シェアボタンの重すぎ
なんていうのかな。
読み込みが長く続くのよね。
表示はされてるけど、シェア数取得に時間かかってるのかな？みたいな。
アドセンス広告と相まってまぁ遅い遅い。
一度プラグインにしてみたらすごく早くて感動したわ。
でもプラグインだったから、ツイートするとき、一度プラグイン作った人のページみたいな、とりあえずワンクッション強制的に挟まれちゃうのね。それが嫌でもとに戻したわけですが、
なんかすごく気が向いたので作り直すことにしました！
自作ボタン
こちらのサイトさんをまるっと使わせていただきました！
参考 ソーシャルボタンを変更するとWordPressサイトが軽量化できるらしいSoricity | ソリシティさくっとまとめますと、
- ボタンの見た目を整えるCSS作成
- シェアボタンにあたる部分をまるっとPHPで作成
- single.phpで作ったPHPをシェアボタン入れたい場所で呼び出し
こんな感じになります。
あとはCSSは自分好みにちょちょいといじっちゃいましょね。
これで終了！
はい、これだけなら記事にはしませんわな。
アイコンが足りないので
上記サイトさんでも明言されてますが、アイコンにはFont Awesomeを使用しているのですが、はてブなど足りないアイコンがあります。
まぁ世界で使われるFont Awesomeさんですからね、地域限定のアイコンはなかなかね。
Font Awesomeについては中の人に影響力を与えすぎるサルワカ大先生がこれ以上ないほど説明してくださってます。
中の人はいつかサルワカ大先生制作のWordPressテーマ「SANGO」を使うのが夢だとか。
参考 【保存版】Font Awesomeの使い方：Webアイコンフォントを使おうサルワカ足りない分のアイコンはどうする？！
いつもお世話になっております！寝ログさん！！
参考 jQueryでシェア数を取得し表示を高速化！WordPressに自作バルーンボタンを作成する全手順まとめ寝ログこちらの方は「Simplicity」という無料とは思えない無料Wordpressテーマの制作者さんですね。なのでPHPで困ったときはいつも参考にさせていただいてます。
ほんと頼りになりはるわ・・・
寝ログさんの、「アイコンフォントファイルの準備」と「必要なライブラリファイルの呼び出し」の部分だけが今回必要な部分になります。
いつかは記事の本題である、jQueryでシェア数を取得してみたいものですが、いかんせん現状取得するものがないので致し方ありません。
ひとつ注意点なのですが、アイコンフォントをダウンロードして自分のテーマ内に保存するのですが、私は子テーマのフォルダに保存しました。
ですので、ファイルを呼び出すとき、header.phpに
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/icomoon/style.css">
ではなく、
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/icomoon/style.css">
にしています！
get_template_directory_uri()だと親テーマを、get_stylesheet_directory_uri()だと子テーマを参照するのですね！
ここちゃんとしないと、せっかく保存したアイコン出ないからね！
使い方はFont Awesomeと一緒
Font Awesomeも、寝ログさんからダウンロードしたアイコンフォントも、どちらもWebアイコンフォントになります！
すっごく簡単に言うと、画像じゃないから小さくしても大きくしてもずっときれいなまま使える便利なやつなんだね！
ざっくりすぎたね。
とりあえず、画像ではないから、headerで呼び出しが必要なんだね。
ほら、webの文字ってさ、読みづらいな～って思って文字サイズ大きくしても字が汚くならないでしょ？それのアイコン版って感じね。
Font Awesomeの使い方はさっきリンクカード貼ったサルワカ先生をご参照くださいね！
sns.phpの修正
最初に作ったsns.php、足りなかったアイコンの部分を修正しますよ！はてブ・LINE・feedlyのアイコンを変えましょう！
<iclass=“fa fa-hatena”>→<i class=”icon-hatena”>
<iclass=“fa fa-line”>→<i class=”icon-line”>
<iclass=“fa fa-rss”>→<i class=”icon-feedly”>
これで保存すれば出るはず！
スマホ時の見え方修正
sns.phpですが、PC時だと4列×2行、スマホ時（幅600以下）だと2列×4行になっていますが、自分はアイコンだけを表示させて、スマホ時でも4列×2行で見せたいなーと思ったので修正します。
まず、CSS
/* PC時は"pc"のclassが表示 */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマホ時は"sp"のclassが表示される */
@media screen and (max-width:600px){
.pc { display: none !important; }
.sp { display: block !important; }
.share li {
float: left;
width: 23.3%;
margin:2px;
}
.share li a {
border-radius:6px;
font-size : 15px;
}
}を入れます。
通常はpcのクラスが付いてるものが表示されててspは非表示、表示幅が600px以下になると、spのクラスが付いてるものが表示されpcが非表示になるって寸法ですな。
そしてsns.phpの
「<div class=”share”>」を「 <div class=”share pc“>」にします。
そして、sns.phpの一番下に下記追加
<div class="share sp">
<!--<h3><i class="fa fa-share-square fa-lg fa-fw"></i> Share</h3>-->
<ul>
<!--Facebookボタン-->
<li class="facebook"><a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
<i class="fa fa-facebook"></i> <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a></li>
<!--ツイートボタン-->
<li class="tweet"><a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
<i class="fa fa-twitter"></i> <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a></li>
<!--Google+ボタン-->
<li class="googleplus"><a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">
<i class="fa fa-google-plus"></i> <?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a></li>
<!--はてなボタン-->
<li class="hatena"><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;">
<i class="icon-hatena"></i> <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a></li>
<!--LINEボタン-->
<li class="line"><a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">
<i class="icon-line"></i> </a></li>
<!--ポケットボタン-->
<li class="pocket"><a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>">
<i class="fa fa-get-pocket"></i> <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li>
<!--RSSボタン-->
<li class="rss"><a href="<?php echo home_url(); ?>/?feed=rss2">
<i class="fa fa-rss"></i> </a></li>
<!--feedlyボタン-->
<li class="feedly"><a href="http://feedly.com/i/subscription/feed/https://sekkakudakara.com//feed" target="blank">
<i class="icon-feedly"></i> <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>
</ul>
</div>それぞれdivタグにpcのクラスとspのクラスが付いてるので、切り替えができるのですね。
そしたらこんな感じになりました！サイトのテーマによっては同じようにならないかもしれないので、CSSなどは分岐の部分だけですがあくまで参考程度に！
PCと
スマホ時ですね
なんかカラフルすぎるなー。また気が向いたら変えるかも？
そんじゃお疲れ様でしたー！
