WordPress のテーマ TwentyTwelve にプラグインを使わずソーシャルボタンを追加しましたのでそのメモ書きです。
これまでは WP Social Bookmarking Light という WordPress プラグインを利用していましたが、HTML ソースにスタイルシートの設定がベタ書きされるのと、HTML5 準拠ではないコードが出力されるのが嫌で今回自分で設置をしてみました。
ソーシャルボタンの種類を追加したくらいで、表示部分はそれほど変わりませんが下記のような感じになりました。
before
after
カスタマイズ方法は以下で説明していきます。
スポンサーリンク
ソーシャルボタンの取得と設置準備
以下のリンクよりソーシャルボタンを表示させるコードを取得します。
ソーシャルボタン
Twitter – ツイートボタン
Facebook – Like Button
Google+ – +1 ボタン
はてなブックマークボタン
pocekt – Pocket Button
HTML ソースを汚さないために各種コードのスクリプト部分を外部ファイルにまとめます。
今回は、TwentyTwelve 子テーマ内の js/ ディレクトリに social.js を新規作成し以下のコードを追加しました。
// Hatena
jQuery(function(){
jQuery.getScript("//b.st-hatena.com/js/bookmark_button.js");
});
// Twitter
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);
}
}(document, 'script', 'twitter-wjs');
// Facebook
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Google+
window.___gcfg = {lang: 'ja'};
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
// Pocket
!function(d,i){
if(!d.getElementById(i)){
var j=d.createElement("script");
j.id=i;
j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";
var w=d.getElementById(i);
d.body.appendChild(j);
}
}(document,"pocket-btn-js");
ここはやっつけのため元のコードから切り取っただけです。
※ 2013/07/05 上記スクリプトを以下の記事で最適化してみました。
次に functions.php に wp_register_script の設定を追加します。
if ( ! is_admin() ) {
function deregister_script() {
wp_deregister_script( 'jquery' );
function register_script(){
wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js', false, '2.0.0', true );
wp_register_script( 'social', get_stylesheet_directory_uri().'/js/social.js', false, '1.0', true );
}
function add_script() {
deregister_script();
register_script();
}
add_action( 'wp_enqueue_scripts', 'add_script' );
}
これでコードの取得と準備は完了です。
ソーシャルボタン出力用のスニペットを追加
ソーシャルボタンを表示させるには WordPress のテンプレートファイルを利用します。
ソーシャルボタンによってページの “URL, タイトル” が必要になるので、以下のようなスニペットを functions.php に追加してみました。
function social_button ( $post_id ) {
$link = get_permalink( $post_id );
$title = get_the_title( $post_id );
$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' title='このエントリーをはてなブックマークに追加'><img src='http://b.st-hatena.com/images/entry-button/button-only.gif' alt='このエントリーをはてなブックマークに追加' width='20' height='20' style='border: none;' /></a>";
$twitter = "<a href='https://twitter.com/share' class='twitter-share-button' data-url='$link' data-lang='ja'>Tweet</a>";
$facebook = "<div class='fb-like' data-href='$link' data-send='false' data-layout='button_count' data-show-faces='false' data-font='arial'></div>";
$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>";
echo '<div id="fb-root"></div>';
echo '<ul class="c-social">';
echo "<li>$hatena</li>";
echo "<li>$twitter</li>";
echo "<li>$facebook</li>";
echo "<li>$google_plus</li>";
echo "<li>$pocket</li>";
echo '</ul>';
return;
}
追加後はソーシャルボタンを表示させたい場所に以下のコードを追加するとボタンが表示できます。
<?php social_button( $post->ID ) ?>
最後はソーシャルボタンの表示をスタイルシートで調整します。
.c-social {
margin-top: 25px;
margin-top: 1.785714285714286rem;
overflow: hidden;
}
.c-social li {
margin-right: 10px;
margin-right: 0.7142857142857143rem;
float: left;
}
#fb-root{
display: none;
}
iframe.twitter-share-button {
width: 89px !important;
width: 6.357142857142857rem !important;
}
#___plusone_0 {
width: 60px !important;
width: 4.285714285714286rem !important;
}
div.pocket-btn {
width: 88px !important;
width: 6.285714285714286rem !important;
}
ソーシャルボタンによってはカウント数が増えても対応できるように余白が設けられています。
Twitter, Google+, pocket は強制的にこの余白を詰めていますがここはお好みで。
後は表示確認をして問題がなければソーシャルボタンの追加は完了です。割りと面倒なカスタマイズでしたが思うように調整できるのはやっぱり良いと思います。
これで WP Social Bookmarking Light を停止することができたので、全ページが HTML5 準拠となりました。
参考にしたページ