WP Social Bookmarking Lightを使って好きな場所にソーシャルボタンを設置する方法メモ

まず、自動的に配置するためのコードを無効化します。「wp-social-bookmarking-light.php」にある「add_filter」を、次のようにコメントアウトします。

// initialize
function wp_social_bookmarking_light_init()
{
    add_action('wp_head', 'wp_social_bookmarking_light_wp_head'); // edited by did2memo
    add_action('wp_footer', 'wp_social_bookmarking_light_wp_footer');
    // add_filter('the_content', 'wp_social_bookmarking_light_the_content'); // edited by did2memo
    add_action('admin_menu', 'wp_social_bookmarking_light_admin_menu');
}
add_action( 'init', 'wp_social_bookmarking_light_init' );

次に、ボタンの直後に自動的に「<br class="wp_social_bookmarking_light_clear">」が挿入されてしまうのを防ぐために、「modules/content.php」の「wp_social_bookmarking_light_output」の最後にある

return "<div class='wp_social_bookmarking_light'>{$out}</div><br class='wp_social_bookmarking_light_clear' />";

を、次のように編集します。

return "<div class='wp_social_bookmarking_light'>{$out}</div>";

これは必須ではないのですが、自分でCSSを編集したかったため、プラグインが自動挿入するCSSを削除します。現状、次のようなCSSが自動出力されてしまいます。

<!-- BEGIN: WP Social Bookmarking Light -->
<style type="text/css">
div.wp_social_bookmarking_light{border:0 !important;padding:0px 0 0px 0 !important;margin:0 !important;}
div.wp_social_bookmarking_light div{float:left !important;border:0 !important;padding:0 4px 0px 0 !important;margin:0 !important;height:21px !important;text-indent:0 !important;}
div.wp_social_bookmarking_light img{border:0 !important;padding:0;margin:0;vertical-align:top !important;}
.wp_social_bookmarking_light_clear{clear:both !important;}
</style>
<!-- END: WP Social Bookmarking Light -->

編集するのは「content.php」です。もともと

    // css
    $padding_top = $options['style']['padding_top'];
    $padding_bottom = $options['style']['padding_bottom'];
    $float = $options['style']['float'];
?>
<style type="text/css">
div.wp_social_bookmarking_light{border:0 !important;padding:<?php echo $padding_top ?>px 0 <?php echo $padding_bottom ?>px 0 !important;margin:0 !important;}
div.wp_social_bookmarking_light div{float:<?php echo $float ?> !important;border:0 !important;padding:0 4px 0px 0 !important;margin:0 !important;height:21px !important;text-indent:0 !important;}
div.wp_social_bookmarking_light img{border:0 !important;padding:0;margin:0;vertical-align:top !important;}
.wp_social_bookmarking_light_clear{clear:both !important;}
</style>
<!-- END: WP Social Bookmarking Light -->
<?php
}

となっているので、

if(false){
    // css
    $padding_top = $options['style']['padding_top'];
    $padding_bottom = $options['style']['padding_bottom'];
    $float = $options['style']['float'];
?>
<style type="text/css">
div.wp_social_bookmarking_light{border:0 !important;padding:<?php echo $padding_top ?>px 0 <?php echo $padding_bottom ?>px 0 !important;margin:0 !important;}
div.wp_social_bookmarking_light div{float:<?php echo $float ?> !important;border:0 !important;padding:0 4px 0px 0 !important;margin:0 !important;height:21px !important;text-indent:0 !important;}
div.wp_social_bookmarking_light img{border:0 !important;padding:0;margin:0;vertical-align:top !important;}
.wp_social_bookmarking_light_clear{clear:both !important;}
</style>
<!-- END: WP Social Bookmarking Light -->
<?php
}
}

のように、前後に１行ずつ追加して、この部分を無効化しておきます。

これだとまだ「>!-- BEGIN: WP Social Bookmarking Light -->」が出力されてしまうので、これも消したい場合は同じ要領で、少し上にある部分も囲んで無効化してしまいます。

if(false){
?>
<!-- BEGIN: WP Social Bookmarking Light -->
<?php
}

ここで紹介した方法はちょっとあらっぽく、facebookボタンやgoogle +1ボタン、mixiチェックボタンなどのCSS出ないスクリプトの部分は継続しててヘッダに出力されるため、「BEGIN」「END」は消さない方が良いかもしれません。詳しい人は、そこのところも上手くやってみてください（CSSの行をすべて消去してしまえばいいのですが、それだと元に戻しにくくて嫌なだけです）。

次のようなタグをテーマファイルに記述することで、ボタンを設置できます。

<?php echo wp_social_bookmarking_light_the_content(''); ?>

こうすると、

<div class='wp_social_bookmarking_light'>（ボタンのコード）</div>

こんな感じのコードがその場所に出力されます。どのボタンを表示するかは、従来通りプラグインの設定画面で選択してください。

後は、CSSで微調整してください。自分のメモ書きとしてCSSを書いておくと、今使っているのはこんな感じです（あくまでこのサイト用なので、そのままで使うべきコードではありません）。

/************************************************
*	WP Social Bookmarking Light								*
************************************************/

#content div.wp_social_bookmarking_light {

}

#content .wp_social_bookmarking_light div{

}

div.wp_social_bookmarking_light{display: inline; border:0; padding:4px 0 0px 0; margin:0;}
div.wp_social_bookmarking_light div{display: inline; float:none; border:0; padding:0px 4px 0px 0; margin:0px 0px 0px 0px; height:15px; text-indent: 0;}
div.wp_social_bookmarking_light img{border:0; padding-top: 2px; margin:0 ;vertical-align:top;}
div.wp_social_bookmarking_light iframe{border:0; padding-top: 0px; margin:0 ;vertical-align:top;}
img.wp_social_bookmarking_light_img {padding-top:0px;}
.wp_social_bookmarking_light_clear{clear:both;}

書いたのが結構前なので、よく分かっていません；

そろそろプラグインを使わず、自分でボタンを設置した方がいい気がしてきました。またバージョンアップすると、今回の修正も吹き飛んでしまうので。。。