ワードプレスの全記事を一覧表示

ワードプレスに投稿された全記事を一覧で表示するやり方です。

固定ページを作成

全記事一覧を表示させる固定ページを作成しましょう。
category.phpやpage.phpをコピーし、『スラッグ名（以下、○○と表記）-page.php』とリネームしてください。
このようにすれば、該当するページを表示する際に、page.phpではなく、○○-page.phpを読み込んでくれます。

固定ページにテンプレートを指定するやり方でもOK

RU DESIGN

固定ページをテンプレートで選択し任意のデザインに変更

🕒️2020年9月22日

固定ページを新規に作成する際に、デフォルトで使用されるpage.php以外のテンプレートを用意することによって、固定ページ毎にデザインを適用することができます。 page.phpを複製新たに作ってもいいですが、テーマ内にあるpage.phpを複製しお好みのデザインに仕上げてみましょう。ファイル名はpage_○○.phpみたいな感じにしておくと後で分かりやすいと思います。page-○○.phpのようにすると、1つのページにのみ適用することを目的とした特殊なテンプレートとして解釈されるため注意してください。ちなみに、page-sample.phpとした...

○○-page.phpの編集

作成した○○-page.phpを編集します。
記事一覧を表示させます。

<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 10,
);
$my_query = new WP_Query($args);

if( $my_query -> have_posts() ) :
while($my_query -> have_posts()) : $my_query -> the_post();
?>
<!--ループの内容-->
<?php endwhile;else: ?>
<p>表示する記事がありません</p>
<?php endif; ?>
 <?php wp_reset_postdata(); ?>

上記だと、投稿された記事を10件表示させるだけです。
固定ページはひとつのページとしての役割があるため、このままではページネーションを機能させることはできません。

固定ページでページネーションを機能させる

先ほどの例にget_query_var(‘paged’)を追加してページ番号を取得しましょう。
これで、ページネーションを機能させられます。

<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1 ;
$args = array(
'post_type' => 'post',
'posts_per_page' => 10,
'paged' => $paged
);
$my_query = new WP_Query($args);

if( $my_query -> have_posts() ) :
while($my_query -> have_posts()) : $my_query -> the_post();
?>
<!--ループの内容-->
<?php endwhile;else: ?>
<p>表示する記事がありません</p>
<?php endif; ?>
 <?php wp_reset_postdata(); ?>

 
WP-PageNaviを使用している場合
以下のように書き換えてください。

<?php
    if(function_exists('wp_pagenavi')) {
        wp_pagenavi(array('query' => $my_query));
    }
?>

おまけ

投稿以外にカスタム投稿がある場合はpost_typeをこのように書き換えてください。

‘post_type’ => array(‘post’,’カスタム投稿のスラッグ名1′,’カスタム投稿のスラッグ名2′),

参考にどうぞ！

カスタム投稿の追加方法

RU DESIGN

独自のカスタム投稿タイプを追加する方法

🕒️2020年6月13日

WordPressの通常の投稿と別に分けて記事を作成したい場合に便利な「カスタム投稿タイプ」。プラグイン でも機能を追加することができますが、テーマにちょっと記述するだけで簡単に使用することができます。自分が仕事でよくやるのは、通常の投稿はブログやお知らせなどで使用し、商品紹介やお店情報など別のコンテンツを書きたい場合にカスタム投稿を使用しています。目的によって投稿する場所を変えることによって更新し易くなります。 カスタム投稿の追加方法functions.phpに下記のように追加してください。/* ショップ投稿 */...

RU DESIGN

カスタム投稿タイプの新着記事を表示

🕒️2020年6月15日

カスタム投稿をシングルページやサイドバーなどに表示する方法です。<ul><?php$args = array( 'post_type' => 'recruit', 'posts_per_page' => 12); ?><?php $my_query = new WP_Query( $args ); ?> <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?><li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li><?php endwhile; ?><?php wp_reset_postdata(); ?>&l...

関連投稿:

WordPressサイトマップのエラー「XML declaration allowed only at the start of the document」の対処法 【初心者の方向け】 Bootstrap4の使い方 タブの作成 カスタム投稿タイプの新着記事を表示 独自のカスタム投稿タイプを追加する方法