こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。
今回はうちのサイトでも使用している、カスタムSNSボタンをWordPressテーマ：賢威7に追加する方法を紹介したいと思います。
サイトによってRSSやfeedlyのボタンを追加するかどうかは違うと思うので、ここでは
- RSSとfeedly無しのパターン（うちのサイトのような状態）
- RSSとfeedlyも表示させるパターン
という2つのパターンに分けて紹介していきます。
RSSやfeedlyも表示させたい、という場合には下の方で紹介しているので、そちらをご覧ください。
追記：2016年2月9日
スマホサイズでSNSボタンの表示が崩れた場合の修正方法について、4-1 に追記しました。
はやしさん ありがとうございました。
カスタマイズ前
↓ 初期設定のままSNSボタンを表示
カスタマイズ後
カスタマイズ1： RSS,feedly以外のボタンを一列で表示
↓ PC
↓ スマホ
カスタマイズ2： RSS,feedlyも含めて2列で表示
↓ PC
↓ スマホ
※ 今回はPHPファイルを編集していきます。画面が真っ白になることもあるので、PHPコードは注意して編集して下さい。
はじめに
賢威7では、管理画面の「賢威の設定」→「SNSの設定」から、ソーシャルボタンをトップページや投稿ページ、固定ページなど、ページごとにSNSボタンの表示を設定することができるので、今回のカスタマイズではこの機能を残しつつ、カスタムSNSボタンに変えていきたいと思います。
そのため、今回紹介する方法でカスタマイズすれば、
カスタムSNSボタンにした後でも、管理画面からお好みのページや場所にSNSボタンを表示させることができます。
ちなみにSNSボタンは single.php の53行目付近の以下のコードで読み込んでいるんですが、これは「social_post_view」という賢威が設定したオプションがyの値になったら、つまり「表示しない」のチェックが外れることで「social_post_view」の値がyになったら social-button2.php というファイルを読み込むコードになっています。
参考：
<?php if (the_keni('social_post_view') == "y") get_template_part('social-button2'); ?>
1. 「SNS Count Cache」のプラグインをインストール
まず最初に「SNS Count Cache」という、SNSのシェア数をキャッシュさせるプラグインをインストールします。
ここではシェア数を表示させるために使用するので、もしシェア数を表示させたくない、という場合にはインストールしなくて大丈夫です。
SNS Count Cache：
https://wordpress.org/plugins/sns-count-cache/
また、今回のカスタマイズは下のページを参考にさせてもらいました。
他のカスタマイズについても分かりやすく解説してくれていて、感謝感謝です。
【WordPress】8種類の自作SNSボタンのコードをご紹介！カウントも表示するよ
2. social-button2.php を複製＋名前を変更（バックアップ）
次に、元のSNSボタンに戻しやすいよう、これから編集する social-button2.php ファイルをバックアップしておきます。
（バックアップしなくてもいいという場合や、別の方法でバックアップする、という場合には飛ばして下さい）
バックアップは色々な方法があるので、お好みの方法で大丈夫ですが、ここでは social-button2.php ファイルを複製して、片方のファイル名の先頭に、アンダースコア（_）を追加しておきます。
上の画像のように名前を変更しておけば、ファイルが読み込まれることはありませんし、元に戻したくなったらアンダースコア（_）を外すだけなので便利です。
3. social-button2.php を編集
それでは social-button2.php ファイルを編集して、SNSボタンを表示させていきましょう。
（RSSとfeedlyを追加する場合のコードは下の方に書いているので、そちらをご覧ください）
先ほどファイルの名前を変えてバックアップした social-button2.php の内容を全て消去し、以下のコードで置き換えます。
（【Twitterのアカウント名】という部分はご自分のTwitterアカウント名を入力して下さい。「@●●さんより」と表示されるようになります）
<div class="sns-wrap">
<?php
if( function_exists( "enqueue_font_awesome") ):
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}
endif;
$url_encode = urlencode( get_permalink() );
$title_encode = urlencode( get_the_title() );
$twitter_account = '【Twitterのアカウント名】'; // 例： $twitter_account = 'webcraftlog';
?>
<ul class="sns clearfix">
<li class="twitter">
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode; ?>&text=<?php echo $title_encode . urlencode( ' | ' ); echo urlencode( get_bloginfo('name')); ?>&via=<?php echo $twitter_account; ?>&tw_p=tweetbutton&related="<?php echo $twitter_account; ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-twitter"></i><span class="pc">Twitter</span></a>
</li>
<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=600,width=600');return false;"><i class="fa fa-facebook"></i><span class="pc">Facebook</span><span class="share-count"><?php if(function_exists('get_scc_facebook')) { echo scc_get_share_facebook();}?></span></a>
</li>
<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=600');return false;"><i class="fa fa-google-plus"></i><span class="pc">Google+</span><span class="share-count"><?php if(function_exists('get_scc_gplus')) { echo scc_get_share_gplus();}?></span></a>
</li>
<li class="hatebu">
<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=600,width=600');return false;"><span class="hatena-icon">B!</span><span class="pc">はてブ</span><span class="share-count"><?php if(function_exists('get_scc_hatebu')) { echo scc_get_share_hatebu();}?></span></a>
</li>
<li class="pocket">
<a class="no-deco" target="_blank" href="http://getpocket.com/edit?url=<?php echo $url_encode; ?>&title=<?php echo $title_encode; ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-get-pocket"></i><span class="pc">Pocket</span><span class="share-count"><?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?></span></a>
</li>
<?php if ( wp_is_mobile() ) : ?>
<li class="line sp">
<a href="http://line.me/R/msg/text/?<?php echo $Title; ?> <?php echo $URLEncodedPermalink; ?> target="_blank" class="line-button">LINE</a>
</li>
<?php endif; ?>
</ul>
</div>
上のコードを追加して保存・更新すると、シェアボタンが表示されるようになりました。
↓ 本文下
※ 追加したPHPコードについて
- シェア数を表示させたくない場合には、プラグインをインストールしなければ大丈夫です（上のコードはプラグインが入っているかどうかの条件分岐になっているため）。
- クリックした際に別ウインドウが開きますが、そのウインドウの大きさや挙動は onclick …の部分を編集すれば調整できます。
- LINEについては、スマホやタブレット以外では
wp_is_mobile()を使って読み込まないように設定しています（ほんの少しだけ高速化）。
3-1. アウトラインを変更する場合（SEO関係）
ここではシェアボタン全体を、HTML5上意味のない（中立的な）divタグで囲みましたが、検索エンジンにサイトのコンテンツとして見てもらいたい（シェアボタン全体にアウトライン上の意味があることを伝えたい）場合には、<div class="sns-wrap"> を <aside class="sns-wrap"> で囲むと良いかもしれません。
（ちなみにうちのサイトでは、シェアボタンにアウトライン上の意味を持たせたくないので div タグで囲んでいます。サイドバーなどの広告も div タグにしています）
↓ divタグで囲んだ場合（HTML5Outlinerより）
↓ asideタグで囲んだ場合
（SNSボタンをヘッダーとフッターに表示しているので「Untitled ASIDE」が2つ表示されています）
また、上の画像で使用しているHTML5Outliner（Chrome拡張機能）は、下のChromeウェブストアから無料でダウンロードできます。
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=ja
4. CSSファイルを編集
SNSボタンの設置から少し話がそれてしまいましたが、次に表示させたSNSボタンをスタイリングしていきます。
base.css や子テーマのCSSファイルに、以下のコードを追加します。
/* ----------------------------------------------------
SNSボタン
-----------------------------------------------------*/
.sns-wrap {
width:100%;
margin-top: 1em;
}
.sns {
margin: 0 auto;
list-style: none;
}
.sns a {
text-decoration: none;
font-size: 13px;
}
.sns {
text-align: center;
}
.sns li {
float: left;
width: 19%;
margin: 0 1% 3% 0;
}
.sns a {
position: relative;
display: block;
padding: 10px;
color: #fff;
border-radius: 5px;
text-align: center;
}
.sns span,
.sns .fa {
margin-right: .4em;
color: #fff;
}
.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: #55acee;
box-shadow:0 5px 0 #0092ca;
}
.sns .facebook a {
background: #315096;
box-shadow:0 5px 0 #2c4373;
}
.sns .googleplus a {
background: #dd4b39;
box-shadow: 0 5px 0 #ad3a2d;
}
.sns .hatebu a {
background: #008fde;
box-shadow: 0 5px 0 #016DA9;
}
.sns .line a {
background: #78C315;
box-shadow: 0 5px 0 #359A34;
}
.sns .pocket a {
background:#f03e51;
box-shadow:0 5px 0 #c0392b;
}
@media only screen and ( max-width: 736px ) {
.sns li {
width: 30%;
margin: 0 3% 4% 0;
}
.sns a {
padding: 6px;
}
}
これでSNSボタンが下のようにスタイリングされました。
↓ PC
↓ スマホ
（PCから見た場合にはLINEを読み込まないようにしているので、画面を狭めてもLINEは表示されません）
↓ Twitterなどのボタンを押すと、別ウインドウが開きます。
ここまでのコードの編集で、TwitterやはてブなどのSNSボタンが動くようになりましたが、FacebookとGoogle+はOGPやAppIDの設定をしないときちんと表示されません。
OGP設定については「賢威の設定」→「SNSの設定」からでも、「All in One SEO Pack」などのプラグインからでも設定することができるので、そちらから設定して下さい。
All in One SEO Pack：
https://ja.wordpress.org/plugins/all-in-one-seo-pack/
4-1. スマホサイズで表示が崩れる場合（文字が2列になる場合）
追記：2016年2月9日
シェアされている数やスマホの機種などの関係で、文字が1列表示から2列表示になることがあるようです。
お手数おかけしますが、もし表示が崩れた場合には、以下のような方法で修正して下さい。
- 「Facebook」や「Google+」などの文字を小さくする
- ボタンの横幅を狭める
1.の文字を小さくする場合については、以下のコードで修正できます。
@media only screen and ( max-width: 736px ) {
.sns .facebook a,
.sns .googleplus a {
font-size: 12px;
}
}
また、2.のボタンの横幅については、以下のコードで横幅を狭めることができます。
@media only screen and ( max-width: 736px ) {
.sns .facebook a,
.sns .googleplus a {
padding: 6px 3px;
}
}
4-2. マウスオーバーした時の色を変更する場合
上のカスタマイズでは、マウスオーバーしたときの色を同じにしていますが、同じではなく別の色にしたい、という場合には、以下のコードを追加します。
.sns .twitter a:hover {
background: #0092ca;
}
.sns .facebook a:hover {
background: #2c4373;
}
.sns .googleplus a:hover {
background: #ad3a2d;
}
.sns .hatebu a:hover {
background: #016DA9;
}
.sns .line a:hover {
background: #359A34;
}
.sns .pocket a:hover {
background: #c0392b;
}
↓ これでボタンをマウスオーバーした時の色が変わるようになりました。
4-3. マウスオーバーした時のアニメーション速度を変更する場合
賢威7ではリンクをマウスオーバーしたときに、ゆっくりとしたアニメーションになるよう設定されているので、アニメーション速度を変更する場合には、これを上書きする必要があります。
アニメーション速度はCSS3の transition というプロパティで設定できるので、例えば0.1秒に設定する場合のCSSコードは以下のようになります。
.sns a {
-webkit-transition: 0.1s;
-o-transition: 0.1s;
transition: 0.1s;
}
賢威ではすべてのリンクに対して0.3秒のアニメーション速度を設定しているので、上のコードを追加すると、SNSボタンのみ設定が上書きされてアニメーションの速度が早くなります。
反対にアニメーションの速度を遅くする場合には、下のようになります。
.sns a {
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
このような要領で、上のコードの数字を変えることでアニメーションの速度を変更することができます。
RSSやfeedlyを表示しない場合のカスタマイズはこれで終わりです。
ここまで閲覧ありがとうございました。
5. RSS, feedlyのボタンも表示させる場合
RSSやfeedlyのボタンも表示させる場合については、上で紹介したコードとほとんど変わらないので、今度は簡単に必要なコードだけ紹介していきます。
5-1. social-button2.php を編集
social-button2.php ファイル全体を以下のコードで置き換えます。
（【Twitterのアカウント名】という部分はご自分のTwitterアカウント名を入力して下さい。「@●●さんより」と表示されるようになります）
<div class="sns-wrap">
<?php
if( function_exists( "enqueue_font_awesome") ):
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}
endif;
$url_encode = urlencode( get_permalink() );
$title_encode = urlencode( get_the_title() );
$twitter_account = '【Twitterのアカウント名】'; // 例： $twitter_account = 'webcraftlog';
?>
<ul class="sns clearfix">
<li class="twitter">
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode; ?>&text=<?php echo $title_encode . urlencode( ' | ' ); echo urlencode( get_bloginfo('name')); ?>&via=<?php echo $twitter_account; ?>&tw_p=tweetbutton&related="<?php echo $twitter_account; ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-twitter"></i><span class="pc">Twitter</span></a>
</li>
<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=600,width=600');return false;"><i class="fa fa-facebook"></i><span class="pc">Facebook</span><span class="share-count"><?php if(function_exists('get_scc_facebook')) { echo scc_get_share_facebook();}?></span></a>
</li>
<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=600');return false;"><i class="fa fa-google-plus"></i><span class="pc">Google+</span><span class="share-count"><?php if(function_exists('get_scc_gplus')) { echo scc_get_share_gplus();}?></span></a>
</li>
<li class="hatebu">
<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=600,width=600');return false;"><span class="hatena-icon">B!</span><span class="pc">はてブ</span><span class="share-count"><?php if(function_exists('get_scc_hatebu')) { echo scc_get_share_hatebu();}?></span></a>
</li>
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $Title; ?> <?php echo $URLEncodedPermalink; ?> target="_blank" class="line-button">LINE</a>
</li>
<li class="pocket">
<a class="no-deco" target="_blank" href="http://getpocket.com/edit?url=<?php echo $url_encode; ?>&title=<?php echo $title_encode; ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-get-pocket"></i><span class="pc">Pocket</span><span class="share-count"><?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?></span></a>
</li>
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2" rel="nofollow" target="_blank"><i class="fa fa-rss"></i>RSS</a>
</li>
<li class="feedly">
<a href="http://feedly.com/i/subscription/feed/<?php bloginfo('rss2_url'); ?>" rel="nofollow" target="_blank"><i class="fa fa-rss"></i>feedly <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a>
</li>
</ul>
</div>
5-2. CSSファイルを編集
次に base.css や子テーマのCSSファイルなど、お使いのCSSファイルに以下のコードを追加します。
/* ----------------------------------------------------
SNSボタン
-----------------------------------------------------*/
.sns-wrap {
width:100%;
margin-top: 1em;
}
.sns {
margin: 0 auto;
list-style: none;
}
.sns a {
text-decoration: none;
font-size: 13px;
}
.sns {
text-align: center;
}
.sns li {
float: left;
width: 19%;
margin: 0 1% 3% 0;
}
.sns a {
position: relative;
display: block;
padding: 10px;
color: #fff;
border-radius: 5px;
text-align: center;
}
.sns span,
.sns .fa {
margin-right: .4em;
color: #fff;
}
.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: #55acee;
box-shadow:0 5px 0 #0092ca;
}
.sns .facebook a {
background: #315096;
box-shadow:0 5px 0 #2c4373;
}
.sns .googleplus a {
background: #dd4b39;
box-shadow: 0 5px 0 #ad3a2d;
}
.sns .hatebu a {
background: #008fde;
box-shadow: 0 5px 0 #016DA9;
}
.sns .line a {
background: #78C315;
box-shadow: 0 5px 0 #359A34;
}
.sns .pocket a {
background:#f03e51;
box-shadow:0 5px 0 #c0392b;
}
.sns .rss a {
background:#ffb53c;
box-shadow:0 5px 0 #e09900;
}
.sns .feedly a {
background:#87c040;
box-shadow:0 5px 0 #74a436;
}
@media only screen and ( max-width: 736px ) {
.sns li {
width: 30%;
margin: 0 3% 4% 0;
}
.sns a {
padding: 6px;
}
}
上のコードだけではSNSボタンをマウスオーバーしたときの色は変わらないので、もしマウスオーバーしたときの色を変えたい、という場合には、以下のコードを追加します。
（.sns .feedly a {...} と @media の間に追加）
.sns .twitter a:hover {
background: #0092ca;
}
.sns .facebook a:hover {
background: #2c4373;
}
.sns .googleplus a:hover {
background: #ad3a2d;
}
.sns .hatebu a:hover {
background: #016DA9;
}
.sns .line a:hover {
background: #359A34;
}
.sns .pocket a:hover {
background: #c0392b;
}
.sns .rss a:hover {
background: #e09900;
}
.sns .feedly a:hover {
background: #74a436;
}
↓ 保存・更新すると、下の画像のようになりました。
5-3. LINEをPCで非表示にする場合
RSSとfeedlyを表示させない場合のように、PCから見たときにLINEを表示させたくない、という場合には、先ほど追加した、
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $Title; ?> <?php echo $URLEncodedPermalink; ?> target="_blank" class="line-button">LINE</a>
</li>
というコードを、下のコードで置き換えて下さい。
これで、どんなにブラウザの幅を狭めてもLINEが表示されなくなります。
<?php if ( wp_is_mobile() ) : ?>
<li class="line sp">
<a href="http://line.me/R/msg/text/?<?php echo $Title; ?> <?php echo $URLEncodedPermalink; ?> target="_blank" class="line-button">LINE</a>
</li>
<?php endif; ?>
少し長くなってしまいましたが、今回のカスタマイズはこれで以上になります。
最後まで閲覧ありがとうございました。
