おことわり:このブログに掲載のカスタマイズは、最新のプラグインのバージョンではつかえません!
このブログのシェアボタンを、宮内隆行さん作のプラグイン「Simple Share」に変えてみました。
PCで見ると、個別ページのタイトル下にTwitter、Facebook、Google+、はてなブックマークのボタンがでるようになります。
はてブボタンがあるのがいいですね!
スマホで見ると、ページ下固定で、TwitterとFacebookの、いい感じのボタンがでてきます。
管理画面がないので、カスタマイズしたい場合はコードを編集しないといけません。
今回は、すっごく簡単なカスタマイズ3つをしました。PHPは初心者ですよ、という方でもできると思うので書いておきます!
ます、カスタマイズをどこに書くか
今回は、プラグイン本体を直接編集しちゃいました。本当はfunctions.phpでカスタマイズするのがいいと思いますが、200行程度のプラグインのカスタマイズを100行置いとくとかだと、あまりエコな気がしないので。
変えたファイルはsimple-share/simple-share.php
です。
ただし、この方法だと管理画面からプラグインの更新をすると、カスタマイズが消えてしまいます。
もしGitまたはSubversionが使えるのであれば、それらで対応する方法があります。私は今回、Githubでフォークしてから変更しました。しかしカスタマイズしただけなのでプルリクはしてません。
カスタマイズ1:スマホのときの、ふつうのシェアボタンの非表示を解除する
標準だと、スマホ閲覧時は下に固定されたボタンのみが表示され、ふつうの数字つきボタンは非表示になります。
これを、スマホでも残してみます。
非表示の切り替えは、スタイルシートで行われているので、以下の4行を消すだけです。
61行目以下、こうなっているので赤字部分を消します
@media screen and (max-width: 480px) {
.simple-share
{
display: none;
}
#simple-share-mobile-footer-wrap,
#simple-share-mobile-footer
{
カスタマイズ2:日本語以外のブログでも、はてブボタンをだす
カスタマイズ前の状態だと、WordPressの設定が日本語かどうかを判定して、はてなブックマークのボタンの表示/非表示を切り替えてます。
もし、はてブボタンが出ない場合は、お使いのWordPressの設定が日本語以外になっています。この状態でも、はてブボタンが出るようにしてみます。
139行目と141行目を消します。
if ( 'ja' === get_locale() ) { $share_buttons['hatena'] = '<a href="http://b.hatena.ne.jp/entry/%1$s" class="hatena-bookmark-button" data-hatena-bookmark-title="%2$s" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="en"><img src="//b.st-hatena.com/images/entry-button/button-only@2x.png" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>'; }
カスタマイズ3:本文の最後にもシェアボタンをだす
すいません、これブログ書いてて気づいたんですが、Javascriptを2重呼び出しするので、あまり美しい方法じゃありません。
いちおう、下のカスタマイズをすると、問題なく動きます。
124行目のコードの、最後の「;」のまえに「. $share」と加えます。
foreach ( $buttons as $key => $btn ) {
$share .= '<li class="simple-share-button simple-share-' . esc_attr( $key ) . '">';
$share .= sprintf( $btn, esc_attr( get_permalink() ), esc_attr( get_the_title() ) );
$share .= '</li>';
}
$share .= '</ul>';
return $share . $contents . $share;
}
しかし、あまりすてきじゃないので後日また書き直しますね。
今回変更した点はこちらにまとめましたので参考にどうぞ!