Webの記録

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

投稿日:2014年11月29日 更新日:

この記事は約 11 分で読めます。

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



今回つけてみたSNSボタン

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


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

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

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

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

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


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

<ul class="share_btn">
<li><a class="facebook_btn" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&amp;t=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><span class="fontawesome-facebook social_icon"></span>いいね</a></li>
<li><a class="twitter_btn" href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><span class="fontawesome-twitter social_icon"></span>ツイート</a></li>
<li><a class="hatebu_btn" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><span class="hatebu_icon">B!</span><span class="hatebu_chara">はてブ<span></a></li>
</ul>

上記のソースコードをそのままコピペしたら、Font Awesomeのバージョンの違いか、そのままだとアイコンフォントの表示がされなかったので、「Font Awesome」からアイコンフォントのclassを確認してコピペし直しました。
cssも公開してくださっていたので、これもそのままstyle.cssにコピペしました。

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;
}


ここまでで、だいたい以下の画像のような感じになりました。
多少、cssを追記して調整をしました。
sns_icons_btn
上記には無かったボタンをあと3つ、追加してみました。

Google+ボタン

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

<li><a class="google_btn" href="https://plus.google.com/share?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" onclick="window.open(this.href, 'Gwindow', 'width=600, height=300, menubar=no, toolbar=no, scrollbars=yes'); return false;"><span class="fa fa-google-plus"></span>Google+</a></li>


feedlyボタン

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

<li><a class="feed_btn" href="http://cloud.feedly.com/#subscription%2Ffeed%2F<?php the_permalink(); ?>&title=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><span class="fa fa-rss"></span>Feedly</a></li>


Lineで送るボタン

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

wp_is_mobile()

今回は、Lineで送るボタンをPC閲覧の場合のみ非表示なので、以下のようにしてみました。

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile()): //スマートフォン向け ?>
<li><a class="line btn" href="http://line.me/R/msg/text/?<?php the_permalink(); ?>&title=<?php the_title(); ?>">LINEで送る</a></li>
<?php endif; ?> 

スマホで見たらLINEボタンを表示してくれてるのに、PCで見ると本当に非表示になりました!
以下のブログを参考にさせて頂きました!ありがとうございます!!
【参考にさせて頂いたブログ】「LINEで送る」ボタンをWordPressに(しかもスマホでのみ)設置・表示させる方法|Psycholigyさま

cssで調整します。背景色は#09B701です。


ひとまずちゃんと表示されるようになりました。あとは、ちょいちょいcssで微調整です。
また気が向いたら変えるかもしれないし、この状態でまた何か修正をするかもしれませんが、とりあえず完成です♪

参考サイト


関連かもしれない記事

-Webの記録
-, , , , , , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

パンくずリストをGoogleの検索結果ページで表示させる方法

この記事は約 1 分で読めます。 Googleで検索をした時に、検索結果でサイトタイトルの下にパンくずリストが表示されているのを見かけたことはありませんか? 最近妙に気になって・・・(今頃?!)、私も …

no image

「WordPress Popular Posts Stats」で人気記事を表示させてみた♪

この記事は約 1 分で読めます。 WordPressのプラグイン「Wordpress Popular Posts Stats」を使って、自分のサイトでよく読まれている人気記事を表示させてみることにしま …

no image

WordPressサイトでパンくずリストを簡単設置♪

この記事は約 1 分で読めます。 Webサイトで、よく階層が深くなってくると「パンくずリスト」を付けます。 WordPressサイトでも簡単にパンくずリストを付けられないかな?という事で、プラグインを …

no image

WordPressサイト内検索でのキーワードが分かるプラグライン「Search Meter」を試してみた。

この記事は約 1 分で読めます。 アクセス解析をしていると、どんなキーワードで検索されたのか?を知ることができます。 しかし、キーワードを入力して検索できなかった結果を知る事はなかなか知る事ができない …

no image

Creative Cloud デスクトップアプリケーションが何も表示しなくなったとき

この記事は約 1 分で読めます。 Adobe Creative Cloudを使用していて、ディスクトップから起動させようとすると、画面が真っ白になってしまいました。 それぞれ単体のソフト(Photos …