個別ページにtwitterのタイムラインを表示する : WordPress

Tweet

Pocket

twitterのタイムラインをWordPressに表示するプラグインは色々なのがある。今回はカスタム投稿ポストのカスタムフィールドにツイッターアカウントの入力域を作りカスタム投稿ポストにタイムラインを表示する方法をまとめる。

前提

• 公式サイトのAPI(Twitter / ウィジェット)を使う。
• 投稿ごとにデザインは変更できない。
• 必要な情報はTwitterアカウント

Twitterのタイムライン表示スクリプト

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 300,
  height: 300,
  theme: {
    shell: {
      background: '#579ce6',
      color: '#ffffff'
    },
    tweets: {
      background: '#f2edf2',
      color: '#3f4380',
      links: '#559937'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('●●●').start();
</script>

Twitter / ウィジェットで取得したスクリプトのユーザー部分(●●●)をカスタムフィールドの値に変更する。

$twitter = trim(get_post_meta($post->ID, 'twitter' , true));
print <<< TwitterScript
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 300,
  height: 300,
  theme: {
    shell: {
      background: '#579ce6',
      color: '#ffffff'
    },
    tweets: {
      background: '#f2edf2',
      color: '#3f4380',
      links: '#559937'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('$twitter').start();
</script>
TwitterScript;

ヒアドキュメントで変数展開している部分のシングルクォートを忘れない。

を入力する項目を作成しタイムラインを個別ページに表示