仕事でよくWordpressを使っているんですが、フリーワードの検索ではなく、タグやカテゴリを使った絞込み検索を実装したいと思い、いざ実行に移しました。
結構手間取りましたがしっかりとやることができました。
背景
とあるサイトでフリーワードでの検索を設置して、どんなキーワードが検索されるかを分析していたのですが、残念ながら無駄に検索されているキーワードがあって気になっていました。
イメージとしては記事内に「グラタンの美味しい作り方」はあるのに、キーワード検索が「グラタンの作り方」で検索されてしまい、ヒットせず、ユーザー離脱してしまっているようなイメージです。
設置する前に
絞込み検索をする前に、いろいろと準備を行ないました。その手順は簡単に書くと以下のとおり
- ユーザーがこのサイトにくる目的を考える
- 目的の情報を引き出すためにどんな分類方法があるかを考える
- それぞれを組み合わせて漏れが無いかを確認する
- 一晩寝かす
- ユーザーになった気分で見直してみて、無駄な分類が無いかを確認する
- 投稿データにどうやってデータ保持させるかを考える
自分で書いていても一晩寝かすという作業は重要だったなぁと思います。思いつくとがーっと書いてしまいたくなるのですが、一晩で作ったものって翌朝見てみるとたいしたことなかったりします。
そのため、一晩寝かすという作業が重要になってきます。
データの保持方法
いろいろな分類を試して最初は相当でかいものになりそうでしたが、一晩寝かしたことでかなりシンプルに仕上がりました。
とはいいつつも今まで使っていたものは「カテゴリ」「タグ」だったのですが、これだけだと綺麗に保持ができなかったので、カスタムフィールドを使うことにしました。
ここから先は結構手間がかかるので、やり直したくない人は、しっかりと分類方法については検討することが必要です。お勧めはエクセルでしっかりとそれぞれどれくらいのボリュームになるかを試算してみましょう。
カスタムフィールドについての説明はこちらのスライドを参照してください。
カスタムフィールドを導入する上で、編集や修正がしやすいといわれているプラグイン「Advanced Custom Fields」を使うことにしました。
とにかくシンプルで使いやすい。
序盤分からなくてもカチカチいじっていれば何とかなります。
これで検索用の値を保持するというハードルはクリア。
値を埋め込んでいく
さぁ、実際に値を入れる箱を作ったので値を埋め込んできます。
どうやったのか・・・
えぇ、手動ですとも!!ドーン
データベースをいじるとかそんなのありましたが、自分にはそんなこと出来るかと。バグってくれたらどーするんだということでコツコツと過去の記事の「カテゴリ」「タグ」「カスタムフィールドの値」を変更していきました。
二度とやりたくない。
はい、次に進みます。
検索機能の開発・・・?
開発だなんて書きましたが、ここでも頼ります、プラグイン。「WP custom fields search」。
何でもプラグインである、万能ですね。
・・・2時間経過
できねぇ!
何でか上手いこと検索機能が実装できません。何ででしょう、プラグインがいかれてる自分の力不足ですね。
ってことでいろいろと検索をしていると、出会いました。神様に。
神様、仏様、KOTORI様「絞り込み検索をプラグインを使わずに実装」。
ってことでこれを頼りに開発です。
ここに「WP custom fields search」には頼らないほうが良いと書かれておるではないか・・・
(´・ω・`)
KOTORIさんのを見ると非常に面倒そう多くの機能をお作りになられているので、楽をしたいユーザーのためにシンプルにしたい自分は、必要な機能機能だけを絞って作っていきます。いざっ!!
実装したい機能
実装したい機能は以下の通り
- フリーキーワード検索
- カテゴリ検索(チェックボックス)
- カスタムフィールドの値で検索(チェックボックス)×2つ
KOTORIさんのよりもだいぶ手抜きで簡単に作っていきます。
って細かい事は書かずにやりました。
いじったのはsearch.phpとsearchform.php。
設置する位置に手間取りましたが無事実装完了。おそらくテーマによってやるべき事が違うと思いますが、まずsearchform.phpをひたすらにいじりまくり、表示するようにしてから、searchform.phpに着手。
searchform.phpの方が手間取りました。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div><?php the_title(); ?></div> <div><?php the_content(); ?></div> <?php endwhile; else : ?> 該当なし <?php endif; ?> <?php wp_pagenavi(); //ページ送り wp_reset_query(); ?>
ここの部分は使いませんでした。もともとテーマに組み込まれていたので。
KOTORIさんみたいに大作にはならなかったものの3日夜を潰してようやく出来た感じですね。あぁ、疲れた。