bootstrapカテゴリー記事の一覧です

card

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-3 g-2">
<div class="col">
<div class="card mb-1">
<div class="card-body">
  <?php
    $args = array(
      'post_type' => 'page',
       'posts_per_page' => 9,
       'order' => 'ASC' // 表示順序を昇順にする
      );
    $the_query = new WP_Query( $args );
   if ( $the_query->have_posts() ) :
   ?>
<div class="d-flex">
<div><img class="rounded me-3" src="https://tate.gif.jp/img/d01.jpg" width="90" height="90" ></div>
<div class="align-self-center">
<h4 class="card-title">固定ページ</h4>
<h6 class="card-subtitle mb-2 text-muted ms-1 ps-2">Card subtitle</h6>
<p class="card-subtitle mb-2 text-muted">April 01, 2016</p>
</div>
</div>

<p class="card-text"> <ul class="archive_list">
  <?php while (  $the_query->have_posts() ) :  $the_query->the_post(); ?>
  <li style="line-height: 30px;">
  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      </li>
        <?php endwhile; ?>
       <?php wp_reset_postdata(); ?>
        </ul></p>
        <?php endif; ?>
</div>
</div>
</div>
<div class="col">
<div class="card mb-1">
<div class="card-body">
  <?php
      $args = array(
        'post_type' => 'post', //投稿記事だけを指定
         'posts_per_page' => 9, //最新記事を9件表示
   );
     $the_query = new WP_Query( $args );
         if ( $the_query->have_posts() ) :
      ?>
<div class="d-flex">
 <div><img class="rounded me-3" src="https://tate.gif.jp/img/d02.jpg" width="90" height="90" ></div>
<div class="align-self-center">
<h4 class="card-title">最新記事</h4>
<h6 class="card-subtitle mb-2 text-muted"><?php echo get_the_date('Y年n月'); ?></h6>
<p class="card-subtitle mb-2 text-muted"><?php echo get_the_time('H:i'); ?></p>
</div>
</div>
<p class="card-text"> <ul class="archive_list">
    <?php while (  $the_query->have_posts() ) :  $the_query->the_post(); ?>
      <li style="line-height: 30px;">
       <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
  </li>
   <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
 </ul></p>
   <?php endif; ?>
 </div>
</div>

</div>
<div class="col">
 <div class="card mb-1">
<div class="card-body">

<div class="d-flex">
<div><img class="rounded me-3" src="https://tate.gif.jp/img/d03.jpg" width="90" height="90" ></div>
<div class="align-self-center">
 <h4 class="card-title">カスタム投稿タイプ</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-subtitle mb-2 text-muted">April 01, 2016</p>
</div>
</div>

<?php
  $wp_query = new WP_Query();
    $param = array(
    'posts_per_page' => '-1', //表示件数。-1なら全件表示
    'post_type' => 'rental', //カスタム投稿タイプの名称を入れる
    'post_status' => 'publish', //取得するステータス。publishなら一般公開のもののみ
    'orderby' => 'ID', //ID順に並び替え
    //  'order' => 'DESC'
    'order' => 'asc'
    );
    $wp_query->query($param);
  if($wp_query->have_posts()): while($wp_query->have_posts()) : $wp_query->the_post();?>

<p class="card-text mt-3"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
   <?php endwhile; endif; ?>
 </div>
 </div>

</div>
<div class="col">
<div class="card mb-1">
<div class="card-body">

<div class="d-flex">
<div><img class="rounded me-3" src="https://tate.gif.jp/img/d04.jpg" width="90" height="90" ></div>
 <div class="align-self-center">
<h4 class="card-title">月別アーカイブ</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-subtitle mb-2 text-muted">April 01, 2016</p>
</div>
</div>

<p class="card-text"><ul class="archive_list">
  <?php
   $args = array(
     'type' => 'monthly', //月別を指定
      'limit' => 6
      );
    wp_get_archives( $args );
      ?>

 </ul></p>
</div>
</div>

</div>
<div class="col">
<div class="card mb-1">
<div class="card-body">
<div class="d-flex">
<div><img class="rounded me-3" src="https://tate.gif.jp/img/d05.jpg" width="90" height="90" ></div>
<div class="align-self-center">
<h4 class="card-title">カテゴリ一覧</h4>
 <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-subtitle mb-2 text-muted">April 01, 2016</p>
</div>

  <p class="card-text"> <ul class="archive_list">
     <?php
      $args = array(
       'title_li' => '', //見出しを削除
           );
      wp_list_categories( $args );
      ?>
       </ul>
</p>

 </div>
 </div>

</div>
</div>