WordPressの投稿をTwitter Cardsに対応させよう(プラグインなし)

カテゴリー:WordPress

投稿がある程度作成ができると今度は、ソーシャルメディアで宣伝をしたいなと思ってきませんか?今回の投稿では、WordPressの投稿をTwitter Cardsに対応させることの備忘記録です。Twitterでブログを更新しましたー。と呟いてるのを見ると、ただのURLよりも、Twitter Cardsの方が内容が伝わりやすく、見栄えも良いですよね。今回、これを作成して、改めて画像の力はすごいなと思いました。

ショートコードを作成しよう

今回は、WordPressのショートコードを作成して、header.phpの<head>タグ内でショートコードを呼び出す方法で作成をしたいと思います。編集するファイルはfunctions.phpです。

・functions.php
add_shortcode('le_create_social_meta', 'le_create_social_meta_short_code');
function le_create_social_meta_short_code(){
  
}

投稿ページ、アイキャッチ画像があるか判定しよう

ショートコードの作成は上記で完了です。次に、投稿ページなのか、その投稿にアイキャッチ画像があるかの判定を行います。

・functions.php
add_shortcode('le_create_social_meta', 'le_create_social_meta_short_code');
function le_create_social_meta_short_code(){
  if (is_single()) {
  // 投稿ページだった時の処理をここに作成
    if (has_post_thumbnail()) {
    // 投稿ページでアイキャッチ画像があった時の処理をここに作成
    } else {
    // 投稿ページでアイキャッチ画像がなかった時の処理をここに作成
    }
  }
}

投稿ページ、アイキャッチ画像の判定後の処理を作成しよう

「投稿のタイトル・投稿の抜粋」を取得して、Twitter Cardsに必要情報を埋めてからアイキャッチ画像の部分を追加する形の処理にしています。これで、投稿ページでTwitter Cardsに必要な<meta>タグの出力の準備が整いました。

・functions.php
add_shortcode('le_create_social_meta', 'le_create_social_meta_short_code');
function le_create_social_meta_short_code(){
  if (is_single()) {
        // 投稿のタイトルを取得
        $title = wp_get_document_title();
        // 投稿の抜粋を取得
        $post_id = get_the_ID();
        $post_object= get_post($post_id);
        $description = mb_substr(str_replace(["\r", "\n"], '', strip_tags($post_object->post_content)), 0, 160, 'UTF-8');
        // Twitter Cards
        $html_twitter_card = '<meta name="twitter:card" content="summary" />';
        $html_twitter_card .= '<meta name="twitter:title" content="' . $title . '" />';
        $html_twitter_card .= '<meta name="twitter:description" content="' . $description . '" />';
        $html_twitter_card .= '<meta name="twitter:site" content="TwitterのIDを入力" />';
        if (has_post_thumbnail()) {
            // アイキャッチ画像idを取得して、アイキャッチ画像情報を配列で取得、添え字0がurl
            $image_id = get_post_thumbnail_id();
            $image_url = wp_get_attachment_image_src($image_id);
            $html_twitter_card .= '<meta name="twitter:image" content="' . $image_url[0] . '" />';
            echo $html_twitter_card;
        } else {
            $html_twitter_card .= '<meta name="twitter:image" content="アイキャッチ画像がないときに表示したいimage画像へのurlを入力" />';
            echo $html_twitter_card;
        }
    }
}

ショートコードを呼び出そう

最後に、header.phpのファイルにて、<head>タグの中でショートコードを呼び出して完了です。

・header.php
    // 上部省略
    <?php do_shortcode('[le_create_social_meta]'); ?>
    <?php wp_head() ?>
<head>

最後にvalidatorで確認をしよう

Twitterのvalidatorで、設定がしっかりできているか確認ができるので、こちらから確認をしておきましょう。確認したい投稿のページのURLを入力するだけで、問題がなければプレビューが表示されます。
そのほか、Twitter Cardsについての詳細は公式サイトでご確認ください。
Twitter Cards公式サイト
固定ページをTwiiterでお知らせをすることは、個人的になかなかないと思うので、今回は投稿に関しての追加のみとしました。Twitter Cardsを使用して、Twitterからサイトにアクセスしてくれる方が増えたら嬉しいですよね。以上!!


タグ

関連する投稿

ドラクエ好きな社会保険労務士有資格者・ファイナンシャルプランナー技能士検定2級正会員が運営をしています。当ブログではDQMSLを中心にWordPress・HTML・CSS・JS・PHPなどのTips備忘記録や資格関連の情報、その他雑記を発信して行きます。