きになるnet - きになるものを綴ったブログ

iPhone・MacからWordPressなどのWebに関することまで、きになるものを綴ったブログ

flickr-eyecatch

カスタマイズ

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

投稿日:2012.06.15 更新日:

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

mixhost
当ブログは、MixHostで運営中です!
おすすめ記事

-カスタマイズ
-

Copyright© きになるnet - きになるものを綴ったブログ , 2018 All Rights Reserved.