WordPressのログイン時のツールバー

WordPress

WordPressのトップページ(index.php)で公式ツイートボタンのURLを各記事別になるようにする設定方法

ちょっとした備忘録です。WordPressのトップページで公式ツイートボタンをプラグインなどを使わないで表示させる場合、どのボタンを押しても全部がトップページのURLになってしまいます。普通に記事単体のページにつけた公式ツイートボタンはちゃんとその記事のURLを反映してくれるので、トップページの場合、各記事のパーマリンクの設定がされてないのが原因みたいですね。

[ads_center]

各記事別のURLを反映させる

ということで、ツイートボタンを表示させるコードをfunctions.phpに書いている場合のやり方です。

// Twitter
function twitter_button() {
    echo '<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-text="RT @ユーザー名 :';
    the_title();
    echo '" data-url="';
    the_permalink();
    echo '" data-lang="en">Tweet</a></li>';
}

フッターなどに以下も記述しておきます。

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

あとはボタンを表示させたい場所に以下を追加すればOKです。

<?php twitter_button(); ?>

で、重要なポイントとしてはtwitter_button内にあるdata-urlです。これにthe_permalink()を設定しておかないとトップページの場合、各記事URLが反映されません。ツイッター公式サイトからコードを取得してもデフォルトでは入ってなかったので追加しておく必要があります。

これで、トップページからの各記事のボタンをクリックしてツイートする場合でも、ちゃんとその記事URLを挿入してくれるようになります。

参考サイト

関連記事

  1. WordPressにPocketボタンを設置

    WordPress

    WordPressにPocketボタンを設置するやり方

    そういえばPocketのボタンをまだ設置していなかったので、このたび設…

  2. WordPressのログイン時のツールバー

    WordPress

    WordPressの囲み型ショートコードの基本的な使い方

    WordPressのショートコードはとても便利で色々なことができるんで…

  3. WordPress

    WordPressの管理画面にメモを残せるプラグイン「Quick Notes on the WP D…

    おもしろいプラグインを試してみました。おもしろいというかとても便利だな…

  4. WordPress

    WordPressでアイキャッチ画像を使う場合のサイズ設定や画像ありなし時の振り分けなど

    WordPressにあるアイキャッチ画像がとても便利で、自分もWord…

  5. WordPressのログイン時のツールバー

    WordPress

    WordPressでキーワードを登録しておくと自動でリンクをつけてくれるプラグイン「WP Keywo…

    なかなか便利だったのでご紹介します。WordPressで自分が登録した…

コメント

    • kiyocom
    • 2012年 7月 01日

    はじめまして、こんにちは。
    ツイートボタンの挿入方法を検索しており、貴殿のサイトに辿り着きました。

    記事中に記載されている様にツイッター公式サイトからコードを取得しました。

    <a href=”https://twitter.com/share” rel=”nofollow”>ツイート</a>
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);

    各記事へのURLを挿入して表示させるには上記のどこにthe_permalink()を記載すれば良いのか教えて頂けないでしょうか?
    何卒、宜しくお願いいたします。

    • kiyocomさん、はじめまして!
      コメントありがとうございます。

      トップページにボタンを置いて各記事のURLを対応させたい場合は<a>タグの属性に data-url をつける必要があります。
      なので、この data-url に the_permalink() をつければOKかと思います。

      <a href=https://twitter.com/share” rel=”nofollow” data-url=”<?php the_permalink(); ?>”>

  1. この記事へのトラックバックはありません。

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP