BLOGブログ

WordPressの記事を表示する方法

yamagami / 2022.05.20

Web制作・ホームページ制作

WordPressを使って書いた記事を表示させたい時ってあると思います。
この記事では、WordPressの記事を表示させる方法をまとめています。

WordPressデフォルト投稿一覧表示方法

WordPressには様々な機能が用意されており、「投稿」に記事を追加して、その記事を表示する一般的な方法を紹介します。

追加した投稿を表示させる一連の処理をWordPressループと呼びます。

よく使われるWordPressループは以下のような形です。

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
    記事に関する処理
  <?php endwhile;?>
<?php else : ?>
  記事が見つからなかったときの処理
<?php endif; ?>

ひとつずつ説明すると以下のようになります。

最初の「if ( have_posts() )」は、記事が存在するかどうか確認しています。
「have_posts()」は記事を取得できたかどうかを判定する関数になります。

次の「while(have_posts())」は、WordPressに投稿された記事が存在する限り繰り返す処理になります。

「the_post()」は投稿を表示するためのコードです。「while ( have_posts() )」とは必ずセットになります。
複数の記事データがある中で、最新の記事を取得してデータからその記事を削除します。
「the_post()」を繰り返すことで、最終的にデータが無くなり、while文の条件である「have_posts() 」が判定に満たなくなるためwhile文を終了します。

また、記事が一つもない場合もあると思います。そのようなときのために、見つからなかったときの処理を追加しておくと良いと思います。

表示するカテゴリーを制限する方法

次に、特定のカテゴリーを制御して表示させる方法は、先程のWordPressループ処理の前に、以下のいずれかを記述します。

// カテゴリースラッグの場合
<?php query_posts('category_name=カテゴリースラッグ'); ?>
// カテゴリーIDの場合
<?php query_posts('cat=カテゴリーID'); ?>

となります。

複数指定する場合は、以下のようになります。

// 複数カテゴリースラッグを指定の場合
<?php query_posts('category_name=カテゴリースラッグ,カテゴリースラッグ2,カテゴリースラッグ3'); ?>
// 複数カテゴリーIDを指定の場合
<?php query_posts('cat=カテゴリーID,カテゴリーID2,カテゴリーID3'); ?>

となります。

これで、カテゴリー制御ができた表示をすることができます。

表示する記事の件数を制限する方法

次に、表示させる記事の件数を指定する方法も、ループ処理の前に以下を記述します。

 //表示件数を指定する場合
 <?php query_posts('posts_per_page=出力する記事数'); ?> 

となります。

これで、表示件数を制限した表示をすることができます。

表示する記事件数とカテゴリーなど制御する方法

「query_posts」のパラメーターを複数指定する場合は「&」で繋げることで制限する事ができます。
以下のように記述します。

// カテゴリースラッグと表示件数の指定する場合
<?php query_posts('category_name=カテゴリースラッグ&posts_per_page=表示件数'); ?>

となります。

これで、カテゴリー制限と表示件数を制限した表示をすることができます。

実際のWordPressループの例

上記で、紹介したコードをもとに、記事のタイトルや内容、投稿日時などを表示すると以下のようになります。

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
    <div class="post-item">
      <h2><?php the_title(); ?></h2>
      <span><?php the_date(); ?></span>
      <p><?php the_content(); ?></p>
    </div>
  <?php endwhile; ?>
<?php else : ?>
  <div class="error">
    <p>お探しの記事は見つかりませんでした。</p>
  </div>
<?php endif; ?>

「the_title()」は、記事のタイトルを出力する関数
「the_date()」は、記事が投稿された日付を出力する関数
「the_content()」は、記事の本文を出力する関数

これで、WordPressの投稿記事を出力する一連になります。

カスタム投稿タイプを表示する

次にカスタム投稿タイプの表示について紹介します。

カスタム投稿タイプとは

独自で投稿タイプをカスタムできる機能です。

例えば、通常の投稿はブログとして利用して、その他にも「実績」「商品情報」などの通常の投稿記事とは、異なった形式や目的の記事を記述したい際に有効な機能です。

カスタム投稿タイプの追加

カスタム投稿タイプを追加するには、「functions.php」を編集する必要があります。

// カスタム投稿タイプ機能追加
function sample_post_type(){
	register_post_type(
		'sample',  // 投稿タイプ名を定義
		array( // オプション
			'label' => 'サンプル投稿', // 投稿タイプの名前
			'public' => true, // 利用する場合はtrueにする
			'menu_icon' => 'dashicons-edit', // メニューで使用するアイコン
			'supports' => array( // サポート機能
				'title', // タイトル入力項目
			),
			'menu_position' => 5, // この投稿タイプが表示される位置
		)
	);
}
add_action('init', 'sample_post_type');

上記を「functions.php」に追加すると、以下の画像の様に左サイドメニューに「サンプル投稿」が追加されたと思います。

カスタム投稿タイプの設置は、これで完了です。

カスタム投稿タイプの表示方法

上記で設定した、カスタム投稿タイプは「タイトル」のみの設置になりますので、「記事の内容」や「カテゴリー」など他の項目を追加する場合は、追加をお願いします。

<?php
global $post;
$args = array(
  'posts_per_page' => 4,
  'post_type'=> 'sample'
);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
  <div>
    <h2 class='title'><?php the_title(); ?></h2>
  </div>
<?php
endforeach;
wp_reset_postdata();
?>

となります。

カスタム投稿タイプでの表示方法は以上になります。

まとめ

WordPressの記事を表示する方法を紹介してきました。

今回紹介している表示方法以外にも、WordPressではさまざまな記事一覧を実装することができます。投稿記事に含まれる投稿日、カテゴリーやタグなどの属性をもとにして、一覧表示ができるます。
記事一覧が表示されたページは、サイト回遊率をアップさせることはもちろん、ユーザーの満足度も高めることができます。

ぜひ、この記事が参考にサイト構築をしてみて下さい。