WordPress：Twitterに貼ったリンクのサムネイル(function.php)
Twitterにリンクを貼りつけるとサムネイルが表示されますが、WordPressで作ったサイトで何もしていないと、こんな風にサムネイルは表示されず、寂しい感じになります。
そこで任意のサムネイルを表示し、以下のようにしたいと思います。
ここではプラグインは使わずに「function.php」に記載する方法をとります。
※理由としてはプラグインは最小限にしたいため。
◆「function.php」にコードを追加する
WordPressで作成したサイトのリンクをTwitterに貼った際、任意のサムネイルを表示させるには「function.php」を修正して「head」内に表示させるようにする必要があります。
修正前にまず以下注意点です。
※「function.php」に変更をする際は、バックアップを必ず取ってください。
壊れるとサイトが表示されなくなります。サイトの表示ができなくなった場合は、バックアップの「function.php」を上書きすれば元に戻ります。
追加するコード
「function.php」に以下を追加して、初期値の設定部分をご自身のものに変更して、サーバにアップすれば完了です。※反映に少し時間がかかる場合があるので、いったんキャッシュをクリアした方がいいと思います。
「function.php」でheadタグに追記している方は、その中に6行目～57行目を追加すれば行けると思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<?php //headにタグを追加 add_action( 'wp_head', 'add_meta_to_head' ); function add_meta_to_head() { if (is_front_page() || is_home() || is_singular()) { /*初期値の設定*/ // サムネイル（任意の画像のフルパス） $ogp_image = 'https://xxxxx.com/xx/xx/xx.jpg'; // Twitterのアカウント:「@」で始まる自身のアカウント名 $twitter_site = '@xxxxxxx'; // Twitterカードの種類 // summary_large_image:リンクの上に長方形の大きめのサムネイルが表示される。 // summary:リンクの左に正方形の小さなサムネイルが表示される。 $twitter_card = 'summary_large_image'; /*初期値の設定*/ global $post; $ogp_title = ''; $ogp_description = ''; $ogp_url = ''; $html = ''; if (is_singular()) { // 投稿と固定ページ setup_postdata($post); $ogp_title = $post->post_title; $ogp_description = mb_substr(get_the_excerpt(), 0, 100); $ogp_url = get_permalink(); wp_reset_postdata(); } elseif (is_front_page() || is_home()) { // トップページ $ogp_title = get_bloginfo('name'); $ogp_description = get_bloginfo('description'); $ogp_url = home_url(); } // og:type $ogp_type = (is_front_page() || is_home()) ? 'website' : 'article'; // 出力するOGPタグ一覧 $html = "\n"; $html .= '<meta property="og:title" content="' . esc_attr($ogp_title) . '">' . "\n"; $html .= '<meta property="og:description" content="' . esc_attr($ogp_description) . '">' . "\n"; $html .= '<meta property="og:type" content="' . $ogp_type . '">' . "\n"; $html .= '<meta property="og:url" content="' . esc_url($ogp_url) . '">' . "\n"; $html .= '<meta property="og:image" content="' . esc_url($ogp_image) . '">' . "\n"; $html .= '<meta property="og:site_name" content="' . esc_attr(get_bloginfo('name')) . '">' . "\n"; $html .= '<meta name="twitter:card" content="' . $twitter_card . '">' . "\n"; $html .= '<meta name="twitter:site" content="' . $twitter_site . '">' . "\n"; $html .= '<meta property="og:locale" content="ja_JP">' . "\n"; echo $html; } } ?> |
