やりたいこと
- トップページに「お知らせ(news)」を「3件」表示
- 「お知らせ一覧」には「10件」表示
- トップページに「ブログ(blog)」(カスタム投稿)を「6件」表示
- 「ブログ一覧ページ」では「9件」表示
① WPのダッシュボードで設定
ダッシュボードの「設定」→「表示設定」→「1ページに表示する最大投稿数」を「10件」に設定。
そして「最新の投稿」にチェックしてください。
- 「最新の投稿」にチェック
- 1ページに表示する最大投稿数を「10件」にする
② 投稿(お知らせ)のアーカイブページを作成
「お知らせ一覧」に「10件」のニュースを表示させていきます。
「archive.php」を作成。
「archive.php」に下記のような記述でループさせます。(メインループ)
<!--もし投稿があれば表示-->
<?php if (have_posts()) : ?>
<!--投稿がある分だけループを繰り返す-->
<?php while (have_posts()) : the_post(); ?>
<!-- ここに投稿内容 -->
<?php endwhile; ?>
<?php endif; ?>
①で「最新の投稿にチェック」「最大投稿数を10件」にしたことで、「投稿(お知らせ)」から「最新の10件」を引っ張ってくるようになっています。
③ トップページに「お知らせ」を「3件」表示
WPの設定では「最新の10件」を表示にしましたが、トップページでは「3件」の表示にさせます。
「functions.php」と「index.php」(トップページ)に記述を追加していきます。
▼ まずは「functions.php」に以下を追記してください。
function topNews_posts_per_page($query)
{
//「メインクエリじゃない」か「ダッシュボード、管理パネルが表示」されてたらreturn。
if (is_admin() || !$query->is_main_query()) {
return;
}
//もしトップページだったら実行
if ($query->is_front_page()) {
//「posts_per_page」で表示する最大投稿数を「3件」に変更
$query->set('posts_per_page', '3');
}
}
//「pre_get_posts」でメインクエリを書き換える。(フック)
//「topNews_posts_per_page」で関数を定義。
add_action('pre_get_posts', 'topNews_posts_per_page');
▼ 「index.php」(トップページ)には以下を追記してください。
<!--もし投稿があれば表示-->
<?php if (have_posts()) : ?>
<!--投稿がある分だけループを繰り返す-->
<?php while (have_posts()) : the_post(); ?>
<!-- ここに投稿内容 -->
<?php endwhile; ?>
<?php endif; ?>
④ ブログ投稿(カスタム投稿)を作成
ワードプレスではひとつの投稿しかありませんが、もう1つ作成していきましょう。
▼ 「functions.php」に以下を追記してください。
function create_post_type() {
register_post_type( 'blog', [ // 投稿タイプ名
'labels' => [
'name' => 'ブログ', // 管理画面上で表示する投稿タイプ名
'singular_name' => 'blog', // カスタム投稿のスラッグ
],
'public' => true, // 投稿タイプをpublicにするか
'has_archive' => true, // アーカイブ機能のON/OFF
'menu_position' => 5, // 管理画面上での配置場所
]);
}
add_action( 'init', 'create_post_type' );
これでワードプレスの管理画面には「投稿」と「ブログ」の二つの投稿機能ができたと思います。
ここまでできたら、「パーマリンク設定」で、何も変更せず「変更を保存」を押してください。
この手順をしないとエラーになります。
⑤ ブログ(カスタム投稿)のアーカイブページを作成
「ブログ一覧」に「9件」のブログを表示させていきます。
「archive-blog.php」を作成。
「archive-blog.php」に下記のような記述でループさせます。(サブループ)
<?php
$args = [
'post_type' => 'blog',//投稿タイプ名
'posts_per_page' => 9,//9件表示
'paged' => $page//ページングがあるなら記述
];
$the_query = new WP_Query($args);
?>
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<!-- 投稿内容 -->
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
サブループの解説をしていきます。
簡単な解説になりますが「$args」の情報をもとに「$the_query 」という新しいオブジェクト(情報の塊)を生成。
配列としてまとめた「取得したいデータの設定情報」を「$args」に格納。
「取得したいデータの設定情報」とは「1ページに何件の記事を表示するか」や「取得したい投稿タイプ」や「どのカテゴリをもってくるか」など条件を決めたものです。
新しく生成された「$the_query」をもとにループさせていきます。
(※ちなみにメインループでは「$wp_query->have_posts()」となるのですが省略されています。)
<?php wp_reset_postdata(); ?>
サブクエリで新しくクエリを定義しているので、リセットしなくてはなりません。これはルールのようなものなので、覚えておきましょう。
⑥ トップページにブログ(カスタム投稿)を「6件」表示
トップページに「ブログ」を「6件」表示させていきます。
サブループを使ってブログの情報を表示させていきます。
<?php
$args = [
'post_type' => 'blog',//投稿タイプ名
'posts_per_page' => 6//6件表示
];
$the_query = new WP_Query($args);
?>
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<!-- 投稿内容 -->
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>