WordPressのコード一覧

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

Table of Contents

固定ページから投稿されたタイトルと本文を表示

<?php if(have_posts()): ?>
  <?php while(have_posts()): the_post(); ?>
    <h1><?php the_title(); ?></h1>  <!--記事タイトル-->
    <?php the_content(); ?>  <!--記事本文-->
  <?php endwhile;?>
<?php endif; ?>

固定ページの記事のスラッグを表示

<?php echo ucwords($post->post_name); ?>

【使用例：ページの見出し（装飾）にスラッグを表示するためにデータ属性にセットする】
※ページの見出し（装飾）にスラッグを表示するためには、別途CSSの設定が必要です。

<h2 data-title="<?php echo ucwords($post->post_name); ?>"><?php the_title(); ?></h2>

「投稿」記事一覧をページネーション付きで表示

※この例では、ページネーションを出力するプラグイン「WP-PageNavi」を使用しています。

<?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 
    if(function_exists('wp_pagenavi')):
      wp_pagenavi(array('query'=>$the_query));
    endif;
  ?>
<?php else: ?>
  <p>記事はありません。</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

パンくずリストを表示

※この例では、パンくずリストを出力するプラグイン「Breadcrumb NavXT」を使っています。

<ol>
  <?php if(function_exists('bcn_display')) bcn_display_list(); ?>
</ol>

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

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

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

コード一覧に戻る