Jak dodać pełnoekranową nakładkę wyszukiwania w WordPress

Niedawno jeden z naszych czytelników zapytał, czy moglibyśmy napisać samouczek, Jak dodać nakładkę wyszukiwania pełnoekranowego w WordPress. Prawdopodobnie widziałeś to na popularnych stronach, takich jak Wired. Gdy użytkownik kliknie ikonę wyszukiwania, okno wyszukiwania otwiera się i obejmuje cały ekran, co może poprawić wrażenia użytkownika na urządzeniach mobilnych. W tym artykule pokażemy, jak dodać pełnoekranową nakładkę wyszukiwania w WordPress.

Wyszukiwanie pełnoekranowe powoli staje się trendem, ponieważ drastycznie poprawia wrażenia z wyszukiwania dla użytkowników mobilnych. Ponieważ ekrany mobilne są bardzo małe, oferując nakładkę pełnoekranową, ułatwiasz użytkownikom wpisywanie i wyszukiwanie w witrynie.

Kiedy po raz pierwszy otrzymaliśmy tę prośbę o samouczek, wiedzieliśmy, że będzie to wymagało kodu. Naszym celem w WPBeginner jest uproszczenie rzeczy.

Po zakończeniu pisania samouczka 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 samouczek wideo na temat dodawania pełnoekranowej nakładki wyszukiwania, którą możesz obejrzeć poniżej.

Jeśli jednak chcesz po prostu postępować zgodnie z instrukcjami tekstowymi, możesz postępować zgodnie z naszym samouczkiem krok po kroku, jak dodać pełnoekranową nakładkę wyszukiwania w WordPress.

Dodawanie pełnoekranowej Nakładki wyszukiwania w WordPress

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

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

Możesz po prostu odwiedzić swoją stronę i kliknąć pole wyszukiwania, aby zobaczyć wtyczkę w akcji.

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

Niestety ta wtyczka nie działa z niestandardowym wyszukiwaniem Google.

Dostosowywanie Nakładki Wyszukiwania Pełnoekranowego

Wtyczka WordPress Full Screen Search Overlay zawiera własny arkusz stylów. Aby zmienić wygląd nakładki wyszukiwania, musisz edytować plik CSS wtyczki lub użyć !ważne w CSS.

Najpierw musisz połączyć się ze swoją witryną za pomocą klienta FTP. Jeśli dopiero zaczynasz korzystać z FTP, zapoznaj się z naszym przewodnikiem, jak przesyłać pliki do WordPress za pomocą FTP.

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

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

Znajdziesz plik wyszukiwanie pełnoekranowe.css wewnątrz folderu css. Musisz pobrać ten plik na swój komputer.

Otwórz plik, który właśnie pobrałeś w zwykłym edytorze tekstu, takim jak Notatnik. Możesz wprowadzić wszelkie zmiany w tym pliku. Na przykład chcieliśmy zmienić tło i kolor czcionki, aby pasowały do naszej strony demonstracyjnej.

/**
* Reset
* - Zapobiega motywy i inne wtyczki z stosowania własnych stylów do naszego Wyszukiwania pełnoekranowego
*/
# full-screen-search,
# pełnoekranowy przycisk wyszukiwania,
# pełnoekranowy-przycisk wyszukiwania.Zamknij,
# pełnoekranowy formularz wyszukiwania,
# pełnoekranowy formularz wyszukiwania div,
# full-screen-search form div input,
# full-screen-search form div input.search {
    rodzina czcionek: Arial, sans-serif;
    tło: brak;
    border: 0 none;
    border-radius:0;
    - webkit-border-radius:0;
    - moz-border-radius:0;
    float: brak;
    font-size: 100%;
    wysokość: auto;
    odstęp między literami: normalny;
    styl listy: brak;
    zarys: brak;
    pozycja: statyczna;
    tekst-Dekoracja: Brak;
    text-indent:0;
    text-shadow: brak;
    text-transform: brak;
    szerokość: auto;
    widoczność: widoczny;
    przepełnienie: widoczne;
    margin: 0;
    padding: 0;
    line-height: 1;
    rozmiar pudełka: border-box;
    - WebKit-box-sizing: border-box;
    - moz-box-sizing: border-box;
    - webkit-box-shadow: brak;
    - moz-box-shadow: brak;
    - ms-box-shadow: brak;
    -o-box-shadow: brak;
    box-shadow: brak;
    - WebKit-wygląd: brak;
    Przejście: brak;
    - webkit-transition: brak;
    - moz-Przejście: brak;
    - o-przejście: brak;
    - ms-transition: brak;
}

/**
* Informacje ogólne
*/
# full-screen-search {
    widoczność: Ukryty;
    nieprzezroczystość: 0;
    z-index: 999998;
    top: 0;
    pozostało: 0;
    Szerokość: 100%;
    wysokość: 100%;
    tło: # 1bc69e;

    /**
    * Dodaj kilka przejść CSS3, aby wyświetlić Wyszukiwanie pełnoekranowe
    */
    Przejście: nieprzezroczystość 0,5 s liniowa;
}

/**
* Wyświetl Wyszukiwanie pełnoekranowe po otwarciu
*/
# full-screen-search.open {
    /**
    * Ponieważ używamy widoczności i krycia do obsługi przejścia CSS,
    * definiujemy position: fixed; tutaj, aby wyszukiwanie pełnoekranowe nie blokowało
    * podstawowe elementy HTML, gdy nie są otwarte
    */
    pozycja: stała;
    widoczność: widoczny;
    nieprzezroczystość: 1;
}

/**
* Formularz Wyszukiwania
*/
# full-screen-search form {
    pozycja: względna;
    Szerokość: 100%;
    wysokość: 100%;
}

/**
* Przycisk Zamknij
*/
# pełnoekranowy-przycisk wyszukiwania.close {
    pozycja: absolutna;
    z-index: 999999;
    top: 20px;
    / align = "left" / 20px;
    font-size: 30px;
    font-weight: 300;
    kolor: # 999;
    kursor: wskaźnik;
}

/**
* Formularz Wyszukiwania Div
*/
# full-screen-search form div {
    pozycja: absolutna;
    Szerokość: 50%;
    wysokość: 100px;
    top: 50%;
    pozostało: 50%;
    margin: - 50px 0 0 -25%;
}

/**
* Kolor Wypełnienia Formularza Wyszukiwania
*/
# full-screen-search form div input:: - webkit-input-placeholder { 
    rodzina czcionek: Arial, sans-serif;
    kolor: # ccc;
}
# full-screen-search form div input: - moz-placeholder { 
    rodzina czcionek: Arial, sans-serif;
    kolor: # ccc;
}
# full-screen-search form div input:: - moz-placeholder { 
    rodzina czcionek: Arial, sans-serif;
    kolor: # ccc;
}
# full-screen-search form div input: - ms-input-placeholder { 
    rodzina czcionek: Arial, sans-serif;
    kolor: # ccc;
}

/**
* Formularz Wyszukiwania
*/
# full-screen-search form div input {
    Szerokość: 100%;
    wysokość: 100px;
    background: # eee;
    padding: 20px;
    font-size: 40px;
    line-height: 60px;
    / * Dodaliśmy tutaj własny kolor czcionki */
    kolor: # 50B0A6; 
}

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

Po zakończeniu możesz przesłać ten plik z powrotem do folderu CSS wtyczki za pomocą FTP. Możesz teraz zobaczyć swoje zmiany, odwiedzając swoją witrynę.

Ważna Uwaga:

Jeśli używasz tego we własnym temacie, lepiej użyć !ważne tagi, aby aktualizacje wtyczki nie zastąpiły żadnych zmian.

Dla programistów i konsultantów możesz również po prostu zmienić nazwę wtyczki i połączyć ją w ramach swojego motywu lub usług.

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

Mamy nadzieję, że ten artykuł pomógł Ci dodać pełnoekranową nakładkę wyszukiwania do swojej witryny WordPress. Możesz również zobaczyć nasz przewodnik, Jak dodać efekt przełączania wyszukiwania w WordPress

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.