完全にプログラムに凝って寝不足ですが、なんとか五十音の行別に「索引（目次）」を付け、さらには「店名キーワード検索」機能も搭載できました！
検索は「ひと文字」から絞り込める便利なものができました。
この記事の目次
まずは「店名一覧」に五十音行別「検索」を追加
すでに「店名」を一覧表示でき、「五十音順」にしたことは紹介しました。
「吉祥寺ランチ」の全記事に「店名」を登録し、サムネイルに表示したり、一覧表示できるようにしました 
「吉祥寺ランチ」の「店名一覧」を五十音順で分かりやすく並ぶように「読み仮名／愛称」を追記
かなり探しやすくはなりましたが、それでも 400軒近いお店を「スクロール」して探さないといけません。
「こんなにあるよ！」というアピールにはいいのですが、五十音後半と分かっている場合、下までスクロールして探すのは非効率です。
そこで「索引」を思いつくわけですが、さすがに「五十音」索引では細かすぎなので「あ行」「か行」という「行別」索引にしました。
ほどよい感じです。『「目次」へ戻る』ボタンも用意しました。
さらにパソコンだとサイドバーにも「行別」の目次が表示されます。
この目次は以下のページを参考にしました。ありがとうございます！
参考 WordPressで記事を見出し付きで50音順に一覧表示する方法Web制作ナビ特に「濁点」の切り分け方法は目からウロコでした。
「お店情報ナビ」では「行別」で折りたたみ表示に
「店名一覧」の五十音行別「索引」には満足したのですが、「行別」で折りたたみ表示もスマホでは便利なので「お店情報ナビ」に搭載しました。
「店名一覧」ページの一覧性も便利なので、両方を提供して「お好きなほうをどうぞ」という感じです。
同じ機能では、両方ある必要がないですから。
「店名キーワード検索」はひと文字でも検索可能
「行別」索引や折りたたみ表示でも、かなり探しやすくなったのですが、やはり店名だけの「検索」機能が欲しくなりました。
通常の「キーワード検索」だと「記事」を見つけるのにはいいですが、素早く「店名」からお店を探すのに向いていません。
それに WordPress の検索機能は、それほど賢くないのです。何度も検索しようという気にはなれません。
そこでいろいろ探した中で、以下のページを見つけました。
参考 検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装するTips Note by TAMこれこれ！まさにこれがやりたかったのです！
- ひと文字でも絞り込め、ふた文字ならかなり絞り込める
- 読み仮名も含め、店名全体から一部でも検索できる
- 入力途中で候補が表示され、見つけた段階で検索終了！
早速、バッチリ参考にして作成したのがこちら。
これなら「とんぼ」でも「とんかつ」でも探せるわけです。検索結果はリンクになっているのでクリック／タップで開きます。
さらにパソコンでは「Tab」キーで選択できるので便利です。
参考にしたプログラムに以下の機能を追加しました。
- 検索結果をリンク付きで選択すれば開けるようにした
- カタカナもひらがなで、大文字も小文字でも検索可能
- 入力途中でも「Enter」キーで先頭の検索結果にジャンプ
特に最初の状態では「店名」は表示されたのですが、そのお店紹介ページへジャンプできないと意味がないのでひと工夫しました。
この「ひと工夫」ができる方法を思いつくまでが長かったです。
「索引」と「検索」で「お店情報ナビ」の名前に負けない
店名を並べ、ジャンル分けしただけでは弱いと感じていました。
「きちログ」にお店の情報を効率よく探せる「吉祥寺ランチ・メニュー」を追加
そこに今回の「索引」と「検索」機能を付け「お店情報ナビ」の名前に負けないものになりました。
あとは記事の充実あるのみですね。地道に頑張ります。
こちらの記事もいかがですか？
「吉祥寺ランチ」の全記事に「店名」を登録し、サムネイルに表示したり、一覧表示できるようにしました 「きちログ」にお店の情報を効率よく探せる「吉祥寺ランチ・メニュー」を追加 「吉祥寺ランチ」の「店名一覧」を五十音順で分かりやすく並ぶように「読み仮名／愛称」を追記
