今どきの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カスタマイズ