[WP] ソーシャルボタンを「忍者おまとめボタン」に変更してみた

今までは WP Social Bookmarking Light というプラグインを使っていましたがボタンの揃い方が気に入ったので「忍者おまとめボタン」に乗り換えてみました。

このボタンの存在はこーぱぱさん (@kouseipapa) のエントリで知りました。

置き換えてみた

今までの WP Social Bookmarking Light だとこんな感じでした。

忍者おまとめボタンには色々なサイズがあるのですが、今回は中サイズのアイコンで揃えてみました。

Pocket とか色々置けて良いです。レスポンシブデザインにうまく対応できていないところがあるみたいなのがちょっと残念ですが、そのうちに対応してくれるかな、と期待しています。

設置するのがちょっと面倒だった

忍者おまとめボタンは、JavaScriptを表示したいところに入れれば良いのですが WP Social Bookmarking Light と同じ位置に入れるなら、子テーマでフックするのが簡単です。

いつものように function.php に自前の関数を定義してフィルターフックすることにします。

if ( ! function_exists('add_ninja_onebutton')):
	function add_ninja_onebutton ( $content ) {
		if ( is_single() ) {
			$ninja_string ='<div class="ninja_onebutton">' . '<script type="text/javascript">' . "\n" .'//<![CDATA[' . "\n";
			$ninja_string = $ninja_string . '(function(d){' . 'if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn)==\'undefined\'){';
			$ninja_string = $ninja_string . 'document.write("<sc"+"ript type=\'text\/javascript\' src=\'http:\/\/omt.shinobi.jp\/b\/nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn\'><\/sc"+"ript>");';
	 		$ninja_string = $ninja_string . '}else{' . 'window.NINJA_CO_JP_ONETAG_BUTTON_nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn.ONETAGButton_Load();}';
	  		$ninja_string = $ninja_string . '})(document);' . "\n" . '//]]>' . "\n";
	  		$ninja_string = $ninja_string . '</script><span class="ninja_onebutton_hidden" style="display:none;"></span><span style="display:none;" class="ninja_onebutton_hidden"></span></div>';
			$content = $ninja_string . "\n" . $content;
		}

  		return $content;
  	}

	add_filter('the_content', 'add_ninja_onebutton');

endif;

if ( ! function_exists('add_ninja_onebutton')):

function add_ninja_onebutton ( $content ) {

if ( is_single() ) {

$ninja_string ='<div class="ninja_onebutton">' . '<script type="text/javascript">' . "\n" .'//<![CDATA[' . "\n";

$ninja_string = $ninja_string . '(function(d){' . 'if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn)==\'undefined\'){';

$ninja_string = $ninja_string . 'document.write("<sc"+"ript type=\'text\/javascript\' src=\'http:\/\/omt.shinobi.jp\/b\/nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn\'><\/sc"+"ript>");';

$ninja_string = $ninja_string . '}else{' . 'window.NINJA_CO_JP_ONETAG_BUTTON_nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn.ONETAGButton_Load();}';

$ninja_string = $ninja_string . '})(document);' . "\n" . '//]]>' . "\n";

$ninja_string = $ninja_string . '</script><span class="ninja_onebutton_hidden" style="display:none;"></span><span style="display:none;" class="ninja_onebutton_hidden"></span></div>';

$content = $ninja_string . "\n" . $content;

}

return $content;

}

add_filter('the_content', 'add_ninja_onebutton');

endif;

忍者おまとめボタンで取得したコードは add_ninja_onebutton という関数の中で文字列 ($ninja_string)として定義しなおしています。この部分がちょっと面倒に見えると思いますが、まぁ、これが一番確実なので我慢してください。
なお、忍者おまとめボタンの JavaScript の部分は、皆さんが入手されたコードに置き換えてくださいね。

この文字列を表示する子テーマの前に差し込みますが、この処理自体はシングルページでのみ有効にしたいので、is_single() という関数を使って、シングルページの場合のみ差し込みを有効とするようにしています。

あとは、この関数を add_filter を使ってコンテンツ表示時のフィルターとして登録するだけで OK です。

本文の最後の部分にも(つまりは 2 ヶ所に)入れようかとも思ったのですが、ちょっとうるさくなりそうだったので、前のみに入れてみました。皆さんもお試しアレ。

ただし、functions.php を触るのは WordPress の画面が全く表示されなくなるなどのリスクがありますので、バックアップは必ず取っておくことと、子テーマで実施することをオススメします。
WordPress で子テーマを作る方法は以下のエントリでご紹介していますので、宜しかったらどうぞ。

WordPress関連の過去エントリは WordPress カテゴリをご覧ください。

WordPress 関連のエントリ

インストールや設定変更とデータ移行

最後まで読んでいただきありがとうございます。

左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいです

Facebook ページでも情報を発信していますのでよろしかったら「いいね！」をお願いします

RSSリーダへの登録はこちらからどうぞ。

最近,気になったこと...

I Love LEGO, iPhone, Apple and awesome.

WordPress

[WP] ソーシャルボタンを「忍者おまとめボタン」に変更してみた

置き換えてみた

設置するのがちょっと面倒だった

WordPress 関連のエントリ

インストールや設定変更とデータ移行

プラグイン

バージョンアップ

カスタマイズ

Stinger 3関連

チューニング

MAMPを使ったバックアップサイトの構築

開発関連

コメントを残す CANCEL REPLY

フェイスブックでのコメント

URL
TBURL