神奈川県伊勢原市在住のkusuのサイトです!ホームページ制作のご依頼等承っております!

【WordPress】記事一覧で投稿スラッグを出力する方法

2020.04.07
WordPress

 今回はWordPressにて記事一覧を出力するにあたって、各記事の投稿スラッグも出力したい…といった場合について出力する方法をご紹介したいと思います!

出力したいHTMLコード

 ではまず、以下のHTMLコードを出力したいとします。

<ul>
	<li class="投稿スラッグ"><a href="記事URL">記事タイトル</a></li>
	<li class="投稿スラッグ"><a href="記事URL">記事タイトル</a></li>
	<li class="投稿スラッグ"><a href="記事URL">記事タイトル</a></li>
	<li class="投稿スラッグ"><a href="記事URL">記事タイトル</a></li>
	<li class="投稿スラッグ"><a href="記事URL">記事タイトル</a></li>
</ul>

アーカイブページにて投稿スラッグを出力させた記事一覧を表示させるには

 まずアーカイブページ(index.php、category.php、archive.php)などにおいて投稿スラッグを出力させた記事一覧を表示させるには以下のPHPコードを記述することで表示可能になります!

<ul>

	<?php
	$paged = get_query_var('paged') ? get_query_var('paged') : 1;
	query_posts( $query_string.'&posts_per_page=5&post_type=post&paged='.$paged);

	if(have_posts()):
	while(have_posts()): the_post(); ?>

		<li class="<?php echo get_post_field('post_name', get_the_ID()); ?>"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
	
	<?php endwhile; endif; ?>

</ul>

上記コードでいう10行目の

<li class="<?php echo get_post_field('post_name', get_the_ID()); ?>"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

ここで投稿スラッグを出力させています。

固定ページにて投稿スラッグを出力させた記事一覧を表示させるには

 続いて、固定ページにて投稿スラッグを出力させた記事一覧を表示させるには以下のPHPコードを記述することで表示可能になります!

<ul>

	<?php $paged = get_query_var('paged')? get_query_var('paged') : 1;
		$args = array(
			'post_type' => 'post',
			'posts_per_page' => 5,
			'paged' => $paged
		);
	$myposts = new WP_Query($args);
	if($myposts->have_posts()): while($myposts->have_posts()): $myposts->the_post(); ?>

		<li class="<?php echo get_post_field('post_name', get_the_ID()); ?>"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
	
	<?php endwhile; endif; wp_reset_postdata(); ?>

</ul>

こちらにおいても、アーカイブページ同様12行目の

<li class="<?php echo get_post_field('post_name', get_the_ID()); ?>"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

にて投稿スラッグを出力させています。

まとめ

 簡単なまとめにはなりましたが、上記のコードを使用することで記事一覧部分にて投稿スラッグを出力させることができるようになりますので、是非ともご活用ください!

スポンサーリンク
検 索