クリーンでスライドアウトする検索トグルは、WordPressサイトを瞬時に洗練されたモダンなものに見せることができます。ヘッダーに完全な検索バーを表示したり、完全に非表示にしたりする代わりに、トグル効果はデザインをすっきりと保ちながら、検索に簡単にアクセスできるようにします。
この小さなユーザーインターフェイスのディテールが大きな違いを生み、サイトに乱雑さを加えることなく、より洗練されたプロフェッショナルな外観を与えることを確認しました。
一番良いところは？スマートかつ効率的にこれを行う方法があることです。
このチュートリアルでは、WordPressにスムーズなスライドアウト検索トグル効果を追加する方法を正確に説明します。ブログ、ビジネスサイト、オンラインストアのいずれを運営していても、このアップグレードは、シンプルで洗練されたタッチでユーザーエクスペリエンスを向上させるのに役立ちます。🎨
WordPressの検索トグル効果とは？
検索トグル効果は、検索フォームを表示する代わりに検索アイコンを表示できるウェブデザインテクニックです。ユーザーがそれをクリックすると、検索フォームがスライドアウトアニメーションで表示されます。
デフォルトのWordPress検索フォームは見栄えが良くありません。多くのトップWordPressテーマは、すでにデフォルトのフォームを独自のスタイルに置き換えています。
ただし、お使いのテーマがまだ静的でプレーンな検索フォームを使用している場合は、このチュートリアルを使用して、より使いやすくすることができます。
これを踏まえ、WordPressに検索トグルエフェクトを簡単に追加し、サイトをよりインタラクティブにする方法をご紹介します。このガイドで取り上げるすべてのトピックの簡単な概要を以下に示します。
- WordPress で検索トグル効果を追加する
- 検索フォームのトグルエフェクトのトラブルシューティング
- ボーナスヒント：ウェブサイトに優れたWordPress検索を追加する
- FAQ: WordPressで検索トグルエフェクトを追加する方法
- WordPress検索を改善するためのその他のガイド
💡 インサイダーのヒント: このチュートリアルは、HTML/CSSの基本的な理解が必要なため、中級および上級のWordPressユーザーに最適です。
さあ、始めましょう。
WordPress で検索トグル効果を追加する
WordPressで検索トグル効果を追加するには、ウェブサイトに検索フォームブロックまたはウィジェットを配置し、カスタムCSSコードを追加する必要があります。
まず、ウェブサイトに検索フォームがあることを確認しましょう。
ブロックテーマにフルサイト編集で検索フォームを追加する
フルサイト編集機能を備えたWordPressブロックテーマを使用している場合、ウェブサイトに検索フォームを追加する方法は次のとおりです。
WordPressダッシュボードから外観 » エディターにアクセスするだけです。編集画面で、検索フォームを表示したい場所に「検索」ブロックを追加します。
その後、「保存」ボタンをクリックして変更を保存することを忘れないでください。
その他のWordPressテーマで検索フォームを追加する
フルサイト編集機能のないWordPressテーマでは、サイドバーまたはウィジェット対応エリアに検索ブロックまたはウィジェットを追加できます。
これを行うには、WordPress ダッシュボードから 外観 » ウィジェット に移動します。次に、検索フォームを表示したいサイドバーに「検索」ブロック/ウィジェットを追加できます。
次に、検索アイコン用の透明な画像を見つけましょう。
このチュートリアルでは、ダーク背景に適しているこの画像を使用します（ご自身のウェブサイトで自由に使用してください）。
独自の検索アイコンを作成する必要がある場合は、50×50ピクセル以下の透明なPNG画像を作成すると良いでしょう。
次に、アイコンをウェブサイトにアップロードします。メディア » 新規追加に移動し、「ファイルを選択」をクリックして検索アイコン画像をアップロードするだけです。
アップロードしたら、「URLをクリップボードにコピー」ボタンをクリックし、そのURLをメモ帳やテキストエディットのようなプレーンテキストエディタに貼り付けます。
すべてが配置されたので、WordPressウェブサイトにカスタムCSSを追加する必要があります。カスタムCSSを保存するには、最高のコードスニペットプラグインであるWPCodeの使用をお勧めします。
WPCodeを使用すると、WordPressにカスタムコードスニペットを簡単に追加できます。使いやすく、コードはテーマの更新や別のテーマに切り替えても影響を受けません。
一部のパートナーブランドは、カスタムスニペットを追加および管理するためにこれを使用しています。彼らにとっては非常にうまく機能しており、詳細なWPCodeレビューで詳細を確認できます。
それでは、無料のWPCodeプラグインをインストールして有効化しましょう。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、WordPress 管理ダッシュボードの コードスニペット » + スニペットを追加 ページにアクセスしてください。
次の画面で、WPCodeスニペットライブラリが表示されます。
ライブラリの「カスタムコードを追加 (新規スニペット)」オプションにカーソルを合わせ、表示されたら「カスタムスニペットを追加」ボタンをクリックします。
その後、コードタイプのリストが画面に表示されます。このチュートリアルでは「HTMLスニペット」オプションを選択する必要があります。
これは、HTMLを使用してウェブサイトのヘッダーにカスタムCSSを読み込むためです。
そこから、このコードスニペットにタイトルを付ける必要があります。
スニペットを識別するのに役立つものであれば何でも構いません。
次に、以下のコードを「コードプレビュー」ボックスに貼り付けることができます。
<style type="text/css">
.wp-block-search__inside-wrapper
.wp-block-search__input {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.wp-block-search__inside-wrapper
.wp-block-search__input:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
⚠️ 重要: /url/to/search-icon.png を以前にコピーした画像URLに置き換えるのを忘れないでください。
その後、「非アクティブ」トグルを「アクティブ」に切り替える必要があります。
次に、「スニペットを保存」ボタンをクリックするのを忘れないでください。
それで終わりです！
ウェブサイトにアクセスすると、トグルエフェクトが機能している検索フォームが表示されます。
検索フォームのトグルエフェクトのトラブルシューティング
上記の方法は、ウィジェットブロックを使用するほとんどの最新のWordPressテーマで機能します。ただし、一部のテーマではこの方法が機能しない場合があります。
WordPressテーマの検索フォームにwp-block-search__inside-wrapper およびwp-block-search__input クラスが含まれていない場合に発生する可能性があります。
その場合、WordPressテーマで使用されているCSSクラスを特定するために、Inspectツールを使用する必要があります。
例えば、以下のスクリーンショットでは、デモテーマが検索フォームにこれらのCSSクラスを使用しています。
これで、以下のコードを変更し、代わりにこれらのCSSクラスを使用できます。
例を挙げます。
<style type="text/css">
.search-wrap input.s {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.search-wrap input.s:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
テストウェブサイトでは、このようになりました。
ボーナスヒント：ウェブサイトに優れた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で検索可能なデータベースを作成する方法
- 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でスライドパネルメニューを追加する方法。
管理者