Easy Social Buttonsでソーシャルボタンをシンプルに for WordPress
- 2014.08.07
- 4.ツール・ガジェット
- easy, social buttons, Web, 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]
ソーシャルボタンをシンプルに表示したいかたにおすすめです!
-
前の記事
MacのPiaproStudioが起動できなくて困った話 2014.07.29
-
次の記事
はじめてのごったん(箱三味線・箱三線) 写真&演奏 2014.08.09