front-page.phpでよく使うWordPressのコード

HTMLサイトをWordPressにする本

「投稿」記事一覧を表示

〇投稿タイプ:
「投稿」を指定 → 'post_type' => 'post'
「カスタム投稿(例)news-en」を指定 → 'post_type' => 'news-en'
「複数の投稿タイプを指定」 → 'post_type' => array('post', 'news', 'news-en')

〇投稿したい件数:
12件取得 → 'posts_per_page' => 12,
全て取得 → 'posts_per_page' => -1,
管理画面([設定]>[表示設定])で指定した件数分取得 → 'posts_per_page' => get_option('posts_per_page'),

<?php 
$paged = (get_query_var('paged')) ? get_query_var('paged'): 1;
$args = array(
  'post_type' => 'post',  // 投稿タイプ:投稿
  'posts_per_page' => 12,  // 取得したい件数
  'paged' => $paged,
  'post_status' => 'publish',  // 投稿ステータス:公開済み
);
$the_query = new WP_Query($args);
if($the_query->have_posts()): 
?>
  <div class="article-list">
  <?php while($the_query->have_posts()) : $the_query->the_post();?>
    <article>
      <a href="<?php the_permalink(); ?>">
        <figure class="img-block">
        <?php if(has_post_thumbnail()): ?>
          <?php the_post_thumbnail('thumbnail'); ?>
        <?php else: ?>
          <img src="<?php echo get_stylesheet_directory_uri()?>/img/comingsoon.jpg" alt="comingsoon">
        <?php endif ; ?>
        </figure>
        <div class="txt-block">
          <time datetime="<?php the_time('Y-m-d'); ?>" class="date"><?php the_time(get_option('date_format')); ?></time>
          <h3><?php the_title(); ?></h3>
        <?php 
          $cats = get_the_category();
          if($cats):
        ?>
          <ul class="post-categories">
          <?php foreach($cats as $cat): ?>
            <li><?php echo $cat->name; ?></li>
          <?php endforeach; ?>
          </ul>
        <?php endif; ?>
        </div>
      </a>
    </article>
  <?php endwhile;?>
  </div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

〇ターム指定で表示の場合:タクソノミー名とターム名の指定を $args に追加

$args = array(
  'post_type' => 'news-en',  // 投稿タイプ:カスタム投稿 news-en
  'taxonomy' => 'news-encat',  // タクソノミー名
  'term' => 'media',  // ターム名
  'posts_per_page' => 12,  // 取得したい件数
  'paged' => $paged,
  'post_status' => 'publish',  // 投稿ステータス:公開済み
);

「ブログのトップに表示」チェックマークが入った記事とそれ以外を一覧で表示

<?php 
$list_count = 8;  // 表示させたい合計の記事数(「ブログのトップに固定」にチェックしている記事数が上回らないように注意)
$sticky = get_option('sticky_posts');
if(!empty($sticky)) $list_count -= count($sticky);
if(count($sticky) > 0):  // 「ブログのトップに固定」記事の表示
  $args = array(
    'post_type'=>'post',  // 投稿タイプ:投稿
    'post__in' => $sticky,
  );
  $the_query = new WP_Query($args);
?>
  <?php while($the_query->have_posts()): $the_query->the_post(); ?>

    <!-- ここに「ブログのトップに固定」に指定された記事を表示 -->

  <?php endwhile; ?>
<?php endif; ?>

<?php 
if($list_count > 0):  // 「ブログのトップに固定」記事以外の表示
  $args = array(
    'post__not_in' => get_option('sticky_posts'),  // 「ブログのトップに固定」記事を除く
    'post_type' => 'post',  // 投稿タイプ:投稿
    'posts_per_page' => $list_count,
    'ignore_sticky_posts' => 1,
  );
  $the_query = new WP_Query($args);
?>
  <?php while($the_query->have_posts()): $the_query->the_post(); ?>

    <!-- ここに「ブログのトップに固定」記事以外を表示 -->

  <?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

カスタムフィールドの内容を表示

フロントページの中では、カスタムフィールドを表示させる機会が多くあります。

各カスタムフィールドの表示の仕方はこちらをご確認ください。

最低限覚えておきたい
WordPressのコード