ソーシャルボタンを自作してWordPressの高速化

タイトル通りなんですが、これでソーシャルボタン(SNSボタン)の設置はプラグイン「WP Social Bookmarking Light」で設置していたのですが、これをやめて自作する事にしました。今回作成したのはこんな感じです。一応シェア数も表示させる事も可能です。

sns-4

自作した理由ですが単純にSNSボタンが重い!これはプラグインが悪い訳ではありません。ソーシャルボタン自体に表示速度を重くする原因がありました。

スポンサーリンク
スマートフォン買取

ソーシャルボタンが重い理由

普通のソーシャルボタンは、TwitterやFacebook等の各サイトでHTMLやJavaScriptのコードを入手して、簡単に設置する事ができます。しかし、その入手したコードを見てみると分かるのですが、ボタン1つ1つにscriptタグ、画像、iframe等が含まれています。

つまり、Twitterのボタン1つにしても読み込むのに前述したようなscript、ボタンの画像等を読み込む必要があります。他にもFacebookやはてな等複数のボタンを設置すると同じように1つ1つscript、画像等を読み込む訳です。そのため、ボタンの数が多い程読み込みには時間がかかるという事になります。

対策としては色々な方針があると思いますが、今回はボタンの画像を使わずにボタン自体をCSSで作成してアイコンはウェブフォントを使って軽量化する事にしました。

ウェブフォントの利用とそのメリット

ウェブフォントは画像のようなアイコンを文字として使う事ができます。例えば先ほど紹介した私のソーシャルボタンではTwitterやFacebookのアイコンが付いています。

icon-1

これがウェブフォントです。これは画像のように見えますが、文字として読み込まれますので普通の文字と同じ扱いです。colorやfont-sizeのようにCSSの記述で色や大きさも変える事ができるので非常に便利です。このウェブフォントを利用するために先に使うウェブフォントだけダウンロードしてサーバーにアップしておきました。

今回SNSボタンを自作しますが、同じようにアイコンを利用したいという場合には先にアイコンを用意しておきましょう。
アイコン画像をWebフォントに変更して高速化

SNSボタン作成の手順

これからSNSボタンの設置をしていきますが、テーマによって表示が崩れたりする事もあるかも知れませんので、その場合にはコメントでお知らせして頂けると助かります。

まずは子テーマのCSSでボタンのスタイルを作成しておきます。子テーマのCSSに次の記述をしておきます。

/* SNSボタン */
.share {margin-top : 40px;}
.share ul {margin : 0;
    padding : 0;
    list-style : none;}
.share li a {display : block;
    padding : 10px;
    color : #fff;
    font-size : 14px;
    text-decoration : none;
    text-align : center;}
.share li a:hover {opacity :0.8;
    color : #fff;}
.share li a:visited{ color: #fff;}
.share ul:after {content : "";
    display : block;
    clear : both;}
.tweet a{background-color : #55acee;}
.facebook a{background-color : #315096;}
.googleplus a{background-color : #dd4b39;}
.hatena a{background-color : #008fde;}
.line a{background-color: #00c300;}
.pocket a{background-color :#f03e51;}
.rss a{background-color: #ff8c00;}
.feedly a{background-color: #6cc655;}
 
.share li {float : left;
    width : 25%;
    margin : 0;
margin-top:15px;}

全部1つ1つ説明すると日が暮れますので重要な部分だけ説明しておきます。最後の記述「.share li」の部分で各ボタンの幅(width)を25%にしております。これはボタンを8つ設置するのですが、4つずつ並べたいので100%を4で割って25%という計算です。

続いてスマートフォン用のページのボタンのスタイルも追加しておきます。

@media screen and (max-width:599px){
.share li {
  float : left;
  width : 100%;
  margin:0 2% 3% 0;}
.share li a {border-radius:6px;}
}

@media screen and (max-width: 599px)がブラウザのサイズが599px以下ならという条件分岐です。

つまりスマートフォン用のページでは各ボタンの横幅(width)を100%にしています。スマートフォンで横一列は見にくいですよね。横幅100%にしておけばスマートフォンではこのように表示されます。

sns-3

ここの横幅を46%くらいに変更すると横に2つずつ並ぶようにもできます(余白があるので50%では2列になりません)。さて、これでCSSは完成です。続いてSNSボタンを設置するのですが、先に各ボタンの設置コードから紹介して最後に設置場所を紹介していきます。

ソーシャルボタン設置コード

さて、ソーシャルボタンの設置ですが、全部のコードを書くと非常に複雑で長くなってしまいますので、子テーマに「sns.php」を用意して、そこにソーシャルボタンのコードを書きます。それで完成させた「sns.php」を設置したい場所で呼びだすという方針です。

これなら設置したい複数の場所でこの「sns.php」を呼びだすだけですし、もしソーシャルボタンをもう少しカスタマイズしたいという場合に「sns.php」を編集するだけで設置したすべての場所のコードを全部一括で変更できますので簡単です。

という訳でまずは子テーマに「sns.php」を作成しておきます。これは他の子テーマを作成する手順と同じで、子テーマのフォルダに「sns.php」と名づけたファイルをアップするだけです。中身は後で書きますので、とりあえず名前だけ付けてファイルを作成しておきます。

sns-1

sns-2

子テーマに「sns.php」の作成ができたらWordPressに戻って「外観」⇒「テーマ編集」と進み、先ほど作成した「sns.php」を開きます。

それで「sns.php」にSNSボタンの設置コードを書いて行きます。

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'|'.get_bloginfo('name');
?>
 
<div class="share">
    <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;">
        <span class="icon-facebook"></span> facebook <?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;">
        <span class="icon-twitter"></span> tweet <?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;">
        <span class="icon-google-plus"></span> Google+ <?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;"><span class="icon-hatebu"></span> はてブ <?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;?>"><span class="icon-line"></span> LINE</a>
</li>     

<!--ポケットボタン-->      
<li class="pocket">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>"><span class="icon-pocket"></span> Pocket <?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"><span class="icon-feed2"></span> RSS</a></li>

<!--feedlyボタン-->
<li class="feedly">
<a href="http://feedly.com/i/subscription/feed/http://自分のドメイン/feed" target="blank"><span class="icon-feedly"></span> feedly <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>   
</ul>
</div>

えっと「feedly」のコードには自分のドメインを入れる部分がありますので、「自分のドメイン」と書かれている部分を消してここに自分のドメインを入れます。

それから各ボタンのテキストの部分の直前に前回「IcoMoon」で取得してきたウェブフォント(アイコンフォント)のコードを入れてアイコンを表示させてますので、この部分は自分の取得したアイコンのコードに書き換えて下さい。各SNSのこの部分です。

<span class="icon-facebook"></span> facebook 
<span class="icon-twitter"></span> tweet 
<span class="icon-google-plus"></span> Google+ 
<span class="icon-hatebu"></span> はてブ

こんな感じで各ボタンのテキスト部分の直前に「IcoMoon」で取得したアイコンを呼び出してます。全部のボタンにこの記述をしてますので、確認してみて下さい。

また、各ボタンのシェア数まで表示させたい場合にはWordPressのプラグイン「SNS Count Cache」を入れて有効化すればシェア数まで表示されるようにしてます。プラグインを有効化してしばらく時間が経つと表示されるようになります。

SNSボタンの設置場所

えっと、ボタンの設置場所ですが、私の場合(TwentyTwelve)では子テーマの「content.php」と「content-page.php」に追加しています。まずは「content.php」の中から次の記述を探します。「Ctrl」+「F」を押すと検索窓が出ますのでそれで探すと早いです。

</div><!-- .entry-content -->

これが記事本文のコンテンツの終わりの部分ですのでこの「直前」で作成した「sns.php」を呼び出してみましょう。

私の場合はカテゴリーページでは表示したくないので「個別ページなら」という条件分岐をしておきました。

<?php if ( is_single() ) : ?>
<?php get_template_part( 'sns' ); ?>
<?php endif; ?>

こんな感じになります。「php if ( is_single() ) 」という部分が「もし個別ページなら」という条件分岐タグです。

sns-3

続いて固定ページのテンプレート「content-page.php」も同じ要領です。

</div><!-- .entry-content -->

これの直前に設置コードを追加します。ここでは条件分岐は必要ないのでそのまま追加でOKです。

私の場合は固定ページをトップページに指定(表示設定でできます)しているのでこれで終了ですが、トップページを固定ページにしていないという方はトップページにSNSボタンが表示されないと思います。その場合は子テーマに「index.php」を作成して親テーマの記述をコピペしておきます。

それで子テーマの「index.php」から次の記述を探します。

<?php twentytwelve_content_nav( 'nav-below' ); ?>

これがページ下のナビゲーションの部分になりますのでこの直前にでも設置コードを追加します。ただ、ここで注意点があり、トップページにSNSボタンを設置する場合には若干コードを変更する部分がありますのでSNS.phpは呼び出さずに直接全部書いてしまうと良いとおもいます。設置コードの先頭部分だけこのように変更します。

<?php
  $url_encode=urlencode(get_home_url());
  $title_encode=urlencode(get_bloginfo('name'));
?>

「div class=”share”」以下はそのままでOKです。こんな感じになります。

sns-5

以上で設置が完了です。今回の作業は結構大変でした。

ソーシャルボタンを自作してWordPressの高速化”に79件のコメントがあります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. たけや

    しけぞう様

    無事解決しました!
    「もともと」と言いましたのは、関連記事表示機能がtwenty twelveに実装されているものと思い込んでいたからで、しげぞうさんのコメントを見て、もしかして?と思いプラグインを全て見直したところJETPACKで表示されていました。それに気づいていませんでした。
    そちらの設定で無事消すことができYARPPのものだけにできました。
    ありがとうございました!

  2. しげぞう 投稿作成者

    たけや様

    返信ありがとうございます。元々表示されている関連記事というのは「Yet Another Related Posts Plugin」で表示されている関連記事ですか?それならYet Another Related Posts Pluginの設定で表示しないように設定できます。先日のYet Another Related Posts Pluginの設定記事でもちょこっと紹介してます。

    もし元々の関連記事がYet Another Related Posts Pluginのものでない場合は使われているテーマに元々装備されている機能かもしれませんね。そういう場合も多分設定できる部分があるかと思います。

    とりあえず、元々表示されている関連記事がYet Another Related Posts Pluginのものかそうでないのか確かめる必要があるので、このプラグインを一時的に停止してそれでも表示されるか確認をしてみて下さい。プラグイン停止で表示されないのであれば再度有効化してYet Another Related Posts Pluginの設定で元々の関連記事を消せると思います。

  3. たけや

    しげぞう様

    昨日はありがとうございました。Yet Another Related Posts Pluginを導入し、無事きれいに関連記事が表示できるようになったんですが、肝心のもともと入っていた関連記事の消し方がわからず苦戦しております。ネットで色々検索しているのですが、結局わからず・・・簡単にできるからでしょうか。なにぶんほんの素人で、、、すみませんが教えていただけないでしょうか?

  4. たけや

    ありがとうございます!
    関連記事のプラグイン、そのようにつかえばいいのですね。
    まだ記事数が少なく、関連記事自体まだ重視できておりませんでした。
    さっそくやってみたいと思います。

  5. しげぞう 投稿作成者

    たけや様

    コメントありがとうございます。励みになります!

    関連記事の質問なんですが、私の場合は「Yet Another Related Posts Plugin」というプラグインで関連記事を表示してます。「Yet Another Related Posts Plugin」の場合は表示のスタイル(リスト形式や画像つき)が選べますし、関連性の精度が高いです。

    それでこのプラグインの設定画面で「関連記事を自動で表示する設定」と「自動で表示しない設定」というのが選べます。

    「自動で表示する設定」の場合は関連記事が自動的に記事下に配置されます。つまり設置場所を細かく指定する事ができません。一方で「自動で表示しない設定」にすると自分で表示したい場所にコードを埋め込む必要があります。

    要は「自動で表示しない」設定にしておいて、「sns.php」を呼び出しているのと同じように呼び出しコードで関連記事を呼び出すようにすれば自分で位置調整できます。SNSボタンの上でも下でもどこでも呼び出せるので自由に位置を決める事ができます。

    こちらの記事の途中で呼び出し方も書いてます。
    ⇒https://affiliate150.com/yet-another-related-posts

    また分からない部分があればコメント頂けると助かります(^^)

  6. たけや

    しげぞう様
    いつもこのサイトを利用させていただいています。どのサイトよりも圧倒的にわかりやすく本当に感謝しています。

    一点お伺いしたいのですが、sns.phpをご指摘の位置で呼び出すと、関連記事の下にソーシャルボタンが並ぶことになります。
    これを関連記事の上、つまり記事本文直下に位置させたいのですが、どう移動すれば良いでしょうか?
    使用しているのはtwenty twelveです。
    ご教示いただけますと幸いです。
    よろしくお願い致します。

  7. しげぞう 投稿作成者

    賢狼パニ様

    コメントありがとうございます。この記事で書いている自作のソーシャルボタンはWordPress用です。WordPressでしか使えない変数とか使ってます。

    普通の無料ブログであれば別の方法で可能かもしれませんが、それぞれの独自タグなどを1つ1つ調べる必要があります。面倒なら「忍者おまとめボタン」みたいなカスタマイズできるSNSボタンもありますので一度検討してみて下さい。

  8. 賢狼パニ

    すいませんが、このボタンなどは、ライブドアブログのCSSでも設定可能なのでしょうか?

  9. えりこ

    すいません、おバカでした。
    Icomoonでダウンロードしたファイルを解凍せずに使っちゃってました・・・笑

  10. えりこ

    しげぞうさん、こんばんは。
    いつも相談に乗って頂きすいません、また困ったことになりました・・

    全く同じ手順でソーシャルボタンを設置したのですが、
    苦労して作業した末に、確認してみたところ
    ただのリストで表示されてしまいました・・・

    非常にショックです。
    下の方と同じケースかと思い、!importantタグを入れてみたのですが変わりません。
    なぜでしょうか?このままではあまりにみすぼらしいです・・・
    せっかく手に入れたWebフォントも反映されてません(T^T)

    お手すきの時で結構ですので、確認して頂きたいです・・・

    毎度毎度申し訳ありませんが、宜しくお願いします。

  11. ゆうと

    しげぞう様

    返信ありがとうございます。
    コードを追加したところ、希望通りに表示させることができました。

    早々のご回答ありがとうございました。
    これからも宜しくお願い致します。

  12. しげぞう 投稿作成者

    ゆうと様

    返信ありがとうございます。なるほど、テーマが違うのですね。テーマによってそれぞれ適応させる名前(class=”○○”という部分の○○の部分の名前)が違ってきますので、テーマが違う場合には上手く反映されない部分が多くあると思います。

    今回のリストマークですが、おそらく以下のコードをCSSに追加すればOKと思います。

    .share ul li {
        list-style: none !important;
    }

    「!important」は優先的に反映させるコードですが、これは無くても反映されるかもしれません。一度試して見て下さい。

  13. ゆうと

    しげぞう様

    ご返信ありがとうございます。

    これがいま作成途中のブログのURLです。
    content.phpが無かったので代わりにsingle-content.phpにコードをコピペしており、というコード列も検索しても見つからなかったため、試行錯誤しながら一番それっぽいところに挿入したのが原因かもしれません。

    お手数ではございますがよろしくお願いします。

    なお可能であればコメント欄に私のブログURLが表示されないようにお願い致します。

  14. しげぞう 投稿作成者

    ゆうと様

    コメントありがとうございます。コピペが間違っていなければ点がつく事もないと思うのですが、どこかに原因があるんだろうと思います。それは今回追加したコードだけでなく、以前に追加したコードなどもチェックする必要があります(前に追加している部分にミスがあると、それより後に書いた記述が反映されない場合があるため)。

    という訳で推測できる原因が多すぎて絞込みができません。

    そのため、もし良かったらブログのURLを教えて下さい。それでチェックしてみて原因を探してみようと思います。どうぞよろしくお願い致します。

  15. ゆうと

    しげぞう様

    コメントが重複していたらごめんなさい。

    この記事を読んでSNSボタンの設置を試みたのですが、ボタンがリスト表記になってしまい点を消すことができません。CSSでlist-style : none !important;}をやっても変化なしです。
    また1列目のアイコンと2列目のアイコンをくっつけるためにmargin-top: 0;}にしたのですが、溝はたしかに狭まったのですがまだ若干の隙間があります。
    この2点の解決方法をご教授お願いします。

  16. ゆうと

    はじめまして。

    先日初めてWordpressでブログを作成し、この記事を参考にSNSボタンの設置を試みております。

    幾つか質問をさせてください。
    1.SNSボタンがリスト化されてしまい、点がついてしまいます。いろいろと調べてみて
    /* SNSボタン */
    .share {margin-top : 40px;}
    .share ul {margin : 0;
    padding : 0;
    list-style : none !important;}
    に変えては見たのですがやはり点を消すことができません。

    2.1列目のボタンと2列目のボタンをくっつけて表示をさせたく、
    .share li {float : left;
    width : 25%;
    margin : 0;
    margin-top: 0;}
    と設定したのですが溝は狭まりましたがくっつきませんでした。

    以上2点の解決策を教えてください。
    よろしくお願い致します。

  17. ミルクポット

    しげぞう様

    ご返信ありがとうございます。

    やはり、仕様変更があったのですね。「SNS Count Cache」のアップデートを待ってみたいと思います。

    早々のご回答ありがとうございました。これからも宜しくお願い致します。

  18. しげぞう 投稿作成者

    ミルクポット様

    コメントありがとうございます。そうですね!こちらもカウント数がなくなってます。これ、最近になってpocketの仕様が変更された感じです。

    このSNSのカウント数に関してはプラグイン「SNS Count Cache」を使って表示させています。このプラグインのアップデートで対応して頂けるのではないかと思いますので、プラグインのアップデートをしばらく待ってみても良いと思います。

  19. ミルクポット

    しげぞう様

    いつもお世話になっております。

    こちらで紹介されているソーシャルボタンを設置させて頂いておりますが、PocKetボタンのカウント数がなくなっていることに本日気がつきました。

    同じような現象は起きていませんでしょうか?

    また、対処法がございましたらご教示のほどよろしくお願い致します。