山梨でホームページ制作・運営管理を任せるなら
タモンテン株式会社
【カスタム投稿】WordPressで検索フォームを設置し、検索結果を表示する方法
2024年12月2日（月）
検索フォームを設置したい場所に以下のコードを記述
<?php get_search_form(); ?>
検索結果の表示ファイル
search.php
を制作
上記のファイルに以下を記載して一覧を表示させます。
<!–▼▼▼▼▼▼▼ここから▼▼▼▼▼▼▼–>
<?php
// 検索キーワードを取得
$search_query = get_search_query();
$param = array(
‘posts_per_page’ => 30, // 1ページに表示する件数
‘post_type’ => ‘case’, // カスタム投稿タイプ
‘post_status’ => ‘publish’, // 公開ステータスの投稿のみ
‘orderby’ => ‘date’, // 日付順に並び替え
‘order’ => ‘DESC’, // DESCで新しい順、ASCで古い順
‘paged’ => get_query_var(‘paged’, 1), // ページネーション用
‘s’ => $search_query, // 検索キーワード
);
$wp_query = new WP_Query($param); // クエリの実行
if ($wp_query->have_posts()) :
while ($wp_query->have_posts()) : $wp_query->the_post();
?>
<div class=”entry”>
ループ
</div><!– / .entry –>
<?php
endwhile;
else :
?>
<p class=”no-results”>検索結果が見つかりませんでした。</p>
<?php
endif;
wp_reset_postdata(); // クエリ後にグローバル変数をリセット
?>
<!–▲▲▲▲▲▲▲ここまで▲▲▲▲▲▲▲–>
ページャー
<?php
$args = array(
‘mid_size’ => 1,
‘prev_text’ => ‘<<前へ’,
‘next_text’ => ‘次へ>>’,
‘screen_reader_text’ => ‘ ‘,
);
the_posts_pagination($args);
?>
参考サイト
https://wp-manual.com/theme/theme-form-basic/
<?php get_search_form(); ?>
検索結果の表示ファイル
search.php
を制作
上記のファイルに以下を記載して一覧を表示させます。
<!–▼▼▼▼▼▼▼ここから▼▼▼▼▼▼▼–>
<?php
// 検索キーワードを取得
$search_query = get_search_query();
$param = array(
‘posts_per_page’ => 30, // 1ページに表示する件数
‘post_type’ => ‘case’, // カスタム投稿タイプ
‘post_status’ => ‘publish’, // 公開ステータスの投稿のみ
‘orderby’ => ‘date’, // 日付順に並び替え
‘order’ => ‘DESC’, // DESCで新しい順、ASCで古い順
‘paged’ => get_query_var(‘paged’, 1), // ページネーション用
‘s’ => $search_query, // 検索キーワード
);
$wp_query = new WP_Query($param); // クエリの実行
if ($wp_query->have_posts()) :
while ($wp_query->have_posts()) : $wp_query->the_post();
?>
<div class=”entry”>
ループ
</div><!– / .entry –>
<?php
endwhile;
else :
?>
<p class=”no-results”>検索結果が見つかりませんでした。</p>
<?php
endif;
wp_reset_postdata(); // クエリ後にグローバル変数をリセット
?>
<!–▲▲▲▲▲▲▲ここまで▲▲▲▲▲▲▲–>
ページャー
<?php
$args = array(
‘mid_size’ => 1,
‘prev_text’ => ‘<<前へ’,
‘next_text’ => ‘次へ>>’,
‘screen_reader_text’ => ‘ ‘,
);
the_posts_pagination($args);
?>
参考サイト
https://wp-manual.com/theme/theme-form-basic/
