Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/kejimari/keijiism.com/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
どうも、ケイジです。今回は賢威7のSNSボタン(ソーシャルボタン)のカスタマイズ方法について説明していきたいと思います。賢威7のデフォルトのSNSボタン(ソーシャルボタン)は小さいためシェアされにくい可能性もあり、表示速度も遅いことからSEO的にも悪影響をもたらす恐れがあるため本記事を参考にカスタマイズしてみましょう!
賢威7のSNSボタン(ソーシャルボタン)のカスタマイズは必要か?
賢威7デフォルトのSNSボタン(ソーシャルボタン)はまずすごく小さいため目立ちにくいです。目立ちにくいことで訪問者がSNSボタンを発見できず、もっとSNSボタン(ソーシャルボタン)が見やすかったら、もしかしたらシェアされた可能性も十分にあるので、ある程度の大きさで存在感を出すことはやはり必要だと思います。
大きさを変更すると次はデザインも気になってくると思います。デフォルトのSNSデザイン以外にもたくさんデザインはありますし、この際色々なデザインを見比べて気に入ったデザインに変更するとともに大きさもサイトにあったサイズでカスタマイズすることがおすすめだと思います。
今回紹介するこのカスタマイズ方法ではスマホでみた状態でも自然に表示されるためおすすめです!
賢威7デフォルトのSNSボタン(ソーシャルボタン)のデメリット
こちらが賢威7のデフォルトのSNSボタン(ソーシャルボタン)ですがとても小さいですね。これでは一応あるにはありますが、やはり目立ちにくいです。
さらにデフォルトの状態では表示されるまでに少し時間がかかってしまっています。読込速度が遅いというのはSEO的にもあまりいい状態とはいえません。
より多くシェアされることでSEO的にも効果がありますし、シェアされることで検索エンジン以外からのアクセスにも期待が持てるようになりますので是非カスタマイズしてみましょう!
ちなみにSNSボタンカスタマイズ後の完成図がこちらです。
では、このようなSNSボタンにカスタマイズする方法をこれから順番に説明していくのでやっていきましょう!
賢威7でSNSボタン(ソーシャルボタン)のデザインをおよびサイズを変更する方法
賢威7で投稿ページにSNSボタンが表示されるようにする
ダッシュボード→賢威の設定→SNSの設定の中にソーシャルボタンの表示とありますので、ここで投稿ページのチェックを外しましょう。
social-button2.php内の元のソースをメモ帳などにコピーして空白にする
ダッシュボード→外観→テーマの編集→social-button2.php内のソースを丸ごとメモ帳などにコピーして空白にしましょう。コピーしておくのは何かあった時のためにデフォルトの状態に戻せるためのものでバックアップという意味なので分かるように保存しておきましょう。
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>
上記コードをコピーして貼り付けます。すると、各記事ページではこのようにツイートからフェイスブックまで文字で表示されるようになります。
プレビューしてみてこうなっていれば正解なので、次はこの文字をボタンに変更する作業に移っていきます。
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; } }
Simple Custom CSSというプラグインの中に上記コードを入力します。まだこちらをインストールしていない方はこちらの記事を参考にインストールし有効化後に上記コードを貼り付けてください。
テーマ編集を直接変更しないで追記できるワードプレスプラグイン
SNSボタンの設置完了
以上の工程でSNSボタンが表示されるようになりました。この方法なら記事の上部と下部に上記画像のSNSボタンがある程度目立って表示されますので、賢威7のデフォルトの状態よりもシェアされやすくなるのではないかと思います。
シェア回数をカウントさせるプラグインを導入する
見栄えはいいですが、このままではシェア回数が反映されていません。
シェア回数を反映させるためにはSNS Count Cacheというプラグインが必要になってきます。このプラグインはインストールし有効化するだけでシェア回数が表示されますので、SNS Count Cacheをインストールし有効化しましょう。
これでシェア回数も表示されて、賢威7のデフォルトよりも目立ちやすいSNSボタンとなったため、力の入れたコンテンツや心がこもったコンテンツならばデフォルトの状態よりもシェアされるようになるかもしれません!
まとめ
賢威7のデフォルトではSNSボタンは小さくて目立ちにくいだけじゃなく、実は表示される速度も遅いものとなっています。
表示される速度が遅いとSEO的にも悪影響が起こってしまうんですね。本記事の方法ではSNSボタンをある程度目立たせることができてシェアされやすくなる期待と、表示速度を改善させることでSEO的な悪影響を防ぐことができますので一石二鳥だと思います!
今回のこの記事は
賢威7のソーシャルボタンをオシャレにカスタマイズする方法を書いている結城おさむさんの記事を参考にさせていただいています。
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/kejimari/keijiism.com/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
参考になりました。
ありがとうございますm(__)m
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/kejimari/keijiism.com/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
いえいえ!力になれて幸いですヽ(´▽`)/
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/kejimari/keijiism.com/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
参考にさせていただきました!
賢威ビギナーですが、簡単にできました。
ありがとうございます(#^.^#)
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/kejimari/keijiism.com/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
ジブンさんこんにちは!
お力になれてよかったですo(^▽^)o
ご訪問ありがとうございます☆
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/kejimari/keijiism.com/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
ずっとソーシャルボタンがどうやって入れてるのか謎でしたが、
こちらの記事であっという間に解決できました。
有難うございます!
Simple Custom CSSも便利で参考になりました^^
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/kejimari/keijiism.com/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
anoyanさんおはようございます!
お力になれて嬉しく思います(´・ω・`)
ご訪問ありがとうございます!