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

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

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

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

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

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

<head>
	<?php wp_head(); ?><!-- wp_headより下に書く -->
	<script type="text/javascript" src="jquery.highlight-5.js"></script><!-- ハイライトのjQueryを読み込む -->
</head>

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

function load_script(){
    wp_enqueue_script('jquery');
}
add_action('init', 'load_script');

html内はこんな感じに。

<input type="text" id="word">
<input type="button" onclick="doHighlight()" value="検索" class="btn_sample">
<input type="button" onclick="removeHighlight()" value="検索結果をリセット" class="btn_remove"><br />

<div id="target">
	ねこ<br>いぬ<br>うさぎ<br>たぬき<br>
</div>

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

<head>
	<?php wp_head(); ?><!-- wp_headより下に書く -->
	<script type="text/javascript" src="jquery.highlight-5.js"></script><!-- ハイライトのjQueryを読み込む -->
	<script type="text/javascript">
		function doHighlight() {
			var word = jQuery("#word").val(); //#wordの文字を探す
			jQuery("#target").highlight(word); //#target内の文字をハイライトする
		}
	</script>
</head>

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

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

<head>
	<?php wp_head(); ?><!-- wp_headより下に書く -->
	<script type="text/javascript" src="jquery.highlight-5.js"></script><!-- ハイライトのjQueryを読み込む -->
	<script type="text/javascript">
		function doHighlight() {
			var word = jQuery("#word").val(); //#wordの文字を探す
			jQuery("#target").highlight(word); //#target内の文字をハイライトする
		}
	</script>
	<script>
		jQuery(function() {
			jQuery(".btn_sample").click(function () { //.btn_sampleをクリックしたとき
				var p = jQuery('.highlight').offset(); //.highlightの位置を取得
				var ptop = p.top;
				jQuery('html,body').animate({ scrollTop: ptop }, 'fast'); //取得した位置にスクロール
				return false;
			});
		});
	</script>
</head>

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

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

<head>
	<?php wp_head(); ?><!-- wp_headより下に書く -->
	<script type="text/javascript" src="jquery.highlight-5.js"></script><!-- ハイライトのjQueryを読み込む -->
	<script type="text/javascript">
		function doHighlight() {
			var word = jQuery("#word").val(); //#wordの文字を探す
			jQuery("#target").highlight(word); //#target内の文字をハイライトする
		}
	</script>
	<script>
		jQuery(function() {
			jQuery(".btn_sample").click(function () { //.btn_sampleをクリックしたとき
				var p = jQuery('.highlight').offset(); //.highlightの位置を取得
				var ptop = p.top;
				jQuery('html,body').animate({ scrollTop: ptop }, 'fast'); //取得した位置にスクロール
				return false;
			});
		});
	</script>
	<script>
		jQuery(function(){
			jQuery(".btn_remove").click(function(){ //.btn_removeをクリックした時
				jQuery("#target").removeHighlight(); //ハイライト削除
				jQuery("#word").val(""); //#wordを空欄に
			});
		})
	</script>
</head>

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

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

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

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

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

    1. wpではなく0から自分で組んだphpベースのサイトになります!

    1. コメントありがとうございます!
      エラーをみますと、Failed….404ということで、highlight.jsのファイルの読み込みにまず失敗してるように見えるのですが、パスはいかがでしょうか。。?

コメントを残す

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

CAPTCHA


top