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

Niedawno jeden z naszych czytelników zapytał, czy moglibyśmy napisać poradnik, jak dodać pełnoekranowe wyszukiwanie nakładkowe w WordPress. Prawdopodobnie widzieliście to na popularnych stronach, takich jak Wired. Kiedy użytkownik klika ikonę wyszukiwania, pole wyszukiwania otwiera się i pokrywa cały ekran, co może poprawić wrażenia użytkownika na urządzeniach mobilnych. W tym artykule pokażemy, jak dodać pełnoekranowe wyszukiwanie nakładkowe w WordPress.

Wyszukiwanie na pełnym ekranie 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ę na pełnym ekranie, ułatwiasz użytkownikom pisanie i wyszukiwanie na Twojej stronie internetowej.

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

Po napisaniu samouczka zdaliśmy sobie sprawę, że jest to zbyt skomplikowany proces i powinien raczej zostać opakowany w prostą wtyczkę.

Aby ułatwić sprawę, przygotowaliśmy samouczek wideo na temat dodawania nakładki wyszukiwania na pełnym ekranie, który możesz obejrzeć poniżej.

Jeśli jednak chcesz tylko postępować zgodnie z instrukcjami tekstowymi, możesz skorzystać z naszego samouczka krok po kroku, jak dodać nakładkę wyszukiwania na pełnym ekranie w WordPress.

Dodawanie nakładki wyszukiwania na pełnym ekranie w WordPressie

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę WordPress Full Screen Search Overlay. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.

Wtyczka WordPress Full Screen Overlay Search działa od razu po zainstalowaniu i nie wymaga żadnej konfiguracji.

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

Należy pamiętać, że wtyczka działa z domyślną funkcją wyszukiwania WordPress. Świetnie współpracuje również z SearchWP, która jest wtyczką premium, znacznie poprawiającą domyślne wyszukiwanie w WordPressie.

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

Dostosowywanie nakładki pełnoekranowego wyszukiwania

Wtyczka WordPress Full Screen Search Overlay zawiera 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ę ze swoją stroną internetową za pomocą klienta FTP. Jeśli dopiero zaczynasz korzystać z FTP, zapoznaj się z naszym przewodnikiem na temat jak przesyłać pliki do WordPressa za pomocą FTP.

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

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

W folderze css znajdziesz plik full-screen-search.css. Musisz pobrać ten plik na swój komputer.

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

/**
* 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 czcionki w linii 150. Jeśli dobrze znasz CSS, śmiało zmieniaj również inne reguły stylu.

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

Ważna uwaga:

Jeśli używasz tego we własnym motywie, lepiej użyć tagów !important, aby aktualizacje wtyczki nie nadpisały żadnych zmian.

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

Stworzyliśmy ten wtyczkę tylko dlatego, że 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ć nakładkę wyszukiwania na pełnym ekranie do Twojej witryny WordPress. Możesz również zapoznać się z naszym przewodnikiem jak dodać efekt przełączania wyszukiwania w WordPress

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.