ブログのソーシャルボタンっていろんな種類があると思うんですが、
賢威7のソーシャルボタンって、ちょっと地味なんですよね。。。
こんな感じで、実は表示速度も遅めなんです↓
もう少し目立たせたいなと思ったのと、表示が遅いことは読者さんにもストレスを与えてしまいますし
SEO的にもよろしくないのでこんなふうに、おしゃれにカスタマイズしてみました(^-^)
（注）すでに何らかのカスタマイズを行っている場合、今回ご紹介している通りの表示にならないかもしれません。
目次
賢威の設定を確認しよう
まずはソーシャルボタンが表示される設定になっているかを確認してみましょう。
①WordPressダッシュボードの『賢威の設定』→【SNSの設定】をクリック
②『投稿ページ』の【表示しない】のチェックを外す
もともとチェックが入っていなければそのままでOKです
③（変更した場合は）【変更を保存】をクリック
【賢威7】で表示されるソーシャルボタンの記述をいったん削除します。
テーマを編集していきますので、事前に必ずバックアップを取っておいてくださいね！
→WordPressのバックアップをエックスサーバーで簡単に取る方法
テーマの編集についてはこちらの記事も参考になさってください。
→テーマの編集はFileZilla(FTPソフト)でを使って安全に！
①ダッシュボードの『外観』から【テーマの編集】をクリック
②【social-button2.php】をクリックして開きます
③現在の記述をメモ帳などにコピーを取ってから、すべて削除します
④全部消しました
⑤以下のコードをコピーして④に貼り付け
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<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> |
⑥11行目の記述をあなたのtwitterアカウントに書き換えます
※11行目【$twitter_account = ‘あなたのアカウント‘;】
『あなたのアカウント』の部分を、『＠』を除いたあなたのtwitterアカウントに書き換えてください。
私の場合は『koemi2525』となります。
⑦【ファイルを更新】をクリック
以上で【social-button2.php】の記述の変更は完了です♪
プレビューで、今の表示がどうなっているかを確認してみると・・・
ボタンのデザインではなくなっているので、次はこれを変更していきましょう。
base.cssの記述を変更する
①ダッシュボードの『外観』から【テーマの編集】をクリック
②【base.css】をクリックして開く
③以下のコードをすべてコピー
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
/* ---------------------------------------------------- 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のアイコンも表示させるとさらにオシャレになるのでやってみましょう！
こんな感じに↓なります。
①ダッシュボードの『賢威の設定』から【賢威の設定】をクリック
②以下のコードをコピーして。。。
|
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つは、お好みで取り入れてみてください(^-^)
実際に表示のもたつきもなくなりましたし、ボタンが目立つようになって押してもらいやすくなりました。
デザインは自己満足な部分もありますが、『見やすい』『表示速度が速い』は、読者さんに見ていただくためには大切なことなので、ぜひ取り入れてみてください。
最後になりましたが参考にさせていただいたサイト様
こんばんは！
説明がとても解りやすいので、とても有難いです。
『賢威７』カスタマイズの内容が詳しく書かれていて勉強になりました。
とっても、記事参考になりました。
有難う御座いました。
鬼藤さん
ご訪問・コメントありがとうございます。
デザインを変えたいって思うことは結構ありますよね！
やりだしたらきりがないのですが。。。
『初心者さんにも分かりやすい説明』を心がけておりますので
よろしければぜひまた覗きにいらしてくださいね！
はじめまして、ひろちと申します。権威７のことが詳しく書かれていて勉強になりました。また訪問させていただきたいと思います。よろしくお願いいたします。
ひろちさん
こんにちは！
ご訪問、コメントありがとうございます(^^)
賢威は使っているアフィリエイターさんも多いですよね。
私も自分がおこなったカスタマイズは、
どんどん記事にしていこうと思ってますので
よろしければぜひまた覗きにいらしてくださいね(^^)
はじめまして！こえみさん (^^)/
人気ブログランキングから、訪問させて頂きました。
プロフィールも読ませて頂き、とても興味もちました。
アフィリエイト始めたきっかけも共感できることが多くて、私は母の介護がきっかけで働きに出れなくなって始めたのですが、初心者でまだ、わからないことだらけです。
『賢威７』カスタマイズの内容が詳しく書かれていて勉強になりました。
とっても、記事参考になりました。ありがとうございます。
ブログ応援して帰ります。
これからも、訪問させて頂きますのでよろしくお願いします。
広瀬あゆみさん
はじめまして！
コメント、応援ありがとうございます(^^)
プロフィールも読んでくださったんですね〜〜。
嬉しいです！
働きに出られない人にとって、アフィリエイトって
本当に心強いですよね。
私もものすごく救われました。
カスタマイズはやり出すと時間を忘れて没頭してしまうので
自分でも程々にしてます(^_^;)
お役に立てる記事を増やせるよう努力していきますので
ぜひまた覗きにいらして下さいね♪