サイドバーにfeedlyとTwitterのフォローボタンを設置する。【STINGER5】カスタマイズ
2015/09/22
feedlyとTwitterの埋め込みボタンについて、前回、前々回で学んできたので、ようやく本来の目的だったWordPress【STINGER5】のサイドバーに設置する作業を行います。
ある程度Web系の知識がある方ならこの記事だけでわかると思いますが、分からない部分があれば過去の記事を参考にしてみて下さい。
feedly:最近流行の【feedly】登録から使い方まで日本語で解説!ボタンの設置方法も
Twitter:Twitterのツイート・フォローボタンの埋め込みコード取得と設置方法
スポンサーリンク
feedlyとTwitterのフォローボタンをサイドバーに埋め込む
この作業を始めた時のプロフィール周りはこんな感じでした。
当サイト「はぴすぷ」のイメージカラーは黄緑なのでRSSも黄緑に設定していたんです。
でもfeedlyのボタンも黄緑なので近くに配置すると判別し辛い。なのでRSSの色は変えることにした。
ちなみにfeedlyのボタンはこんな感じ。黒は採用しなかった。
Twitterのボタンは公式のものだとサイズが2種類で、フォロー数出すかくらいの変化つけれないので、うまく配置できるレイアウトを考えるも難航…(‘A`)
Twitterフォローボタンはこんな感じ。
@hapisupuさんをフォロー
@hapisupuさんをフォロー
オリジナルでやってみようかとも思ったけど、デザインセンスが皆無だった/(^o^)\
というわけで公式のものだけでレイアウトを考えた結果、小さめのものを横一列に並べることにした。
並び順はfeedly、RSS、Twitter。
feedlyのフォローボタンを設置
先頭がfeedlyなのでRSSのdivタグ前に追加する。ついでなので見出しも追加。
サイドバー(sidebar.php)
<!-- 更新情報 --> <h4 class="menu_underh2"> 更新情報を受け取る</h4> <!-- feedly --> <div class="feedly"> <a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fhapisupu.com%2Ffeed%2F' target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-square-flat-green_2x.png' alt='follow us in feedly' width='28' height='28'></a> </div> <!-- RSSボタンです -->
これでこんな感じになる。cssはあとで対応する。
Twitterのフォローボタンを設置
次はTwitterのフォローボタンをRSSの後ろに付けたいのでRSSのdivタグの後ろに追記。
ついでに購読するの文字をRSSに変更。
サイドバー(sidebar.php)
<div class="rssbox"> <a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss-square"></i> RSS</a> </div> <!-- RSSボタンここまで --> <!-- Twitter --> <div class="twitter"> <a href="https://twitter.com/hapisupu" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-dnt="true">@hapisupuさんをフォロー</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> <div style="clear:both"></div> <!-- /更新情報 -->
これでこうなる。
あとは回り込みと、マージンと、RSSボタンのサイズを調整。
スタイルシート(style.css)(追記・変更部分のみ)
/* feedly */ #side .feedly { float: left; } /* RSS購読するボタン */ .rssbox { float: left; margin-left: 10px; } .rssbox a { padding: 3px 10px; } /* Twitter */ #side .twitter { float: left; margin-left: 10px; }
これで完成です\(^o^)/
終わりに
やはりトップページの最初に見える場所を変更すると、目につく頻度が多いだけあってやったった感がありますね!地味な変更だけどw
これで多少でもリピーターさんが増えてくれれば嬉しいな(o・ω・o)
記事最後のソーシャルボタン郡あたりにも、置いておくとよさそうなので、また今度対応しようと思います。
まだまだカスタマイズしたいことはいっぱいあるんですが、大変そうでなかなか手が出ない…。
とりあえずヘッダーメニューに表示するコンテンツを用意しないと…!頑張ろう。