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でウィジェットのアーカイブを一発でドロップダウンにする超簡単な方法

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

  2. WordPressアップデートでアイコンが表示されない時の対処方法

    WordPress

    WordPress 3.8のアップデートで管理画面のアイコン画像が上手く表示されない時の対処方法

    先程、WordPress 3.8にアップデートしたら管理画面の上部バー…

  3. WordPress

    プラグインを使わないでWordPressにページナビを実装してみる

    WordPressのトップページなどの一番下によくあるページナビをプラ…

  4. WordPress

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

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

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

    WordPress

    WordPressで記事タイトルの文字数制限をするやり方

    WordPressで記事タイトルの文字数制限をするやり方をメモしときま…

  6. WordPress

    WordPressのシングルページで前後の記事リンクを条件判定で出力するやり方

    以前 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. 落ち葉と雪
  2. SOL001
  3. 末廣ラーメン

アーカイブ

PAGE TOP