ブログ運営

【Twitterカード】超簡単5分!ワードプレス子テーマありエックスサーバーならプラグイン無しですぐ作れる!

こんにちはくまえもんです!

先日ようやくTwitterをはじめました。

全然まだつぶやき慣れていないのですが、

とりあえず今までの記事なんかをTwitterに投下したりなんかもしたいと思いまして。

んでよくあるじゃないですか、ブログ記事のアイキャッチ画像付きでしかもそれクリックすれば記事に飛べるようになってるやつ!

これですよ。

Twitter card

調べてたらどうやら「Twitterカード」というらしいです。

んで肝心の設定方法なんですが、

いろんなパターンがあるみたいなんですね。

例えば各種無料ブログサービスを使ってるか、ワードプレスかによる違い、

ワードプレスでも、プラグインを使うのか、使わないのかとか…!

そこで今回は私の場合、

①ワードプレス

②エックスサーバー

③テーマは「JIN」

④子テーマ作成済み

⑤プラグイン使いたくない

以上の条件で、Twitterカードを設定する手順をザッと紹介します!

今回、設定方法を書いてるサイトで一番わかりやすかったのがサルワカさんで、

【2018年版】Twitterカードとは?使い方と設定方法まとめ【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法という記事です!

いやーサルワカさんにはHTMLの勉強時にも大変お世話になっております!

それでは設定手順です!

まずサルワカさんの【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法という記事の、「3. WordPressでプラグイン無しでOGP設定をする方法」という見出しの中の、functions.phpにコードを貼付けのコードをコピー。
コードをコピー
次にエックスサーバーのインフォパネルからファイルマネージャにログイン

子テーマのフォルダの場所は覚えてますか?
自分のサイトドメインから、
サイトドメインから
public_html、
public_html
wp-content、
wp-content
themes、
themes
ありました!「jin-child」
「jin-child
jin-childの中にfunctions.phpファイル!って多分子テーマ作った時に一緒に作ってますよね?
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’ );
}

その下にサルワカさんのコードをペースト。
functions.php2

こんな感じで。

サルワカさんのコードをコピペしたら、そのコード内で編集するところが3箇所あります。
元のサルワカさんの記事内では編集箇所を、オレンジの下線で印してくれています。
でも簡単です!
以下の日本語で書いてるとこだけなので↓

❶「TOPページ&アイキャッチ画像がないときに使われる画像のURL」という部分を、自分のワードプレスの「メディア」に使用したい画像をアップロードしてその画像のURLに置き換える。

❷「ツイッターのアカウント名」という部分を、自分のTwitterのアカウント名に置き換える。(私の場合なら「@kumaemondayo」になります。)

❸元の記事では「ここにappIDを入力」という部分にFacebookのappIDに置き換えるようですが、私はこの設定は要らないので、 「//facebookのapp_id(設定する場合)」〜「//app_idを設定しない場合ここまで消す」までのコードを削除しました。

これでfunctions.phpファイルを保存します。

設定はこれで完了です!

それではきちんと設定できたのか確認してみましょう!

確認する方法ですが、Card validatorというTwitterのデペロッパー用のページで確認することができます。
Card validator
方法は簡単、自分のサイトや記事のURLを入力して、「Preview card」を押すだけ!

どうでしたか?簡単でしょう?

プレビューできちんと表示されていたら、今度は実際にツイートして試してみましょう。

ツイート本文に記事のURLを貼り付けて投稿するだけでツイッターカードになっているはずです。

サーバーのファイルをいじるのが少し億劫なあなたでもこれならやっちぇえますよ!

ABOUT ME
くまえもん
くまえもん
このサイトの管理人。転職を繰り返した末、安定を求めてとりあえず看護師の国家資格を取得するも、やはりもっと自由に生きたいと願い、収入を増やすため副業にチャレンジし始めたとある漢!

POSTED COMMENT

  1. アバター SAKI より:

    超初心者で、サルワカさんのを読んでもコードをどこに貼り付ければいいのかがわからず‥‥途方にくれていました。このブログがなかったら一生ツイッターカードが作れていなかったと思います!詳しく書いてくださって、本当に本当にありがとうございました!!大感謝です!

    • くまえもん くまえもん より:

      SAKIさん、コメントありがとうございます!
      サルワカさんのを引用しているのでなんとも言えませんが、お役に立てたようで私も嬉しいです

COMMENT

メールアドレスが公開されることはありません。