Sådan tilføjes en overlejring i fuld skærm i WordPress

For nylig spurgte en af ​​vores læsere, om vi kunne skrive en vejledning om, hvordan man tilføjer et overlejring i fuld skærm i WordPress. Du har sikkert set dette på populære websteder som Wired. Når en bruger klikker på søgeikonet, åbnes søgefeltet og dækker hele skærmen, som kan forbedre brugeroplevelsen på mobilenheder. I denne artikel vil vi vise dig, hvordan du tilføjer en overlejring i fuld skærm i WordPress.

Tilføjelse af en fuld skærm søgning i WordPress

Den fulde skærmsøgning bliver langsomt en trend, fordi den forbedrer søgeoplevelsen for mobilbrugere drastisk. Da mobilskærme er meget små, ved at tilbyde en fuld skærmoverlay gør du det nemt for brugerne at skrive og søge på din hjemmeside.

Da vi først fik denne vejledning anmodning, vidste vi det ville kræve nogle kode. Vores mål på WPBeginner er at gøre tingene så enkle som muligt.

Når vi var færdige med at skrive vejledningen, indså vi, at det var for kompliceret af en proces, og det skal snarere indpakkes i et enkelt plugin.

Tilføjelse af fuldskærmsøgning i WordPress

Første ting du skal gøre er at installere og aktivere WordPress Full Screen Search Overlay plugin. For flere detaljer, se vores trinvise vejledning om Sådan installeres et WordPress-plugin.

WordPress Full Screen Overlay Søg plugin virker ud af boksen, og der er ingen indstillinger for dig at konfigurere.

Du kan simpelthen besøge dit websted og klikke på søgefeltet for at se plugin'en i aktion.

Fuld skærm søgning

Bemærk venligst, at plugin'et fungerer med standard WordPress-søgefunktionen. Det virker også godt sammen med SearchWP, hvilket er en præmie plugin, der meget forbedrer standard WordPress-søgning.

Desværre virker dette plugin ikke Google Custom Search.

Tilpasning af overlejring i fuld skærm

WordPress Full Screen Search Overlay-plugin leveres med sit eget stylesheet. For at ændre udseendet af søgeoverlejningen, skal du redigere pluginets CSS-fil eller bruge! Vigtigt i CSS.

Først skal du oprette forbindelse til dit websted ved hjælp af en FTP-klient. Hvis du er ny til at bruge FTP, så kig på vores vejledning på hvordan man uploade filer til WordPress ved hjælp af FTP.

Når du er tilsluttet, skal du finde pluginets CSS-mappe. Du finder den under følgende vej:

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

Du finder en fil fuld skærm-search.css inde css mappe. Du skal downloade denne fil til din computer.

Åbn filen, du er lige hentet i et almindeligt tekstredigeringsprogram som Notesblok. Du kan foretage ændringer i denne fil. Vi ønskede for eksempel at ændre baggrunds- og skrifttypens farve til at matche vores demo-hjemmeside.

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

I denne kode har vi kun ændret baggrundsfarve på linje 62, og tilføjet skrifttypefarve på linje 150. Hvis du er god med CSS, så er du velkommen til at ændre andre stilregler også.

Når du er færdig, kan du uploade denne fil tilbage til plugins CSS-mappe ved hjælp af FTP. Du kan nu se dine ændringer ved at besøge dit websted.

Et WordPress-websted med overlejring i fuld skærm

Vigtigt:

Hvis du bruger dette i dit eget tema, så er det bedre at bruge! Vigtige tags, så plugin-opdateringerne ikke tilsidesætter nogen ændringer.

For udviklere og konsulenter kan du også omdøbe plugin'et og bundle det som en del af dit tema eller tjenester.

Vi har kun oprettet dette plugin, fordi alle andre måder at skrive denne tutorial på, ville have været for komplicerede for nybegyndere.

Vi håber, at denne artikel har hjulpet dig med at tilføje overlejring på fuld skærm til dit WordPress-websted. Du kan også se vores vejledning på hvordan man tilføjer en søgevirkningseffekt i WordPress

Giv en kommentar

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.