固定ページにカスタム投稿記事一覧表示

 

 

固定ページにアイキャッチ画像付きの記事一覧を表示させたい

 

そこで、やりたかった主なことは以下の部分です。

 

・いろいろプラグインなどもあるが、プラグインを使わずに簡単に表示したい

・固定ページまたはフロントページに表示したい

・アイキャッチ画像を表示したい

・タイトルを表示したい

・サブタイトル（ひとこと）を表示したい

 

 

front-page.phpに表示させる

 

front-page.phpは、固定ページと同じような感じで、トップページのために作成します。

front-page.phpを使わないのであれば、page.phpに表示させることもできます。

表示させたい部分に記述します。

 

<div class="wrap">
  
   <?php
$args = array('post_type' => 'web-demo',
              'ignore_sticky_posts' => 1, 
              'orderby' => 'rand', 
              'order' => 'DESC', 
              'posts_per_page' => 21
             );
$post_list = get_posts($args);
if ($post_list) {
  foreach ($post_list as $post) : setup_postdata ($post);
?>
	<div class="wide-12-12s wide-12-6t wide-12-4m">		
            <a href="<?php the_permalink(); ?>">
            <?php if ( has_post_thumbnail() ) : ?>
                <?php the_post_thumbnail(); ?>
            <?php endif; ?>

            <span><?php the_title(); ?></span>
			<span><?php echo get_post_meta($post->ID , 'ひとこと' ,true); ?></span></a>
			</div>				
    <?php endforeach; wp_reset_query();}; ?>
</div>

※post_typeの部分は、web-demoとしていますので変更してください。
※orderbyのところは、ランダム表示にしています。日付で並べるときは（date）です。
※posts_per_pageのところは、21記事まで表示させています。

 

カスタムフィールドを使って個別に内容を作る

 

このカスタムフィールドも便利なプラグインもありますが、ここでもプラグインを使わずに簡単に表示させます。

 

上記の『front-page.php』に記述した

<?php echo get_post_meta($post->ID , 'ひとこと' ,true); ?>

 

の部分に表示されます。

 

 

最後に調整

 

あとは、cssでお好みになるように調整すれば完成です。

今回の例では、横並びの時に良く使う『flex』を使って表示させたイメージです。