前回は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