-3,000人以上が購読している無料メルマガはこちら-

賢威カスタマイズ

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

ソーシャルボタン賢威7

僕がWordPressのテンプレートの中で、最も愛用している賢威7ですが、デフォルトのソーシャルボタンだけはオシャレにならないか?といつも悩んでいました。

そこで今回はコピペで簡単!賢威7のソーシャルボタンをオシャレにカスタマイズする方法についてご紹介していきます!

ちなみに完成図はこんな感じ↓↓

賢威7ソーシャルボタン

ソーシャルボタンをオシャレにカスタマイズする理由

僕がソーシャルボタンを変えたいと思った理由は2つ。

  • デザインがダサい
  • 表示速度アップ

賢威7のデフォルトのソーシャルボタンはこんなかんじ↓↓

ソーシャルボタンオシャレ

なんかあまりオシャレじゃないし、サイズも小さくて押してほしいのか押してほしくないのか分かりません(笑)

また、このデフォルトのソーシャルボタンは表示速度が遅いんです。

表示速度が遅いというのは、ページを開いてからソーシャルボタンが表示されるまでに時間がかかるのですが、これは遅くてイライラするだけではなく、SEOにも悪影響を及ぼすため今回ご紹介するボタンに変更をした方がいいですよ。

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

まず賢威のデフォルトではソーシャルボタンが非表示設定になっているので、一度確認をしましょう。

メニューから『賢威の設定→SNSの設定』を選択します。

ソーシャルボタン賢威7

そして、ソーシャルボタンの表示で『投稿ページ』のチェックを外しましょう。

ソーシャルボタン賢威7

これで、各記事にソーシャルボタンが表示されるようになります。

ソーシャルボタンのカスタマイズ方法

まずWordPressのダッシュボード画面のメニューで『外観→テーマ編集』を選択します。

賢威7ソーシャルボタン

【1】social-button2.phpに書いてある文字消す

テーマ編集に移動したら、『social-button2.php』をクリックします。

ソーシャルボタン賢威7

すると、たくさん文字が書いてありますがこれを全部カットしてメモ帳かなにかに保管しておきましょう。

全部消してもいいのですが、何かあった時にサイトを元に戻すためにバックアップとしてとっておいてくださいね。

ソーシャルボタン賢威7
↓↓↓
賢威7ソーシャルボタン

【2】コードをコピペする

次に以下のコードをコピーして、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 = 'yuukivp(あなたのアカウント)';
     ?>
     <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>

注意したいのが「$twitter_account = ‘yuukivp(あなたのアカウント)’;」の部分には、あなたのTwitterアカウント(拡散用でよい)を差し替えてしておきましょう。

サンプルのコードには、僕のTwitterアカウントが表記してあります。

上記をコピーして、

ソーシャルボタン賢威7

こんな風に貼り付けます。

すると、ブログの記事を確認すると・・・。

ソーシャルメディア賢威7

こんなかんじで、縦並びの箇条書きになっていたらOKです。

【3】Simple Custom CSSにコードを追記する

プラグインのSimple Custom CSSに以下のコードを貼り付けます。

プラグインSimple Custom 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;
    }
}

コピーしたら、メニューから『外観→カスタムCSS』を選択します。

ソーシャルボタン賢威7 賢威7ソーシャルボタン

貼り付けて『カスタムCSSの更新』をクリックしたら、完了です。

ソーシャルボタンにシェアした回数をつけるには?

ソーシャルボタン賢威7

ソーシャルボタンは記事をシェアするために設置されているボタンですが、デフォルトではシェアした回数の表示がされません。

まあ、しなくていいならば大丈夫ではあるのですが、回数を表示したい場合はプラグイン『SNS Count Cache』を使用します。

ダッシュボード画面から『プラグイン→新規追加』で検索窓に「SNS Count Cache」と検索しましょう。

ソーシャルボタン賢威7

今すぐインストールをクリックして、『有効化』をしましょう。

このプラグインを有効化するだけでシェアの回数が表示されるようになりますよ!

あとがき

今回は賢威7のソーシャルボタンをオシャレにカスタマイズする方法についてご紹介しました。

個人的な感想ですが、デフォルトのボタンよりも押してもらいやすくなると思いますし、表示速度も上がってストレスがなくなりました。

SEO対策としても役立つので、是非導入をオススメしますよ!

【今だけ0円】WEBを使って収入源を増やすノウハウを受け取る!

数年前まで田舎でくすぶっていたサラリーマンだった僕が、たった1つのブログを作ったことで人生が変わりました。

副業で始めたブログビジネスで、週1回だけ働いて月24万円の収入を得られるようになり、今ではストレスフリーな毎日を送れています。

  • 自宅やカフェで自由に働けるノマドライフに興味がある
  • 脱サラして、人間関係に疲れることない人生を叶えたい
  • ブログで収入を得るために何から始めていいか分からない…!
  • 帰りのチケットを取らなくても海外旅行に行ける生活に憧れる

 

開放感にあふれた人生を描くために初心者向けのブログ入門書を無料でプレゼントしています。

ゼロスタートの人にも「あ、ブログってこうやって稼げるんだ!」と反響をいただき、分かりやすい動画・文章でやさしく解説をしています。

僕のメルマガ登録者さん限定で、今だけ0円で配布をしていますがいつ値上げをするか分かりませんので、今のうちに無料プレゼントをお見逃しなく。

ボタンをクリックして、登録フォームに「名前」と「メールアドレス」を入力したら、すぐにプレゼントが手に入ります。

 

もう雇われない働き方を実現する!ゼロからブログで収入を得る方法を学ぶ無料メルマガ
無料登録はこちら
ゼロからブログ起業を学べる入門書を手に入れる!
無料で受け取る