こんにちはくまえもんです！
先日ようやくTwitterをはじめました。
全然まだつぶやき慣れていないのですが、
とりあえず今までの記事なんかをTwitterに投下したりなんかもしたいと思いまして。
んでよくあるじゃないですか、ブログ記事のアイキャッチ画像付きでしかもそれクリックすれば記事に飛べるようになってるやつ！
これですよ。
調べてたらどうやら「Twitterカード」というらしいです。
んで肝心の設定方法なんですが、
いろんなパターンがあるみたいなんですね。
例えば各種無料ブログサービスを使ってるか、ワードプレスかによる違い、
ワードプレスでも、プラグインを使うのか、使わないのかとか…！
そこで今回は私の場合、
①ワードプレス
②エックスサーバー
③テーマは「JIN」
④子テーマ作成済み
⑤プラグイン使いたくない
以上の条件で、Twitterカードを設定する手順をザッと紹介します！
今回、設定方法を書いてるサイトで一番わかりやすかったのがサルワカさんで、
【2018年版】Twitterカードとは？使い方と設定方法まとめと【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法という記事です！
いやーサルワカさんにはHTMLの勉強時にも大変お世話になっております！
それでは設定手順です！
まずサルワカさんの【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法という記事の、「3. WordPressでプラグイン無しでOGP設定をする方法」という見出しの中の、functions.phpにコードを貼付けのコードをコピー。
次にエックスサーバーのインフォパネルからファイルマネージャにログイン。
子テーマのフォルダの場所は覚えてますか？
自分のサイトドメインから、
public_html、
wp-content、
themes、
ありました！「jin-child」！
jin-childの中にfunctions.phpファイル！って多分子テーマ作った時に一緒に作ってますよね？
このfunctions.phpファイルに先ほどサルワカさんのとこでコピーしてきたコードを貼り付けるのですが、
もし無かったら、functions.phpファイルを作って、以下のコードをコピペしておきましょう。これは親テーマのスタイルを継承させるためのコードです。
<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
その下にサルワカさんのコードをペースト。
↑
こんな感じで。
サルワカさんのコードをコピペしたら、そのコード内で編集するところが３箇所あります。
元のサルワカさんの記事内では編集箇所を、オレンジの下線で印してくれています。
でも簡単です！
以下の日本語で書いてるとこだけなので↓
❶「TOPページ＆アイキャッチ画像がないときに使われる画像のURL」という部分を、自分のワードプレスの「メディア」に使用したい画像をアップロードしてその画像のURLに置き換える。
❷「ツイッターのアカウント名」という部分を、自分のTwitterのアカウント名に置き換える。（私の場合なら「@kumaemondayo」になります。）
❸元の記事では「ここにappIDを入力」という部分にFacebookのappIDに置き換えるようですが、私はこの設定は要らないので、 「//facebookのapp_id（設定する場合）」〜「//app_idを設定しない場合ここまで消す」までのコードを削除しました。
これでfunctions.phpファイルを保存します。
設定はこれで完了です！
それではきちんと設定できたのか確認してみましょう！
確認する方法ですが、Card validatorというTwitterのデペロッパー用のページで確認することができます。
方法は簡単、自分のサイトや記事のURLを入力して、「Preview card」を押すだけ！
どうでしたか？簡単でしょう？
プレビューできちんと表示されていたら、今度は実際にツイートして試してみましょう。
ツイート本文に記事のURLを貼り付けて投稿するだけでツイッターカードになっているはずです。
サーバーのファイルをいじるのが少し億劫なあなたでもこれならやっちぇえますよ！
