WordPressでカテゴリー別に記事タイトルの一覧を表示する方法(get_posts版)

WordPressテーマカスタマイズ

カテゴリー別に投稿記事のタイトルを表示するコードを、以前の投稿でquery_postsで書きましたが、get_posts()を使ったコードについて書きます。

下の画像は、Twenty Twelveを使用してカテゴリー別に投稿記事のタイトルを表示するイメージになります。

twentytwelve-titile-list1

下のコードが、カテゴリー別に記事の一覧を表示するコードになります。

<?php 
$categories = get_categories(array('parent'=>0));
foreach($categories as $category) :
?>

<header class="entry-header">
<h1 class="entry-title"><a href="<?php the_permalink($category->cat_name); ?>"> <?php echo $category->cat_name; ?></a></h1>
</header>

<?php //global $post;
$args = array( 'numberposts' => 5, 'category' => $category->cat_ID);
$mypost = get_posts( $args );?>

<ul class="entry-content-front">
<?php foreach( $mypost as $post ) : setup_postdata($post); ?>

<li class="entry-title-front"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></li>

<?php endforeach; ?>
</ul>

<?php endforeach; ?>
<?php wp_reset_postdata(); ?>

query_posts()版と似たようなコードになり、get_posts()にパラメータを設定するコードまでは、query_posts()ほぼ同じです。(ulタグの位置が違うようですが無視してください。)

次のループの部分だけ違います。
get_postsではforeachを使用して、query_postsではwhileを使用しています。
get_posts()では、投稿のリストを$mypostに代入して、それをforeachを使用してグローバル変数の$postに記事オブジェクトを渡して$postを上書きしています。(※$postの名前を変更すると表示されません。)

set_postdata($post)は、記事を整形する機能があります。
ただし、上の記事の場合無くても表示されます。
set_postdata($post)がないとき、the_content()を使用しても表示されません。set_postdata($post)を使うとthe_post()と同じようにthe_content()を使ったときに表示してくれます。

wp_rest_postdata()で$postをリセットしています。

style.css

上記のコードを使用した場合、上の画像の表示のCSSが下のコードになります。

.entry-header {  
  margin-bottom: 12px;  
  margin-bottom: 0.8571428571rem;  
}  

.entry-header .entry-title {  
  border-bottom: 1px solid rgb(204,204,204);      
}  

ul.entry-content-front {  
  line-height: 1.846153846;  
  font-size: 18px;  
  margin-bottom: 36px;  
  list-style: disc inside;  
}
スポンサーリンク

コメント

タイトルとURLをコピーしました