こんにちは！
先日Twitterカードの設定についてお話しさせていただきました。
<head>タグに直接書き込んでいく方法でしたが、今日はワードプレスサイトにプラグインで設定する方法をご紹介します。
Twitterカードって何だ？
という方はこちらご覧ください^^
今日は設定の方法を詳しくお伝えするのではなく、設定するためのプラグインを２種類ご紹介します。
Contents
All in one SEO Packで設定する
こちらはTwitterカードだけでなく、SEO対策で導入している方がたくさんいると思います。
ワードプレスサイトでは必須
と言っても過言ではないくらい、至る所でオススメされているプラグインです。
Twitterだけでなく、Facebookでのシェアも簡単に設定することができますよ！
プラグインをインストール
まずは、ダッシュボードメニューの
「プラグイン」にカーソルを合わせ「新規追加」をクリック。
プラグインを追加の画面で、キーワード検索。
All in one SEO Pack
を検索窓に入力し、エンターキーを押します。
検索結果が出たら、「今すぐインストール」をクリック。
（似ている名前のプラグインがあるので注意！）
インストールされたら「有効化」をクリックし、早速使っていきましょう！
投稿画面で設定
「記事の投稿」「固定ページ」の新規追加に進んでください。
先ほど、All in One SEO Packを有効化したので、投稿画面の下部に、下記の設定画面があるはずです。
（インストールだけではダメです！有効化お忘れずに！）
最初は「メイン設定」のタブが選ばれていますが、「ソーシャル設定」を選びましょう。
（メイン設定では、タイトルや説明文を入力できますので、是非やってみてくださいね。ここでは飛ばします。）
Twitterカードに表示させる「タイトル」「説明」を入力します。
次に、カードのタイプ「要約の大きい画像」「要約」どちらかを選びましょう。
（説明の項目より、かなり下にありますのでスクロールして探してください。）
最後に、「カスタムTwitter画像」で、カードに表示させたい画像をアップロードします。
投稿の中で使用した画像を選ぶこともできますし、新しく設定することもできます。
設定はこれにて完了です！
投稿を公開し、Card Varidatorでチェックして、ツイートしましょう！
ブログ更新しました！
— 智子 (@tomotomomarble) May 3, 2020
以前もTwitterカードについて記事にしましたが
今回は #Wordpress サイトでTwitterカードを設定する方法です🥰
大元の #PHP ファイル編集して設定することもできますが、エラーの要因にもなりかねない…
便利なプラグイン利用しましょう✨#html#csshttps://t.co/QcY8F6hxHz
こちらは各ページの<head>タグ、<footer>タグに記述を追加できるプラグインです。
以降、このプラグインを「HFCM」と記載しますね。
こちらを利用する場合は、カードにしたい投稿や固定ページを、「公開」してから設定していきましょう。
プラグインのインストール方法は「All in One SEO Pack」と同様です。
インストール後、「有効化」までしてしまいましょう！
ヘッダーに設定
では、HFCMでの設定方法をお話ししていきます。
ダッシュボード画面左のメニューに、「HFCM」という項目が追加されています。
HFCMにカーソルを合わせると、「Add NEW」（新規追加）という項目が出ますので、クリックしましょう。
まずは、設定に名前をつけていきます。
あとから編集する場合にも探しやすいように、何の設定かわかる名前が良いですね。
次に、どのページのヘッダーを編集するか決めていきます。
特定のブログの場合は「Specific Posts」、特定の固定ページの場合は「Specific Pages」を選びます。
それ以外にも、サイト全体「Site Wide」などがあります。
今回は、特定のブログのケースを想定して、「Specific Posts」を選んでいきます。
すると、「Post List」に、投稿一覧が出てきますので、Twitterカードにしたい投稿を選んでいきましょう。
「Location」を「Header」にします。
これで、<head>タグにTwitterカードについて記述していくことができます。
「Device Display」は「Show on All Devices」でOKです。
スマホや、PCで設定を分けたい時にはここを変更していきますが、今回はTwitter Cardの設定のため、変更しません。
「Status」は「Active」（有効）にしましょう。
最後に、「Snippet Code」に、Twitterカードの設定を記述していきましょう。
あとは、「Save」をクリックして完了です。
Card Varidatorでチェックして、ツイートしましょう！
最後に
今回、２つのプラグインを紹介しましたが、無事Twitterカードを設定することはできましたか？
ワードプレスの大元のPHPを編集することももちろん可能です。
実は私も、PHPファイルを編集しようとしたことがあるのですが、間違いに気づかず保存してしまい、サイト全体がエラーになってしまったことがあります^^;
「サイトが壊れた！！泣」
と思ってしまい、直す前にプチパニックに陥りました笑
なのでそれ以降はCSSもJSも大元のファイルは編集していません。
headタグに何か記述したい場合も、今回のようにプラグインを利用しています。
大元のファイルを書き換えて、何か間違えてしまった場合は、直せばいいだけなので、慣れている方はその方がいいのかもしれませんね。
プラグインをたくさんインストールすると、その分データ容量も消費してしまいますので。
ですので、大元のPHPファイルを編集するのは怖いな、という方は是非このブログを参考にしてみてください^^
ではでは〜！
