
WordPressで運用している姉妹サイト、使用テーマに「JINR」を採用しているのだが。前々からどうしても不満だったのが、サイト内検索の「検索ボックス」における「検索結果」。
これ、検索結果が全て1ページに表示されてしまう。小さなサイトやブログであれば、たかだか40~50件なんで、たいして問題ないのだろうが。自分の場合、検索結果が400件とか500件なんて場合もある。これを一度に表示されてしまうと、サーバに負荷がかかってしょうがない。これを直そう直そうと思っていたのだが、ようやく作業したので手順を紹介。
前提:子テーマを使うべし
まず、検索結果に「search.php」というファイルをいじるのだが、そのためには「子テーマ」が必要になる。こちらの公式サイトで用意されているので、まずは子テーマを入れてください。
1)親テーマから「search.php」をダウンロード⇒子テーマに入れる
まず、子テーマには必要最低限のファイルしかない。修正する場合には、親テーマからファイルを持ってくる必要がある。FTPソフトなんかを利用して
①親テーマの直下にある「search.php」をダウンロード
②「①」を子テーマにアップロード
してください
2)子テーマのsearch.phpを編集
子テーマのsearch.phpを開いてください。そうすると23行目くらいにある、下記のコードを直します
変更前(問題あるコード):
<?php query_posts($query_string.'&posts_per_page=-1'); while(have_posts()) : the_post(); ?>
<?php get_template_part('object/new-post-list'); ?>
<?php endwhile; ?>
変更後(改善後コード):
<?php while(have_posts()) : the_post(); ?>
<?php get_template_part('object/new-post-list'); ?>
<?php endwhile; ?>
<?php
the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => '« 前へ',
'next_text' => '次へ »',
) );
?>
これでページネーションが表示されたと思います。1ページあたりに表示される件数は、ダッシュボードの
設定⇒表示設定⇒1ページに表示する最大投稿数
で制御できる。
番外編)デザインを修正する(css)
さて、上記コードでページネーションは表示されたと思いますが、「前へ」とか「次へ」など、テキストが表示されているので、どうも素っ気ない。てことで、少しデザインを付けて見栄えを良くしましょう。
まず、先ほどのコードをcssで操作できるようdivクラスで囲いましょう
↓これを追加します
<div class="my-pagination">
</div>
▼具体的にはこうなります
<div class="my-pagination">
<?php
the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => '« 前へ',
'next_text' => '次へ »',
'screen_reader_text' => '投稿ナビゲーション',
) );
?>
</div>
<?php get_header(); ?>
<?php if (jinr_isset_widets('post-top-widget', true)) : ?>
<section id="jinr-posttop-widget-area" class="o--widget-area t--main-width t--padding">
<div id="jinr-posttop-widget-area-inner">
<?php dynamic_sidebar('post-top-widget'); ?>
</div>
</section>
<?php endif; ?>
<main id="mainContent" class="<?php jinr_mainContent_class_insert(); ?>">
<div id="mainContentInner" class="t--main-width">
<article id="jinrArticle" class="<?php jinr_jinrArticle_class_insert(); ?>">
<header id="postHeader">
<div id="postHeaderInner" class="<?php echo jinr__article_width(); ?>">
<span class="d--archive-subtitle ef">SEARCH</span>
<h1 id="jinrPostTitle" class="c--entry-title">「<?php the_search_query(); ?>」の検索結果は<?php echo $wp_query->found_posts;?>件です</h1>
</div>
</header>
<section id="postContent" class="<?php echo jinr__article_width(); ?> <?php echo jinr__font_size(); ?> <?php echo jinr__font_size_sp(); ?>">
<?php if(have_posts()): ?>
<section id="jinrPostList" <?php echo jinr__postlist_hover_style() !== 'none' ? 'class="' . jinr__postlist_hover_style() . '"' : ''; ?>>
<div class="o--postlist-inner <?php echo jinr__postlist_style(); ?> d--postlist-column2">
<?php while(have_posts()) : the_post(); ?>
<?php get_template_part('object/new-post-list'); ?>
<?php endwhile; ?>
</div>
</section>
<!-- ページネーションここから -->
<div class="my-pagination">
<?php
the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => '« 前へ',
'next_text' => '次へ »',
'screen_reader_text' => '投稿ナビゲーション',
) );
?>
</div>
<!-- ページネーションここまで -->
<?php else : ?>
<p>他のキーワードでお探しいただくか、よろしければ以下の方法で記事をお探しください。</p>
<section class="o--notfound-section t--round">
<p class="a--notfound-headtitle d--bold">検索する</p>
<div class="c--notfound-form">
<?php get_search_form(); ?>
</div>
</section>
<?php $tagArr = get_tags(); ?>
<?php if ($tagArr) : ?>
<section class="o--notfound-section t--round">
<p class="a--notfound-headtitle d--bold">タグから探す</p>
<div id="postTagBox" class="o--notfound-taglist">
<?php foreach ((array) $tagArr as $tag) : ?>
<span class="c--notfound-tagitem">
<a href="<?php echo get_tag_link($tag->term_id); ?>" class="a--notfound-taglink"># <?php echo $tag->name; ?></a>
</span>
<?php endforeach; ?>
</div>
</section>
<?php endif; ?>
<section class="o--notfound-section t--round">
<p class="a--notfound-headtitle d--bold">カテゴリーから探す</p>
<ul id="postCategoryBox">
<?php wp_list_categories(array(
'title_li' => '',
'show_count' => '1',
)); ?>
</ul>
</section>
<?php endif; ?>
</section>
</article>
<?php if (jinr__post_column_style() == 't--post-two-column') : ?>
<?php get_sidebar(); ?>
<?php endif; ?>
</div>
</main>
<?php if (jinr_isset_widets('post-bottom-widget', true)) : ?>
<section id="jinr-postbottom-widget-area" class="o--widget-area t--padding t--main-width">
<div id="jinr-postbottom-widget-area-inner">
<?php dynamic_sidebar('post-bottom-widget'); ?>
</div>
</section>
<?php endif; ?>
<?php get_footer(); ?>
CSSにデザインを記述
あとはCSSにデザインコードを記述します。
外観⇒カスタマイズ⇒追加CSSとかに、下記
/* ページネーションデザイン */
.my-pagination {
display: flex;
justify-content: center;
align-items: center;
margin: 40px 0;
gap: 8px; /* ページ番号の間の隙間 */
}
.my-pagination .page-numbers {
display: inline-block;
padding: 8px 14px;
background-color: #f0f0f0;
color: #333;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
.my-pagination .page-numbers:hover {
background-color: #333;
color: #fff;
}
.my-pagination .current {
background-color: #8070ef;
color: #fff;
font-weight: bold;
}
▼そうすると、このようなボタンデザインが出来上がると思います
