【WordPresss初心者】貼るだけでアイキャッチ画像付き記事一覧表示

好きな場所に、好きなカテゴリー内容や好きなタグ内容の記事が簡単に貼れるソースです。

以下のソースをコピーし、single.php　内に表示したい場所に貼るだけです。

<div id=”related-posts”>
<div class=”caption”>こちらの記事も読まれてます：</div>
<div class=”related” class=”clearfix”>
<ul>
<?php
$post_num = 5; // 表示したい記事数
$exclude_id = $post->ID;
$posttags = get_the_tags(); $i = 0;
if ( $posttags ) {
$tags = ”; foreach ( $posttags as $tag ) $tags .= $tag->term_id . ‘,’;
$args = array(
‘post_status’ => ‘publish’,
‘tag__in’ => explode(‘,’, $tags), // ここでは tags 記事指定
‘post__not_in’ => explode(‘,’, $exclude_id), // 既に表示されている記事を除外
‘caller_get_posts’ => 1,
‘orderby’ => ‘comment_date’, // 新コメント順
‘posts_per_page’ => $post_num,
);
query_posts($args);
while( have_posts() ) { the_post();
?>
<li><a href=”<?php echo the_permalink(); ?>” title=”<?php the_title(); ?>” ><img src=”<?php if ( get_post_meta($post->ID, ‘thumbnail1’, true) ) { echo get_post_meta($post->ID, ‘thumbnail1’, true);}
elseif ( has_post_thumbnail() ){$thumbnail1_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), ‘thumbnail1’);echo $thumbnail1_url[0];}else{echo catch_first_image();} ?>” alt=”<?php the_title(); ?>” width=”120″ height=”120″ ></a>
<a href=”<?php echo the_permalink(); ?>” ><?php the_title(); ?></a></li>
<?php
$exclude_id .= ‘,’ . $post->ID; $i ++;
} wp_reset_query();
}
if ( $i < $post_num ) { //  tags 記事不足時はcategoryで補給
$cats = ”; foreach ( get_the_category() as $cat ) $cats .= $cat->cat_ID . ‘,’;
$args = array(
‘category__in’ => explode(‘,’, $cats), //  category内の記事指定
‘post__not_in’ => explode(‘,’, $exclude_id),
‘caller_get_posts’ => 1,
‘orderby’ => ‘comment_date’,
‘posts_per_page’ => $post_num – $i,
);
query_posts($args);
while( have_posts() ) { the_post();
?>
<li><a href=”<?php echo the_permalink(); ?>” title=”<?php the_title(); ?>” ><img src=”<?php if ( get_post_meta($post->ID, ‘thumbnail1’, true) ) { echo get_post_meta($post->ID, ‘thumbnail1’, true);}
elseif ( has_post_thumbnail() ){$thumbnail1_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), ‘thumbnail1’);echo $thumbnail1_url[0];}else{echo catch_first_image();} ?>” alt=”<?php the_title(); ?>” width=”120″ height=”120″ ></a>
<a href=”<?php echo the_permalink(); ?>” ><?php the_title(); ?></a></li>
<?php
$i++;
} wp_reset_query();
}
if ( $i == 0 ) echo ‘<li>関連する記事は見つかりませんでした。</li>’;
?>
</ul>
</div>
</div>
<!– release post end –>

下記のCSSコードをテーマ内の　style.css　貼ります。一番下で問題ないです。

    /** related post thumbnail **/

    #related-posts{border-radius:5px;border-top:3px #dfdfdf solid;background:#fff;clear:both;}

    .caption{color:#0C0C0B;font-size: 14px;font-weight:bold;padding-top: 10px;margin-bottom: 10px;margin-left:10px;}

    .related {white-space:normal;margin:0 auto;overflow: hidden;border-left: 1px solid #DFDFDF;margin-left:20px;}

    .related li{float: left;width: 120px;height:180px;list-style:none;border-right:1px solid #dfdfdf;padding:4px;_padding:2px;text-align: left;}

    .related a{float: left;width: 126px;text-overflow: ellipsis;-o-text-overflow: ellipsis;}

    .related a:hover{white-space: normal;}

    .related li:hover{background:#F6F6F6;}

    .related img{height:120px;width:120px;border:0;padding:0;}

ブログのデザインにあうよう色など修正しても問題ありません。

 

一番上の　single.php　にソースを貼るのを嫌うなら、テーマ内に新規フォルダ作成し、その中に新PHPファイルを入れても構わない。

１、テーマ内に新規フォルダ作成　例：abcde

２、likeposts.phpを作り、先ほど作成した「abcdeフォルダ」に入れる。

３、下記のコードで呼び出すことも出来る。

<?php include(‘includes/likeposts.php’);?>

注：includea/ 部分は自分が作成したフォルダ名に変更するか、新規フォルダ名はincludea使っても問題ありません。