WordPress

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

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

  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 のシェアボタンを画像やテキストで設置する方法をご覧ください。

合わせて読みたい関連記事