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

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

1. 記事ごとにツイートボタンを設置する方法
   1. ツイートボタンのスタイルを選択
   2. ツイートボタン表示する場所にコードを追加
2. ボタンの設置がうまくいかない場合の対処方法

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

WordPress で記事ごとにツイートボタンを設置する方法を紹介します。

1.ツイートボタンのスタイルを選択

Twitter が提供しているTwitterボタンを使用して、
ボタンを表示するためのソースコードを入手します。
例えば、
・ボタンを選択：リンクを共有
・URLを共有：https://hirashimatakumi.com/
・ツイートの本文：Takumi Hirashima
・言語設定：Japanese – 日本語
の場合のソースコードは次のようになります。

<a

  href="https://twitter.com/share"

  class="twitter-share-button"

  data-url="https://hirashimatakumi.com/"

  data-text="Takumi Hirashima"

  data-lang="ja"

>ツイート</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

このままだと WordPress では動的に処理できないため、data-url と data-text の値を the_permalink と get_the_title に変更します。

<a

  href="https://twitter.com/share"

  class="twitter-share-button"

  data-url="<?php the_permalink(); ?>"

  data-text="<?php echo get_the_title(); ?>"

  data-lang="ja"

>ツイート</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

ツイートボタンのスタイルを変更する場合は、Twitterボタン でコードを新たに取得し直してください。

2.ツイートボタン表示する場所にコードを追加

記事ごとにツイートボタンを設置する場合は、メインループやサブループ内にボタンのソースコードを追加します。
例えば、メインループにツイートボタンを設置する場合は、先ほど用意したツイートボタンのコードをループ内に追加します。

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

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

<!-- いいね！ボタンを表示 -->

<a

  href="https://twitter.com/share"

  class="twitter-share-button"

  data-url="<?php the_permalink(); ?>"

  data-text="<?php echo get_the_title(); ?>"

  data-lang="ja"

>ツイート</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

<?php endwhile; ?>

<?php else: ?>

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

<?php endif; ?>

ボタンの設置がうまくいかない場合の対処方法

ボタンの設置がうまくいかない場合は次の点をチェックしましょう。
・ツイートボタンのURLの指定
よくあるのが、すべてのツイートボタンが同じURLを指定している。
この場合は、ループ内のツイートボタンのURLが動的に変更されているかを確認しましょう。

まとめ

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