Jak přidat překryvný text na celou obrazovku v aplikaci WordPress

Nedávno se jeden z našich čtenářů zeptal, jestli bychom mohli napsat tutoriál o tom, jak přidat WordPress celovečerní vyhledávací překryv. Pravděpodobně jste to viděli na oblíbených místech, jako je Wired. Když uživatel klikne na ikonu vyhledávání, otevře se vyhledávací pole a pokryje celou obrazovku, což může zlepšit uživatelskou zkušenost v mobilních zařízeních. V tomto článku vám ukážeme, jak přidat WordPress celoplošný vyhledávací překryv.

Přidání vyhledávání na celou obrazovku v aplikaci WordPress

Vyhledávání na celou obrazovku se pomalu stává trendem, protože výrazně zlepšuje zážitek z vyhledávání pro mobilní uživatele. Vzhledem k tomu, že mobilní obrazovky jsou velmi malé, a to tím, že nabízíte překryvnou plochu na celou obrazovku, usnadňuje uživatelům psát a vyhledávat na vašem webu.

Když jsme poprvé dostali tuto žádost, věděli jsme, že to bude vyžadovat nějaký kód. Naším cílem v programu WPBeginner je učinit co nejjednodušší věci.

Jakmile jsme napsali tutoriál, zjistili jsme, že proces je příliš komplikovaný a měl by být spíše zabalen do jednoduchého pluginu.

Přidání překryvu celé obrazovky v aplikaci WordPress

První věc, kterou musíte udělat, je nainstalovat a aktivovat WordPress celoobrazovkové překryvné hledání zapojit. Další podrobnosti naleznete v našem průvodce krok za krokem jak nainstalovat plugin WordPress.

Zásuvný modul WordPress Full Screen Overlay funguje mimo krabici a nejsou k dispozici žádná nastavení, která byste měli konfigurovat.

Můžete jednoduše navštívit vaše webové stránky a kliknout na vyhledávací pole a zobrazit plugin v akci.

Vyhledávání na celou obrazovku

Upozorňujeme, že plugin pracuje s výchozí vyhledávací funkcí WordPress. Také to funguje skvěle SearchWP, což je značně výhodný plugin zlepšuje výchozí vyhledávání ve službě WordPress.

Bohužel tento plugin nefunguje Google Custom Search.

Přizpůsobení překryvu celé obrazovky

Plugin aplikace WordPress na celou obrazovku obsahuje překryvný plugin s vlastním stylem. Chcete-li změnit vzhled vyhledávacího překryvu, budete muset upravit soubor CSS pluginu nebo použít! Důležité v CSS.

Nejprve se budete muset připojit k vašemu webu pomocí FTP klient. Pokud používáte FTP, podívejte se na náš průvodce jak nahrát soubory do WordPress pomocí FTP.

Jakmile jste připojeni, musíte najít složku CSS pluginu. Najdete ji pod následující cestou:

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

Najdete soubor full-screen-search.css uvnitř css složky. Tento soubor musíte stáhnout do počítače.

Otevřete soubor, který jste právě stáhli v editoru prostého textu, jako je Poznámkový blok. Můžete provést jakékoli změny v tomto souboru. Například jsme chtěli změnit barvu pozadí a písma tak, aby odpovídaly demo webové stránce.

/**
* 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; 
}

V tomto kódu jsme změnili pouze barvu pozadí na řádku 62 a přidali jsme barvu písma na řádku 150. Pokud jste s CSSem dobrý, pak můžete také změnit další pravidla stylu.

Až budete hotovi, můžete tento soubor nahrát zpět do složky CSS pluginu pomocí FTP. Změny se nyní zobrazují na webu.

Stránka WordPress s překryvným vyhledáváním na celou obrazovku

Důležitá poznámka:

Používáte-li to ve svém vlastním motivu, je lepší použít důležité značky, takže aktualizace pluginu nebudou přepsat žádné změny.

Pro vývojáře a konzultanty můžete také plugin přejmenovat a sdružovat ho jako součást svého tématu nebo služeb.

Tento plugin jsme vytvořili pouze proto, že všechny ostatní způsoby psaní tohoto tutoriálu by byly pro začátečníky příliš komplikované.

Doufáme, že vám tento článek pomohl přidat překryvný text na celou stránku na WordPress. Můžete také chtít vidět náš průvodce jak přidat efekt přepnutí vyhledávání v aplikaci WordPress

Napsat komentář