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

Twitterカード

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

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

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

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

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

photo by koka_sexton

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

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

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

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

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

<!-- Twitter Card -->
<meta name="twitter:card" content="summary">
<?php
if (is_singular()){//投稿・固定ページの場合
if(have_posts()): while(have_posts()): the_post();
  echo '<meta name="twitter:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";//抜粋を表示
endwhile; endif;
  echo '<meta name="twitter:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示
  echo '<meta name="twitter:url" content="'; the_permalink(); echo '">';echo "\n";//単一記事URLを表示
  } else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
  echo '<meta name="twitter:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
  echo '<meta name="twitter:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示
  echo '<meta name="twitter:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_singular()){//投稿・固定ページの場合
  if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
    $image_id = get_post_thumbnail_id();
    $image = wp_get_attachment_image_src( $image_id, 'full');
    $img_url = $image[0];
    echo '<meta name="twitter:image" content="'.$image[0].'">';echo "\n";
  } else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
    $img_url = $imgurl[2];
    echo '<meta name="twitter:image" content="'.$imgurl[2].'">';echo "\n";
  } else {//投稿にサムネイルも画像も無い場合の処理
    $ogp_image = get_template_directory_uri().'/images/og-image.jpg';
    $img_url = $ogp_image;
    echo '<meta name="twitter:image" content="'.$ogp_image.'">';echo "\n";
  }
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
  if (get_header_image()){//ヘッダーイメージがある場合は、ヘッダーイメージを
    $img_url = get_header_image();
    echo '<meta name="twitter:image" content="'.$img_url.'">';echo "\n";
    
  } else {//ヘッダーイメージがない場合は、テーマのスクリーンショット
    $img_url = get_template_directory_uri().'/screenshot.png';
    echo '<meta name="twitter:image" content="'.$img_url.'">';echo "\n";
  }
}
//ドメイン情報を$results[1]に取得する
preg_match( '/https?:\/\/(.+?)\//i', admin_url(), $results );
//画像の縦横幅を取得
list($width,$height) = getimagesize($img_url);
?>
<meta name="twitter:domain" content="<?php echo $results[1] ?>">
<meta name="twitter:image:width" content="<?php echo $width ?>">
<meta name="twitter:image:height" content="<?php echo $height ?>">
<meta name="twitter:creator" content="@YOUR_TWITTER_ID">
<meta name="twitter:site" content="@YOUR_TWITTER_ID">
<!-- /Twitter Card -->

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

<meta name="twitter:creator" content="@YOUR_TWITTER_ID">
<meta name="twitter:site" content="@YOUR_TWITTER_ID">

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

<meta name="twitter:creator" content="@MrYhira">
<meta name="twitter:site" content="@MrYhira">

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

<meta name="twitter:card" content="summary">

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

  1. summary
  2. summary_large_image
  3. photo

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

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

参考 Twitter Cards — Twitter Developers

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

<meta name="twitter:card" content="summary_large_image">

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

<?php get_template_part('twitter-card');?>

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

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

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

Twitter Cardsに登録

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

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

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

Sign in with your Twitter account Twitter Developers

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

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

動作確認

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

ソースチェック

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

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:description" content="Pocket WordPressプラグインのTwitter Cardsプラグインを用いたツイッターカード作成方法の紹介です。 Twitter Cardsプラグインは、基本的にインストール&申請するだけ">
<meta name="twitter:title" content="[WordPress]インパクトのあるツイッターカードを作る方法(Twitter Cardsプラグイン設定)">
<meta name="twitter:url" content="https://nelog.jp/twitter-cards-plugin">
<meta name="twitter:image" content="https://nelog.jp/wp-content/uploads/2014/06/d4495eb14b4f.png">
<meta name="twitter:domain" content="nelog.jp">
<meta name="twitter:image:width" content="678">
<meta name="twitter:image:height" content="452">
<meta name="twitter:creator" content="@MrYhira">
<meta name="twitter:site" content="@MrYhira">
<!-- /Twitter Card -->

動作チェック

動作確認は、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カード」と検索すると、いろいろな方法が出てくるので、そちらの方を試してみてください。

  8. 名前:nazuna 投稿日:2017/08/18(金) 03:21:39 ID:56fb231cc

    初めてコメントを書かせていただきます。
    こちらの記事で数日悩んでいたことが綺麗さっぱり解決しました!本当にありがとうございます。他の記事も参考にさせていただきますm( _ _ )m

  9. 名前:わいひら 投稿日:2017/08/18(金) 19:33:14 ID:ea1fc0b38

    記事がお役に立てたようでよかったです。
    書き込みありがとうございます!