WordPress で Twitter のツイートボタンを投稿にごとに設置する方法

WordPress でツイッターのツイートボタンを投稿にごとに設置する方法を紹介します。
例えば、記事一覧ページでツイートボタンを投稿ごとに設置したいときに便利な方法です。

1. ツイートボタンを投稿ごとに設置する方法

ツイートボタンを投稿ごとに設置する方法

WordPress で Twitter のツイートボタンを投稿ごとに設置するには、ツイートボタンに各ページのURLやページタイトルが表示されるように調整します。
まずはデフォルトのツイートボタンの表示コードを紹介します。

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

詳細ページはこのままで問題ありませんが、一覧ページでは各ボタンがうまく機能しません。
そこで、各ページのタイトルやURLを取得して、各項目に付与してあげます。
例えば、投稿の一覧ページで各投稿ごとのツイートボタンを設置する場合は、次のコードをループ内に設置します。

<a href="http://twitter.com/share?text=<?php echo urlencode(the_title_attribute('echo=0')); ?>&url=<?php the_permalink(); ?>&hashtags=" rel="nofollow" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

仮に、メインループ内に設置する場合は次のようになります。

<?php if (have_posts()): ?>

<?php while (have_posts()) : the_post(); ?>

<a href="http://twitter.com/share?text=<?php echo urlencode(the_title_attribute('echo=0')); ?>&url=<?php the_permalink(); ?>&hashtags=" rel="nofollow" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<?php endwhile; ?>

<?php else: ?>

<!-- 投稿が無い場合の処理 -->

<?php endif; ?>

このサンプルではハッシュタグの値は空にしています。
例えば、ハッシュタグにカテゴリを入れたい場合はカテゴリ（ターム）の値を取得して表示してください。
タームの取得はWordPress ターム情報の取得と表示方法をご覧ください。

まとめ

WordPress で Twitter のツイートボタンを投稿ごとに設置する方法を紹介しました。
Facebookのいいねボタンを設置したい場合はWordPress 記事ごとに Facebook のいいね！ボタンを設置する方法をご覧ください。
Twitter のツイートボタンをオリジナルの画像で設置したい場合は、Facebook のシェアボタンを画像やテキストで設置する方法をご覧ください。