【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(); ?>
コードがかなりすっきりしましたね。
以上で共通処理のパーツ化は終了です。
次はいよいよ最後となりました、エラーページのコーディングを行っていきます。
次の記事 >
< 前の記事
