記事内の一番最初の画像を取得してサムネイル画像表示

記事内の一番最初の画像を取得してサムネイル画像表示

サムネイル画像として使う方法としてはアイキャッチ画像で表示する方法もありますが、ここで紹介する方法は単純にブログを更新してその中に使っている最初の画像をサムネイル画像として使う方法なので、クライアント向けにカスタマイズをされるならこの方法が便利だと思います。

functions.phpにコードを追加

まずは下記のコードをfunctions.phpに追加してください。コードの中の $first_img = “http://detarame.moo.jp/wp/wp-content/themes/whbk5/images/default.jpg”のアドレスはもしも記事内に画像がない場合に表示する画像なのでここは各自のサイトでご用意してアドレスを書き換えて下さい。

<?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(empty($first_img)){ //Defines a default image
        $first_img = "http://detarame.moo.jp/wp/wp-content/themes/whbk5/images/default.jpg";
    }
    return $first_img;
}
?>

表示させたい所、例えばトップページのPHPファイル内に下記のコードを書き入れると表示されます。この場合場横120px,縦90pxにしてあります。

<img src="<?php echo catch_that_image(); ?>" alt="" width="120" height="90" />

画像の位置はcss(スタイルシート)で調整してください。又リンクさせる場合は下記のコードを付けるとリンクできます。

<a href="<?php the_permalink(); ?>" >
<img class="alignleft" src="<?php echo catch_that_image(); ?>" alt="" width="120" height="90" />
</a>

最終更新日: 2013年2月3日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

記事内の一番最初の画像を取得してサムネイル画像表示の関連記事

記事内の一番最初の画像を取得してサムネイル画像表示” への27件のコメント

  1. ピンバック: 私がWPtouchのトップページ画面をカスタマイズするために行った5つのこと | knk-n.com -けんけんどっとこむ-

  2. ピンバック: ロリポップでwordpress» Blog Archive » 記事一覧にサムネイル画像をつけてみる

  3. ピンバック: 私がWPtouchのトップページ画面をカスタマイズするために行った5つのこと

  4. はじめまして。こちらのコードを使わせていただきました。記事内の画像を取得することには成功したのですが、最初の画像ではなく、ランダム、あるいは2番目3番目の画像を指定することは可能なのでしょうか?

    • コメントありがとうございます。

      お問い合わせの件ですがここに掲載している方法しか分かりません(^^;

  5. ピンバック: ど素人の私がWordPressテーマを自作した際にめっちゃ参考にさせていただいた13記事 | なまら春友流

  6. ピンバック: 記事内の一番最初の画像を取得してサムネイル画像を表示するコード | WEBlatte*

  7. ピンバック: 記事内の一番最初の画像を取得してサムネイル表示 | WordPress 覚え書き

  8. ピンバック: WordPress習得への道 » Blog Archive » 記事内の一番最初の画像を取得してサムネイル画像表示

  9. ピンバック: Wordpress3.4.2でプラグインを使わずに文字数制限でRead Moreを表示させる方法 | wakoota.com

  10. ピンバック: [WordPress]ゾッとした。。WordPressのfunctions.phpをいじっていたら謎のエラー出現。 | 僕のflowな日々

  11. ピンバック: wordpressで一番始めの画像のリンクを取得する方法 | BackMemo

  12. はじめまして。こちらのコードを使用させて頂きました。
    動作を確認した所、記事中に画像ある場合の取得は問題ないのですが、なかった場合の代替画像が表示されません。
    なにか考えられる原因はございますでしょうか?

    • コメントありがとうございます。

      表示されない原因は代替画像のアドレス↓
      $first_img = “http://detarame.moo.jp/wp/wp-content/themes/whbk5/images/default.jpg”;
      この箇所のアドレスが誤っているとかじゃないでしょうか。

  13. ピンバック: helios blog | 本文中の画像をアイキャッチ画像として表示する。

  14. はじめまして。アイキャッチで悩みこちらにたどり着きました。
    私はwp一年生でわからないので質問させてください。
    写真をアップロードする際にフォルダー分けしております。
    http://×××.××.jp/wp/wp-content/themes/××/images/2013/05
    のような感じです。
    WPのアイキャッチ設定ですとimages以下のフォルダーが変わると表示されなくなってしまいます。
    こちらの「記事内の一番最初の画像を取得してサムネイル画像表示」はフォルダーが変わっても
    一番最初の画像は表示されるのでしょうか?
    お忙しいところ大変申し訳ございませんが教えてください。

    • コメントありがとうございます。
      返信遅れて申し訳ございませんでした。

      出来たみたいで良かったです。

  15. ピンバック: アイキャッチ画像を設定しない場合の挙動の変更 | Web Struggle Diary

  16. 初心者なので基本的なことをお聞きして申し訳ありませんm(__)m

    紹介されている方法でサムネイル画像を表示させるところまではできましたが、
    スタイルシートの使い方がわからなく画像の配置を変えれず困っています

    .kiji {
    color:#333;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    vertical-align:middle;
    padding: 5px 0px 0px 30px;
    border-bottom: 1px dotted #999999;
    }

    この部分が記事概要の表示部分を司っているみたいなのですが、ここに何かを付け加えれば画像の位置を変えられるのでしょうか?

    ちなみに初期段階では記事の概要文の下にサムネイルが配置されていますが、
    最終的には画像が左、その右に概要分という配置にしたいです

  17. ピンバック: WordPressの記事一覧で記事最初の画像をサムネにする方法 | クリスピースクリプト

  18. ピンバック: アイキャッチ画像を設定しない場合の挙動の変更 | マルマルマニュアル

  19. ピンバック: WordPressの最新記事や関連記事など記事一覧を表示するテンプレコードまとめ | 9割自分用ブログ keitaoriginal

  20. ピンバック: WordPress(ワードプレス)で記事の一番最初の画像を取得する方法 | 株式会社LIG

  21. ピンバック: 忘備録 | さくらにこにこのブログ

  22. ピンバック: WordPressのアイキャッチ画像と同じ扱いで記事の一番最初の画像をサムネイルで取得する方法 | グレースクリエイト

  23. ピンバック: MovableTypeからWordPressへ移行する(2) – テンプレート調整とカスタマイズ | 毎日考

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*