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

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

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

WordPressテーマ

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

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

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

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

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

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

これがウェブフォントです。これは画像のように見えますが、文字として読み込まれますので普通の文字と同じ扱いです。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;}

全部１つ１つ説明すると日が暮れますので重要な部分だけ説明しておきます。最後の記述「.share li」の部分で各ボタンの幅（width）を25%にしております。これはボタンを８つ設置するのですが、4つずつ並べたいので100%を４で割って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%にしておけばスマートフォンではこのように表示されます。

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

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

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

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

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

子テーマに「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() ) 」という部分が「もし個別ページなら」という条件分岐タグです。

続いて固定ページのテンプレート「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です。こんな感じになります。

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

• ⇒自作のJavaScriptをWordPressで利用する方法
• ⇒WordPress高速化まとめページ