「吉祥寺ランチ」の「お店情報ナビ」に五十音行別「索引(目次)」と「店名キーワード検索」機能を搭載!

完全にプログラムに凝って寝不足ですが、なんとか五十音の行別に「索引(目次)」を付け、さらには「店名キーワード検索」機能も搭載できました!

検索は「ひと文字」から絞り込める便利なものができました。

まずは「店名一覧」に五十音行別「検索」を追加

すでに「店名」を一覧表示でき、「五十音順」にしたことは紹介しました。

「吉祥寺ランチ」の全記事に「店名」を登録し、サムネイルに表示したり、一覧表示できるようにしました「吉祥寺ランチ」の「店名一覧」を五十音順で分かりやすく並ぶように「読み仮名/愛称」を追記

かなり探しやすくはなりましたが、それでも 400軒近いお店を「スクロール」して探さないといけません。

「こんなにあるよ!」というアピールにはいいのですが、五十音後半と分かっている場合、下までスクロールして探すのは非効率です。

 

そこで「索引」を思いつくわけですが、さすがに「五十音」索引では細かすぎなので「あ行」「か行」という「行別」索引にしました。

ほどよい感じです。『「目次」へ戻る』ボタンも用意しました。

 

さらにパソコンだとサイドバーにも「行別」の目次が表示されます。

この目次は以下のページを参考にしました。ありがとうございます!

参考 WordPressで記事を見出し付きで50音順に一覧表示する方法Web制作ナビ

特に「濁点」の切り分け方法は目からウロコでした。

「お店情報ナビ」では「行別」で折りたたみ表示に

「店名一覧」の五十音行別「索引」には満足したのですが、「行別」で折りたたみ表示もスマホでは便利なので「お店情報ナビ」に搭載しました。

「店名一覧」ページの一覧性も便利なので、両方を提供して「お好きなほうをどうぞ」という感じです。

同じ機能では、両方ある必要がないですから。

「店名キーワード検索」はひと文字でも検索可能

「行別」索引や折りたたみ表示でも、かなり探しやすくなったのですが、やはり店名だけの「検索」機能が欲しくなりました。

通常の「キーワード検索」だと「記事」を見つけるのにはいいですが、素早く「店名」からお店を探すのに向いていません。

それに WordPress の検索機能は、それほど賢くないのです。何度も検索しようという気にはなれません。

 

そこでいろいろ探した中で、以下のページを見つけました。

参考 検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装するTips Note by TAM

これこれ!まさにこれがやりたかったのです!

  • ひと文字でも絞り込め、ふた文字ならかなり絞り込める
  • 読み仮名も含め、店名全体から一部でも検索できる
  • 入力途中で候補が表示され、見つけた段階で検索終了!

早速、バッチリ参考にして作成したのがこちら。

これなら「とんぼ」でも「とんかつ」でも探せるわけです。検索結果はリンクになっているのでクリック/タップで開きます。

さらにパソコンでは「Tab」キーで選択できるので便利です。

 

参考にしたプログラムに以下の機能を追加しました。

  • 検索結果をリンク付きで選択すれば開けるようにした
  • カタカナもひらがなで、大文字も小文字でも検索可能
  • 入力途中でも「Enter」キーで先頭の検索結果にジャンプ

特に最初の状態では「店名」は表示されたのですが、そのお店紹介ページへジャンプできないと意味がないのでひと工夫しました。

この「ひと工夫」ができる方法を思いつくまでが長かったです。

「索引」と「検索」で「お店情報ナビ」の名前に負けない

店名を並べ、ジャンル分けしただけでは弱いと感じていました。

「きちログ」にお店の情報を効率よく探せる「吉祥寺ランチ・メニュー」を追加

そこに今回の「索引」と「検索」機能を付け「お店情報ナビ」の名前に負けないものになりました。

あとは記事の充実あるのみですね。地道に頑張ります。

 

こちらの記事もいかがですか?

「吉祥寺ランチ」の全記事に「店名」を登録し、サムネイルに表示したり、一覧表示できるようにしました「きちログ」にお店の情報を効率よく探せる「吉祥寺ランチ・メニュー」を追加「吉祥寺ランチ」の「店名一覧」を五十音順で分かりやすく並ぶように「読み仮名/愛称」を追記