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;
}

▼そうすると、このようなボタンデザインが出来上がると思います

コメントを残す