#バドシス 〜 日々のことを続く限り書いてみようと思って 〜

頑張って日々のことを書いていこうと思います。

【Wordpress】Twitterカードを記事先頭画像を使用するように設定する方法 【Cocoon】

Twitter

 

僕が運営しているスマホゲームブログでは、Wordpressのテーマ「Cocoon」を使っています。

 

Twitterカードの設定機能は標準で備わっているのですが、サムネイルから取って来てしまうので、記事の先頭を使うように修正しました。

 

これだと記事中で使っている大きい画像も設定できるので個人的にオススメです。

 

 

 

 

headerへソースコードを挿入

 

Cocoonの場合、「Cocoon Child: head-insert.php (tmp-user/head-insert.php)」へ入れましょう!

 

TODOとなっている部分は各自の設定値です。入れてください!! 

<?php
//TODO:初期画像を設定してください。
$twitter_image_url = 'xxxxxx';
//TODO:Twitter_idを設定してください
$twitter_id = '@xxxxxx';
//summary or summary_large_image
$twitter_card = 'summary_large_image';

//詳細、タイトル、URLを設定
if (is_single()){//単一記事ページの場合
  if(have_posts()): while(have_posts()): the_post();
  $twitter_description = mb_substr(get_the_excerpt(), 0, 100);//抜粋を表示
  endwhile;
  endif;
  $twitter_title = the_title('','',false);//単一記事タイトルを表示
  $twitter_url = get_permalink($post->ID);//単一記事URLを表示
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
  $twitter_description = get_bloginfo('description');//「一般設定」管理画面で指定したブログの説明文を表示
  $twitter_title = get_bloginfo('name');//「一般設定」管理画面で指定したブログのタイトルを表示
  $twitter_url = get_bloginfo('url');//「一般設定」管理画面で指定したブログのURLを表示
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
  //投稿に存在する画像を取得
  if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {
    $twitter_image_url = $imgurl[2];
  } else  if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
    $image_id = get_post_thumbnail_id();
    $image = wp_get_attachment_image_src( $image_id, 'thumbnail');
    $twitter_image_url = $image[0];
    //サムネイルを設定するので画像サイズを変更
    $twitter_card = 'summary';
  } else {//投稿にサムネイルも画像も無い場合の処理
    $ogp_image = $twitter_image_url;
    $twitter_image_url = $ogp_image;
  }
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
  if (get_header_image()){//ヘッダーイメージがある場合は、ヘッダーイメージを
    $twitter_image_url = get_header_image();    
  }
}
//ドメイン情報を$twitter_domain[1]に取得する
preg_match( '/https?:\/\/(.+?)\//i', admin_url(), $twitter_domain );
//URLが相対パスでくることがあるので、自身のURLをセット
if( mb_substr($twitter_image_url,0,1) == '/' ){
  $base_url = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $twitter_domain[1];
  $twitter_image_url = $base_url . $twitter_image_url;
}
//画像の縦横幅を取得
list($width,$height) = getimagesize($twitter_image_url);
?>
<!-- Twitter Card -->
<meta name="twitter:card" content="<?php echo $twitter_card ?>">
<meta name="twitter:description" content="<?php echo $twitter_description ?>">
<meta name="twitter:title" content="<?php echo $twitter_title ?>">
<meta name="twitter:url" content="<?php echo $twitter_url ?>">
<meta name="twitter:image" content="<?php echo $twitter_image_url ?>">
<meta name="twitter:domain" content="<?php echo $twitter_domain[1] ?>">
<meta name="twitter:image:width" content="<?php echo $width ?>">
<meta name="twitter:image:height" content="<?php echo $height ?>">
<meta name="twitter:creator" content="<?php echo $twitter_id ?>">
<meta name="twitter:site" content="<?php echo $twitter_id ?>">
<!-- /Twitter Card -->

 

本家様との違い

 

本家Simplicityの方の記載したソースコードプラグイン不要でTwitterカードをコピペでサクッと設置する方法|WordPressカスタマイズ)がベースになっておりますが、自分の書きやすいように一部改修しています。

 

・記事の1つ目の画像を使うようにしています。

・1つ目の画像が存在しない場合、サムネイルを取得し、cardの種類をサマリーに変更しています。

・出力を最後に行うようにしました。

wp_get_attachment_image_srcなのか、相対パスで返ってくることがあったので、絶対パスになるようにチェック処理を追加。

 

※気が向いたら画像サイズでサマリー or ラージの出し分けなどをしたい。(今は運用上特に困ってないし面倒なので

 

テスト

 

以下サイトでテストできます。

ログインを求められますが、公式サイトなのでご安心を。

 

cards-dev.twitter.com

 

本家はこちら。

nelog.jp