昨日、Facebook OGPを手軽に設置する方法について書きました。
で、OGP設定を眺めていたら、Twitterカードもお手軽にサクっといけそうだったのでコードを書き換えてみました。すると、プラグインなしでもTwitterカードが設定できたのでご紹介です。
一応プラグインを使った方法のお勧めのやり方は、以下に書いています。
photo by koka_sexton
目次
プラグイン無しでのTwitterカード設定手順
プラグイン無しでTwitterカードの設定をするには以下をダウンロードして中身の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">
今回の書式に合うカードタイプは以下のものがあります。
- summary
- summary_large_image
- 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アカウントでログインします。
ログイン後、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カード情報が表示されればOKです。
まとめ
今回この設定をしたおかげで、プラグインを一つ使わなくて済むようになりました。
もう既にTwitterにカード申請がされている場合は、コピペ2回と、ちょっとした編集だけで終わる簡単な作業です。
今回の設定は、デフォルトのTwitter Cardsプラグインよりは詳細な内容になりますし、twitter-card.phpを編集すれば自分好みのカード情報を作ることもできるようになります。もし良かったら一度試してみてください。
わいひらさん こんにちは。
wordpressのことを調べるといつも寝ログさんにたどり着きます。
本当にいつもお世話になっています。
今日はtwittercardsの設定を頑張っているのですが、
photoやsummary_large_imageに設定すると、縦長い画像がだらーっと表示されてしまいます。（縦長い画像が多いのですが、twittercardsで全部ではなく、一部見せたいのです・・）
アスペクト比は無視して、上から300pxのみ表示したい、という設定はできますか？
お暇な時で構いません・・よろしければご教授くださいませ。
よろしくお願いいたします。