今回は、Cocoonテーマのツイッターカード設定について紹介します。

Cocoonテーマのツイッターカード設定

ワードプレス管理画面を開きます。

左側の「外観」を押します。

外観の下の「テーマの編集」を押します。

右下の「テーマヘッダー」を押します。

11行目の<head>の下に、「Twitterカード設定コード」を貼り付けます。

下記の「Twitterカード設定のコード」をコピーして、Cocoonテーマの「テーマヘッダー」に貼り付けます。

<!-- Twitterカード設定 -->
<meta name="twitter:card" content="summary_large_image"> <!-- ←Twitterカードの種類 -->
<meta name="twitter:site" content="@アカウント名"> <!-- ←Twitterアカウント -->
<?php if(is_home()): ?>  <!-- ←でブログのトップページを判定 -->
<meta name="twitter:title" content="<?php bloginfo('name'); ?>">
<meta name="twitter:description" content="<?php bloginfo('description'); ?>">
<meta name="twitter:image:src" content="表示させたい画像URL"> <!-- ←トップページで表示させたい画像URL -->
<?php elseif(is_page()): ?> <!-- ←で固定ページを判定 -->
<meta name="twitter:title" content="<?php the_title(); ?>">
<meta name="twitter:description" content="<?php bloginfo('description'); ?>">
<meta name="twitter:image:src" content="表示させたい画像URL"><!-- ←固定ページで表示させたい画像URL -->
<?php else: ?> <!-- ←上記の条件にもれたページ(記事ページ) -->
<meta name="twitter:title" content="<?php the_title(); ?>">
<meta name="twitter:description" content="<?php echo mb_substr(str_replace(array("rn", "r", "n"), '', strip_tags($post-> post_content)), 0, 100).'...'; ?>">
<?php endif; ?>
<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'large'); ?>    
<?php if(is_single() && has_post_thumbnail() ): ?>
<meta name="twitter:image:src" content="<?php echo $image_url[0] ?>">
<?php elseif(!is_home() && !is_page() ): ?>
<meta name="twitter:image:src" content="サムネイルがない場合に表示させたい画像URL"><!-- ←サムネイルがない場合に表示させたい画像URL -->
<?php endif; ?>
<!-- Twitterカード設定 -->

3行目の「@アカウント名」の中にツイッターアカウント名を入れます。

ツイッターアカウント記入例

「アカウント名」は、ツイッターにログインしたときの左上のプロフィールに表示されます。

@マークを入れずに、アカウント名を入力します。

<meta name="twitter:site" content="fukuyari"> <!-- ←Twitterアカウント -->

左下の「ファイルを更新」を押します。

ツイッターカードの確認

自分のブログの記事をどれでもいいので、開きます。

自分のブログの「記事のURL」をコピーします。

ツイッターカードの「検証ツールサイト」を開きます。

https://cards-dev.twitter.com/validator

Card URL欄に「記事のURL」を貼り付けます。

「Previw Card」を押します。

右側に記事のアイキャッチ画像が表示されれば、ツイッターカードの設定完了です。

講座1の関連記事
  • 私がビジネスで絶対ゆずれない部分
  • カテゴリー設定 未分類を変更
  • ワードプレスキーワード
  • 時間の使い方のコツ
  • キーワードのコツ
  • 文字の先頭にタグをつける
おすすめの記事
講座2
この投稿はパスワードで保護されているため抜粋文はありません。...
講座2
この投稿はパスワードで保護されているため抜粋文はありません。...
講座1
次は、カテゴリ変更について説明します。 カテゴリ変更 作業手順 ワードプレスの管理画面を開きます。 左上の「投稿」を押します。 左側の「投稿...
講座1
作業目安時間5分 次は、ブログの「タイトル名」と「説明文」を変更します。 目次1 ブログタイトル名と説明文の変更2 注意事項2.1 なぜ、ブ...
講座1
次は、記事の削除の仕方について説明します。 目次1 記事の削除の仕方 作業手順2 記事を一括削除する方法3 削除した記事を確認する方法4 削...
講座1
次は、にほんブログ村のPing送信設定について説明します。 にほんブログ村のPing送信設定 作業手順 まずは、にほんブログ村のサイトを開き...