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を挿入してくれるようになります。

参考サイト

WordPressのログイン時のツールバーWordPressでthe_author()を使えば記事に簡単に投稿者名を表示させることができる前のページ

ブログで使うCC(クリエティブコモンズ)対象の画像をFlickrやGoogleから簡単に探してくれる「CC Search」次のページ

関連記事

  1. WordPressテーマ「Ignite」

    WordPress

    レスポンシブ対応のクリーン&エレガントなフリーのWordPressテーマ「Ignite」

    個人的にとてもいいなーと思ったWordPressテーマがあったのでメモ…

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

    WordPress

    ブログなどでFlickrの転載可能な画像を使用する時のクレジット表示するためのWordPressショ…

    ブログなどでコンテンツに関連した画像を挿入したいといったことがあるかと…

  3. フォトグラファーに最適なWordPressテーマ集

    WordPress

    フォトグラファーに最適なWordPressテーマ集

    フォトグラファーに最適なWordPressテーマ集「77 Free a…

  4. Tetris

    WordPress

    レスポンシブに対応したmasonry風のフリーのWordPressテーマ「Tetris」

    Tetrisという素敵なフリーのWordPressテーマを見つけたので…

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

    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. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP