WordPressでシンプルな自作SNSボタンを設置してみた

ブログの記事下に、いろんなSNSアイコンをよく見かけます。
このブログにも付けていたのですが、時々ちょっと重たさを感じていたのですが、先日書いた記事「WordPressサイトで表示高速化をいろいろやってみた。」の時に、表示速度を測ったらやっぱり重かったデス。。。
表示高速化を進めるために、今回試しにシンプルなボタンに自作してみたので、そのメモです。

今回つけてみたSNSボタン

• Facebookシェアボタン
• Twitterボタン
• はてぶボタン
• Google+ボタン
• feedlyボタン
• Lineで送るボタン

SNSボタンを自作ってどんな風にしようかかなり迷ったのですが、スマホで見ても楽に押せて、簡単にできるシンプルなボタンがいいなぁということで・・・。
ボタンは画像ではなくテキストとアイコンフォントにすることにしました。

アイコンフォントは「Font Awesome」を使用しました。
※「Font Awesome」の使い方は、「無料で簡単！アイコンフォント「Font Awesome」を使ってみた」で書きました。

Facebookシェアボタン・Twitterボタン・はてぶボタン

いろいろググってみて、以下のブログを参考にさせて頂きました！

【参考にさせて頂いたブログ】WordPressのオリジナルシェアボタン簡単作成。ソースコード有り|たろろぐさま


ひとまず参考にさせて頂いた「WordPressのオリジナルシェアボタン簡単作成。ソースコード有り|たろろぐさま」のそのままのコードを、WordPressのテンプレートタグ「the_content();」の後に挿入しました。(テーマによって違いますが、single.phpやindex.phpなどの中にあります。既成テーマでは、content.phpの場合もあります。)
[php]

• いいね
• ツイート
• B!はてブ

[/php]
上記のソースコードをそのままコピペしたら、Font Awesomeのバージョンの違いか、そのままだとアイコンフォントの表示がされなかったので、「Font Awesome」からアイコンフォントのclassを確認してコピペし直しました。
cssも公開してくださっていたので、これもそのままstyle.cssにコピペしました。
[php]
ul.share_btn {
margin: 36px 0 25px 0;
padding: 0;
}
.share_btn li {
float: left;
width: 32%;
margin: 0 4px 0 0;
list-style: none !important;
}
.share_btn a {
display: block;
color: #fff;
text-decoration: none;
font-weight: bold;
text-align: center;
height: 45px;
line-height: 45px;
padding: 0;
font-size: 13px;
-webkit-transition-duration: 500ms;
-moz-transition-duration: 500ms;
-o-transition-duration: 500ms;
transition-duration: 500ms;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
}
.share_btn a:hover {
color: #fff;
position: relative;
top: -3px;
}
span.social_icon {
margin-right: 3px;
font-size: 16px;
}
.share_btn li:last-child {
margin-right: 0;
}
.share_btn:after {
content: “.”;
display: block;
clear: both;
height: 0;
visibility: hidden;
}
a.facebook_btn {
background: #3B5998;
}
.facebook_btn:hover {
background: #5979be;
}
a.twitter_btn {
background: #33CCFF;
}
.twitter_btn:hover {
background: #88e1ff;
}
a.hatebu_btn {
background: #aaa;
}
.hatebu_btn:hover {
background: #d4d4d4;
}
span.hatebu_icon {
font-family: Verdana;
margin-right: 3px;
font-size: 16px;
}
a.hatebu_btn span {
position: relative;
top: -1px;
}
ul.share_btn_bottom {
margin: 20px 0 30px 0;
}
[/php]

ここまでで、だいたい以下の画像のような感じになりました。
多少、cssを追記して調整をしました。

上記には無かったボタンをあと3つ、追加してみました。

Google+ボタン

上記までのボタンをマネして、htrf=””の中とアイコンフォントを変更して作ってみました。
背景色は#dd4b39です。cssで調整します。
[php]

[/php]

feedlyボタン

feedlyボタンも作ってみました。記述は上記同様に、htrf=””の中とアイコンフォントを変更です。
自作でなく公式の素材を使うときは、公式のfeedlyサイトより頂いてきます。
背景色は#6CC655です。cssで調整します。
[php]

[/php]

Lineで送るボタン

Lineで送るボタンは、スマホで見ている時にあると便利だと思います。
しかしPCで閲覧中にボタンを押すと、単純にLINEの公式サイトに飛ぶだけなので・・・これはスマホで閲覧している時だけ表示させようということにしました。
PCとスマホと条件分岐して、ボタンを表示・非表示にすることになるのですが、WordPressでは便利なテンプレートタグがあるようなので、早速試してみることに・・・。
[php]
wp_is_mobile()
[/php]
今回は、Lineで送るボタンをPC閲覧の場合のみ非表示なので、以下のようにしてみました。
[php]