このページのもくじ
やりたかったこと
あるカテゴリのトップページとして用意した固定ページに、そのカテゴリの最新の投稿記事を1つだけ表示させる。
動きとしては、
1.投稿記事から該当するカテゴリの記事を絞り込む
2.日付順に並べて最新の記事を選ぶ
3.固定ページの任意の位置に記事を表示させる
という流れでいけそう。
テーマは「emanon-free」を使っているので、カスタマイズしていきます。
ファイルを子テーマに複製
テーマ「emanon-free」では、「templates」フォルダに、編集画面の「投稿の属性」で指定するテンプレートファイルが収まっています。新たにテンプレートファイルを作って、ここから選択できるようにします。
emanon-free>templatesの中にある「right-sidebar.php」を複製します。
複製したファイルにわかりやすい名前を付けて保存。
ファイルを開いて最上部にある「Template Name:」を変更。ここで付けた名前が「投稿の属性」のプルダウンメニューに表示されます。
コードを見ると、「content-page.php」というファイルで記事を表示させていることがわかったので、テーマフォルダ直下にある「content-page.php」も複製します。「content-○○○.php」の「○○○」で呼び出すファイルを切り替えています。
<今回複製したファイルとディレクトリ＞
emanon-free-chaild（子テーマ）
┃
┣ content-cat.php（複製してリネーム）
┃
┗ templates
┃
┗ right-sidebar-cat.php（複製してリネーム）
複製したファイルのコードを編集
right-sidebar-cat.phpの編集
- 「Template Name: サイトバー：右」を変更
==＞ここで付けた名前が「投稿の属性」のプルダウンメニューに表示されます。 - 「Template Post Type: page」を追加
==＞編集しているのが固定ページのときだけ「投稿の属性」からこのファイルが選択できるようになります。 - ファイル中ほどにある<main>〜</main>のコードを編集
<main>
<div class="col-main first">
<?php get_template_part( 'content', 'cat' ); ?>
</div>
</main>4行目のコードに複製した「content-cat.php」のファイル名をあてはめます。
content-cat.phpの編集
- <header>〜</header>内の不要なコードを削除
- <section>〜</section>を別のコードに全て置き換え
<!--article-->
<article class="article content-page">
<?php while ( have_posts() ) : the_post(); ?>
<header>
<div class="article-header">
<h1><?php the_title(); ?><?php edit_post_link( __( 'Edit', 'emanon' ), '<span class="edit-link"><i class="fa fa-pencil-square-o"></i>', '</span>' ); ?></h1>
</div>
<!--今回は記事中にサムネイルは不要なので削除--＞
</header>
<section class="article-body">
<!--ここを指定した投稿記事を表示させる設定に変更--＞
<?php
$wp_query = new WP_Query();
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'category__in' => 6,
'posts_per_page' => 1,
'order' => 'DESC'
);
$wp_query->query($args);
if($wp_query->have_posts()){
?>
<?php
while (have_posts()) {
the_post();
?>
<!-- 出力部分 -->
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<!-- 出力部分 -->
<?php
}
wp_reset_query();
}
?>
</section>
<?php if( is_emanon_exclude_cta_article() ): ?>
<?php endif; ?>
<?php if ( comments_open() || get_comments_number() ): ?>
<footer class="article-footer">
<?php comments_template(); ?>
</footer>
<?php endif; ?>
<?php endwhile; ?>
</article>
<!--end article-->取得したデータの本文を表示させるコード
<!--本文取得-->
<?php the_content(); ?>記事一覧を表示させるコードはたくさん解説があったけど、記事本文をゴソッと表示するコードがわからなくて苦労しました。シンプルに「the_content();」でよかったんですね。
動作テストは成功！
思った通りの動きになりました！