如何在WordPress中添加全屏搜索覆蓋


最近,一位讀者問我們是否可以編寫有關如何在WordPress中添加全屏搜索覆蓋圖的教程。 您可能已經在Wired等熱門網站上看到了這一點。 當用戶單擊搜索圖標時,搜索框將打開並覆蓋整個屏幕,從而可以改善移動設備上的用戶體驗。 在本文中,我們將向您展示如何在WordPress中添加全屏搜索覆蓋。

在WordPress中添加全屏搜索

全屏搜索正逐漸成為一種趨勢,因為它極大地改善了移動用戶的搜索體驗。 由於移動屏幕非常小,通過提供全屏覆蓋,您可以使用戶輕鬆在您的網站上鍵入和搜索。

當我們第一次收到此教程請求時,我們知道它需要一些代碼。 WPBeginner的目標是使事情盡可能簡單。

一旦完成本教程的編寫,我們就意識到該過程太複雜了,應該將其包裝到一個簡單的插件中。

為簡單起見,我們創建了一個視頻教程,介紹如何添加全屏搜索覆蓋圖,您可以在下面觀看。

訂閱WPBeginner

但是,如果您只想按照文本說明進行操作,則可以按照我們的分步教程進行操作,以了解如何在WordPress中添加全屏搜索覆蓋圖。

在WordPress中添加全屏搜索疊加

您需要做的第一件事是安裝並激活WordPress全屏搜索疊加插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

WordPress全屏覆蓋搜索插件可以直接使用,並且沒有可供您配置的設置。

您只需訪問您的網站,然後單擊搜索框即可查看該插件的使用情況。

全屏搜索

請注意,該插件可使用默認的WordPress搜索功能。 它也可以與SearchWP一起使用,SearchWP是一個高級插件,可以大大改善默認的WordPress搜索。

不幸的是,此插件不適用於Google自定義搜索。

自定義全屏搜索覆蓋

WordPress全屏搜索覆蓋插件帶有其自己的樣式表。 為了更改搜索疊加的外觀,您將必須編輯插件的CSS文件或在CSS中使用!important。

首先,您需要使用FTP客戶端連接到您的網站。 如果您不熟悉FTP,請參閱我們的指南,了解如何使用FTP將文件上傳到WordPress。

連接後,您需要找到插件的CSS文件夾。 您可以在以下路徑下找到它:

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

您會找到一個文件 full-screen-search.css 裡面的css文件夾。 您需要將此文件下載到計算機。

打開文件,您剛剛在純文本編輯器(如記事本)中下載了該文件。 您可以對此文件進行任何更改。 例如,我們想更改背景和字體顏色以匹配我們的演示網站。

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

在這段代碼中,我們僅在第62行更改了背景顏色,並在第150行添加了字體顏色。如果您對CSS感到滿意,那麼也可以隨意更改其他樣式規則。

完成後,您可以使用FTP將文件上傳回插件的CSS文件夾。 現在,您可以通過訪問網站來查看更改。

具有全屏搜索覆蓋的WordPress網站

重要的提示:

如果您在自己的主題中使用它,那麼最好使用!important標籤,這樣插件更新不會覆蓋任何更改。

對於開發人員和顧問,您也可以只重命名插件並將其捆綁為主題或服務的一部分。

我們之所以創建此插件,是因為對於初學者來說,編寫本教程的所有其他方式都太複雜了。

我們希望本文能幫助您將全屏搜索疊加層添加到WordPress網站。 您可能還希望查看我們的指南,了解如何在WordPress中添加搜索切換效果

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。