シェアボタンを「Simple Share」に乗り換えて、ちょっとカスタマイズしてみた

おことわり:このブログに掲載のカスタマイズは、最新のプラグインのバージョンではつかえません!

このブログのシェアボタンを、宮内隆行さん作のプラグイン「Simple Share」に変えてみました。

PCで見ると、個別ページのタイトル下にTwitter、Facebook、Google+、はてなブックマークのボタンがでるようになります。

スクリーンショット(2014-11-29 1.06.16)

はてブボタンがあるのがいいですね!

スマホで見ると、ページ下固定で、TwitterとFacebookの、いい感じのボタンがでてきます。

10811798_10203301503802256_1543998735_n

管理画面がないので、カスタマイズしたい場合はコードを編集しないといけません。

今回は、すっごく簡単なカスタマイズ3つをしました。PHPは初心者ですよ、という方でもできると思うので書いておきます!

ます、カスタマイズをどこに書くか

今回は、プラグイン本体を直接編集しちゃいました。本当はfunctions.phpでカスタマイズするのがいいと思いますが、200行程度のプラグインのカスタマイズを100行置いとくとかだと、あまりエコな気がしないので。

変えたファイルはsimple-share/simple-share.phpです。

ただし、この方法だと管理画面からプラグインの更新をすると、カスタマイズが消えてしまいます。

もしGitまたはSubversionが使えるのであれば、それらで対応する方法があります。私は今回、Githubフォークしてから変更しました。しかしカスタマイズしただけなのでプルリクはしてません。

カスタマイズ1:スマホのときの、ふつうのシェアボタンの非表示を解除する

標準だと、スマホ閲覧時は下に固定されたボタンのみが表示され、ふつうの数字つきボタンは非表示になります。

スクリーンショット(2014-11-29 1.06.16)
これは出ない。

これを、スマホでも残してみます。

非表示の切り替えは、スタイルシートで行われているので、以下の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;
	}

しかし、あまりすてきじゃないので後日また書き直しますね。

今回変更した点はこちらにまとめましたので参考にどうぞ!

コメントを残す

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