プラグインを使わず、テンプレートもいじらずに、JavaScript の追加と functions.php の修正で表示する。
今回は各記事の下にソーシャルブックマークを表示することにする。
対象のサービスからコードをコピー
- Twitter
https://twitter.com/about/resources/buttons - Facebook
https://developers.facebook.com/docs/reference/plugins/like/ - はてなブックマーク
http://b.hatena.ne.jp/guide/bbutton - Google+
https://developers.google.com/+/web/+1button/?hl=ja - Pocket
http://getpocket.com/publisher/button - その他
あらかじめ各サービスのボタンの作り方ページに行き、好きなボタン等を作成し、生成されたコードをコピーしておく。
JavaScript の作成
まずは JavaScript ファイルを作成。今回はテーマディレクトリの下に「custom」ディレクトリを作成し、その中に「social_buttons.js」を配置する。
作成したファイルに、あらかじめ生成してコピーを取っておいた各サービスのコードのうち JavaScript 部分だけを抜き出しコピペする。<script> で囲われた部分を抜き出せば大体は OK。
JavaScript の登録
functions.php（Themify のテーマを使う場合は custom-functions.php）にコードを記述し、JavaScriptを登録する。
|
1 2 3 4 5 6 7 |
if (!is_admin()) { function custom_add_scripts() { wp_register_script('myscript', get_bloginfo('template_url') . '/custom/social_buttons.js', false, '1.0', true); wp_enqueue_script('myscript'); } add_action('wp_print_scripts', 'custom_add_scripts'); } |
myscript となっている部分は好きに変えてもいい（他とバッティングするものはダメ）。変える場合は wp_register_script と wp_enqueue_script の両方を修正すること。
管理画面では必要ないので is_admin() 以外の場合のみ追加。JavaScript の中身を変えたらバージョン番号も変えると良い。
HTML 部の作成
あらかじめ生成してコピーを取っておいた各サービスのコードのうち HTML 部分だけを抜き出す。で、好きなように HTML を組んで返却するような関数を作成する。
echo ではなく return で返すようにしているので注意。
URLはどうしても必要なので get_permalink で取得。はてなブックマークで必要なタイトルも get_the_title で取得。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function get_social_button_html($post_id) { $link = get_permalink($post_id); $title = get_the_title($post_id); $twitter = "<a href='https://twitter.com/share' class='twitter-share-button' data-via='nigauri' data-lang='ja'>ツイート</a>"; $facebook = "<div class='fb-like' data-href='$link' data-send='false' data-layout='button_count' data-show-faces='false' data-action='like' data-share='false'></div>"; $hatena = "<a href='http://b.hatena.ne.jp/entry/$link' class='hatena-bookmark-button' data-hatena-bookmark-title='$title' data-hatena-bookmark-layout='standard-balloon' data-hatena-bookmark-lang='ja' title='このエントリーをはてなブックマークに追加'><img src='http://b.st-hatena.com/images/entry-button/button-only.gif' alt='このエントリーをはてなブックマークに追加' width='20' height='20' style='border: none;' /></a>"; $google_plus = "<div class='g-plusone' data-size='medium' data-href='$link'></div>"; $pocket = "<a data-pocket-label='pocket' data-pocket-count='horizontal' class='pocket-btn' data-lang='en'></a>"; $social_button_html = '<div id="fb-root"></div>'; $social_button_html .= '<ul class="social_buttons">'; $social_button_html .= "<li>$twitter</li>"; $social_button_html .= "<li>$facebook</li>"; $social_button_html .= "<li>$hatena</li>"; $social_button_html .= "<li>$google_plus</li>"; $social_button_html .= "<li>$pocket</li>"; $social_button_html .= '</ul>'; return $social_button_html; } |
テンプレートを直いじりして出力させたい場合は <?php echo get_social_button_html($post->ID) ?> でいける。
作成した HTML を記事の末尾に追加
テンプレート直いじりが嫌な場合はフィルターフックを使用する。
|
1 2 3 4 5 6 7 8 |
add_filter('the_content', 'add_social_buttons', 1000); function add_social_buttons($content) { global $post; if (is_single() || is_page()) { return $content . get_social_button_html($post->ID); } return $content; } |
add_filter の優先度は他のプラグインなどとの絡みもあると思うので各自調整。表示条件も好きにいじろう。
上の例では記事と固定ページでのみ、コンテンツの下部に表示するようにしている。
CSS の修正
好きに修正すればいいと思うよ。最低限
|
1 2 3 4 |
ul.social_buttons li { float: left; list-style-type: none; } |
くらいは必要か。
参考
【WordPress】 TwentyTwelveにソーシャルボタンをプラグインなしで追加する | work.log
上記を参考に一部修正してあります。
また上記サイトにはソーシャルボタン用スクリプトの最適化方法も載っていますが、WordPress 同梱の jQuery が使えないことによるトラブルを回避するため、かつ他のボタンを同様の手順で追加しやすいという拡張性を考え、あえて従来の方法を採っています。
