新着記事
月夜に乱破〜ゆったり編〜

Easy Social Buttonsでソーシャルボタンをシンプルに for WordPress

Easy Social Buttonsでソーシャルボタンをシンプルに for WordPress

ソーシャルボタンを変更しました。

目次

シンプル！

ソーシャルボタン、公式のものをそれぞれ集めると、見た目の統一感がなくてなんだかなあと思っていました。そこで見つけた[Easy Social Buttons]。「シンプルでいいな♪」と思い、導入してみました。

こんなソーシャルボタン
こんなソーシャルボタン

配布元
Cyokodogさま – [Easy Social Buttons] はてブ、Twitter、Facebook、Google+ のソーシャルボタンをシンプルに表示する jQuery プラグイン

色のカスタマイズ方法やボタンの種類の限定方法などは、配布元で詳しく説明されています。

こちらには、WordPressに設置したときの手順を載せておきます。

WordPressに設置

まずは、配布元からいただいてきたjavascript・cssファイルを読み込みます。ライブラリはテーマフォルダの直下に置きました。jQueryの読み込みも必要ですので、別途読み込んでおいてください。

headerに追加します。
[html]
<head>
<!– jQueryの読み込みも必要ですよ。 –>
<?php wp_enqueue_script( ‘jquery’ ); ?>
<!– ここからソーシャルボタン。ライブラリはテーマフォルダの直下に置きました。 –>
<link href="<?php echo get_template_directory_uri(); ?>/easy-social-buttons/jquery.easy-social-buttons.css" type="text/css" rel="stylesheet">
<script src="<?php echo get_template_directory_uri(); ?>/easy-social-buttons/jquery.easy-social-buttons.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/social-info/jquery.social-info.js"></script>
</head>

[/html]

各記事に表示させます。
functions.php
[php]
function disp_social(){
echo "<div class=’social-";
echo get_the_ID();
echo "’ ></div>";
echo "<script type=’text/javascript’>";
echo "jQuery(‘div.social-".get_the_ID()."’).easySocialButtons({";
echo "url : ‘".get_permalink($post->ID)."’";
echo "});";
echo "</script>";
}

[/php]

で、このような関数を各記事側で読みます。

index.phpとかarchive.phpとか
[php]
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<article class="post">
<!– タイトル表示など(省略) –>
<!– ブックマーク –>
<?php if ( function_exists( ‘disp_social’ ) ) { disp_social(); } ?>
<!– 記事本体 –>
<?php the_content(); ?>
</article>
<?php endwhile; ?>

[/php]

すると、こんな感じのhtmlになり、ソーシャルボタンが表示されますよ。
[html]
<!– ブックマーク –>
<div class=’social-1090′ ></div><script type=’text/javascript’>jQuery(‘div.social-1090’).easySocialButtons({url : ‘https://otowabi.com/?p=1090’});</script>

[/html]

ソーシャルボタンをシンプルに表示したいかたにおすすめです！