Ctrl+Fみたいな検索窓を設置する

みなさんやりますよね、ページ内検索。
ブラウザでもエクセルでもなんでも、Ctrl+Fで検索窓が出てきて、文字列を入力するとその文字列がある場所に画面が動いてくれるやつ。

それをサイト内で実装したいっていう話になりました。
そんなことできるんか、、?って思ってグーグルしていたらこんなページを発見。
記事内の検索機能

いろいろ答えてるかたがいらっしゃいますが、わたしが一番手っ取り早くできそうだとおもったのが一つ目の回答、jQueryのハイライトプラグインとページ内スクロールを合体すれば、、というもの。

早速やってみよう!ということで、ハイライトのプラグインをダウンロード。
highlight: JavaScript text higlighting jQuery plugin

そしてヘッダーに読み込む。

ヘッダーでjQueryが読み込まれていない場合は、functions.phpに下記を追記。
これでwp_head内でjQueryを読み込んでくれます。なので先程のコードは、wp_headの下に。

html内はこんな感じに。

これを踏まえて、 head内に追記していきます。

これで、検索窓の文字に、.highlightというクラスがつきます。
ハイライトするように色をつけたい場合は、cssでbackground-colorを指定してあげればOK。
今回はスクロールさせたいだけなので色は省きます。

次に検索ボタンを押したときに、スクロールする設定。

いつもつかう、スムーズスクロールの応用版ですかね。

そして最後に、リセットボタンを押したときの処理を追記。
ハイライトを削除して、検索窓を空欄に戻します。

これでいいかんじに、検索窓からページ内をスクロールすることができました、、!!

●参考サイト
jQueryでハイライト(強調表示)
ページ内を自在にスクロール | よく使うjQuery

2 thoughts on “Ctrl+Fみたいな検索窓を設置する

  1. 上記の記述にした際、「jquery.highlight-5.js」はWordPress内のどのディレクトリへ格納すれば良いのでしょうか?
    素人の質問で申し訳ありませんが、教えて頂ければ幸いです。

  2. コメントありがとうございます!
    <script type=”text/javascript” src=”jquery.highlight-5.js”></script>
    と書いてますが、これだとリンクされないですね、、すみません。
    ご利用のテーマ内に保存されればよいと思います。テーマ内にjsというディレクトリがあるのでしたらその中に入れて、読込パスは下記のとおりです。
    src=”< ?php echo get_stylesheet_directory_uri(); ?>/js/jquery.highlight-5.js”
    全角半角わかりづらいフォントですみません。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

top