• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / 一覧ページ等で、アイキャッチ画像がなかったら一番目の画像を取得し、さらに画像がなかったら定義した画像を表示するカスタマイズ方法

一覧ページ等で、アイキャッチ画像がなかったら一番目の画像を取得し、さらに画像がなかったら定義した画像を表示するカスタマイズ方法

池田祐太郎 | 2018年3月22日 公開


あまり使う機会は少ないかと思いますが、タイトルの通り、一覧ページ(アーカイブページ、カテゴリーページ等)で、アイキャッチ画像が設定されていなかったら一番目に表示される画像を取得して表示し、さらに画像一つもがなかったら予め定義した画像を表示する、というカスタマイズをご紹介します。

目次

  • 1 どういう時に使うの?
  • 2 アイキャッチ画像を取得する場合と一番目の画像を設定したときの見た目の違い
  • 3 サンプルコード

どういう時に使うの?

カテゴリー一覧や年月ページ等のアーカイブ一覧ページにおいて、記事が10件等並んでいる箇所があるかと思います。記事一覧部分ですね。

その部分の画像表示において、基本的にはアイキャッチ画像を表示させたいが、アイキャッチ画像を未設定の投稿の場合、一番目に設定している画像を自動的に取得して表示させたい。さらに、何も画像がない投稿はデフォルト画像を設定したい、という要望を実現します。

普通に「アイキャッチ画像全部設定すればいいじゃん」って感じなんですが、
例えば、MT等の別のCMSを使ってきて、WordPressへ移行したいが記事が既に数百件ありますというケース。
全てにアイキャッチ画像の設定するのが大変だけど、基本的に1枚目にアイキャッチ画像として各記事設定していますという場合なんかに該当するのかなと思います。
設定後は目視でザーッと見て、アイコン画像や予期せぬバナー画像等が設定されている場合は手動で修正する、という感じで対応できれば全件アイキャッチ画像登録という無駄な作業をしなくて済みます。

アイキャッチ画像を取得する場合と一番目の画像を設定したときの見た目の違い

サンプルサイトのテーマはTwentySeventeenです。見やすいように全文表示ではなく、抜粋表示に変更しています。
まずは通常の何も設定していない場合。

上の投稿はアイキャッチ画像を設定していないので、画像が表示されていません。
下の投稿はアイキャッチ画像を設定していて、画像が見えているのが確認できると思います。

続いて、アイキャッチ画像がなかったら一番目の画像を取得して表示する場合。

下の投稿はアイキャッチ画像が設定されているため変わりませんが、上の投稿は一枚目の画像を表示するようになったのがわかると思います。

また、デフォルト画像も問題なく表示されています。

以上を実現するカスタマイズとなります。

サンプルコード

追加する場所は2つあります。

1. functions.php
2. 表示したいテンプレートファイル(archive.phpやcategory.php等)

1で関数定義をして、2で表示したい場所のテンプレートファイル側に記載をし呼び出します。
どちらもすぐに戻せるようにバックアップを取るなどしておいてください。

まずは以下コードをfunctions.phpへ追加します。

/*
* カテゴリーページにおいて、一番目の画像を取得する関数を生成
*/
function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(has_post_thumbnail()){
    $image_id = get_post_thumbnail_id();
    $image_url = wp_get_attachment_image_src($image_id, true);
    $first_img = $image_url[0];
  }

  if(empty($first_img)){ //Defines a default image
    //アイキャッチ画像があればそちらを優先する
    if(has_post_thumbnail()){
      $image_id = get_post_thumbnail_id();
      $image_url = wp_get_attachment_image_src($image_id, true);
      $first_img = $image_url[0];
    } else {
      $first_img = bloginfo('template_directory') . "/images/default.jpg"; //デフォルト画像のディレクトリ、画像名は適宜変更
    }
  }

  return $first_img;
}

デフォルト画像のディレクトリ名や画像名称は任意に設定変更してください。
保存します。

続いて、表示したい側のテンプレートファイルを開きます。サンプルのTwentySeventeenでは、archive.phpから呼び出されているcontent.phpへ追加します。
1行目のcatch_that_image()を含む行が必要なコードとなります。
3行目の「<div class=”entry-content”>」は位置参考のため記載しているだけです。

<figure><img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="100%"></figure>

<div class="entry-content"><?php //ここから各エントリーの文章部分 ?>

タグやwidth属性の数値はご自由に設定してください。(サンプルではfigureタグを利用しました)

メールコンサルティング
WordPress保守管理サービス

Filed Under: TIPS 関連タグ:WordPressカスタマイズ

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
2022年1月27日
タグ: WordPressカスタマイズ
カテゴリー: WordPress
フレームワークを使ってWordPressサイトをリニューアルしたら表示速度が速くなった話
2018年6月4日
タグ: Webサイト高速化, WordPressカスタマイズ
カテゴリー: WordPress, ホームページ制作, モバイル
WP固定ページや投稿内でphpファイルを読み込むショートコード
2018年4月1日
タグ: WordPressカスタマイズ
カテゴリー: TIPS

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  6. WordPress において PHP 8.1 に更新していいかどうか検証

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • 外部のプロフェッショナルによる WordPress サイトの保守・運用:安心と安全性を手軽に手に入れる方法
  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.