【コピペでOK】ページ内検索ボックスを設置する方法【装飾変更可】

2024-06-15

当サイトのコンテンツは広告が含まれる事があります。

こまったくん

読んだ本をまとめた記事を書いたんだけど、1ページにまとめたので欲しい情報を探すのが大変な気がするんだよね。ブラウザのページ内検索をすればいいんだけど、知らない人もいるかも知れないし、何か良い方法はないかな。。

Jシスレッド

ページ内検索できるボックスを設置してみたらどうかな？

このページで解決すること・出来ること

コピペだけでページ内検索できるボックスを独自に設置できるようになる。

例えば、ブログやメディア運営している方の中にはユーザに「ページ内検索」をして貰いたい、もしくは「ページ内検索」した方がユーザー体験が良くなる為、文章でアナウンスされている方もいらっしゃるのではないでしょうか。

アナウンス内容としては、パソコンやスマホのブラウザに搭載されている「ページ内検索」機能の利用を促す形になっていると思います。

今から紹介するコードを使って検索ボックスを記事内に設置すれば、あえてアナウンスをしなくても、検索ボックスよりページ内検索出来るようになります。

ちなみに、このメディアではパソコン分解ナビで、同様の検索ボックスを利用しています。

では、早速ご紹介します。

投稿ページに個別のCSS/JSの入力欄がある場合

投稿ページに標準で個別のCSS,JSの入力欄があるテーマの場合は、HTML、CSS、JavaScriptのコードをWordPressのそれぞれ指定の場所に入力しましょう。
プラグインで同様の機能を追加している場合でも問題ないです。

ちなみに個別の入力欄は投稿ページの下部にある場合が多いと思います。

HTMLコードを挿入

このコードは検索ボックスをページ内に表示する為のHTMLコードです。

HTMLは「カスタムHTML」を使って、任意の場所の入力しましょう。
基本的にはページの上部に設置で良いかと思います。

<div class = "sbox"> 
<div class = "sbox-inner"> 
<input type="text" id="searchbox" placeholder="検索キーワードを入力">
<button id="searchbutton">検索</button>
</div>
</div>

CSSコードを挿入

このコードはページ内検索ボックスに装飾を加えるCSSコードです。

CSSは投稿ページ下部にある「CSS用コード（もしくはそれに準ずる項目）」に入力しましょう。

.sbox {
border: 3px solid #CCCCCC;
    padding: 10px 10px;
}

.sbox-inner {
    display: flex;
}

.sbox-inner input#searchbox {
    flex: auto;
}

JSコードを挿入

このコードはページ内検索ボックスの機能を提供するJavaScriptのコードです。

JavaScript(JS)は投稿ページ下部にある「JS用コード（もしくはそれに準ずる項目）」に入力しましょう。

document.getElementById('searchbutton').addEventListener('click', function() {
    var input = document.getElementById('searchbox').value.toLowerCase();
    if (!input) return; // 空の入力を無視します。

    var elements = document.querySelectorAll('p, td, th, h3'); // 検索対象の要素を選択します
    var found = false; // マッチした要素が見つかったかどうかのフラグ

    elements.forEach(element => {
        if (element.querySelector("span.search-highlight")) {
            element.innerHTML = element.textContent; // 以前の検索結果をリセット
        }

        var text = element.textContent.toLowerCase();
        var index = text.indexOf(input);

        if (index >= 0 && !found) {
            found = true;
            element.scrollIntoView({ behavior: 'smooth', block: 'center' }); // 要素を画面の中央にスクロールします
        }

        const regex = new RegExp(`(${input})`, 'gi');
        element.innerHTML = element.innerHTML.replace(regex, '<span style="background-color: #ffe46f;">$1</span>'); // ハイライトを適用します
    });
});

投稿ページに個別のCSS/JSの入力欄がない場合

「カスタムHTML」でコードをまとめて挿入する

個別のCSS/JSの入力欄がない場合は、検索ボックスを設置したい場所に「カスタムHTML」で下記コードを挿入しましょう。

<div class = "sbox"> 
<div class = "sbox-inner"> 
<input type="text" id="searchbox" placeholder="検索キーワードを入力">
<button id="searchbutton">検索</button>
</div>
</div>

<style>
.sbox {
border: 3px solid #CCCCCC;
    padding: 10px 10px;
}

.sbox-inner {
    display: flex;
}
.sbox-inner input#searchbox {
    flex: auto;
}
</style>

<script>
document.getElementById('searchbutton').addEventListener('click', function() {
    var input = document.getElementById('searchbox').value.toLowerCase();
    if (!input) return; // 空の入力を無視します。

    var elements = document.querySelectorAll('p, td, th, h3'); // 検索対象の要素を選択します
    var found = false; // マッチした要素が見つかったかどうかのフラグ

    elements.forEach(element => {
        if (element.querySelector("span.search-highlight")) {
            element.innerHTML = element.textContent; // 以前の検索結果をリセット
        }

        var text = element.textContent.toLowerCase();
        var index = text.indexOf(input);

        if (index >= 0 && !found) {
            found = true;
            element.scrollIntoView({ behavior: 'smooth', block: 'center' }); // 要素を画面の中央にスクロールします
        }

        const regex = new RegExp(`(${input})`, 'gi');
        element.innerHTML = element.innerHTML.replace(regex, '<span style="background-color: #ffe46f;">$1</span>'); // ハイライトを適用します
    });
});
</script>

カスタムHTMLを使って、コードをまとめて挿入 — 画像をタップ/クリックで拡大

検索ボックスの装飾を変更する方法

検索ボックス外枠線の太さや色を変更する

.sboxの「border: 3px solid #CCCCCC;」を変更しましょう。

border: 3px solid #CCCCCC;

検索ボックス内側の範囲を変更する

.sboxの「padding: 10px 10px;」を変更しましょう。

padding: 10px 10px;

検索キーワードのハイライトの色を変更する

[// ハイライトを適用します]というコメントが有る行の「background-color: #ffe46f;"」を変更しましょう。

        element.innerHTML = element.innerHTML.replace(regex, '<span style="background-color: #ffe46f;">$1</span>'); // ハイライトを適用します

注意点

他のCSSやJavaScriptと干渉する場合があります。
コード利用に伴い生じたいかなる問題に関しても、当サイトは責任を負いかねますので、ご注意ください。

あとがき

カスタム投稿を作るまでもないが、1ページをデータベース的に利用している場合などに活用できると思いますので、よければご活用ください。