カタカナとひらがなの区別検索、人気順ソート Wordpress

WordPressの標準の検索フォームから「バス」で検索すると、パスタの「パス」、ひらがなの「ばす」「はす」でもヒットすることに気づいて改善を試みた。

ひらがなとカタカナは区別したい。

乗り物のバスを検索しているのに、パスタの記事が出てきては混乱する。

そうすると、最初は検索結果で332件ヒットしていたのが、179件に減ってスッキリした。

Custom Post Order プラグインを使うと検索結果の順番がおかしくなる

最初は検索結果の表示順もおかしかった。

最初の方の記事に、「バス」の語句が全く含まれていない。

検索語句の重要度と無関係な順番に検索結果が表示されていた。

それで、検索した時に、どういうSQL Query が発生しているのかLog を取って調べてみた。

 130 Query     SELECT SQL_CALC_FOUND_ROWS  wp_posts.ID FROM wp_posts  WHERE 1=1  AND (((wp_posts.post_title LIKE '%バス%') OR (wp_posts.post_excerpt LIKE '%バス%') OR (wp_posts.post_content LIKE '%バス%')))  AND (wp_posts.post_password = '')  AND wp_posts.post_type IN ('post', 'page', 'attachment') AND (wp_posts.post_status = 'publish')  ORDER BY wp_posts.post_title LIKE '%バス%' DESC, wp_posts.post_date DESC LIMIT 0, 18
 130 Query     SELECT SQL_CALC_FOUND_ROWS  wp_posts.ID FROM wp_posts  WHERE 1=1  AND (((wp_posts.post_title LIKE '%バス%') OR (wp_posts.post_excerpt LIKE '%バス%') OR (wp_posts.post_content LIKE '%バス%')))  AND wp_posts.post_type = 'post' AND (wp_posts.post_status = 'publish' OR wp_posts.post_status = 'private')  ORDER BY wp_posts.menu_order ASC LIMIT 0, 18

これをフォーマットして見やすくする。

SELECT SQL_CALC_FOUND_ROWS
  wp_posts.ID
FROM
  wp_posts
WHERE
  1 = 1 AND(
    (
      (wp_posts.post_title LIKE '%バス%') OR(
        wp_posts.post_excerpt LIKE '%バス%'
      ) OR(
        wp_posts.post_content LIKE '%バス%'
      )
    )
  ) AND(wp_posts.post_password = '') AND wp_posts.post_type IN('post',
  'page',
  'attachment') AND(wp_posts.post_status = 'publish')
ORDER BY
  wp_posts.post_title LIKE '%バス%' DESC,
  wp_posts.post_date DESC
LIMIT 0, 18


SELECT SQL_CALC_FOUND_ROWS
  wp_posts.ID
FROM
  wp_posts
WHERE
  1 = 1 AND(
    (
      (wp_posts.post_title LIKE '%バス%') OR(
        wp_posts.post_excerpt LIKE '%バス%'
      ) OR(
        wp_posts.post_content LIKE '%バス%'
      )
    )
  ) AND wp_posts.post_type = 'post' AND(
    wp_posts.post_status = 'publish' OR wp_posts.post_status = 'private'
  )
ORDER BY
  wp_posts.menu_order ASC
LIMIT 0, 18

このように2回、同じような検索要求が発生している。

2回目が、Intuitive Custom Post Order プラグインから発生しているQuery ではないか。

これがなければ、

ORDER BY
  wp_posts.post_title LIKE '%バス%' DESC,
  wp_posts.post_date DESC

のように、タイトルに検索語が含まれている、重要度の高い順に表示されるはずである。

それで、Intuitive Custom Post Order を、

プラグインロードフィルターの設定で、アドミン頁のみで有効にし、その他の記事の頁、検索結果の頁では無効にした。

すると、そのような順番で表示されるようになった。

Intuitive Custom Post Order はカテゴリーの表示順番を変更するために導入したのだが、弊害が大きいようだ。

ひらがなとカタカナの区別検索

データーベースの照合順序 COLLATE、キャラクターセットが、utf8mb4_unicode_ci になっているのを、utf8mb4_general_ci で検索するように指定すればよかった。

functions.php に次を追加する。

//ひらがな・カタカナ区別検索
function change_search_char( $where, $obj ) {
if ( $obj->is_search ) {
    $where = str_replace(".post_title", ".post_title COLLATE utf8mb4_general_ci", $where );
    $where = str_replace(".post_content", ".post_content COLLATE utf8mb4_general_ci", $where );
}
return $where;
}
add_filter( 'posts_where', 'change_search_char', 10, 2 );

人気順に並び替え機能追加

アクセス数の多い順に記事を並び替える機能も追加した。

WP-PostViews プラグインをインストールしていると、記事毎にアクセス数が記録されている。記事に「views」という metaデータが付加される。

functions.php に次を追加する。

//人気順に並べ替え 
function add_meta_query_vars( $public_query_vars ) {
    $public_query_vars[] = 'meta_key'; //カスタムフィールドのキー
    $public_query_vars[] = 'meta_value'; //カスタムフィールドの値（文字列）
    return $public_query_vars;
}
add_filter( 'query_vars', 'add_meta_query_vars' );

ページングには、WP-PageNavi プラグインを使用する。インストールして有効化する。

検索結果が表示されるテンプレート（search.php など）に、次を追加する。

<section id="pager_wrap">
  <div class="wp_pagenavi_dir"><?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?></div>
  <div class="wp_pagesort_dir">
    <ul>
        <li><a href="<?php echo add_query_arg( array('orderby' => 'date', 'order' => 'ASC'), preg_replace('/&.*/', '', get_pagenum_link(1)) ); ?>">古順</a></li>
        <li><a href="<?php echo add_query_arg( array('orderby' => 'date', 'order' => 'DESC'), preg_replace('/&.*/', '', get_pagenum_link(1)) ); ?>">新順</a></li>
		<li><a href="<?php echo add_query_arg( array('meta_key' => 'views', 'orderby' => 'meta_value_num', 'order' => 'DESC'), preg_replace('/&.*/', '', get_pagenum_link(1)) ); ?>">閲覧多順</a></li>
        <li><a href="<?php echo add_query_arg( array('meta_key' => 'views', 'orderby' => 'meta_value_num', 'order' => 'ASC'), preg_replace('/&.*/', '', get_pagenum_link(1)) ); ?>">閲覧少順</a></li>
    </ul>
  </div>
</section>

get_pagenum_link(1)

は、並び順を変える時に、最初のページに戻ることを意味する。

CSSは次のように style.css に追加する。

#pager_wrap {
	overflow: hidden;
	max-width: 800px;
	margin: 20px auto;
	clear: both;
}

@media only screen and (max-width: 767px) {
	#pager_wrap {
		text-align: center;
	}
}

@media only screen and (max-width: 767px) {
	.wp_pagenavi_dir {
		margin-bottom: 10px;
	}
}

@media only screen and (min-width: 768px) {
	.wp_pagenavi_dir {
		float: left;
	}
	.wp-pagenavi a,
	.wp-pagenavi span {
		text-decoration: none;
		border: none;
		padding: 3px 9px;
		margin: 0 2px;
		background: lawngreen;
		color: #006400;
		display: inline-block;
		font-size: 14px;
		border-radius: 40%;
	}
	.wp-pagenavi a:hover {
		text-decoration: none;
		background: #006400;
		color: white;
	}
	.wp-pagenavi span.current {
		background: #006400;
		color: #fff;
	}
}

@media only screen and (max-width: 767px) {
	.wp_pagesort_dir {
		display: inline-block;
	}
}

@media only screen and (min-width: 768px) {
	.wp_pagesort_dir {
		float: right;
		border-radius: 20%;
	}
}

.wp_pagesort_dir ul {
	overflow: hidden;
}

.wp_pagesort_dir li {
	float: left;
	margin: 0 5px 0 0;
}

.wp_pagesort_dir a {
	display: inline-block;
	background: lawngreen;
	border: none #006400;
	padding: 2px 9px;
	font-size: 14px;
	border-radius: 20%;
}

.wp_pagesort_dir a:hover {
	background: #006400;
	color: white;
}

すると、このように表示される。

検索語句をハイライト表示する

検索結果のページで、検索したキーワードをハイライト表示するには、Highlight Search Terms プラグインを利用する。

インストールするだけで蛍光黄色で表示されるようになる。

独自のCSSで色を変更することもできる。

Highlight Search Terms はJquery に依存していて、ヴァージョン1でしか動かない。Jquery 3では動かない。

カタカナとひらがなの区別検索、人気順ソート WordPress

Custom Post Order プラグインを使うと検索結果の順番がおかしくなる

ひらがなとカタカナの区別検索

人気順に並び替え機能追加

検索語句をハイライト表示する

タグクラウド

WordPress カテゴリ人気記事 Views most

タグ関連記事

閲覧履歴