注目キーワード
  1. MacBook
  2. WordPress
  3. iPhone
flickr-eyecatch

WordPressでプラグインを使用せずにトップページをflickrとアイキャッチの画像表示にする方法

flickr-eyecatch

flickr-eyecatch

う〜ん、いつもタイトルの表記は難しい(^^;)

以前より、トップページはアイキャッチ画像表示にしていましたが、初めてflickrの画像を使用した際に、トップページに表示できないことがわかり、コードを変更することに…

flickr

当サイトでは、index.phpに直接コードを書かずに、thumb.php(thumbnailと打つのがめんどくさかったので、略しています。決して親指ではございませんw)を別に作りindex.phpから読み込む形にしています。そのthumb.phpとfunctions.phpにコードを追加、変更します。

スポンサーリンク

仕様

アイキャッチがある場合、アイキャッチの画像を表示
アイキャッチがない場合、投稿ページの最初の画像を表示
投稿ページに画像がない場合、指定した画像を表示

functions.php

<?php//アイキャッチ画像add_theme_support( 'post-thumbnails' );set_post_thumbnail_size( 300, 168, true );//最初の画像を取得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 = "画像がない場合の指定画像"; } return $first_img; }?>

thumb.php

<?php  if (!is_single() && !is_page()) : //個別記事でも固定ページでもないとき  if ( has_post_thumbnail() ) : //アイキャッチ画像が設定されているとき?>  <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail(); ?>  </a><?php else : //アイキャッチ画像が設定されてないときは、投稿記事最初の画像を表示 ?><a href="<?php the_permalink(); ?>">  <img alt="<?php the_title(); ?>" src="<?php echo catch_that_image(); ?>"  width="300px"  /></a><?php endif; ?><?php endif; ?>

このままだと、画像がもれてしまったりしますので、ここではwidthを300pxで指定し、CSSファイルの方で高さ制限をかけ、overflow:hiddenにしています。

確認

こんな感じになりました。

flickr2

結論から言えば、アイキャッチの画像ではなく、投稿ページの最初の画像を表示でいいかと思いますが、投稿ページの2番目以降の画面を指定表示したいときに利用できるかなと個人的には思っています。

【参考にさせていただいたリンク先】
WordPressの投稿記事内の画像の最初の1枚をサムネイルとして表示する方法 | memocarilog

flickr-eyecatch
いいね!&フォローで最新情報をお届けします!
スポンサーリンク