WordPress

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

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