ソーシャルブックマークを追加する

この記事の所要時間: 約5分

プラグインを使わず、テンプレートもいじらずに、JavaScript の追加と functions.php の修正で表示する。

今回は各記事の下にソーシャルブックマークを表示することにする。

対象のサービスからコードをコピー

あらかじめ各サービスのボタンの作り方ページに行き、好きなボタン等を作成し、生成されたコードをコピーしておく。

JavaScript の作成

まずは JavaScript ファイルを作成。今回はテーマディレクトリの下に「custom」ディレクトリを作成し、その中に「social_buttons.js」を配置する。

作成したファイルに、あらかじめ生成してコピーを取っておいた各サービスのコードのうち JavaScript 部分だけを抜き出しコピペする。 <script> で囲われた部分を抜き出せば大体は OK。

JavaScript の登録

functions.php(Themify のテーマを使う場合は custom-functions.php)にコードを記述し、JavaScriptを登録する。

myscript となっている部分は好きに変えてもいい(他とバッティングするものはダメ)。変える場合は wp_register_scriptwp_enqueue_script の両方を修正すること。

管理画面では必要ないので is_admin() 以外の場合のみ追加。JavaScript の中身を変えたらバージョン番号も変えると良い。

HTML 部の作成

あらかじめ生成してコピーを取っておいた各サービスのコードのうち HTML 部分だけを抜き出す。で、好きなように HTML を組んで返却するような関数を作成する。

echo ではなく return で返すようにしているので注意。

URLはどうしても必要なので get_permalink で取得。はてなブックマークで必要なタイトルも get_the_title で取得。

テンプレートを直いじりして出力させたい場合は <?php echo get_social_button_html($post->ID) ?> でいける。

作成した HTML を記事の末尾に追加

テンプレート直いじりが嫌な場合はフィルターフックを使用する。

add_filter の優先度は他のプラグインなどとの絡みもあると思うので各自調整。表示条件も好きにいじろう。

上の例では記事と固定ページでのみ、コンテンツの下部に表示するようにしている。

CSS の修正

好きに修正すればいいと思うよ。最低限

くらいは必要か。

参考

【WordPress】 TwentyTwelveにソーシャルボタンをプラグインなしで追加する | work.log

上記を参考に一部修正してあります。

また上記サイトにはソーシャルボタン用スクリプトの最適化方法も載っていますが、WordPress 同梱の jQuery が使えないことによるトラブルを回避するため、かつ他のボタンを同様の手順で追加しやすいという拡張性を考え、あえて従来の方法を採っています。