情報科学屋さんを目指す人のメモ

方法・手順・解説を書き残すブログ。私と同じことを繰り返さずに済むように。

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

CSS (6) HTML (15) PHP (25) WordPress (77) WordPressプラグイン (25)

今までWP Social Bookmarking Lightプラグインを使ってツイートボタンやはてブボタンを設置していたのですが、特別な使い方をして、好き勝手な位置に配置していました。しかし、バージョンアップを行った結果、二重に表示されるようになり、設定を変更するだけでは二カ所に表示されるか、どこにも表示されないかの二択になってしまい、結局プラグインのコードを少し編集することになりました。今回は、どこをいじったら好きな場所に配置できるようになったかをメモしておきます。

編集箇所1:自動挿入無効化

まず、自動的に配置するためのコードを無効化します。「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' );

編集箇所2:brタグ除去

次に、ボタンの直後に自動的に「<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>";

編集箇所3:ヘッダへのCSS追加防止

これは必須ではないのですが、自分で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
}
}

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

これだとまだ「>!-- 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;}

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

感想

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

コメント(0)

新しいコメントを投稿