23：共通処理を関数化：アイキャッチ画像・カテゴリー・タグ表示

公開日:2018年11月05日更新日:2018年11月13日

WordPress

オリジナルテーマ作成

複数テンプレートで使用する処理は関数化して「functions.php」に定義しておくことで修正対応しやすくなります。

アイキャッチ画像表示関数定義

functions.php

アイキャッチ画像表示部分をカスタマイズして関数化

// アイキャッチ画像
function getThumbnail() {
  $code = '';
  if (has_post_thumbnail()) {
    $code .= get_the_post_thumbnail(get_the_ID(), 'thumbnail');
  }else{
    $code .= '<img src="'.get_template_directory_uri().'/img/no-image.png" alt="'.get_the_title().'">'.PHP_EOL;
  }
  return $code;
}

カテゴリー表示関数定義

functions.php

カテゴリ文字列表示部分をカスタマイズして関数化

// カテゴリ文字列
function getCatList() {
  $code = '<h3 class="category-title">カテゴリ：</h3>'.PHP_EOL;
  $code .= '<ul class="category-list">'.PHP_EOL;
  $category_list = get_the_category();
  for ($i=0; $i < count($category_list); $i++) {
    $catID = $category_list[$i]->term_id;
    $catName = $category_list[$i]->name;
    $catDescription = $catList[$i]->description;
    $catColor = '';
    if($catDescription) {
      $catColor = ' style="background-color:'.$catDescription.';"';
    }
    $code .= '<li class="cat-id'.$catID.'"'.$catColor.'>'.PHP_EOL;
    $code .= $catName.PHP_EOL;
    $code .= '</li>'.PHP_EOL;
  }
  $code .= '</ul>';
  return $code;
}

タグ表示関数定義

functions.php

タグ文字表示部分をカスタマイズして関数化

// タグ文字列
function getTagList() {
  $code = '';
  if (has_tag()) {
    $code .= '<h3 class="tag-title">タグ：</h3>'.PHP_EOL;
    $code .= '<ul class="tags-list">'.PHP_EOL;
    $tagList = get_the_tags();
    for ($i=0; $i < count($tagList); $i++) {
      $tagID = $tagList[$i]->term_id;
      $tagName = $tagList[$i]->name;
      $code .= '<li class="tag-id'.$tagID.'">'.PHP_EOL;
      $code .= $tagName.PHP_EOL;
      $code .= '</li>'.PHP_EOL;
    }
    $code .= '</ul>';
  }
  return $code;
}

定義した関数を利用

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'
);
$the_query = new WP_Query($args);
?>
<?php /***** サブループ開始 *****/ ?>
<?php if($the_query->have_posts()) :?>
<div class="sub-loop">
  <div class="inner">
    <h1>先頭に固定表示最新記事</h1>
<?php while($the_query->have_posts()): $the_query->the_post(); ?>
    <a class="post-link" href="<?php the_permalink(); ?>">
      <h2 class="title"><?php the_title(); ?></h2>
    </a>
<?php endwhile; ?>
  </div><!-- /.inner -->
</div><!-- /.sub-loop -->
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php /***** サブループ終了 *****/ ?>


<?php /***** サブループ条件 *****/ ?>
<?php // その他記事 ?>
<?php
$args = array(
  'post_type' => 'post',
  'posts_per_page' => 5,
  'category_name' => '未分類',
  'ignore_sticky_posts' => 1,
  'orderby' => 'id',
  'order' => 'DESC'
);
$the_query = new WP_Query($args);
?>
<?php /***** サブループ開始 *****/ ?>
<?php if($the_query->have_posts()) : ?>
<div class="sub-loop">
  <div class="inner">
    <h1>その他最新記事</h1>
<?php while($the_query->have_posts()): $the_query->the_post(); ?>
    <a class="post-link" href="<?php the_permalink(); ?>">
      <h2 class="title"><?php the_title(); ?></h2>
    </a>
<?php endwhile; ?>
  </div><!-- /.inner -->
</div><!-- /.sub-loop -->
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?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 // リンク ?>
<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>

<?php endwhile; ?>
<?php else: ?>
<div class="no-post">
  <div class="inner">
    <p>記事が存在しません</p>
  </div><!-- /.inner -->
</div><!-- /.no-post -->
<?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 // リンク ?>
<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>

<?php endwhile; ?>
<?php else: ?>
<div class="no-post">
  <div class="inner">
    <p>記事が存在しません</p>
  </div><!-- /.inner -->
</div><!-- /.no-post -->
<?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();