当サイトでも利用しているSEOに強いWordPressテンプレート『賢威』(バージョン7:スタンダード版)のデフォルトのSNS(ソーシャル・ネットワーキング・サービス)ボタンは、各SNS会社が提供しているボタンを利用したものです。

今回は「フラットでかっこいい、独自デザインのボタン」にカスタマイズする方法をご紹介します。

SNSボタンのカスタマイズについてわかりやすいサイトをご紹介

今回のSNSボタンのカスタマイズについては、以下のサイトを参考にしています。とてもわかりやすいです。

参考【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよ

賢威のデフォルトのSNSボタンを非表示にする方法

まず、賢威のデフォルトのSNSボタンが表示されているようでしたら、非表示にします。

設定の手順

  • WordPressの管理画面で左サイドバーにある「賢威の設定」から「SNSの設定」をクリック
  • ソーシャルボタンの表示」にある以下の5つを全て「表示しない」にチェックを入れる
    • トップページ(サイトトップ)
    • トップページ(記事一覧部分)
    • 一覧ページ(トップページを除く)
    • 投稿ページ
    • 固定ページ

これで、賢威のデフォルトのSNSボタンは表示されなくなります。

モバイル(スマホ)のみの表示切替のために「is_mobile」関数を「functions.php」に追記

後述するフラットでかっこいいSNSボタンは「PC(デスクトップ)やタブレット」と「スマホ」でボタンの並びを変えるため、PCとスマホで表示切替をする必要があります。

そのため、「is_mobile」関数を事前に「functions.php」に追記しておく必要があります。

当サイトは賢威の子テーマで運用しているため、子テーマディレクトリの「functions.php」に以下を追記します。

//スマホ表示分岐
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser

);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

なお、「is_mobile」関数については、以下のサイトを参考にしましたのでご紹介します。

参考【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう!

シェア数の取得のために「SNS Count Cache」プラグインをインストール

SNSボタンでシェア数を取得するため、WordPressのプラグイン「SNS Count Cache」をインストールし、有効化します。

シェア数の取得内容は次の6つです。

  • Twitter(ツイッター)
  • Facebook(フェイスブック)
  • Google+(グーグルプラス)
  • はてなブックマーク(はてブ)
  • Pocket(ポケット)
  • Feedly

シェア数の取得は、ページを開くごとに各SNSサービスのAPI等で取得しに行くわけではなく、キャッシュで処理するため、ページの表示速度アップにも効果的です。

なお、「SNS Count Cache」については以下の記事もご参考ください。

関連記事WordPressでSNSボタンのシェア数を取得し、キャッシュで利用する「SNS Count Cache」

Webアイコンフォントを設置

SNSボタンで利用するTwitterやFacebook等のアイコンを画像ではなく「Webアイコンフォント」を利用します。

Font Awesomeを実装

Webアイコンフォントでよく使われている「Font Awesome」を実装します。実装方法については、以下の記事をご参考ください。

関連記事賢威7でWebアイコンフォント「Font Awesome」を実装する方法

「IcoMoon App」で「はてなブックマーク」「LINE」「feedly」のWebアイコンフォントを作成して実装

Font Awesomoには、「はてなブックマーク」「LINE」「feedly」のアイコンが無いため、「IcoMoon App」という海外のWebサービスを利用し、Webアイコンフォントを作成、実装します。

実装方法については、以下の記事をご参考ください。

関連記事賢威7で「はてなブックマーク」「LINE」「feedly」のWebアイコンフォントを実装する方法

CSSファイルに追記

当サイトは賢威の子テーマで運用しているため、子テーマの「base.css」と「rwd.css」に以下を追記します。

なお、「base.css」はPC用、「rwd.css」はスマホ用です。これらは賢威7で用意されているスタイルシートです。

「base.css」に追記するスタイルシート

/*--------------------------------------------------------
SNSボタン
--------------------------------------------------------*/
.share{
	width:100%;
}
.sns{
	margin:0 auto;
	text-align:center;
}
.sns ul {
	list-style:none;
}
.sns li {
	float:left;
	width:48%;
	margin:0 2% 3% 0;
}
.sns li a {
	font-size:80%;
	position:relative;
	display:block;
	padding:10px;
	color:#fff;
	border-radius:6px;
	text-align:center;
	text-decoration: none;
	text-shadow:1px 1px 0 rgba(255,255,255,0.3);
}
.sns li a:hover {
	-webkit-transform: translate3d(0px, 5px, 1px);
	-moz-transform: translate3d(0px, 5px, 1px);
	transform: translate3d(0px, 5px, 1px);
	box-shadow:none;
}

/* ツイッター */
.sns .twitter a {
	background:#00acee;
	box-shadow:0 5px 0 #0092ca;
}
.sns .twitter a:hover {
	background:#0092ca;
}

/* Facebook */
.sns .facebook a {
	background:#3b5998;
	box-shadow:0 5px 0 #2c4373;
}
.sns .facebook a:hover {
	background:#2c4373;
}

/* グーグル */
.sns .googleplus a {
	background:#db4a39;
	box-shadow:0 5px 0 #ad3a2d;
}
.sns  .googleplus a:hover {
	background:#ad3a2d;
}

/* はてぶ */
.sns .hatebu a {
	background:#5d8ac1;
	box-shadow:0 5px 0 #43638b;
}
.sns .hatebu a:hover {
	background:#43638b;
}

/* LINE */
.sns .line a {
	background:#25af00;
	box-shadow:0 5px 0 #219900;
}
.sns .line a:hover {
	background:#219900;
}

/* Pocket */
.sns .pocket a {
	background:#f03e51;
	box-shadow:0 5px 0 #c0392b;
}
.sns .pocket a:hover {
	background:#c0392b;
}

/* RSS */
.sns .rss a {
	background:#ffb53c;
	box-shadow:0 5px 0 #e09900;
}
.sns .rss a:hover {
	background:#e09900;
}

/* Feedly */
.sns .feedly a {
	background:#87c040;
	box-shadow:0 5px 0 #74a436;
}
.sns .feedly a:hover {
	background:#74a436;
}

/*--------------------------------------
  780px SNS
--------------------------------------*/
.share{
	padding-bottom:10px;
}
.sns ul {
	margin:0 auto;
	list-style:none;
}
.sns li {
	width:23%;
	margin:0 2% 3% 0;
}
.sns li a {
	font-size:75%;
	padding:10px 2px;
}
.sns li:nth-child(4n) {
	margin-right:0;
}

「rwd.css」に追記するスタイルシート

/*--------------------------------------------------------
解像度1200px以下
--------------------------------------------------------*/
@media
only screen and (max-width : 1200px){

/*--------------------------------
SNS
---------------------------------*/
.share{
	width:100%;
}
.sns{
	margin:0 auto;
	text-align:center;
}
.sns ul {
	list-style:none;
}
.sns li {
	float:left;
	width:48%;
	margin:0 2% 3% 0;
}
.sns li a {
	font-size:80%;
	position:relative;
	display:block;
	padding:10px;
	color:#fff;
	border-radius:6px;
	text-align:center;
	text-decoration: none;
	text-shadow:1px 1px 0 rgba(255,255,255,0.3);
}
.sns li a:hover {
	-webkit-transform: translate3d(0px, 5px, 1px);
	-moz-transform: translate3d(0px, 5px, 1px);
	transform: translate3d(0px, 5px, 1px);
	box-shadow:none;
}

/* ツイッター */
.sns .twitter a {
	background:#00acee;
	box-shadow:0 5px 0 #0092ca;
}
.sns .twitter a:hover {
	background:#0092ca;
}

/* Facebook */
.sns .facebook a {
	background:#3b5998;
	box-shadow:0 5px 0 #2c4373;
}
.sns .facebook a:hover {
	background:#2c4373;
}

/* グーグル */
.sns .googleplus a {
	background:#db4a39;
	box-shadow:0 5px 0 #ad3a2d;
}
.sns .googleplus a:hover {
	background:#ad3a2d;
}

/* はてぶ */
.sns .hatebu a {
	background:#5d8ac1;
	box-shadow:0 5px 0 #43638b;
}
.sns .hatebu a:hover {
	background:#43638b;
}

/* LINE */
.sns .line a {
	background:#25af00;
	box-shadow:0 5px 0 #219900;
}
.sns .line a:hover {
	background:#219900;
}

/* Pocket */
.sns .pocket a {
	background:#f03e51;
	box-shadow:0 5px 0 #c0392b;
}
.sns .pocket a:hover {
	background:#c0392b;
}

/* RSS */
.sns .rss a {
	background:#ffb53c;
	box-shadow:0 5px 0 #e09900;
}
.sns .rss a:hover {
	background:#e09900;
}

/* Feedly */
.sns .feedly a {
	background:#87c040;
	box-shadow:0 5px 0 #74a436;
}
.sns .feedly a:hover {
	background:#74a436;
}

}

SNSボタンのテンプレートファイルを作成

SNSボタンを表示させるプログラム部分を実装しますが、管理しやすいよう、ソーシャルボタン用のテンプレートファイルを作成します。

当サイトの場合は「sns_button.php」というファイル名にして子テーマディレクトリにアップしています。

「sns_button.php」に記載するコード

<?php
  $url_encode=urlencode(get_permalink());
  $title_encode=urlencode(get_the_title());
?>

<div class="share">

<?php if(is_mobile()) {  //以下スマホの場合 ?>
<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"><a href="http://twitter.com/share?text=<?php echo $title_encode ?>&amp;url=<?php echo $url_encode ?>&amp;via=★★★ここにTwitterアカウントを「@」無しで入れる。当サイトの場合はwebdesigner_fan★★★&amp;tw_p=tweetbutton&amp;related="★★★ここにTwitterアカウントを「@」無しで入れる。当サイトの場合はwebdesigner_fan★★★"><i class="fa fa-twitter"></i>&amp;nbsp;Twitter&amp;nbsp;<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a></li>

<!--Facebookボタン-->
<li class="facebook"><a href="http://www.facebook.com/sharer.php?src=bm&amp;u=<?php echo $url_encode;?>&amp;t=<?php echo $title_encode;?>"><i class="fa fa-facebook"></i>&amp;nbsp;Facebook&amp;nbsp;<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a></li>

<!--Google+1ボタン-->
<li class="googleplus"><a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" ><i class="fa fa-google-plus"></i>&amp;nbsp;Google+&amp;nbsp;<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a></li>

<!--はてブボタン-->
<li class="hatebu"><a href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=<?php echo $url_encode ?>"><i class="icon-hatebu"></i>&amp;nbsp;はてブ&amp;nbsp;<?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;?>"><i class="icon-line"></i>&amp;nbsp;LINE</a></li>

<!--ポケットボタン-->
<li class="pocket"><a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&amp;title=<?php echo $title_encode;?>"><i class="fa fa-get-pocket"></i>&amp;nbsp;Pocket&amp;nbsp;<?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"><i class="fa fa-rss"></i>&amp;nbsp;RSS</a></li>

<!--feedlyボタン-->
<li class="feedly"><a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F★★★ここにサイトのドメインのみ入れる。当サイトの場合はwebdesigner.fans-web.net★★★%2Ffeed%2F"  target="blank"><i class="icon-feedly"></i>&amp;nbsp;feedly&amp;nbsp;<?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>
</ul>
</div> 

<?php } else { //以下PCの場合?> 

<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"><a href="http://twitter.com/share?text=<?php echo $title_encode ?>&amp;url=<?php echo $url_encode ?>&amp;via=★★★ここにTwitterアカウントを「@」無しで入れる。当サイトの場合はwebdesigner_fan★★★&amp;tw_p=tweetbutton&amp;related="★★★ここにTwitterアカウントを「@」無しで入れる。当サイトの場合はwebdesigner_fan★★★" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;"><i class="fa fa-twitter"></i>&amp;nbsp;Twitter&amp;nbsp;<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a></li>

<!--Facebookボタン-->
<li class="facebook"><a href="http://www.facebook.com/sharer.php?src=bm&amp;u=<?php echo $url_encode;?>&amp;t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=1000');return false;"><i class="fa fa-facebook"></i>&amp;nbsp;Facebook&amp;nbsp;<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a></li>
      
<!--Google+1ボタン-->
<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;"><i class="fa fa-google-plus"></i>&amp;nbsp;Google+&amp;nbsp;<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a></li>

<!--はてブボタン-->
<li class="hatebu">
<a href="http://b.hatena.ne.jp/add?mode=confirm&amp;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;" ><i class="icon-hatebu"></i>&amp;nbsp;はてブ&amp;nbsp;<?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;?>" target="blank"><i class="icon-line"></i>&amp;nbsp;LINE</a></li>

<!--ポケットボタン-->
<li class="pocket"><a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&amp;title=<?php echo $title_encode;?>" target="blank"><i class="fa fa-get-pocket"></i>&amp;nbsp;Pocket&amp;nbsp;<?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" target="blank"><i class="fa fa-rss"></i>&amp;nbsp;RSS</a></li>

<!--feedlyボタン-->
<li class="feedly"><a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F★★★ここにサイトのドメインのみ入れる。当サイトの場合はwebdesigner.fans-web.net★★★%2Ffeed%2F"  target="blank"><i class="icon-feedly"></i>&amp;nbsp;feedly&amp;nbsp;<?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>
</ul>  
</div>
<?php } ?>
</div>

上記コード内にあるTwitterとfeedlyで、「★★★ここにTwitterアカウントを「@」無しで入れる。当サイトの場合はwebdesigner_fan★★★」というように、前後に「★」が3つある箇所は、ご自身のTwitterアカウントやドメインに合わせて修正してください。

Twitterの修正例

修正前

★★★ここにTwitterアカウントを「@」無しで入れる。当サイトの場合はwebdesigner_fan★★★

修正後(当サイトの場合)

webdesigner_fan

※「★」も削除する

feedlyの修正例

修正前

★★★ここにサイトのドメインのみ入れる。当サイトの場合はwebdesigner.fans-web.net★★★

修正後

webdesigner.fans-web.net

※「★」も削除する

【ご注意!】コードがちょっと違います

上記のコードは、前述の「【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよ」で紹介されているコードから変更している点がありますので、ご注意ください。

変更点としては、

  • 「はてなブックマーク」「LINE」「feedly」のアイコンのclass指定方法が異なる
  • 各アイコンの右側に半角スペース(&nbsp;)を追加して見やすくしている
  • 不要な改行や空白の削除

記事ページの「single.php」を変更してSNSボタンを表示させる

記事ページでのみSNSボタンを表示させる場合について、設定方法をご紹介します。

※追記
トップページの記事タイトル下にSNSボタンを追加する方法を掲載しました。

当サイトは賢威の子テーマで運用していますので、子テーマフォルダにある「single.php」を変更します。

子テーマフォルダの「single.php」変更前

<?php if (the_keni('social_post_view') == "y") get_template_part('social-button2'); ?>

デフォルトだと28行目にあります。

子テーマフォルダの「single.php」変更後

<?php get_template_part('sns_button'); ?>

<?php if (the_keni('social_post_view') == "y") get_template_part('social-button2'); ?>

変更後の解説

「single.php」変更後は、

<?php get_template_part('sns_button'); ?>

追加しただけです。

sns_button」は先ほど作成してアップした「sns_button.php」の拡張子以外の部分を入れます。

もしファイル名が違う場合は適宜修正してください。

また、

<?php if (the_keni('social_post_view') == "y") get_template_part('social-button2'); ?>

は、管理画面の「賢威の設定」で「表示しない」にしたため、この行を削除してもかまいません。

賢威の設定」で表示するようにした場合は、SNSボタンが今回作成したボタンと、デフォルトのボタンが二重で表示されますのでご注意ください。

これで、賢威7で「フラットでかっこいいSNSボタン」が表示されるようになります。