• SEO塾ブログnew

    モバイルファースト / マテリアルデザイン / JSON-LD
    WebP/ 4K DPR3 レスポンシブイメージ
    gridレイアウト / flexboxコンテンツ / レガシーWeb終焉!
    モダンWebの証明! comからjpへ

  • SEO塾ブログnew

【WordPressカスタマイズ】サムネイル(アイキャッチ)がないとき、ページの最初の画像をサムネイルに代用する

【WordPressカスタマイズ】サムネイル(アイキャッチ)がないとき、ページの最初の画像をサムネイルに代用する
WebやSNSは画像・動画時代、SNSシェアも含めて、サムネイル画像が超重要、今からサムネイル設定は面倒、その解決策は

今どきのWebやSNSは画像が重要

WebよりもSNSで、画像偏重になっている

今は、字を読むよりも、画像や動画を楽しむことも多い

画像サイズとくにサムネイル

FacebookやTwitterなど、広告用の画像サイズではあるが、次のように案内している

Facebookでは、1.91:1 または 1:1
600 x 314 ピクセル または 600 x 600 ピクセル

Twitterでは、同じアスペクト比で、800 x 418 ピクセル または 800 x 800 ピクセル

驚くほど、巨大である

広告以外の私的な投稿であっても、シェアされることを前提にすれば、サムネイルは、最低 横600ピクセルが無難ということになる

複数のサイズの画像は必要か?

SNS用には、600px以上、自サイトのサムネイルには小さいサイズ(150 × 150px)というような作法は、有効だろうか?

むしろ、1サイズだけの画像を、様々に縮小して表示させるほうが、サイト作成側も楽で、いろいろなデバイスが、勝手に縮小させてくれることに期待したほうが、精神衛生上もいいと思われる

画像は、サイズよりも、容量のほうに注意を向けたい
できるだけ、圧縮すること、圧縮効果が高い新フォーマットを採用するべきだろう

src設定URLの画像がないときにエラー画像表示

画像が多くなると、画像貼り付けもパターン化したほうがいい

<div class="ほげほげ"><img src="画像URL"></div>

img {
max-width:100%;
height:auto;
}

画像は、常に横幅100%、縦は自動
画像を、divなどで囲んで、そのclass(セレクタ)でサイズを決めるようにする

サーバー側でキャッシュ、デバイス側でキャッシュ、画像がキャッシュされるなら、画面ごとにリサイズするだけで、いちじるしく表示が遅くなることはないはず

さて、ブラウザーの多くは、画像が表示されないときは、alt属性のテキストを表示させるものが多い

これは、見た目が悪いので、パターン化として、エラー時の画像を作成しておいて、それを表示させたい

<img src="画像URL" alt="代替テキスト" onerror="this.src='エラー時の画像URL';">

自サイトの画像であれば、URLの書き間違いか、アップロードを忘れているか、視認もできる

外部の画像であれば、URLを確認して、連絡するなどもあり
(まぁ、直リンクは止めてよ、と叱られる可能性もあるが)

サムネイルなしでもサムネイル設定

ページが多くて今からサムネイル設定は大変

とりあえずページのほとんどに画像があるなら、ページの画像をサムネイル代わりにすることも可能

プラグインでページの最初の画像をサムネイル代わりに

ページの最初の画像をサムネイル代わりにしてくれるプラグインが、いくつかある

問題は、アフィリエイトなどで、最初の画像がASP提供、つまり外部にある場合、うまく表示されないもの、
あるいは、外部の画像をダウンロードして、こちらのサーバーに格納するもの、
様々である

後者の場合、サーバーに画像が貯まり、レンタルサーバーの容量を圧迫して追い出されるおそれもある

functions.phpで自作関数

画像というか、サムネイルがあれば、これにタイトルを加えて、今風の「カード型」を作るベースとなる

巷には、強者(つわもの)が多く、プラグインに頼らず、ページの最初の画像URLを取得して、サムネイル代わりとするユーザー定義関数のコードをあちこちで見かける

// サムネイルを探しURL取得、無い場合はページの最初の画像URLを取得
  function get_my_thumbnail_image() {
if (has_post_thumbnail() ) { // サムネイルURL取得
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, true
$first_img = $image_url[0]; } else { // サムネイルがないので最初の画像URL取得
$id = get_the_ID(); $post_id = get_post($id); setup_postdata($post_id); // global $post を回避 $extra = $post_id->post_content;
$first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img[^>(?!onerror)]+src=[\'"]([^\'"]+)[\'"].*>/i', $extra, $matches); $first_img = $matches [1] [0]; $first_img = $matches [1] [0]; if(empty($first_img)){ // 画像が無ければデフォルト画像URL $first_img = "デフォルト画像URL"; } } return $first_img; }

上のコードは、
「global $post」を使わない
先にエラー時の画像を表示するようにしているので、このURLを拾わないようにする

たとえば、OGPなどでも、次のようにコーディングすれば、有効である

<meta property="og:image" content="<?php echo get_my_thumbnail_image(); ?>">

この自作関数の最大の泣き所は、画像を取得するのではなく、ページに書かれた画像URLを取得することである
画像URLは有っても、画像が無いときは、画像なしのURLがそのまま書き出される

これを、せっかくカスタマイズして、カード型でサムネイルを表示させたいとき、ブラウザーによってはalt属性のテキストが書き出されて、表示が残念になる…

そこで、もう一度、カスタマイズしたPHPにも、またエラー画像のしかけをする

<a href="<?php the_permalink(); ?>">
<img src="<?php echo get_my_thumbnail_image(); ?>" alt="<?php echo get_the_excerpt(); ?>" onerror="this.src='https://www.deep-strike.com/wp-content/uploads/img-error-revenge128x128.png';">
</a>

面倒臭いようだが、パターン化すること、PHPソースでは一度書き加えておけば済む

画像活用というよりサムネイル活用

今回は、画像が重宝される、とくにスマホWebで、WordPressならではのサムネイル活用について述べている

WordPress カスタマイズなら

好評発売中

インスタや今風のECサイトのカード型フィードが、あっという間にできあがり
カテゴリーやタグの関連コンテンツも、お茶の子さいさい
テーマに頼らず、プラグインを使わず、スイスイとWordPressカスタマイズ

«
»