【賢威7】ソーシャルボタンをおしゃれで表示速度をあげるカスタマイズ方法

公開日 : 2017年10月12日 / 更新日 : 2018年1月23日

賢威7

ブログのソーシャルボタンっていろんな種類があると思うんですが、

賢威7のソーシャルボタンって、ちょっと地味なんですよね。。。

こんな感じで、実は表示速度も遅めなんです↓

もう少し目立たせたいなと思ったのと、表示が遅いことは読者さんにもストレスを与えてしまいますし

SEO的にもよろしくないのでこんなふうに、おしゃれにカスタマイズしてみました(^-^)

（注）すでに何らかのカスタマイズを行っている場合、今回ご紹介している通りの表示にならないかもしれません。

1 賢威の設定を確認しよう
2 social-button2・phpの記述を変更する
3 base.cssの記述を変更する
4 ボタンにアイコンを表示させるともっとオシャレに♪
5 シェア回数を表示させるには？
6 記事上のソーシャルボタンを削除する
7 まとめ

賢威の設定を確認しよう

まずはソーシャルボタンが表示される設定になっているかを確認してみましょう。

①WordPressダッシュボードの『賢威の設定』→【SNSの設定】をクリック

②『投稿ページ』の【表示しない】のチェックを外す

もともとチェックが入っていなければそのままでOKです

③（変更した場合は）【変更を保存】をクリック

social-button2・phpの記述を変更する

【賢威7】で表示されるソーシャルボタンの記述をいったん削除します。

テーマを編集していきますので、事前に必ずバックアップを取っておいてくださいね！

→WordPressのバックアップをエックスサーバーで簡単に取る方法

テーマの編集についてはこちらの記事も参考になさってください。

→テーマの編集はFileZilla(FTPソフト)でを使って安全に！

①ダッシュボードの『外観』から【テーマの編集】をクリック

②【social-button2.php】をクリックして開きます

③現在の記述をメモ帳などにコピーを取ってから、すべて削除します

④全部消しました

⑤以下のコードをコピーして④に貼り付け

<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 = 'あなたのアカウント';
     ?>
     <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">ツイート</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">シェア</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> 
         <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>

<?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 = 'あなたのアカウント';

<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;">ツイート</a>

</li>

<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;">シェア<?php if(function_exists('get_scc_facebook')) { echo scc_get_share_facebook();}?></a>

</li>

<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;">Google+<?php if(function_exists('get_scc_gplus')) { echo scc_get_share_gplus();}?></a>

</li>

<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;">B!はてブ<?php if(function_exists('get_scc_hatebu')) { echo scc_get_share_hatebu();}?></a>

</li>

<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;">Pocket<?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?></a>

</li>

<a href="http://feedly.com/i/subscription/feed/<?php bloginfo('rss2_url'); ?>" rel="nofollow" target="_blank">feedly <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a>

</li>

</ul>

</div>

⑥11行目の記述をあなたのtwitterアカウントに書き換えます

※11行目【$twitter_account = ‘あなたのアカウント‘;】

『あなたのアカウント』の部分を、『＠』を除いたあなたのtwitterアカウントに書き換えてください。

私の場合は『koemi2525』となります。

⑦【ファイルを更新】をクリック

以上で【social-button2.php】の記述の変更は完了です♪

プレビューで、今の表示がどうなっているかを確認してみると・・・

ボタンのデザインではなくなっているので、次はこれを変更していきましょう。

base.cssの記述を変更する

①ダッシュボードの『外観』から【テーマの編集】をクリック

②【base.css】をクリックして開く

③以下のコードをすべてコピー

/* ----------------------------------------------------
SNSボタン
-----------------------------------------------------*/
.sns-wrap {
width: 100%;
margin-top: 1em;
margin-bottom: 1%;
}
.sns {
margin: 0 auto;
list-style: none;
}
.sns a {
text-decoration: none;
font-size: 15px;
}
.sns {
text-align: center;
}
.sns li {
float: left;
width: 32.3%;
margin: 0 .5% 2%;
}
.sns a {
position: relative;
display: block;
padding: 10px 5px;
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 .pocket a {
background: #f03e51;
box-shadow: 0 5px 0 #c0392b;
}
.sns .feedly a {
background: #87c040;
box-shadow: 0 5px 0 #74a436;
}
@media only screen and ( max-width: 736px ) {
.sns li {
width: 32.3%;
margin: 0 .5% 4%;
}
.sns a {
font-size: 13px;
padding: 6px 3px;
}
}

/* ----------------------------------------------------

SNSボタン

-----------------------------------------------------*/

.sns-wrap {

width: 100%;

margin-top: 1em;

margin-bottom: 1%;

}

.sns {

margin: 0 auto;

list-style: none;

}

.sns a {

text-decoration: none;

font-size: 15px;

}

.sns {

text-align: center;

}

.sns li {

float: left;

width: 32.3%;

margin: 0 .5% 2%;

}

.sns a {

position: relative;

display: block;

padding: 10px 5px;

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 .pocket a {

background: #f03e51;

box-shadow: 0 5px 0 #c0392b;

}

.sns .feedly a {

background: #87c040;

box-shadow: 0 5px 0 #74a436;

}

@media only screen and ( max-width: 736px ) {

.sns li {

width: 32.3%;

margin: 0 .5% 4%;

}

.sns a {

font-size: 13px;

padding: 6px 3px;

}

④コピーしたコードを一番下に貼り付けます

⑤【ファイルを更新】をクリック

プレビューを見てみると。。。

ちゃんとボタンのデザインになりましたね♪♪

ボタンにアイコンを表示させるともっとオシャレに♪

このままでもキレイな表示になっているのですが、各SNSのアイコンも表示させるとさらにオシャレになるのでやってみましょう！

こんな感じに↓なります。

①ダッシュボードの『賢威の設定』から【賢威の設定】をクリック

②以下のコードをコピーして。。。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

1	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

③【＜/head＞直前に挿入するコード欄】に貼り付け

※アナリティクス、サーチコンソールのタグが入っている場合は、一番下に貼り付ければOKです。

④【変更を保存】をクリック

プレビューを見てみましょう・・・

アイコンが表示されて、一層オシャレになりました♪

シェア回数を表示させるには？

ここまでのカスタマイズでは、シェアされた回数の表示はされません。

私は特に必要ないと思っているのでこのまま使用していますが、もし回数も表示させたい場合はプラグインを導入しましょう。

【SNS Count Cache】というプラグインで対応可能です。

このプラグインは、インストールして有効化するだけで特に設定は必要ありません。

記事上のソーシャルボタンを削除する

賢威7のデフォルトの設定では、記事の上下にソーシャルボタンが表示されるようになっています。

でも、今回のカスタマイズでボタンのサイズも大きくなったので、【記事上】にボタンが表示されるとパッと見がゴチャついて見えてしまうんですよね(^^;)

私の場合は記事の最初にアイキャッチ画像を表示させているので、なんだかバランスもおかしいのです。。。

そもそも、記事を読んでいただいて、『その内容がよかったらシェアしてくださいね』ってことで設置されているのがソーシャルボタンなので、記事上にボタンがあっても意味がないかなと・・・

【記事上のソーシャルボタンを消す】ことにしました。

では、その手順もご紹介していきますね！

①ダッシュボードの『外観』から【テーマの編集】をクリック

②【個別投稿（single.php）】をクリックして開く

③上から30行目前後にある、以下の記述を削除します

【<?php if (the_keni(‘social_post_view’) == “y”) get_template_part(‘social-button2’); ?>】

【Ctrl】+【F】で、検索窓が出るので、『social』などど入力すると探しやすくなると思います。

※注意※

今回削除するのは【記事の上】に表示させるソーシャルボタンのコードです。

下の方にも同じ記述があって、そちらは【記事の下】に表示させるためのコードなので、必ず上のコードを削除してください。

④【ファイルを更新】をクリック

以上で【記事の上】のソーシャルボタンは表示されなくなりました(^-^)

まとめ

賢威7のソーシャルボタンのカスタマイズについてご紹介しました。

【social-button2.php】と【base.css】の編集は必須ですが、

アイコンの表示
シェア回数の表示
記事上のボタンの削除

の3つは、お好みで取り入れてみてください(^-^)

実際に表示のもたつきもなくなりましたし、ボタンが目立つようになって押してもらいやすくなりました。

デザインは自己満足な部分もありますが、『見やすい』『表示速度が速い』は、読者さんに見ていただくためには大切なことなので、ぜひ取り入れてみてください。

最後になりましたが参考にさせていただいたサイト様

結城おさむ様　Best Mix Life！

Jhon-K様　B-side Journal

P.S.

分からないところや、質問、感想などなど。。。

お気軽にご連絡くださいね♪→こえみに連絡してみる

アフィリエイト初心者さん向けのメルマガを発行しています。

今だけ5つのプレゼント付きですので、よろしければご登録お願いします(^-^)

↓　↓

アフィリエイトが基礎から学べる！初心者さん向けメルマガ

シングルマザーなのに会社が倒産し、その後体調を崩して再就職できなくなってしまったこえみですが、

現在は【思春期の娘と楽しく暮らす！】をモットーに、自宅で【ブログ・メルマガアフィリエイト】の仕事をしています。

メルマガでは私が今まで試行錯誤、紆余曲折してきた実体験を元に、

初心者さんからでも安心してアフィリエイトの基礎から学べる内容をお伝えしています(^-^)

この記事を読んだ方は、次にこんな記事を読んでいます(^-^)

タグ : カスタマイズ, ソーシャルボタン, 賢威7

「【賢威7】プリティ版の上下の縞模様を消す方法を図解で解説！」

「【賢威7】サイトタイトルを消してヘッダー画像とグローバルメニューを入れ替える方法」