軽いSNSボタン表示で高速化を図る～WordPress

　ソーシャルボタン(SNSボタン)をサイトに掲載するのであれば、皆様も見慣れている公式の物が一番良いとは思うのですが、どうしても各個の読み込みが遅くて、ページ全体の表示時間に影響を及ぼします。
　特に「いいね」が何人だとかの数字を表示するにも、いちいち読込しなくてはならいなので、快適なページ表示に影響します。
　もちろん「広告画像」も読込しますので、表示が遅くなる原因の1つなのですが、広告を外すわけにはいかないので、今回、思い切って、SNS表示を全面変更してみました。

　先駆者の方がいろいろとチャレンジなさっておられましたので、その中から、自分でもできそうな方法の物で、尚且つレスポンシブ(スマホ/PC)対応になるものとして導入したのが、下記の方法です。
　古いSNSが表示されている部分のphpと、cssの2ファイルの書き換えだけで可能な方法でした。
　また、プラグインやimgファイルは使いませんので、負荷も最低限と言うか、まさに「エコ」です。

phpのコード

　phpのコードは下記です。
　下記のソースを、通常のWordPressテーマでしたら、single.phpのSNSボタン表示部分を、下記のソースに変更します。
　私が使用しているこのテーマでは、SNS用のphpがありまして、そのphpファイルの中身を変更する方法となりました。
　WordPressの「管理画面」から「外観」→「テーマの編集」から、SNSが記述されているファイルを変更します。
　慣れていない方は、失敗した時に備えて、バックアップなど、元にファイルに戻せる準備をしてから、書き換えて下さい。

<!新SNS、CSSカスタムと共に設置!>
<a class=”facebook-iine” href=”http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&amp;t=<?php the_title(); ?>”
onClick=”window.open(encodeURI(decodeURI(this.href)),
‘sharewindow’,
‘width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!’
); return false;”>
Facebook<br>シェア</a>

<a class=”twitter-tweet” href=”http://twitter.com/intent/tweet?text=<?php the_title(); ?> <?php the_permalink(); ?> &via=houjyoutan”
onClick=”window.open(encodeURI(decodeURI(this.href)),
‘tweetwindow’,
‘width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!’
); return false;”>
twitter<br>ツイート</a>
<a class=”pocketbtn” href=”http://getpocket.com/edit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>” onclick=”window.open(this.href, ‘PCwindow’, ‘width=550, height=350, menubar=no, toolbar=no, scrollbars=yes’); return false;”>Pocket<br>保存</a>

<a class=”hatenabtn2″ href=”http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>”>はてな<br>ブックマーク</a>

<a class=”gplusbtn” href=”https://plus.google.com/share?url=<?php the_permalink(); ?>” onclick=”window.open(this.href, ‘Gwindow’, ‘width=650, height=450, menubar=no, toolbar=no, scrollbars=yes’); return false;”>Google＋<br>シェア</a>

<a class=”feedlybtn” href=’http://cloud.feedly.com/#subscription%2Ffeed%2Fhttps://wpxaf.com/feed/‘ target=’blank’>Follow on Feedly</a>

 

赤色の部分は、あなたのTwitterアカウントに変更して下さい。
@マークは不要で、アカウント名だけで大丈夫です。
青色部分は、あなたのサイトのRSSのURLに変更してください。

CSSファイルに追加

　下記がSNSボタンを表示する為のCSSです。
　フォントサイズやpx数など、細かな点は微調整してみると良いでしょう。
　なお、既存のCSSファイルに下記のソースを追加すると干渉して、サイトの表示そのものが破壊されてしまう恐れもありますので、既存のCSSファイルをいじるのはキケンです。
　そのため、Jerpackのプラグイン「Jetpack by WordPress.com」を使用している方は、先に、Jetpcak→「設定」→「カスタムCSS」の欄を「有効化」にすると良いです。
　有効化できると、ワードプレスの管理画面の「外観」の中に「CSS編集」と言う項目が追加されます。
　その「CSS スタイルシートエディター」の中に、下記のソースをコピペして「保存」を押せば、このカスタムCSSを優先して読込、既存のCSSを変更することなく、対応できます。

/* 新型SNS表示用CSS */
a.facebook-iine {
width: 33%;
padding: 20px 0;
color: #fff;
text-align: center;
background-color: #3b5998;
height: 25px;
display: block;
text-decoration: none;
font-size: 15px;
float: left;
margin-bottom: 5px;
}

a.facebook-iine:hover {
background-color: #6277a1;
}

a.twitter-tweet {
width: 33%;
padding: 20px 0;
color: #fff;
text-align: center;
background-color: #00acee;
height: 25px;
display: block;
text-decoration: none;
font-size: 15px;
float: left;
margin-bottom: 5px;
}

a.twitter-tweet:hover {
background-color: #6aafca;
}

a.pocketbtn {
width: 34%;
padding: 20px 0;
color: #fff;
text-align: center;
background-color: #EF3E56;
height: 25px;
display: block;
text-decoration: none;
font-size: 15px;
float: left;
margin-bottom: 5px;
}

a.pocketbtn:hover {
background-color: #f79eaa;
}

a.hatenabtn2 {
width: 33%;
padding: 20px 0;
color: #fff;
text-align: center;
background-color: #568BCA;
height: 25px;
display: block;
text-decoration: none;
font-size: 15px;
float: left;
margin-bottom: 5px;
}

a.hatenabtn2:hover {
background-color: #6277a1;
}

a.gplusbtn {
width: 33%;
padding: 20px 0;
color: #fff;
text-align: center;
background-color: #DD4B39;
height: 25px;
display: block;
text-decoration: none;
font-size: 15px;
float: left;
margin-bottom: 5px;
}

a.gplusbtn:hover {
background-color: #E05D4C;
}

a.feedlybtn {
width: 34%;
padding: 20px 0;
color: #fff;
text-align: center;
background-color: #70CA3B;
height: 25px;
display: block;
text-decoration: none;
font-size: 15px;
float: left;
margin-bottom: 5px;
}

a.feedlybtn:hover {
background-color: #9ad975;
}

　動作確認は必ず行ってくださいね。
　失敗しているときは、元のファイルをアップすれば、復元できるはずです。

　なお、当方ではこのサイトに明記しているカスタマイズ方法の有償サポートも行っております。

　上記でご紹介したSNSボタンは、実際にこのページでも使用していますので、ページの下の方をご覧願います。

　今回は、今どきのフラットなソーシャルボタンをWordPressに実装したのでソースコードを公開！さんの情報を参考にさせて頂きました。ありがとうございました。