スライドアウト式の検索トグルは、WordPressサイトをよりクリーンでモダンな外観にすることができます。ヘッダーに完全な検索バーを表示したり、検索を完全に非表示にしたりする代わりに、トグルを使用すると、検索に簡単にアクセスできる状態を保ちながら、レイアウトをすっきりと保つことができます。
このようなデザイン上の選択は、重要な機能を手の届くところに置きながら、視覚的な乱雑さを減らすのに役立ちます。これは、特に小さな画面やミニマリストなレイアウトで役立ちます。
さらに良いことに、WordPressにこの機能を追加するためのシンプルで効率的な方法があります。
このチュートリアルでは、WordPressサイトにスムーズなスライドアウト検索トグル効果を追加する方法を説明します。ブログ、ビジネスサイト、オンラインストアのいずれを運営していても、この小さなアップグレードは、デザインをクリーンで一貫した状態に保ちながら、ユーザビリティを向上させることができます。
WordPressの検索トグル効果とは？
検索トグル効果とは、検索フォームの代わりに検索アイコンを表示できるウェブデザインテクニックです。ユーザーがそれをクリックすると、検索フォームがアニメーションでスライドアウトします。
デフォルトのWordPress検索フォームは見栄えが良くありません。多くのトップWordPressテーマは、すでにデフォルトのフォームを独自のスタイルに置き換えています。
ただし、お使いのテーマがまだ静的でプレーンな検索フォームを使用している場合は、このチュートリアルを使用して、より使いやすくすることができます。
これを踏まえ、WordPressに検索トグルエフェクトを簡単に追加し、サイトをよりインタラクティブにする方法をご紹介します。このガイドで取り上げるすべてのトピックの簡単な概要を以下に示します。
💡 インサイダーのヒント: このチュートリアルではカスタムコードスニペットの追加が含まれていますが、専門家である必要はありません。必要なCSSコードをステップバイステップでコピー＆ペーストする方法をガイドします。
さあ、始めましょう。
WordPress で検索トグル効果を追加する
WordPressで検索トグル効果を追加するには、ウェブサイトに検索フォームブロックまたはウィジェットを配置し、カスタムCSSコードを追加する必要があります。
まず、ウェブサイトに検索フォームがあることを確認しましょう。
ブロックテーマにフルサイト編集で検索フォームを追加する
フルサイト編集機能を備えたWordPressブロックテーマを使用している場合、ウェブサイトに検索フォームを追加する方法は次のとおりです。
WordPressダッシュボードから外観 » エディターにアクセスするだけです。編集画面で、検索フォームを表示したい場所に「検索」ブロックを追加します。
その後、「保存」ボタンをクリックして変更を保存することを忘れないでください。
クラシックWordPressテーマに検索フォームを追加する
フルサイト編集機能のないWordPressテーマでは、サイドバーまたはウィジェット対応エリアに検索ブロックまたはウィジェットを追加できます。
これを行うには、WordPressダッシュボードから外観 » ウィジェットに移動します。次に、検索フォームを表示したいサイドバーに「検索」ブロック/ウィジェットを追加できます。
次に、検索アイコン用の透明な画像を見つけましょう。
このチュートリアルでは、ダーク背景に適しているこの画像を使用します（ご自身のウェブサイトで自由に使用してください）。
検索アイコンを自分で作成する必要がある場合は、50×50ピクセル以下の透明なPNGを使用すると良いでしょう。
次に、アイコンをウェブサイトにアップロードします。メディア » 新規追加に移動し、「ファイルを選択」をクリックして検索アイコン画像をアップロードするだけです。
アップロードしたら、「URLをクリップボードにコピー」ボタンをクリックし、そのURLをメモ帳やテキストエディットのようなプレーンテキストエディタに貼り付けます。
すべてが配置されたので、WordPressウェブサイトにカスタムCSSを追加する必要があります。カスタムCSSを保存するには、最高のコードスニペットプラグインであるWPCodeの使用をお勧めします。
WPCodeを使用すると、WordPressにカスタムコードスニペットを簡単に追加できます。使いやすく、コードはテーマの更新や別のテーマに切り替えても影響を受けません。
一部のパートナーブランドは、カスタムスニペットを追加および管理するためにこれを使用しています。彼らにとっては非常にうまく機能しており、詳細なWPCodeレビューで詳細を確認できます。
💡 プロのヒント: ここではWPCodeの無料版を使用しています。ほとんどのサイトで問題なく動作します。後でカスタムスニペットをたくさん追加することになった場合は、スケジュールされたスニペット、バージョン履歴、およびより高度な制御などの追加機能のためにWPCode Proへのアップグレードを検討してもよいでしょう。
それでは、WPCodeプラグインをインストールして有効化しましょう。
WordPressダッシュボードから、プラグイン » 新規追加に移動します。
次の画面で、検索バーを使用してWPCodeを検索します。
結果で見つけたら、「今すぐインストール」ボタンをクリックし、次に「有効化」をクリックして有効にします。
ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、管理ダッシュボードのCode Snippets » + Add Snippetページにアクセスして、WPCode Snippet Libraryを開きます。
「Add Your Custom Code (New Snippet)」オプションにカーソルを合わせ、表示されたら「+ Add Custom Snippet」ボタンをクリックします。
その後、画面にコードタイプのリストが表示されます。
このチュートリアルでは、「HTMLスニペット」オプションを選択しましょう。これは、ウェブサイトのヘッダーにカスタムCSSをHTMLを使用して読み込むためです。
そこから、このコードスニペットにタイトルを付ける必要があります。
スニペットを識別するのに役立つものであれば何でも構いません。
次に、以下のコードを「コードプレビュー」ボックスに貼り付けることができます。
<style>
.wp-block-search__inside-wrapper .wp-block-search__input {
background-color: transparent;
background-image: url('/url/to/search-icon.png'); /* replace with real icon URL */
background-position: 8px center;
background-repeat: no-repeat;
background-size: 18px 18px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding-left: 34px;
box-sizing: border-box;
transition: width 400ms ease, background-color 400ms ease;
width: 0;
min-width: 0;
overflow: hidden;
}
.wp-block-search__inside-wrapper .wp-block-search__input:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: none;
width: 230px;
}
.wp-block-search__inside-wrapper .wp-block-search__input::placeholder {
opacity: 0;
}
.search-form .search-submit,
.wp-block-search__button {
display: none;
}
</style>
⚠️ 重要: /url/to/search-icon.png を、先ほどコピーした画像URLに置き換えるのを忘れないでください。URLを単一引用符 ‘ ‘ で囲むようにしてください。
その後、「非アクティブ」トグルを「アクティブ」に切り替える必要があります。
次に、「スニペットを保存」ボタンをクリックするのを忘れないでください。
それで終わりです！
WordPressサイトにアクセスすると、検索フォームでトグル効果が実際に機能しているのを確認できます。
検索フォームのトグルエフェクトのトラブルシューティング
上記の方法は、ウィジェットブロックを使用するほとんどの最新のWordPressテーマで機能します。ただし、一部のテーマではこの方法が機能しない場合があります。
WordPressテーマの検索フォームにwp-block-search__inside-wrapper およびwp-block-search__input クラスが含まれていない場合に発生する可能性があります。
その場合、WordPressテーマで使用されているCSSクラスを特定するために、Inspectツールを使用する必要があります。
例えば、以下のスクリーンショットでは、デモテーマが検索フォームにこれらのCSSクラスを使用しています。
最初のコードスニペットが機能しなかった場合は、削除して、代わりに次のコードを試すことができます。
このバージョンでは、上記の例で見つかった特定のCSSクラスを使用しています。ただし、これらはご自身のテーマのクラスに置き換える必要があります。
<style>
.search-wrap input.s {
background-color: transparent;
background-image: url('/url/to/search-icon.png'); /* replace with real icon URL */
background-position: 8px center;
background-repeat: no-repeat;
background-size: 18px 18px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding-left: 34px;
box-sizing: border-box;
transition: width 400ms ease, background-color 400ms ease;
width: 0;
min-width: 0;
overflow: hidden;
}
.search-wrap input.s:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: none;
width: 230px;
}
.search-form .search-submit {
display: none;
}
</style>
⚠️ 重要: background-image: url('/url/to/search-icon.png'); を、アイコンの実際のURLに置き換えるのを忘れないでください。URLを単一引用符 ‘ ‘ で囲むようにしてください。
テストウェブサイトでは、このようになりました。
ボーナスヒント：ウェブサイトに優れたWordPress検索を追加する
トグル効果はWordPressの検索フォームを見た目良くするだけで、ウェブサイトの検索結果の質には影響しません。
WordPressにはデフォルトで非常に基本的な検索機能が搭載されています。この機能はしばしば遅く、不正確で、空白の結果を表示する可能性があります。
ここで、SearchWP、つまり最高のWordPress検索プラグインが登場します。これにより、デフォルトの検索機能を強力な検索エンジンに簡単に置き換えることができます。
そのすべての機能を調査するためにテストを行いました。詳細については、SearchWPの完全なレビューをご覧ください。
SearchWPは検索フォームを自動的に置き換えるため、テーマファイルを編集する必要はありません。ウェブサイトのどこでも一致するものを検索し、検索結果の質を劇的に向上させます。
また、ユーザーがクエリを入力するとすぐに結果を表示するライブ検索拡張機能も付属しています。さらに、完全なeコマースサポートを備えており、オンラインストアでスマートなWooCommerce検索エクスペリエンスを作成できます。
ステップバイステップの説明については、SearchWPでWordPressの検索を改善する方法に関するガイドをご覧ください。
FAQ: WordPressで検索トグルエフェクトを追加する方法
検索トグルがどのように機能するか、またはWordPressサイトでカスタマイズする方法について質問がありますか？ここでは、よくある質問とその明確な回答を紹介します。
検索トグル効果を追加するためにコーディングを知る必要がありますか？
いいえ、それほどではありません。HTMLまたはCSSの基本的な理解があれば役立ちますが、コーディング経験がなくてもこのガイドの手順に従うことができます。
テーマがトグル効果を正しく表示しない場合はどうなりますか？
一部のテーマでは追加の調整が必要な場合があります。トグルが正しく表示されない場合は、ブラウザのインスペクトツールを使用して、テーマのCSSクラスを見つけ、チュートリアルで示されているようにカスタムCSSを調整できます。
この検索トグルはモバイルデバイスでも機能しますか？
はい！トグル効果はレスポンシブであり、デスクトップとモバイルの両方でうまく機能するはずです。さまざまな画面サイズでテストして、すべてがうまく表示されることを確認してください。
検索アイコンには任意の画像を使用できますか？
はい、ただし、サイトの背景に対して際立つ透明なPNGアイコンを使用するのが最善です。シャープに見え、すばやく読み込まれるように、50×50ピクセル未満に保つことをお勧めします。
WordPress検索を改善するためのその他のガイド
この記事でWordPressに検索トグル効果を追加する方法を学べたことを願っています。次に、これらのガイドが役立つかもしれません。
- WordPressでカテゴリ別に検索する方法
- WordPressで多言語検索を追加する方法
- WordPress検索結果にカスタム投稿タイプを含める方法
- WordPress検索結果からページを除外する方法
- WordPressサイトに音声検索機能を追加する方法
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Prad
これ、ありがとうございます。
デフォルトの検索ブロックの UI はかなり見劣りします。この実装は気に入っています。しかし、「ボタンのみ」が選択されている場合、ユーザーが検索アイコンをクリックすると、検索バーが左側に表示され、メニューが押し出され、UI が台無しになります。多くのウェブサイトのように、検索ボタンの下に検索バーが表示されるようにする方法はありますか？そのアプローチの方がはるかにクリーンだと思います。
ありがとう。
WPBeginnerサポート
That can be a little more complex depending on the implementation but we may look into something like that for a possible future update to the article
管理者
デニス・ムトミ
クライアントのウェブサイトでこの効果があります。
この機能を実装する際に考慮すべきことの1つは、モバイルでの体験です。
小さい画面では、展開された検索バーが他の要素と重ならないようにCSSを調整すると有益かもしれません。
イジー・ヴァネック
メインメニューのスペースを節約する方法を探していました。検索ボックスがかなりのスペースを占めていたからです。正直、メニューがかなり長かったので、どうやってスペースを節約すればいいのか思いつきませんでした。そこで、検索ボックスのサイズを小さくすることを試みました。この記事を読んだ後、あなたの解決策を適用したところ、まさに私が探していたものでした。私のウェブサイトでは検索はそれほど頻繁には使われないので、これはメインメニューにスペースを与え、検索ボックスを必要なサイズに縮小するためのエレガントな解決策です。素晴らしい仕事です。
WPBeginnerサポート
お役に立てて嬉しいです！
管理者
ジェームズ・バーンズ
本当にありがとうございます。まさに必要としていた情報が、分かりやすい形式で提示されていました。
WPBeginnerサポート
You’re welcome, glad you found our content helpful
管理者
Osh
こんにちは、
子テーマを使用していますが、これらのコードを親テーマのファイルに追加すべきですか？
試してみましたが、うまくいきません。助けてください！！！
ありがとう
WPBeginnerサポート
子テーマにコードを追加する必要があります
管理者
ベンジャミン・ラトリッジ
これはモバイルのみで実装可能ですか？私のテーマはデスクトップでは素敵なアニメーション検索機能を備えていますが、モバイルではロゴの代わりに検索ボックスを表示/非表示するトグルしかありません。
ベス・テリー
こんにちは。このコードをありがとうございます。検索ボタンを希望の場所に表示させるために位置調整が必要でしたが、モバイル版のみに表示させたかったので、800px以上の画面用のメディアクエリにCSSを追加して、アイコンの代わりに完全な検索フィールドを表示するようにしました。うまく動作しましたが、単にプラグアンドプレイで使いたい人には少し複雑だと思います。
結果はここで確認できます。
疑っているすべての人へ、JavaScriptは絶対に必要ありません。
ベス・テリー
また、HTML4の検索コードが付属しているTwenty Twelveの子テーマを使用していることも付け加えたいと思います。functions.phpにHTML5サポートを追加しても修正されなかったので、あなたが上記で投稿したHTML5検索コードを、検索ボックスを配置したいテーマヘッダーにコピー＆ペーストしました。
Emily G
こんにちは。ウェブサイトにこれを実装しており、画像の代わりにFontAwesomeを使用したいのですが、アイコンが表示されません。何かヒントはありますか？フォントとアイコンのfont-family: FontAwesome;
content: “\f002″; を .search-form input[type=”search”] に追加しています。
ありがとうございます！
ブラッドリー
これを試してください：
font: normal normal normal 1em/1 FontAwesome;
Steve
これが私にもうまくいくことをとても期待していました。テーマの追加CSSエリアにコードを貼り付け（twentytwelvechild）、FTMを使用してテーマフォルダにsearch-icon.pngを追加し、テーマのfunctions.phpファイルにadd_theme_support('html5', array('search-form'));を追加しました。何も変化が見られず、何を見落としたのか疑問に思っています。誰か手がかりを教えてくれることを願っています。ありがとうございます。
Harmandeep Singh
動作しません。
Crowd
どうもありがとうございます、うまくいきました。
検索フィールドを右から左（現在は左から右とは逆に）に表示させる方法はありますか？
マリマー
テキストを右揃えにする
text-align: right;
反対側にスライドします。
トニー・ロペス
ありがとうございます！完璧に動作しました。
ケイト
ええ…思った通り、これは全く機能しません。そもそもJSなしでどう機能するはずなんですか？
ケイト
うーん、これは少し古いですが…本当に JavaScript は必要ないのですか？これはどんな魔法ですか？
WPBeginnerサポート
このテクニックはJSの代わりにCSSを使用します。
管理者
SiRetu
コードをありがとう…これはレスポンシブですか？つまり、モバイルで検索フィールドが完全に表示されるようにしたいのですが、可能ですか？
Panfi
Not working for me and wonder why
Cassy
Genesisでこれを機能させましたが、検索フォームはナビゲーションバーにあり、画面幅が比較的狭いと、検索フォームが下に移動します。
Sohan
うまくいきました！
本当に本当にありがとうございます！
アヌール
これはGenesisでは機能しないと思います
Cassy
Genesisで動作させました。search-icon.pngをgenesis子テーマのimagesフォルダに移動する必要があります。次に、検索フォームをどこに配置したかによって（私の場合はナビゲーションバーにあるため少し異なります）、CSSスタイルを好みに合わせて調整します。動作させるために“.genesis-nav-menu .search input”クラスを修正する必要がありました。
Laura
Cassyさん、.genesis-nav-menu .search input クラスをどのように変更したか、もう少し詳しい情報を教えていただけますか？うまくいかないようです。ありがとうございます！
マリア
こんにちは！Genesis を使用していますが、このエフェクトが機能しません。何か原因についてヒントはありますか？
アヌール
はい、同じ問題です。私はエンタープライズプロテーマのGenesisを使用していますが、機能しません。
Genesisでこれを機能させる解決策を知っている人はいますか？
Roy
これは本当に素晴らしいですね！アイコンを右側に固定したまま、フォームを左側にスライドさせることは可能ですか？どうもうまくいきません！
Joshua Farr
こんにちは – この素晴らしいコードをありがとうございます。現在作業中のクライアントのサイトに、HTML5バージョンを挿入してみました。functions.phpに余分なビットを追加し、すべてのCSSを追加しました。検索アイコンを配置し、サイト上で希望どおりにフォームが表示されるようにしました。望みどおりのトグル効果もすべて機能しますが、テストのために検索したいテキストを入力しても、検索結果を表示するために検索を送信できません。私たちはWooCommerceテーマ「Mystile」を使用しており、デフォルトの検索フォーム（入力すると機能します）がありますが、このページで言及されているフォームの外観と機能の方がはるかに気に入っています。
WooCommerce の検索フォームコードを、上記で提供されたコードと並べて配置しようとしましたが、うまくいきませんでした。
どんなご提案でも大変助かります。
ありがとうございます！
-ジョシュ
WPBeginnerサポート
これには多くの原因が考えられますが、テーマの互換性に関する問題については、弊社でお手伝いすることはできません。
管理者
ラジッシュ・ナイール
それは興味深いですね。私はまだ初心者で、ブログテーマにデフォルトで付属している検索オプション（ポップアップではありませんが、CSSで、JavaScriptではありません）を使用しており、検索バーが表示されます。
しかし、私が正確に探しているのは、ListVerseなどの人気ブログで見られるような、ブログ検索と一緒にGoogle検索を表示する方法です。これを教えてください！
WPBeginnerサポート
WordPressにGoogle検索を追加する方法に関するガイドをご覧ください。
管理者
adolf witzeling
素晴らしいチュートリアルです。クールなので私のサイトに追加します。
alexisnicholson
コードは素晴らしいです。あなたの努力に感謝します。WordPressプロジェクトでぜひ試してみます。
Codingbrains
シャハラール・カーン
デモがあると役立ちます。また、formタグのrole="search"属性の使用、role属性は何に使用されますか？
スーザン・シルバー
これに関する簡単なチュートリアルを探していました。ありがとうございます！Facebookモバイルアプリのようなスライドメニューについても、すでにチュートリアルを作成されましたか？これらのメニューは、デスクトップアプリでも非常に人気が高まっています。
WPBeginnerサポート
実は、WordPressでスライドパネルメニューを追加する方法をチェックしてみてください。WordPressでスライドパネルメニューを追加する方法。
管理者