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のログイン時のツールバー

    WordPress

    WordPressでアイキャッチ画像のサイズによって出力を振り分ける条件分岐のやり方

    WordPressでアイキャッチ画像をサイズ別で出力を振り分ける条件分…

  2. WordPress

    WordPressでアイキャッチ画像にキャプションを表示させる設定方法

    WordPressのアイキャッチ画像にキャプションを付けたい時ってあり…

  3. WordPress

    WordPressプラグイン「WPtap Mobile Detector」を使えばスマートフォン専用…

    WordPressでスマートフォン専用のテーマを作成した場合、iPho…

  4. WordPress

    シングルページに同一カテゴリーの記事一覧を表示するカスタマイズ

    WordPressのシングルページの記事の下に現在表示されている記事と…

  5. WordPress

    WordPressでウィジェットのアーカイブを一発でドロップダウンにする超簡単な方法

    知らなかったですこれ。前からずっとアーカイブをドロップダウンにできない…

  6. WordPressでmicrodataを使ったパンくずリスト

    WordPress

    WordPressでパンくずリストをmicrodataを使ってマークアップするやり方

    そういえばこのサイトではまだパンくずリストを作成していなかったので今回…

コメント

    • 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. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP