WordPress

WordPress★固定ページに特定の記事を表示させる

投稿日:2020年2月22日 更新日:

やりたかったこと

あるカテゴリのトップページとして用意した固定ページに、そのカテゴリの最新の投稿記事を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();」でよかったんですね。

動作テストは成功!
思った通りの動きになりました!

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-WordPress

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

ContactForm7のフォーム作成時に出るエラー「複数のフォームコントロールが単一の label 要素内に置かれている」を解消する

WordPressでは超有名なフォームプラグインの Contact Form 7。 新しくフォームを作成するにはコードを編集する必要があります。 コード編集といっても簡単で、初心者でもそんなに困ること …

Confused Question Marks Boy  - milaoktasafitri / Pixabay

WPで「永続的なオブジェクトキャッシュは有効化されていません」に対処したときのメモ

WordPressのダッシュボードに「サイトヘルス」の表示をさせています。最近「永続的なオブジェクトキャッシュは有効化されていません|AMP」というエラーがずっと出っぱなし。 ??? 何をどうすればい …

WP★吹き出し風デザインをCSSだけでやる方法

ワードプレスでプラグインを使わずに、 HTMLとCSSだけで下のような感じの会話風レイアウトの作り方。   手順はこちら   [codepen_embed height=”400 …

WP★flamingo 受信メッセージの一覧表示で「件名」にフォームのタイトルを表示させたい!

受信メッセージの一覧表示で「件名」にフォームのタイトルを表示させたい! 件名のところに[your-subject]じゃなくて、フォームのタイトル名を表示させる方法を調べてみました。 flamingoの …

WordPress★もくじプラグイン「Easy Table of Contents」のカスタマイズ

記事のもくじを自動的に作ってくれる便利なプラグイン「Easy Table of Contents」。デフォルトの見た目がイマイチなので、ちょっとカスタマイズしてみました。 元の見た目はこんな感じ。 カ …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。