【WordPressでオリジナルサイトを作ろう】⑱共通処理パーツ化編

最終更新日

共通処理のパーツ化を行います。

index.php、category.php、date.php、search.phpの4ファイルで類似している、記事の一覧を表示するループ部分を共通化していきます。

loop.phpの作成

共通化用のファイルとして「loop.php」という名前のファイルをテーマディレクトリ直下に作成します。
ファイル名はWordPressのテンプレートファイル名とかぶらなければ任意の名前でOKです。

C:\Users\ユーザー名\Local Sites\blog\app\public\wp-content\themes\blog\loop.php

loop.phpのコーディング

loop.phpのコーディングを行っていきます。

    loop.php
    
<?php while(have_posts()):the_post(); ?>
  <article>
    <h2 class="article-title">
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </h2>
    <ul class="meta">
      <li><?php the_time('Y/m/d'); ?></li>
      <?php if (!is_category()) { ?>
        <?php
          $cat = get_the_category();
          $catname = $cat[0]->cat_name;
        ?>
        <li><?php echo $catname; ?></li>
      <?php } ?>
    </ul>
    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
    <div class="text">
      <?php
        if (mb_strlen(strip_tags(get_the_content()), 'UTF-8') > 80) {
          $content = mb_substr(strip_tags(get_the_content()), 0, 80, 'UTF-8');
          echo $content . '…';
        } else {
          echo strip_tags(get_the_content());
        }
      ?>
    </div>
    <div class="readmore"><a href="<?php the_permalink(); ?>">READ MORE</a></div>
  </article>
<?php endwhile; ?>
    
  

index.phpから記事一覧を表示するループ部分を抜き出してきます。

カテゴリ名の表示制御

      
<ul class="meta">
  <li><?php the_time('Y/m/d'); ?></li>
  <?php if (!is_category()) { ?>
    <?php
      $cat = get_the_category();
      $catname = $cat[0]->cat_name;
    ?>
    <li><?php echo $catname; ?></li>
  <?php } ?>
</ul>
      
    

カテゴリ一覧はカテゴリ名を表示しないので、「<?php if(!is_category()) { ?>」で、カテゴリ一覧以外の場合だけカテゴリ名を表示するように修正します。

各ファイルの修正

「index.php」「category.php」「date.php」「search.php」のループ部分を、パーツ化したファイル「loop.php」を呼び出すように修正します。

パーツファイルの呼び出し方は下記の通りです。

    
<?php get_template_part('loop'); ?>
    
  

それでは、順に修正していきます。

index.php

      index.php
      
<?php get_header(); ?>

<div id="container" class="wrapper">
  <main>
    <?php
      if (have_posts()):
        get_template_part('loop');

        if (function_exists("pagination")) {
          pagination($wp_query->max_num_pages);
        }
      endif;
    ?>
  </main>

  <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>
      
    

category.php

      category.php
      
<?php get_header(); ?>

<div id="container" class="wrapper">
  <main>
    <?php
      $cat = get_the_category();
      $catname = $cat[0]->cat_name;
    ?>
    <h1 class="page-title"><?php echo $catname; ?>一覧</h1>

    <?php
      if (have_posts()):
        get_template_part('loop');

        if (function_exists("pagination")) {
          pagination($wp_query->max_num_pages);
        }
      endif;
    ?>
  </main>

  <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>
      
    

date.php

      date.php
      
<?php get_header(); ?>

<div id="container" class="wrapper">
  <main>
    <h1 class="page-title">
      <?php echo get_query_var('year').'年'.get_query_var('monthnum').'月'; ?>
    </h1>

    <?php
      if (have_posts()):
        get_template_part('loop');

        if (function_exists("pagination")) {
          pagination($wp_query->max_num_pages);
        }
      endif;
    ?>
  </main>

  <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>
      
    

search.php

      search.php
      
<?php get_header(); ?>

<div id="container" class="wrapper">
  <main>
    <?php if (have_posts()): ?>
      <?php if (!$_GET['s']) { ?>
        <p>検索キーワードが未入力です<p>

      <?php } else { ?>
        <h1 class="page-title">
          「<?php echo esc_html($_GET['s']); ?>」の検索結果:<?php echo $wp_query->found_posts; ?>件
        </h1>

        <?php
          get_template_part('loop');

          if (function_exists("pagination")) {
            pagination($wp_query->max_num_pages);
          }
        ?>
      <?php } ?>
    <?php else: ?>
      <p>検索されたキーワードに一致する記事はありませんでした</p>

    <?php endif; ?>
  </main>

  <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>
      
    

コードがかなりすっきりしましたね。

以上で共通処理のパーツ化は終了です。
次はいよいよ最後となりました、エラーページのコーディングを行っていきます。

次の記事 >

< 前の記事

WordPressでオリジナルサイトを作ろう

関連記事