Simplicity2にTumblrのシェアボタン、フォローボタンを追加

simplicity-tumblr
Simplicity2のカスタマイズ楽しいですね。
動作確認を取るためにSimplicity2が対応している
全SNSに新規登録。
あまつさえ、Simplicity2標準非対応のTumblrも追加してみたこの話。
※結局YouTubeとLINEページは現時点で利用見込みが無いので外した。※

スポンサーリンク

設定

今回のカスタマイズ案は、
下記表示設定になっている方であれば適応可能です。

●フォローボタンに色をつけるがオン
●全フォローボタンの表示がオン
●シェアボタンのタイプはバイラルタイプもしくはバイラル白
スポンサーリンク

ファイルの確認

カスタマイズフリークの方ならおなじみの、
子テーマを使ってカスタマイズ。

標準のテーマから

sns-buttons-icon.php
sns-pages.php

以上2つのファイルを子テーマにコピー。

スポンサーリンク

sns-pages.phpのカスタマイズ

これは主にフォローボタンを管理しているファイル。

このファイルの大体25行目辺りに
<?php endif; ?>表記がある。
この直後に下記コードを入れる。


<li class="tumblr-page"><a href="http://back2nature-jp.tumblr.com/" target="_blank" title="Tumblrをフォロー" rel="nofollow"><span class="icon-tumblr-logo"></span></a></li>

http://back2nature-jp.tumblr.com/はこのサイトのTumblrへのURL。
ここは各自のURLに変更。

sns-buttons-icon.phpのカスタマイズ

これは主にバイラルタイプのシェアボタンを管理しているファイル。
今回はバイラルタイプの表示のカスタマイズ。
それ以外の表示では非対応のため注意。

このファイルの大体58行目辺りに
<?php endif; ?>表記がある。
この次の行から下記コードを入れる。

<li class="tumblr-btn-icon"><a href="http://tumblr.com/widgets/share/tool?canonicalUrl=<?php echo get_permalink($post->ID); ?>&posttype=link&title=<?php echo get_the_title($post->ID);?>&caption=<?php echo get_the_excerpt(); ?>" class="btn-icon-link tumblr-btn-icon-link" target="blank" rel="nofollow"><span class="social-icon icon-tumblr"></span><span class="social-count tumblr-count"><?php $obj = json_decode( file_get_contents('http://api.tumblr.com/v2/share/stats?url='.get_permalink($post->ID)) , false ) ;
echo $obj->response->note_count;?></span></a></li>

以上。
つづいてstyle.cssのカスタマイズ。

style.cssのカスタマイズ

子テーマのstyle.cssをカスタマイズ。
下記コードを適当場所に入れる。

まずはアイコンを追加。

/* tumblrアイコン */
.icon-tumblr-logo:before {
  content: "\e924";
}

続いてフォローボタンとシェアボタンの表記。

/* tumblrフォローボタンカラー */
ul.snsp li.tumblr-page a span{background-color:#36465d;}
/* tumblrシェアボタン表示*/
.sns-group-viral .icon-tumblr:after{content: 'Tumblr';}

続いてバイラルタイプの表示をカスタマイズ。
バイラルタイプは↓

ul.snsbs a.tumblr-btn-icon-link {background-color: #36465d;}

バイラル白タイプは↑使わずに↓を使う。

.sns-group-viral ul.snsbs li a.tumblr-btn-icon-link {
    color: #36465d;
    border-color: #36465d;
}
.sns-group-viral ul.snsbs li a.tumblr-btn-icon-link:hover {
    background-color: #36465d;
}

以上でカスタマイズは終わり。

カスタマイズした3つのファイルをアップロード。

まとめ

今回の追加場所はGoogle+の後にした。
追加したい場所に合わせて適時変えてほしい。

今回のカスタマイズでの今後の課題は
フォローボタンのアイコンが微妙に大きい点。
解決策が見つからず中途半端になってしまった。

またチャレンジしてみる。

追記:2016年10月10日

上記コードを一新。さらに、
スライドインを使ったモバイル環境ではサイドバーに設置するフォローボタンの表示が
上手く収まらない。
以下のコードをmobile.cssに追加して解決した。

.sidr ul li span {padding: 0 21px;}

追記:2016年10月18日

CSSでサイズを変えるのに限界を感じ、
フォントファイル内のロゴを修正して解決した。
スッキリした。

是非フォローしてください

最新の情報をお伝えします

やーまん

山奥に移住し、のんびり暮らしています。
日々の事で感じた事や考え方などを備忘録として残しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA