PlusOne Blog

前回はtwitterカードを設定する方法を紹介しました。
これは、ますは基本ということで、固定ページの場合の設定方法を紹介しました。
今回は、投稿ページの場合の設定方法を紹介します。
　

　
　
twitterカードを利用するには、以下のmetaをhead内に記述するので、
これを投稿ページ用に変更していきます。
=====================
<meta name=”twitter:card” content=”●●●●●●●●●” /> —①
<meta name=”twitter:site” content=”●●●●●●●●●”> —②
<meta name=”twitter:title” content=”●●●●●●●●●”> —③
<meta name=”twitter:description” content=”●●●●●●●●●”> —④
<meta name=”twitter:image” content=”●●●●●●●●●”> —⑤
=====================
　
①表示するtwitterカードの形式
　★→これは、投稿内容に依存しないので、そのまま「summary」または「summary_large_image」を記述します。
　=====================
　（例）
　<meta name=”twitter:card” content=”summary” />
　=====================
　
②Twitterのユーザー名
　★→これも、投稿内容に依存しないので、そのままtwitterにユーザー名を記述します。
　=====================
　（例）
　<meta name=”twitter:site” content=”@p1tweet1″>
　=====================
　
③Twitterカードに表示されるタイトル
　★→投稿ページのタイトルを表示させたいので、テンプレートタグ「the_title()」を使って投稿ページのタイトルを取得して記述します。
　=====================
　（例）
　<?php if ( have_posts() ) : ?>
　　 <meta name=”twitter:title” content=”<?php the_title(); ?>” />
　<?php endif; ?>
　=====================
　
④Twitterカードに表示される説明文
　★→投稿ページの内容を表示させたいので、テンプレートタグ「get_the_excerpt()」を使って投稿ページの内容を抜粋して取得して記述します。（テンプレートタグ「the_excerpt() 」を使用すると、pタグが付いてくるので、Pタグが付いてない「get_the_excerpt()」を使用します。）
　★→テンプレートタグ「get_the_excerpt()」の使いかたに注意が必要です。
　　・ループの中で使用する必要があります。
　　・echo で取得内容を表示する必要があります。
　=====================
　（例）
　<?php if ( have_posts() ) : ?>
　　<?php while( have_posts() ) : the_post(); ?>
　　　<meta property=”twitter:description” content=”<?php echo get_the_excerpt(); ?>” />
　　<?php endwhile;?>
　<?php endif; ?>
　=====================
　
⑤Twitterカードに表示される画像
　★→投稿ページのアイキャッチ画像を表示させたいので、次のように記述します。
　★→アイキャッチ画像を設定したない場合は、指定の画像が表示されるようにします。
　=====================
　（例）
　<?php if ( have_posts() ) : ?>
　　<meta name=”twitter:image” content=”<?php
　　　if(has_post_thumbnail( $post->ID )):
　　　　$thumbnail_id = get_post_thumbnail_id();
　　　　$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘thumbnail’ );
　　　　echo $thumbnail_img[0];
　　　else:
　　　　echo bloginfo(‘template_url’) . “/img/noimage.png”;
　　　endif;
　　?>” />
　<?php endif; ?>
　=====================
　
　
①~⑤をまとめると下記のようになります。
　=====================
　<meta name=”twitter:card” content=”summary” />
　<meta name=”twitter:site” content=”@p1tweet1″>
　<?php if ( have_posts() ) : ?>
　　<?php while( have_posts() ) : the_post(); ?>
　　　<meta name=”twitter:title” content=”<?php the_title(); ?>” />
　　　<meta property=”twitter:description” content=”<?php echo get_the_excerpt(); ?>” />
　　　<meta name=”twitter:image” content=”<?php
　　　　if(has_post_thumbnail( $post->ID )):
　　　　　$thumbnail_id = get_post_thumbnail_id();
　　　　　$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘thumbnail’ );
　　　　　echo $thumbnail_img[0];
　　　　else:
　　　　　echo bloginfo(‘template_url’) . “/img/noimage.png”;
　　　　endif;
　　　?>” />
　　<?php endwhile;?>
　<?php endif; ?>
=====================
　
　
実際にどのようにtwitterカードが表示されるかを、次のサイトで確認します。
Card validator