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

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

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

コメント

  1. 乃風 より:

    上手くいきました!
    ありがとうございました!

  2. しげぞう より:

    乃風様

    コメントありがとうございます。SNSボタン設置のコードは「content.php」と「content-page.php」両方に挿入しているはずですので、両方のファイルで同じように書き換えてみて下さい。

  3. 乃風 より:

    乃風です。こんにちは。

    SNSのボタン2つ(RSSとfeedly)を削除することにしました。

    それで、childの「sns.php」から上記2つのボタンを削除したため、各個別上のページからは、それらが表示されなくなりました。

    ただ、ホームページ上のものは依然として表示されたままになっています。この2つのボタンを消除するにはどうしたらいいでしょうか。

    childのスタイルシートを少し操作してみたのですが、うまくいきませんでした。

    度々すみません。どうぞよろしくお願いいたします。

  4. たつお より:

    すごくわかりやすくて、動作も完璧でした!
    助かりました。ありがとうございます。

  5. るー より:

    しげぞう様

    帰宅後PCで確認しました。
    ソーシャルボタンの症状は条件分岐コードを外したら改善されました。サイトの構成上、現在は問題ないのでこのまま進めていこうと思いますが、目次については未だ改善できません。もう少しいじってみます。

  6. るー より:

    しげぞう様

    迅速な返答ありがとうございます。
    勤務中ですのでスマホ(Android、Xperia z4)で確認したところ。Chromeで開くと反映されておらず。Googleで開くと(PC版サイトも)個別ページは反映されていました。しかし、更新すると消えてしまい(目次も一緒に)ちんぷんかんぷんな事になっています。。。

    固定ページについては、帰宅後作業しようと考えております。

  7. しげぞう より:

    るー様

    コメントありがとうございます。個別ページは反映されているのではないでしょうか?推測ですが反映されてないのは固定ページではないかなと思いますので、固定ページのテンプレートでボタンの設置ができているか確認してみて下さい。

  8. るー より:

    しげそう様

    はじめまして。
    一方的にですがお世話になっております(笑)
    しげぞうさんのお陰様で、初めてのWordpressのブログもなんとか形になりつつあります。

    現在、ソーシャルボタンの設置作業を行っているのですが、HTMLの更新後『プレビュー』で確認すると反映されているのですが、ページを開いても反映されていないという状態が解決できないでいます。
    キャッシュの削除も行いましたが解決できず、私の力では完全にお手上げ状態に陥ってます。
    どのような原因が考えられますでしょうか?助言頂けると助かります。

    私のページは以下のURLです

  9. しげぞう より:

    乃風様

    プラグインが停止できないというのは不具合が発生している場合が多いですので、バックアップとってからロリポップFTP⇒プラグインのフォルダまで行き、「SNS Count Cache」のフォルダの名前を一時的に変更します(一字追加など)。名前を変更されたプラグインは無効化されますので、それで停止されるハズです。それで問題ないか確認してみると良いと思います。

    ただ、他にキャッシュ系のプラグインなどがあればそれも疑う必要があります。前回のCache Reloaded Fixは削除されてますか?

  10. 乃風 より:

    しげぞう博士様

    乃風です。ちょっとわかりました。

    (1)「SNS Count Cache」の設定に「キャッシュの消去」がありますので、一度キャッシュを削除してから停止してみるのが良いかもしれません。→これをやってみたのですが、結果は同じでした。

    (2)ただ、その画面のトップにこう記されてあるのに気づきました、
    「シェア数を取得するために必要な設定が不足しています。次のセクションで必要なパラメータを設定して下さい。シェア基本キャッシュ – Facebook.」と。
    そのパラメータとやらをどう設定するばいいのでしょうか?

    (3)他のプラグインを1つ1つ停止して、同じ現象にならないか既にチェックしてあるのですが、今回、再びチェックしてみました。でも結果は同じで、「SNS Count Cache」だけが停止できませんでした。

    どうぞよろしくお願いいたします。

  11. しげぞう より:

    乃風様

    コメントありがとうございます。「SNS Count Cache」を停止するのはなぜでしょうか?理由があれば教えて下さい。「SNS Count Cache」の設定に「キャッシュの消去」がありますので、一度キャッシュを削除してから停止してみるのが良いかもしれません。

    また、「SNS Count Cache」以外の原因という事も考えられますので、他のプラグインを1つ1つ停止して同じ現象にならないかチェックしてみる必要もありそうです。

    原因がどうしても分からない場合は「SNS Count Cache」を一時的に停止してから再度ロリポップへ問い合わせが良いと思います。その際にプラグインの事は説明せずにエラーがでる事だけ伝え、思い当たる理由は思いつかない事にしておき、回答を待つのが良いと思います。

  12. 乃風 より:

    しげぞう博士様

    こんばんは。乃風です。ご無沙汰しております。

    今、「SNS Count Cache」だけが停止できずにいます。これを停止すると、数分後に「500 ERROR INTERNAL SERVER ERROR  CGIもしくはSSIが正しく動作しておりません。」と表示されました。

    ロリップに問い合わせたところ、プラグインの詳細について把握できない部分もあるので、WordPress公式フォーラム等を利用してほしいとのことでした。そっちへ行って検索してみたものの、適した回答が得られませんでした。

    致し方なく、その後のワードプレスの更新も無事に済み、今のところ、私ウェブサイトは問題ありません。このまま様子見ということで、放置しておいても大丈夫でしょうか?

    どうぞよろしくお願いいたします。

          乃風

  13. gura より:

    しげぞう様

    いつも返答ありがとうございます。
    はじめに自分でも色々試していて表示はできたのですが、何かが違う気がして質問しました。しげぞう様のおかげでうまく表示ができました。ありがとうございます。

    最近、何度かこちらへ質問していますが、自分の中でCSSやHTMLが少しずつ分かってきた気がします。いつも質問に対して、丁寧に返答していただきありがとうございました。

  14. しげぞう より:

    gura様

    コメントありがとうございます。SNSボタンを表示させるコードがあると思います。このサイトの記事見て設置したならSNS.phpです。そのphpファイルを開いてSNSボタンを表示させるコードの前にコメントを入れたら良いと思います。ただ、その場合は自分でpタグを使ってクラス名をつけてCSSで文字の大きさや色、位置調整をします。

    例えばsns.phpファイルのSNSボタンコードの前に以下を追加(class名は適当に変更して下さい)。
    [css]
    <p class="sample">この記事をシェアしてみよう</p>
    [/css]

    でCSSで装飾するなら子テーマのスタイルシートに文字の大きさとか位置調整を記述。

    [css]
    .sample {
    font-size:20px;
    margin-top:50px;
    margin-bottom:30px;
    }
    [/css]
    って感じでOKかなと思います。

  15. gura より:

    しげぞう様

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

    先日、質問させていただいたWebフォントもSNSボタンでうまく表示できました。ありがとうございました。今回はSNSボタンの真上にひと言「この記事をシェアしてっみよう」的なコメントを付けたいのですが、こういった場合どこにどのように書けば良いのかよく分からず質問しました。

    お忙しい中申し訳ございませんが、教えていただければ幸いです。

  16. しげぞう より:

    しおん様

    コメントありがとうございます。実際にチェックしてみないと原因は分からないと思います。なのでもし良かったらサイトのURL教えて下さい。コメント公開時には削除します。

  17. しおん より:

    しげぞう様

    お世話になります。
    スマホページとPCページにおいてはうまくソーシャルボタンが表示されるのですが、タブレット表示にすると各項目の表示がずれてしまいます。
    何か対応策はありますでしょうか。

    よろしくお願い致します。

  18. たけや より:

    しけぞう様

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

  19. しげぞう より:

    たけや様

    返信ありがとうございます。元々表示されている関連記事というのは「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の設定で元々の関連記事を消せると思います。

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