デイトラの卒業課題を1日（1〜2時間）行なっています。
カテゴリーを関数化にする
何度も使用しそうなのでカテゴリーをテンプレート化しておきます。
functions.phpに下記を追加します。
/**
* カテゴリーの関数化
*/
function my_the_post_category($anchor = true) {
$category = get_the_category();
if($category[0]) {
if($anchor) {
echo '<a href="' . get_category_link($category[0]->term_id) . '">' . $category[0]->cat_name . '</a>';
} else {
echo $category[0]->cat_name;
}
}
}front-page.phpとhome.phpのカテゴリー部分を下記に変更する。
<span class="c-label"><?php my_the_post_category(false) ?></span>trueはリンク付き、falseはリンクなしです。
front-pageのNewsページ部分を動的にする
・カスタムクエリを使用する
カスタムクエリとはWord Pressに標準に用意されている検索ルール（メインクエリ、サブクエリ）とは別に、自分で引っ張ってきてほしい記事条件を新しく定義する事です。
・メインクエリとサブクエリとはWrod Pressの教科書から引用すると
リクエストを受けたURLによって表示する内容が決定されるという決まりがあります。つまり、Word Pressは投稿IDをデータベースから呼び出します。
このとき、データベースから呼び出される記事データが『メインクエリ』です。
『サブクエリ』とは、リクエストを受けたURLで取得できるデータではなく、テンプレート内で指定して呼び出される、独自情報としての記事データを指します。
と記載されています。
今回は通常のブログ一覧ページとは関係なく、トップページに3件のお知らせを表示させたいのでカスタムクエリを使います。
front.phpのnewsの部分を下記に変更する。
<div class="p-news__container">
<ul class="p-news-list">
<?php
$articles_query = new WP_Query(
array(
'post_type' => 'post',
'posts_per_page' => 3
)
);
?>
<?php if ( $articles_query->have_posts() ) : ?>
<?php while ( $articles_query->have_posts() ) : ?>
<?php $articles_query->the_post(); ?>
<li class="p-news-list__item">
<a href="<?php the_permalink(); ?>" class="p-news-list__link">
<div class="p-news-list__meta">
<span class="c-label"><?php my_the_post_category(false) ?></span>
<time class="p-news-list__date" datetime="<?php the_time('c'); ?>"><?php the_time('Y/n/j'); ?></time>
</div>
<h3 class="p-news-list__title"><?php the_title(); ?></h3>
</a>
</li>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</ul>
</div>View moreをクリックするとNews一覧に遷移する
view moreの部分を下記に変更する。
<?php $news_id = get_page_by_path( 'news' )->ID; ?>
<div class="p-news__more">
<a href="<?php echo get_the_permalink( $news_id ); ?>" class="c-link-more-type2">
<span class="c-link-more-type2__text">View more</span>
<span class="c-link-more-type2__icon-area">
<span class="c-link-more-type2__circle"></span>
<span class="c-link-more-type2__arrow"></span>
</span>
</a>
</div>結果
今回はトップページのNews部分をカスタムクエリを使って動的にしてみました。
メインクエリとサブクエリ（カスタムクエリ）のイメージが難しいですが、分かりやすく例えると
・メインクエリはレストランのコース料理です。お客さん（ユーザー）がその席（URL）に座った時点で、シェフが自動的に用意する料理。
・サブクエリ（カスタムクエリ）は単品で追加した料理です。コース料理とは別に注文した料理になります。
次はカテゴリーページを作成します！
以上、デイトラweb制作（Word Press化その5）の状況でした。
ご依頼等ありましたら、下記のURLにお問い合わせ下さい。
ポートフォリオサイトはこちらになります。
