このブログはワードプレス『賢威7』というもので作成しています。

私も最近になってやっとソーシャルボタンを付けてみました。賢威7でのソーシャルボタンはデフォルトではこんな感じです↓

ソーシャルボタンデフォルト

 

これだとインパクトも薄く、オシャレさも何もありません。しかも表示にとても時間が掛かるのでSEO的にも良くありません。そこでカスタマイズしてみることにしました。カスタマイズした結果こうなりました↓

ソーシャルボタンカスタマイズド002

オシャレでインパクトもあっていいですよね。表示速度もめちゃめちゃ速いです!

これならもしかしたら読者の方にボタンを押して登録してもらえるんじゃないかな~なんて期待してみたり^^

 

ということで、今回はワードプレスの『賢威7』のソーシャルボタンをカスタマイズする方法を書き残したいと思います。この記事はあくまで私の備忘録ですが、誰かの役に立つかもしれないので書き残しておきます。

 

参考にした記事は下のサイトさんです。

参考 賢威7のソーシャルボタンをオシャレにカスタマイズする方法

 

やることは簡単です。以下の4つのステップでできちゃうので5分もかからないと思います。

  1. SNSの設定(チェックを外す
  2. プラグイン「Simple Custom CSS」をインストール&有効化
  3. プラグイン「SNS Count Cache」をインストール&有効化
  4. テーマの編集(social-button2.php
  5. テーマの編集(カスタムCSS

ではいってみましょ~。


スポンサーリンク

1.SNSの設定(チェックを外す

【賢威の設定】→【SNSの設定】を選択する。

SNSの設定

 

「投稿ページ」のチェックを外す。

表示しない

 

この時点で、下のようにデフォルトのソーシャルボタンが表示されるようになります。

ソーシャルボタンデフォルト

 

2.プラグイン「Simple Custom CSS」をインストール&有効化

プラグインの新規追加から「Simple Custom CSS」を検索します。

Simple Custom CSS

【今すぐインストール】を押して、さらに有効化します。

 

3.プラグイン「SNS Count Cache」をインストール&有効化

続いて、同じようにプラグインの新規追加から「SNS Count Cache」を検索します。

SNS Count Cache

【今すぐインストール】を押して、さらに有効化します。



スポンサーリンク


4.テーマの編集(social-button2.php

【外観】→【テーマの編集】を選択します。

テーマの編集

 

そして、「social-button2.php」を選択します。(下のほうにあります)

social-button2

さらにそこに書いてあるものを一旦すべて消します

次に以下のコードをコピペして、【ファイルを更新】を押します。

※11行目の「●●●●●」の部分のご自分の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 = '●●●●●';
?>
<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>

 

この時点では、まだボタンではなく下のようにテキストのままです。

 

5.テーマの編集(カスタムCSS

【外観】→【カスタムCSS】を選択します。

カスタム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;
}
}

 

以上で完了です。

 

コードは参考元のサイトさんからコピペさせていただきました。私もものすごく探してやっと辿り着いて、本当に短時間でおしゃれなソーシャルボタンができたので大感謝です。ありがとうございました。

 

 

スポンサーリンク