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

Twitterカード

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

以前、Facebook OGPの設定について以下のような記事を書きました。 これも、かなり簡素化されたOGP設定の方法なんですが、All...

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

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

WordpressプラグインのTwitter Cardsプラグインを用いたツイッターカード作成方法の紹介です。 Twitter Car...

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カードタグが挿入されます。

子テーマでカスタマイズする場合

先程の、コードを子テーマで利用する場合は、get_template_directory_uri()の部分をget_stylesheet_directory_uri()に変更して利用する必要があります。

get_template_directory_uriは、親テーマフォルダのURL取得。get_stylesheet_directory_urは、子テーマフォルダのURL取得です(子テーマが適用されている場合)。

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を使わせていただいてます。

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

  4. 名前:みっくん 投稿日:2017/02/17(金) 19:15:12 ID:df3b84698

    こんにちは。

    使わせていただいて気づいたのですが、固定ページでアイキャッチ画像を設定しているのにTwitterカードではテーマのサムネイル画像が表示されます。
    ソースを見るとシングルページの判定はありましたが固定ページは無いようでした。
    なので、is_single()で判定している部分をis_single() or is_page()に直すとアイキャッチ画像が表示される様になりました。

  5. わいひら 名前:わいひら 投稿日:2017/02/18(土) 07:52:03 ID:16ae242c7

    こんにちは。
    ご指摘ありがとうございます!
    確かに書いてあるコードでは、投稿ページしか表示されないようになっていました。
    ですので、早速修正させていただきました。
    is_single()の部分は、is_singular()にすると、「is_single() or is_page()」と同じ意味となり、簡潔にかけるので、is_singular()の方で修正してあります。

    自分では、なかなか間違いに気づかないので助かります。

  6. 名前:あまみ 投稿日:2017/03/26(日) 02:19:11 ID:1dbe9b424

    すみませんTwitterCARDのことでご質問したいのですが
    自分はHTMLなど触るのは始めてで正直な所記事を見させてもらってもよくわかりません。。。
    自分は現在FC2でブログを最近始めたのですが是非TwitterCARDを利用したいのでご教授お願いします。。。

  7. わいひら 名前:わいひら 投稿日:2017/03/26(日) 13:31:19 ID:eb4917cfb

    ここに書いてあるのは、Wordpressというブログシステム用のものなので、FC2では利用できないと思います。
    僕は、FC2は使ったことがないので、今できるのかわからないのですが、「FC2A Twitterカード」と検索すると、いろいろな方法が出てくるので、そちらの方を試してみてください。