WordPressナビ付の投稿記事一覧

カテゴリごとの記事一覧ではなくフロントページなど固定ページに表示させる記事一覧のクエリ。他記事でも登場しているが改めてメモしておく。

・フロントページが長くなるのは嫌なので記事表示は5件程度にする
・サムネールを一覧表示するのは好みではないので画像有無はアイコン表示で（写真は記事に行ってから見てね）
・フロントページで投稿日順で5件以降の記事も見れるようにする
・ナビゲーションもつける

fanction.phpに以下を追加。アイキャッチ画像をサムネイルとして使うための記述。結果サムネール表示させないから不要なんだけどとりあえず記載しておく。

//アイキャッチ画像を使用可能にする
add_theme_support('post-thumbnails');

記事一覧を表示したいPHPファイルに以下を記載する。記事の表示タグは比較的制限の少ないTAGを使っている。

<?php
$paged = (int) get_query_var('paged');
$args = array(
	'posts_per_page' => 5,//表示させる件数
	'paged' => $paged,//現在のページ番号指定
	'orderby' => 'post_date',//日付が新しい順
	'order' => 'DESC',//降順　昇順はASC
	'post_type' => 'post',//投稿タイプを取得　固定ページならpageとか
	'post_status' => 'publish'//公開済の記事　下書きとかは除くということ
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
	while ( $the_query->have_posts() ) : $the_query->the_post();
?>

<div>
      <div>

<!-- 日付表示 -->
	      <h1>DATE <a href="<?php the_permalink(); ?>"><?php the_time('Y-n-j'); ?></a></h1>
<!-- /日付表示 -->

<!-- タイトル表示 -->
	      <div>TITLE:<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<!-- /タイトル -->
	      
<!-- カテゴリタグ -->	 	      
<p>CATEGORY:<?php the_category('<span></span>'); ?>
<br><?php the_tags('TAG:', ' '); ?></p>
<!-- /カテゴリタグ -->	
</div>	
                
 <!-- 記事表示 -->	
 <div>
 <?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>"> MORE</a></p>
</div>
<!-- /記事表示 -->	
      </div>

<!-- サムネール代替えアイコン -->	
  <?php if (has_post_thumbnail()) : ?><!-- サムネールがある記事は画像アイコンを表示 -->
      <div><a class="icon01" href="<?php the_permalink(); ?>">
      <i class="fas fa-image"></i></a></div>
  <?php else : ?><!-- サムネール画像がない記事は鉛筆アイコン  -->
      <div><a class="icon01" href="<?php the_permalink() ?>">
      <i class="fas fa-pencil-alt"></i></a></div>   
  <?php endif; ?>    
 <!-- /サムネール代替えアイコン -->	     
      <div class="clear"></div>

</div>	

<?php endwhile; endif; ?> 
<?php wp_reset_postdata(); ?>

<!-- NAVI -->
<p><?php if ( function_exists( 'wp_pagenavi' ) ) { wp_pagenavi(); } ?></p>
<!-- /NAVI -->

カテゴリ表示は通常の指定ではULとLIがついてしまう。例えばタイトルと横並びのデザインにしたいと思っても改行されたりして面倒。以下の通りカッコ内にSPANを記載すればカテゴリ名のみの表示になる。（the_category(‘ ‘)でも可）

<?php the_category(); ?>　//<ul><li>リンク付のカテゴリ</li></ul>になる

<?php the_category('<span></span>'); ?>　//リンク付のカテゴリ名のみ表示
<?php the_category(' '); ?> //これでもリンク付のカテゴリ名のみ表示

上記クエリでは、サムネール画像の代替にFont Awesomeを使う。サムネール画像があれば

ない場合は

と、あまり意味がないと思われるがデザイン的なものなので。このブログはほぼサムネールはないのですべてが鉛筆になってしまうのでサムネール表示する部分を削除している。他項目でも表示したくない項目は削除してしまえばいい。

サムネールを表示したければ下記の通り書き変えればアイコンでなくサムネール画像が表示される。画像の大きさはスタイルルートで設定すればいい。

<!-- サムネール代替えアイコン -->	
  <?php if (has_post_thumbnail()) : ?><!-- サムネールがある記事は画像を表示 -->
      <div><a class="icon01" href="<?php the_permalink(); ?>">
　　　　　<?php the_post_thumbnail('thumbnail'); ?><!-- サムネール画像表示  -->
　　　　</a></div>
  <?php else : ?><!-- サムネール画像がない記事は専用画像を表示  -->
      <div><a class="icon01" href="<?php the_permalink(); ?>">
      <img src="<?= get_template_directory_uri(); ?>/img/nonimg.png">
      </a></div>   
  <?php endif; ?>    
 <!-- /サムネール代替えアイコン -->

ナビゲーションはプラグインWP-PageNaviを使う。詳細は下記記事参照。

RELATED WordPressナビ付の投稿記事一覧

インストールしたら下記コードをナビを表示したい箇所にコピペする。

<?php if ( function_exists( 'wp_pagenavi' ) ) { wp_pagenavi(); } ?>

上記の通りPHPを記載すれば5件の最新記事が表示され、ナビ操作で投稿順に5件づつ全記事が表示されるようになる。記事の表示部分はお気に入りのデザインでスタイル設定をする。

NOTICES

記事内容は実装させたものがほとんどですが自己責任で参考にしてください。

MEMORANDUM

調べて知り得た情報をせっかくなのでメモしとく

NOTICES