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

Jak dodać nakładkę wyszukiwania na pełnym ekranie w WordPress?

Niedawno jeden z naszych czytelników zapytał, czy moglibyśmy napisać poradnik o tym, jak dodać pełnoekranową nakładkę wyszukiwania w WordPress. Prawdopodobnie widziałeś to na popularnych witrynach, takich jak Wired. Kiedy użytkownik kliknie ikonkę wyszukiwania, pole wyszukiwania otwiera się i obejmuje cały ekran, co może poprawić komfort użytkowania na urządzeniach mobilnych. W tym artykule pokażemy, jak dodać pełnoekranową nakładkę wyszukiwania w WordPress.

Adding a full screen search in WordPress

Wyszukiwanie na pełnym ekranie powoli staje się trendem, ponieważ drastycznie poprawia jakość wyszukiwania dla użytkowników mobilnych. Ponieważ ekrany urządzeń mobilnych są bardzo małe, oferując nakładkę pełnoekranową, ułatwiasz użytkownikom wpisywanie i wyszukiwanie w twojej witrynie internetowej.

Kiedy po raz pierwszy otrzymaliśmy prośbę o ten poradnik, wiedzieliśmy, że będzie on wymagał trochę kodu. Naszym celem w WPBeginner jest uczynienie rzeczy tak prostymi, jak to tylko możliwe.

Kiedy skończyliśmy pisać poradnik, zdaliśmy sobie sprawę, że jest to zbyt skomplikowany proces i powinien być raczej zawinięty w prostą wtyczkę.

Aby to ułatwić, stworzyliśmy film instruktażowy, jak dodać nakładkę wyszukiwania na pełnym ekranie, który można obejrzeć poniżej.

Subscribe to WPBeginner

Jeśli jednak chcesz po prostu postępować zgodnie z instrukcjami tekstowymi, możesz skorzystać z naszego poradnika krok po kroku, jak dodać nakładkę wyszukiwania w trybie pełnoekranowym w WordPress.

Dodawanie nakładki wyszukiwania pełnoekranowego w WordPress

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć wtyczkę WordPress Full Screen Search Overlay. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Wtyczka WordPress Full Screen Overlay Search działa po wyjęciu z pudełka i nie ma żadnych ustawień do skonfigurowania.

Możesz po prostu przejść na swoją witrynę internetową i kliknąć pole wyszukiwania, aby zobaczyć wtyczkę w działaniu.

Full screen search

Należy pamiętać, że wtyczka działa z domyślną funkcją wyszukiwania WordPress. Działa również świetnie z SearchWP, która jest wtyczką premium, która znacznie poprawia domyślne wyszukiwanie WordPress.

Niestety, ta wtyczka nie działa z Google Custom Search.

Konfigurator nakładki wyszukiwania pełnoekranowego

Wtyczka WordPress Full Screen Search Overlay posiada własny arkusz stylów. Aby zmienić wygląd nakładki wyszukiwania, będziesz musiał edytować plik CSS wtyczki lub użyć !important w CSS.

Najpierw musisz połączyć się z twoją witryną internetową za pomocą klienta FTP. Jeśli dopiero zaczynasz korzystać z FTP, zapoznaj się z naszym przewodnikiem na temat przesyłania plików do WordPressa za pomocą FTP.

Po nawiązaniu połączenia należy zlokalizować katalog CSS wtyczki. Znajdziesz go pod następującą ścieżką:

yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

W katalogu css znajduje się plik full-screen-search.css. Musisz pobrać ten plik na twój komputer.

Otwórz pobrany plik w zwykłym edytorze tekstu, takim jak Notatnik. Możesz wprowadzić dowolne zmiany w tym pliku. Na przykład, chcieliśmy zmienić tło i kolor pisma, aby pasowały do naszej witryny internetowej.

/**
* Reset
* - Prevents Themes and other Plugins from applying their own styles to our full screen search
*/
#full-screen-search,
#full-screen-search button,
#full-screen-search button.close,
#full-screen-search form,
#full-screen-search form div,
#full-screen-search form div input,
#full-screen-search form div input.search {
    font-family: Arial, sans-serif;
    background:none;
    border:0 none;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    float:none;
    font-size:100%;
    height:auto;
    letter-spacing:normal;
    list-style:none;
    outline:none;
    position:static;
    text-decoration:none;
    text-indent:0;
    text-shadow:none;
    text-transform:none;
    width:auto;
    visibility:visible;
    overflow:visible;
    margin:0;
    padding:0;
    line-height:1;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
    -webkit-appearance:none;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
}

/**
* Background
*/
#full-screen-search {
    visibility: hidden;
    opacity: 0;
    z-index: 999998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1bc69e;

    /**
    * Add some CSS3 transitions for showing the Full Screen Search
    */
    transition: opacity 0.5s linear;
}

/**
* Display Full Screen Search when Open
*/
#full-screen-search.open {
    /**
    * Because we're using visibility and opacity for CSS transition support,
    * we define position: fixed; here so that the Full Screen Search doesn't block
    * the underlying HTML elements when not open
    */
    position: fixed;
    visibility: visible;
    opacity: 1;
}

/**
* Search Form
*/
#full-screen-search form {
    position: relative;
    width: 100%;
    height: 100%;
}

/**
* Close Button
*/
#full-screen-search button.close {
    position: absolute;
    z-index: 999999;
    top: 20px;
    right: 20px;
    font-size: 30px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
}

/**
* Search Form Div
*/
#full-screen-search form div {
    position: absolute;
    width: 50%;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -25%;
}

/**
* Search Form Input Placeholder Color
*/
#full-screen-search form div input::-webkit-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input::-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-ms-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}

/**
* Search Form Input
*/
#full-screen-search form div input {
    width: 100%;
    height: 100px;
    background: #eee;
    padding: 20px;
    font-size: 40px;
    line-height: 60px;
    /* We have added our own font color here */
    color:#50B0A6; 
}

.

W tym kodzie zmieniliśmy tylko kolor tła w linii 62 i dodaliśmy kolor pisma w linii 150. Jeśli jesteś dobry w CSS, możesz również zmienić inne reguły stylu.

Gdy skończysz, możesz przesłać ten plik z powrotem do katalogu CSS wtyczki za pomocą FTP. Teraz możesz zobaczyć swoje zmiany, przechodząc na swoją witrynę internetową.

A WordPress site with Full screen search overlay

Ważna uwaga:

Jeśli używasz tego w twoim własnym motywie, lepiej jest używać tagów !important, aby aktualizacje wtyczki nie zastępowały żadnych zmian.

Deweloperzy i konsultanci mogą również po prostu zmienić nazwę wtyczki i dołączyć ją jako część twojego motywu lub usług.

Stworzyliśmy tę wtyczkę tylko dlatego, że wszystkie inne sposoby napisania tego poradnika byłyby zbyt skomplikowane dla początkujących użytkowników.

Mamy nadzieję, że ten artykuł pomógł ci dodać nakładkę wyszukiwania na pełnym ekranie do twojej witryny WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat dodawania efektu przełączania wyszukiwania wWordPressie

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zobaczyć poradniki dotyczące filmów WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

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.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

20 komentarzyZostaw odpowiedź

  1. 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

  2. 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!!

  3. 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.

  4. Sameer Choudhary

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

  5. 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?

  6. 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.”

  7. Oliver Drummond

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

    Thanks

  8. 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!

  9. 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

  10. John Ullyatt

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

  11. 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? :)

  12. Patricia Reszetylo

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

  13. Jhon

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

  14. 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?

  15. 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

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.