25：カスタムテンプレートを使用する

WordPressは共通部分をモジュール化（パーツ化）することができます。これにより共通部分の修正や更新が楽になります。

WordPressは以下のモジュールテンプレートとモジュール読み込み用関数が用意されています。

カスタムテンプレート（好きなファイル名をつけたモジュールテンプレート）を作成することができます。

カスタムテンプレートは半角英数で好きなファイル名をつけることができますが「content-○○.php」という名前をつけることが一般的です。作成したカスタムテンプレートを読み込む際は「get_template_part();」を使用し引数にカスタムテンプレート名を指定します。ファイル名に「-（ハイフン）」を使用した場合は、ハイフンを区切りにファイル名を分割して引数に指定します。

カスタムテンプレートを作る

新しくカスタムテンプレートファイル「content.php」と「content-none.php」を作成します。

content.php

新規作成：「front-page.php」もしくは「index.php」から該当箇所をコピペ

<?php // リンク ?>
<a class="post-link <?php echo 'post-id'.$id; ?>" href="<?php the_permalink(); ?>">

<?php // アイキャッチ画像 ?>
  <div class="thumbnail">
<?php echo getThumbnail(); ?>
  </div>

<?php // タイトル ?>
  <h2 class="title"><?php the_title(); ?></h2>

<?php // カテゴリ文字列 ?>
<?php echo getCatList(); ?>

<?php // タグ文字列 ?>
<?php echo getTagList(); ?>

<?php // 抜粋文 ?>
  <div class="excerpt"><?php the_excerpt(); ?></div>

<?php // 公開日時 ?>
  <div class="release-date">公開日時：<?php the_time('Y年m月d日'); ?></div>

<?php // 最終更新日時 ?>
  <div class="modified-date">最終更新日時：<?php the_modified_date('Y年m月d日'); ?></div>
</a>

content-none.php

新規作成：「front-page.php」もしくは「index.php」から該当箇所をコピペ

<div class="no-post">
  <div class="inner">
    <p>記事が存在しません</p>
  </div><!-- /.inner -->
</div><!-- /.no-post -->

カスタムテンプレートを読み込む

front-page.php

ハイライト部分を書き換え

<?php get_header(); ?>

  <div class="content">
    <div class="main">

<?php /***** サブループ条件 *****/ ?>
<?php // 先頭固定表示 ?>
<?php
$sticky = get_option( 'sticky_posts' );
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 3,
    'post__in' => $sticky,
    'orderby' => 'id',
    'order' => 'DESC'
);
echo getSubloop($args, '先頭固定表示');
?>
<?php /***** サブループ終了 *****/ ?>


<?php /***** サブループ条件 *****/ ?>
<?php // その他記事 ?>
<?php
$args = array(
  'post_type' => 'post',
  'posts_per_page' => 5,
  'category_name' => '未分類',
  'ignore_sticky_posts' => 1,
  'orderby' => 'id',
  'order' => 'DESC'
);
echo getSubloop($args, 'その他最新記事');
?>
<?php /***** サブループ終了 *****/ ?>


      <div class="main-loop">
        <div class="inner">
<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>
<?php $id = get_the_ID(); ?>
<?php // テンプレートパーツ読み込み：一覧 ?>
<?php get_template_part('content'); ?>
<?php endwhile; ?>
<?php else: ?>
<?php // テンプレートパーツ読み込み：記事なし ?>
<?php get_template_part('content','none'); ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

<?php // ページネーション ?>
<?php if (pagination()) : ?>
    <div class="pagination"><?php echo pagination(); ?></div>
<?php endif; ?>

        </div><!-- /.inner -->
      </div><!-- /.main-loop -->
    </div><!-- /.main -->
    <?php get_sidebar(); ?>
  </div><!-- /.content -->


<?php
get_footer();

index.php

ハイライト部分を書き換え

<?php get_header(); ?>

  <div class="content">
    <div class="main">

      <div class="main-loop">
        <div class="inner">
<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>
<?php $id = get_the_ID(); ?>
<?php // テンプレートパーツ読み込み：一覧 ?>
<?php get_template_part('content'); ?>
<?php endwhile; ?>
<?php else: ?>
<?php // テンプレートパーツ読み込み：記事なし ?>
<?php get_template_part('content','none'); ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

<?php // ページネーション ?>
<?php if (pagination()) : ?>
    <div class="pagination"><?php echo pagination(); ?></div>
<?php endif; ?>

        </div><!-- /.inner -->
      </div><!-- /.main-loop -->
    </div><!-- /.main -->
    <?php get_sidebar(); ?>
  </div><!-- /.content -->


<?php
get_footer();

このページで出てくる関数

WordPress関数は「公式サイトのドキュメント」で確認しましょう。

WordPress関数

get_template_part()

欠席者対応：wireframe09