カスタム投稿の一覧を表示する[WordPress]

固定ページに投稿を呼び出す際の早見表

//記事の情報を取得する
<?php  $loop = new WP_Query(array(
    'post_type' => 'news', // 呼び出す投稿タイプのスラッグ デフォルト投稿はそのまま
    'posts_per_page' => 3 // 記事数を設定
  ));
?>
//ループの開始
  <?php while ($loop->have_posts()) : $loop->the_post(); ?>

//サムネイルの確認
  <?php if(has_post_thumbnail()):
			the_post_thumbnail_url();
		else: 
      // アイキャッチが選択されていない場合に表示する 画像
			echo "/wp-content/uploads/no-image.png";
    endif; ?>

//記事へのリンクを呼び出し
<?php the_permalink(); ?>

//記事のタイトル呼び出し
<?php the_title(); ?>

//アイキャッチ画像呼び出し(画像の設定なければ no-image.png の書き出し)
<?php if(has_post_thumbnail()):
			the_post_thumbnail();
		else: 
			echo "/wp-content/uploads/no-image.png"; //画像の設定なかった場合の画像
		endif; ?>

//記事の内容を表示
<?php the_content(); ?>

//投稿時間の取得
<?php the_time('Y.m.d'); ?>

//ループの終了:リセット
<?php endwhile;
  wp_reset_query();
 ?>

解説

ページ毎に記事の情報を取得する

記事の情報を取得するコードより後で、ループを開始+ループの終了を書く

ループの開始とループの終了の間に HTML と 記事情報を呼び出すPHP を組み合わせてコンテンツを作る

コード例:

記事へのリンク
<a href="<?php the_permalink();?>" >
  //コンテンツはここに
 <h3><?php the_title(); ?></h3> //タイトル呼び出し
  <p><?php the_content(); ?></p> //コンテンツ呼び出し
 <div class="image"><?php if(has_post_thumbnail()): //アイキャッチ画像呼び出し
			the_post_thumbnail();
		else: 
			echo "/wp-content/uploads/no-image.png"; //画像の設定なかった場合の画像
		endif; ?>
  </div>
</a>


wordpress.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。