みなさんやりますよね、ページ内検索。
ブラウザでもエクセルでもなんでも、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
top
上記の記述にした際、「jquery.highlight-5.js」はWordPress内のどのディレクトリへ格納すれば良いのでしょうか？
素人の質問で申し訳ありませんが、教えて頂ければ幸いです。
コメントありがとうございます！
＜script type=”text/javascript” src=”jquery.highlight-5.js”＞＜/script＞
と書いてますが、これだとリンクされないですね、、すみません。
ご利用のテーマ内に保存されればよいと思います。テーマ内にjsというディレクトリがあるのでしたらその中に入れて、読込パスは下記のとおりです。
src=”/js/jquery.highlight-5.js”
全角半角わかりづらいフォントですみません。。
https://gyazo.com/9c427aa98b963f2e957f26c59991aa4c
このようなエラーが出てjqueryが動かないのですが、何かアドバイスいただけますと幸いです！一日中色々直してます…!
wpではなく０から自分で組んだphpベースのサイトになります！
https://gyazo.com/f7bba0afe42b54b12f76a7768c231a2c
subback.htmlの内の該当箇所です。
コメントありがとうございます！
エラーをみますと、Failed….404ということで、highlight.jsのファイルの読み込みにまず失敗してるように見えるのですが、パスはいかがでしょうか。。？