Zenn
😈

WordPressにて特定の記事を表示させる方法！

2024/07/11に公開
PHP
WordPress
tech

駆け出しweb制作エンジニアのAz_00Fです。ハローメンターの課題に取り組み中、意外な落とし穴にはまったので共有します。（ハローメンターは摸写修行というサービスと同じ運営元によるサービスです。）変なところあっても大目に見てください。

実現させたい事


上部のおすすめの記事のところに、好きなときに好きな投稿を表示したい！

流れ

  • functions.phpでメニュー機能を追加する
  • メニューに名前を付けて記事を登録する
  • phpで取得して$argsに組み込んで表示する

つくってあそぼう・・・♠

functions.php

ここは詳しく解説しません。基礎的なことなので調べればすぐ出ると思います。簡単に言うとfunctions.phpに、add_theme_support( 'menus' );を追加してください。すると外観のとこにメニューが現れると思います。

メニューと記事の登録

新しいメニューを作成してください。名前は何でもいいです（本当だよ）。ぼくはaiueoが好きなのでaiueoにしました。そのあと、aiueoに左の選択画面から記事を一つ選んで追加してください。今回はテスト07を追加しました。

phpで取得、表示

ループさせたいところ（ループと言っても一件しか表示さいないが...）、つまり$argsを書く場所の前に、

$osusume_posts = wp_get_nav_menu_items( 'aiueo' )

と入力してください。これで、オブジェクトの配列が取得できます。
テスト07しか入っていないので、テスト07のオブジェクトが配列として返されます。配列なので、テスト07のオブジェクトはインデックス[0]番目に位置します。
次に

$osusume_post_id = isset( $osusume_posts[0]->object_id ) ? $osusume_posts[0]->object_id : null;

と入力してください。これは、三項演算子を使ってif文を省略化して書いています。$osusume_posts[0]->object_id が存在するか？をチェックし、あればそれを＄osusume_post_idに代入、なければぬるを代入します。
$osusume_posts[0]->object_idとは、つまりテスト07のページIDです。

次にクエリを作成します。＄argsを使わずに書くことも可能ですが、なんかこっちの方がわかりやすくね？ってことで僕は$argsを採用しました。

// おすすめ記事のクエリを作成
 $args = array(
'p' => $osusume_post_id,
);
$osusume_post_query = new WP_Query( $args );

'p'という文字は勝手に変えられません（本当だよ！）
これでカスタムクエリの完成です。

仕上げ・・・♦

ループを開始してください。

<?php if ( isset( $osusume_posts[0] )
&& isset( $osusume_post_query )
&& $osusume_post_query->have_posts() ) : ?>
<?php
while ( $osusume_post_query->have_posts() ) :
$osusume_post_query->the_post();
?>

issetは、カッコの中身が存在すれば、という意味です。
この後、お好きなように書いてください。

完成するとこんな感じになります。（一部省略）

<?php
				$osusume_posts   = wp_get_nav_menu_items( 'aiueo' );
				$osusume_post_id = isset( $osusume_posts[0]->object_id ) ? $osusume_posts[0]->object_id : null;
					// おすすめ記事のクエリを作成
					$args               = array(
						'p' => $osusume_post_id,
					);
					$osusume_post_query = new WP_Query( $args );
					?>
				<?php if ( isset( $osusume_posts[0] ) && isset( $osusume_post_query ) && $osusume_post_query->have_posts() ) : ?>
					<?php
					while ( $osusume_post_query->have_posts() ) :
						$osusume_post_query->the_post();
						?>
				<article class="top_kv_recommended">
					<a href="<?php the_permalink(); ?>" class="top_kv_recommended_link">
						<div class="top_kv_img">
							<?php if ( has_post_thumbnail() ) : ?>
								<?php the_post_thumbnail( 'medium' ); ?>
							<?php else : ?>
							<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/img/noImage.png"
								alt="no-image">
							<?php endif; ?>
						</div>
						<div class="top_kv_content">
							<?php
							$categories = get_the_category();
							...省略
							<h2 class="top_kv_postTitle">
								<?php the_title(); ?>
							</h2>
							<div class="top_kv_date">
								<time datetime="<?php the_time( 'Y-m-d' ); ?>"
									class="c_time"><?php the_time( 'Y/m/d' ); ?></time>
							</div>
						</div>
					</a>
				</article>
				<?php endwhile; ?>
					<?php wp_reset_postdata(); ?>
				<?php endif; ?>


メニューに複数登録しても[0]番目のidしか指定してないので最初の一件しか表示されません。

沼ったところ。

function register_origin_menus() {
	register_nav_menus(
		array(
			'recommend_posts' => 'おすすめ記事',
		)
	);
}

という関数がありますが、これと関係があると思っていて、aiueoにすべきところをずっと上記のreccomend_posts、と入れてました。実際関係あるのかどうかはGPTと応相談です。

以上です！拙いですが大目に見てやってください！
何かあっても自己責任でお願いします（）
chat GPTさんにめちゃくちゃお世話になりました。
ではまた来年！

Discussion