Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで全画面検索オーバーレイを追加する方法

最近、ある読者から、WordPressでフルスクリーン検索オーバーレイを追加する方法についてチュートリアルを書けないかという問い合わせがあった。おそらくWiredのような人気サイトで見たことがあるだろう。ユーザーが検索アイコンをクリックすると、検索ボックスが開いて画面全体を覆い、モバイル端末でのユーザー体験を向上させることができます。この投稿では、WordPressで全画面検索オーバーレイを追加する方法を紹介する。

Adding a full screen search in WordPress

フルスクリーン検索は、モバイルユーザーの検索体験を劇的に向上させるため、徐々にトレンドになりつつある。モバイルの画面は非常に小さいので、フルスクリーンオーバーレイを提供することで、ユーザーがサイト上で入力したり検索したりしやすくなります。

最初にこのチュートリアルの依頼を受けたとき、いくつかのコードが必須であることはわかっていました。WPBeginnerの目標は、できるだけシンプルにすることです。

チュートリアルを書き終えた後、私たちはそれがあまりにも複雑なプロセスであり、むしろシンプルなプラグインに包まれるべきであると気づきました。

簡単にできるように、全画面検索オーバーレイを追加する方法の動画チュートリアルを作成しましたので、以下でご覧ください。

Subscribe to WPBeginner

しかし、もしあなたがテキストの指示に従いたいだけなら、WordPressでフルスクリーン検索オーバーレイを追加する方法のステップバイステップのチュートリアルに従うことができます。

WordPressでフルスクリーン検索オーバーレイを追加する

まず最初にWordPress Full Screen Search Overlayプラグインをインストールして有効化します。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

WordPressフルスクリーンオーバーレイ検索プラグインは、箱から出してすぐに動作し、あなたが設定するための設定はありません。

あなたは、単にあなたのサイトにアクセスし、アクションでプラグインを表示するには、検索ボックスをクリックすることができます.

Full screen search

プラグインはWordPressの初期設定の検索機能で動作することにご注意ください。また、初期設定のWordPress検索を大幅に改善するプレミアムプラグインであるSearchWPとの相性も抜群です。

残念ながら, このプラグインは、Googleカスタム検索では動作しません.

フルスクリーン検索オーバーレイのカスタマイズ

WordPressのFull Screen Search Overlayプラグインには独自のスタイルシートが付属しています。検索オーバーレイの外観を変更するには、プラグインの CSS ファイルを編集するか、CSS で !important を使用する必要があります。

まず、FTPクライアントを使用してサイトに接続する必要があります。FTPを使用するのが初めての場合は、FTPを使用してWordPressにファイルをアップロードする方法のガイドをご覧ください。

接続が完了したら、プラグインのCSSフォルダーを探します。以下のパスにあります:

yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/の下にあります。

cssフォルダー内にfull-screen-search.cssファイルがあります。このファイルをコンピューターにダウンロードしてください。

ダウンロードしたファイルをメモ帳のようなテキストエディターで開いてください。このファイルを変更することができます。例えば、背景とフォントの色をデモサイトと一致するように変更したいとします。

[cbk1]

このコードでは、62行目で背景色を変更し、150行目で文字色を追加しただけです。CSSが得意なら、他のスタイルルールも自由に変更してください。

作業が終わったら、このファイルをプラグインのCSSフォルダーにFTPでアップロードしてください。これで、あなたのサイトにアクセスすることで、変更内容を確認することができます。

A WordPress site with Full screen search overlay

重要な注意

自分のテーマでこのプラグインを使用する場合は、プラグインの更新によって変更が上書きされないように、!importantタグを使用する方がよい。

開発者やコンサルタントの方は、プラグインの名前を変更して、テーマやサービスの一部としてバンドルすることもできます。

このプラグインを作成したのは、このチュートリアルを書く他の方法がすべて初心者ユーザーには複雑すぎたからです。

この投稿があなたのWordPressサイトにフルスクリーン検索オーバーレイを追加する手助けになれば幸いです。WordPressで検索トグル効果を追加する方法についてのガイドもご覧ください。

この投稿が気に入った場合は、WordPressの動画チュートリアルをYouTubeチャンネルに登録してください。Twitterや Facebookでも私たちを見つけることができます。

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

21件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Carl

    Will this plugin in the Wordpress Repository be updated to work with the latest version of Wordpress? also, I am using the Divi theme from elegant Themes, and this does not seem to work at all. Nothing happens when clicking on the search button

  3. Jasper

    Hi There,
    Does this plugin work with woo commerce? I need a full screen search function that just searches my site for woo commerce products.
    Any help would be much appreciated!!

  4. Sameer Choudhary

    I want to make a submit button below search box , when a full screen overlay search appears. I have tried adding normal input button and button tags as well in the full-screen-search.php, but it doesn’t work. How to accomplish it.

  5. Sameer Choudhary

    I want to add a Submit Button below search box, when the Full Screen Search overlay Appears. Please help me

  6. Viraj Patel

    Thanks for this amazing post but I am trying to integrate this full screen search with the google custom search just like wpbeginner search. How can I do that?

  7. Waseem Safdar

    There appears a ‘light-colored empty space’ below the footer menu in my website InstaTix.pk , I contacted the theme developer and this is what he replied:

    “This empty space is added by “Full Screen Search Overlay” plugin.

    I tried to test with default WordPress Theme (TwentyTwelve) and I can also see additional empty space on the bottom. :(

    It is better if you can report this specific issue to the plugin developer.”

  8. Oliver Drummond

    Great Plugin! Any chance of adding an option for using “Esc” key to close the search?

    Thanks

  9. Oliver Drummond

    Great post and very good plugin! Thank you!!
    Is it possible to add a functionality that makes the fullscreen search box closes when we press the “Esc” key?

    Thank you!

  10. Michael

    Hello, does anyone know how I can overlay a website on my own webpage. I am searching for a plugin but have found none. I would like to overlay a client website on my own when he rents a page on my site. So when the page is visited they see the client website not my original content. Thanks

  11. John Ullyatt

    This is awesome. Very straightforward. How can I make the overlay only a percentage of the screen, rather than the whole thing?

  12. Axel B

    Hello,
    I’d like to add a search engine on the help pages of my WP, which are accessible for members only. Can you tell me how to make a restriction for the search engine to the help pages, and not for the whole website please? :)

  13. Patricia Reszetylo

    Now all we need is a “child theme” plugin that works with plugins rather than themes….

  14. Jhon

    Nice Post. I am just searching this from the last some time.

  15. Anselm Urban

    Looks great! The only problem I have is that a margin appears below the footer.

    • Jason

      I’ve got the same problem. Did you ever find a fix?

      • Stu

        Same here! Any update by chance?

    • Amben Gran

      Same problem here. Margin appears below the footer. Any update?

      • Viraj Patel

        you can solve it by some major change in plugin css. I have solved it

        • Devin

          Ok, so… Care to share?

  16. Jekesh Kumar Oad

    sir i want to know that how we can make the different posts with the same url and different catagory . ex
    example . com / games / gta
    example . com / computer / gta

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。