プラグイン不要でTwitterカードをコピペでサクッと設置する方法|WordPressカスタマイズ

Twitterカード

昨日、Facebook OGPを手軽に設置する方法について書きました。

プラグイン不要でFacebook OGPをコピペでサクッと設置する方法

で、OGP設定を眺めていたら、Twitterカードもお手軽にサクっといけそうだったのでコードを書き換えてみました。すると、プラグインなしでもTwitterカードが設定できたのでご紹介です。

一応をプラグインを使った方法のお勧めのやり方は、以下に書いています。

インパクトのあるツイッターカードを作る方法(Twitter Cardsプラグイン設定)

photo by koka_sexton

スポンサーリンク
レクタングル(大)広告

プラグイン無しでのTwitterカード設定手順

プラグイン無しでTwitterカードの設定をするには以下をダウンロードして中身のtwitter-card.phpをテーマフォルダ内にコピペしてください。

twitter-card.phpのダウンロード

twitter-card.phpの中身はこのようになっています。

コードの以下の部分は、自身のツイッターIDに変更してください。

僕の場合だとこんな感じになります。

あとは特に変更する必要もないですが、サイトのタイプに応じて以下の部分を変更してもいいかもしれません。

今回の書式に合うカードタイプは以下のものがあります。

  1. summary
  2. summary_large_image
  3. photo

カードのタイプについての詳細は以下を参照してください。

インパクトのあるツイッターカードを作る方法

Twitter Cards | Twitter Developers

僕の場合はこんな感じにして使ったりしています。

テーマのヘッダーファイル(header.php)の<head></head>タグ内に以下のコードでtwitter-card.phpを呼び出すと、そこにTwitterカードタグが挿入されます。

witter Cardsに登録

あとは、TwitterにTwitter Cardsの申請をします。

この申請は、誰でもしなければなりませんが、カスタマイズ以外のこの作業が一番面倒くさいです。

まずは、Card Validatorから、あなたのTwitterアカウントでログインします。

Sign in with your Twitter account  Twitter Developers

ログイン後、Twitterサイトで入力作業が必要です。

詳しい手順は、WordPressでTwitter Cardsの設定の「Twitter Cardsに登録」の項目を参照してください。

動作確認

テーマをカスタマイズしたら、動作を確認します。

ソースチェック

まずはソースの確認です。ブラウザのソースは以下のように表示されます。

動作チェック

動作確認は、Card Validatorを用います。

「Validate & Apply」タブを選択して「Go!」ボタンを押してチェックをしてください。

Twitterカードのチェック

以下のようにTwitterカード情報が表示されればOKです。

Card Validator   Twitter Developers

まとめ

今回この設定をしたおかげで、プラグインを一つ使わなくて済むようになりました。

もう既にTwitterにカード申請がされている場合は、コピペ2回と、ちょっとした編集だけで終わる簡単な作業です。

今回の設定は、デフォルトのTwitter Cardsプラグインよりは詳細な内容になりますし、twitter-card.phpを編集すれば自分好みのカード情報を作ることもできるようになります。もし良かったら一度試してみてください。

『プラグイン不要でTwitterカードをコピペでサクッと設置する方法|WordPressカスタマイズ』へのコメント

  1. 名前:wp勉強虫 投稿日:2014/10/20(月) 17:41:34 ID:19e24be36

    わいひらさん こんにちは。
    wordpressのことを調べるといつも寝ログさんにたどり着きます。
    本当にいつもお世話になっています。
    今日はtwittercardsの設定を頑張っているのですが、
    photoやsummary_large_imageに設定すると、縦長い画像がだらーっと表示されてしまいます。(縦長い画像が多いのですが、twittercardsで全部ではなく、一部見せたいのです・・)
    アスペクト比は無視して、上から300pxのみ表示したい、という設定はできますか?
    お暇な時で構いません・・よろしければご教授くださいませ。
    よろしくお願いいたします。

  2. わいひら 名前:わいひら 投稿日:2014/10/20(月) 22:13:48 ID:ddbb13940

    こんにちは。
    僕が当時調べた限りでは、そのような方法はなかったように思います。
    縦長の画像をだらっと表示させたくない場合は、横長画像を使うか、カードタイプをsummaryにするしかないかもしれません。
    今のところ、Summary Card with Large ImagePhoto Cardを見てみても、そのような設定項目はないようです。

  3. 名前:wp勉強虫 投稿日:2014/10/20(月) 23:37:53 ID:19e24be36

    わいひらさん

    ご回答いただきありがとうございます!
    そうなのですね。。
    それではsummaryでいこうと思います。
    プラグインではなくて、わいひらさんのphpを使わせていただいてます。

    他の記事もすっごくためになり勉強になります。
    ありがとうございます。
    更新楽しみにしています。