人們為什麼首先使用網站搜索表單?這是因為他們正在尋找通過瀏覽網站或使用導航無法獲得的直接相關結果。
有時,這些搜索結果會提供其問題的答案(例如有關公司退貨政策的信息)或匹配的產品或內容列表(例如與頁面構建器插件相關的博客文章)。無論他們要尋找什麼,都可以肯定地說一件事:
訪問者希望您的WordPress搜索表單能夠快速,準確地提供結果。
只需移至Kinsta,即可將WordPress網站的速度提高200%。
今天免費遷移
當您從整體上看消費者的行為時,這是有道理的。 Google設定了幾乎不可能的在線搜索標準。根據SparkToro的調查結果,Google中超過一半的搜索為零點擊。基本上,Google使搜索變得如此高效,人們通常不需要訪問網站即可獲得問題的答案。
當然,您的網站訪問者不是在使用內部搜索期望或希望獲得零點擊結果。他們使用搜索來查找網站的其他部分以進行探索。但是,您的WordPress搜索和Google搜索的共同點是:消費者希望他們倆都能提供快速,便捷和高度相關的結果。
只有一個問題:WordPress的本機搜索功能不是很好。
因此,在本指南中,我們將探索您需要了解的所有信息,以為訪問者優化WordPress搜索體驗:
內部搜索到底有多重要?
如果您以正確的方式設計網站,訪問者自然會遵循您擺在他們面前的途徑。井井有條的菜單也有幫助。
也就是說,內部搜索在其中起著重要作用。
將WordPress搜索視為您網站的快速通行證。當您的搜索功能執行應有的方式時,它可以在幾秒鐘內將訪問者從步驟1帶到步驟5。
這對於內容豐富的WordPress網站尤其有用。這裡有些例子:
電子商務
Nordic Ware之類的在線商店可以幫助訪問者從主頁訪問:
只需使用網站右上角的搜索欄,即可縮小產品列表的範圍:
通過始終顯示商品搜索表單,訪問者無需瀏覽商店的菜單或類別就可以找到要購買的特定商品。
博客,播客和新聞站點
擁有大量內容存儲庫的網站(例如Kinsta)(擁有39頁博客文章(並且正在不斷增長))將受益於搜索欄:
通過在博客的頂部放置特定於博客的搜索表單,讀者可以比滾動39頁更快地找到所需主題。
博客可能很難瀏覽很多內容。由於您想保持博客頁面簡短以保持較高的載入速度,因此增加顯示的帖子數量不是一個好主意。
取而代之的是,搜索欄將幫助您的訪問者更有效地瀏覽與他們當前興趣無關的帖子。
列表網站
搜索是訪問者在匯總列表(例如房地產,旅遊,專業服務等)的網站上進行的首批操作之一,例如Trulia的示例:
搜索元素總是足夠簡單就可以開始。例如,指定位置,人員姓名或職務。但是結果頁始終使用戶能夠根據需要過濾其結果:
知識庫
搜索是幫助中心和Elementor等產品的知識庫的有用組件:
與手動搜索以下類別相比,搜索可以幫助用戶更快地找到問題的答案:
在許多情況下,用戶自己可以輕鬆解決用戶使用SaaS產品所遇到的問題。如果您希望保持實時聊天和服務台支持中不存在易於解決的問題,請使您的知識庫易於搜索。
底線
如果您的網站上有很多東西,請不要以為導航會幫助訪問者瀏覽網站。建立類似快速通行證的搜索體驗,將他們準確地帶到他們需要和想要去的地方。
如何將搜索添加到您的WordPress網站
您可以使用一些選項來實現和啟用網站的基本WordPress搜索:
使用主題將WordPress搜索添加到菜單
取決於您安裝的WordPress主題,您只需單擊幾下就可以將搜索添加到菜單中。在此示例中,我使用的是Astra主題。
首先要做的是進入外觀>自定義:
接下來,轉到標題>主菜單。
在「菜單中的最後一項」下,從下拉菜單中選擇「搜索」。
這會將搜索圖標和欄添加為導航菜單的最後一個元素。
使用其他WordPress主題時,此搜索激活設置可能與主題定製器不在同一個位置。如果有的話,您可以在「標題」設置下找到它。否則,您必須使用以下選項之一手動添加它。
使用WordPress小部件添加搜索
WordPress小部件使您可以將內容添加到內容周圍的元素(如側邊欄和頁腳)中的專用塊中。
您可以使用WordPress小部件創建的一種內容塊是搜索欄。
首先在外觀菜單下找到小部件:
您會在這裡找到所有可用的小部件部分。根據您使用的主題或模板,您可能只會看到補充工具欄或頁腳,或者可能會看到更全面的選擇,例如:
無論如何,現在您需要確定要在搜索欄上顯示的位置。
假設您計劃每天發布新的博客內容,並且知道存檔將迅速增長。因此,在每個博客頁面上都顯示一個搜索欄將是有益的。
滾動到小部件的底部,然後找到一個名為「搜索」的小部件:
您可以通過單擊它並選擇添加它的部分來添加它,如下所示:
或者,您可以將小部件拖放到希望其顯示在其中的節中:
將其放置在所需位置後,為其命名:
保存所做的更改,然後訪問您的站點以確認它看起來像您想要的樣子:
現在您可以看到搜索欄位於博客側欄的頂部,可供讀者使用。
使用WordPress工具將搜索添加到您網站的主要內容
雖然將搜索欄放置在網站上始終顯示的元素中很有用,但您可能也會發現有理由將其包含在頁面的實際內容中。
有幾種方法可以做到這一點:
使用WordPress編輯器
古騰堡(Gutenberg)編輯器無疑使設計更具創意的頁面布局更加容易,而不必依賴HTML或簡碼。
現在,藉助WordPress編輯器,您可以將此類元素添加到頁面中的是搜索小部件:
使用此選項時,您可以更好地控制搜索欄的顯示方式。例如,您可以更改搜索欄的標題,佔位符文本以及按鈕:
您甚至可以使用自定義CSS類更改搜索塊的樣式。
使用頁面構建器插件
對於那些喜歡使用Elementor拖放式頁面構建器插件的人,您也可以使用所選插件訪問搜索小部件。該過程類似於您對Gutenberg所做的操作。
在打開新頁面或帖子並激活Elementor編輯器的情況下,從Elements列表中搜索WordPress搜索小部件:
將「搜索」元素拖到希望其在頁面上顯示的位置。例如,這是一個404頁,可幫助用戶使用搜索欄重新回到正軌:
如您所見,與Gutenberg相比,頁面構建器插件使您可以更好地控制WordPress搜索欄的顯示位置,從而可以在其他內容之上和之中進行分層。
帶有主題
在某些情況下,您可能會發現一個主題和模板,該主題和模板會自動將搜索添加到您的網站內容中。不過,執行此操作的主題類型往往非常專業,例如「住宅房地產」主題:
由於在這樣的列表網站上搜索可能會變得複雜,因此主題開發人員會將功能內置到模板中是有意義的。
預訂網站主題是帶有內置搜索功能的另一個示例,就像旅行預訂主題中的演示一樣:
可以想像,將搜索功能內置到您的WordPress主題和模板中將為您自己構建一些複雜的內容節省很多麻煩。而且,如果主題針對性能進行了優化,那麼它的搜索引擎解決方案也應該是(同樣,無需擔心的一件事情)。
使用代碼添加WordPress搜索
還有一種方法可以在您的網站上添加基本的搜索表單,但這需要您對編碼感到滿意。
為此,請轉到外觀>主題編輯器:
您要做的是使用functions.php主題文件為搜索欄創建一個簡碼:
在文件底部,添加以下代碼段:
add_shortcode('shortcodename','get_search_form');
將「 shortcodename」替換為您自己的搜索表單名稱。確保全部為小寫字母,沒有空格,數字或符號。更新文件後,您可以在網站上開始使用您的簡碼。
這是一個例子:
以將任何常規文本添加到站點的方式添加了簡碼。只需記住將其括在方括弧()中即可。
雖然您將無法在編輯器中看到搜索欄,但是請查看頁面的預覽,然後您會在網站的前端看到它:
儘管這是一個快速的編輯,這對本文的目的是有好處的,但是最佳實踐建議不要編輯主題的代碼,而是創建WordPress子主題。
關於WordPress搜索限制的注意事項
您可以使用很多選項將基本的WordPress搜索功能添加到您的網站。但是夠了嗎?
除非您擁有一個很小的網站,或者想要將搜索限制在博客上,否則它可能不會。讓我解釋。
WordPress的本機搜索表單可瀏覽您的網頁和博客文章中的以下幾種內容:
- 頁面標題
- 段落文字
- 圖片標題
- 圖片標題
- 圖片替代文字
- 檔案名稱
您可以想像,這對您的用戶來說是難以置信的限制。對於初學者來說,如果您需要從網站上其他類型的頁面或內容(例如WooCommerce產品)中檢索結果,則基本搜索表單不會顯示與其匹配的結果。網站的其他元素也是如此:
- 小部件
- 用戶評論
- 分類和標籤
- 圖片庫標題,標題和替代文字
- 自定義欄位
- 和更多
WordPress搜索不僅限於顯示的結果。它的大小也受限制。您的網站越大,資料庫處理結果的難度就越大,將結果提供給訪問者的時間就越長。
那麼,如果您需要比WordPress搜索所允許的功能更強大,更可持續的產品呢?
讓我們看一下改善它的一些方法。
如何改善內部WordPress搜索體驗
如果滿足以下至少一項要求,則應閱讀有關修復WordPress搜索的下一部分:
- 您的網站上有一千多頁的內容或產品。
- 您的數據表明內部搜索很流行,但並沒有帶來任何轉化。
- 您的搜索表單正在採取很多行動,但是您的網路託管伺服器正在努力處理請求(即,載入結果需要花費幾秒鐘的時間)。
- 您希望擴展網站,而不必擔心搜索會在整個過程中使您(和訪問者)失敗。
- 基本搜索並沒有減少它。您需要更高級,更敏捷的功能來處理用戶執行的各種搜索。
準備潛水了嗎?您可以採取以下6項重要措施來改善WordPress搜索:
提示1:創建自定義搜索頁
與其給訪問者一個簡單的搜索欄來幫助他們在您的站點上滑動,不如創建一個自定義搜索頁面?
似乎您的訪客似乎不熟悉搜索,但是可以通過專門的搜索頁面來改善體驗。
要創建自定義頁面,您需要通過FTP或文件管理器對網站進行後端訪問。
進入WordPress資料庫後,將查找以下文件路徑:
/ wp-content / themes /(您的主題名稱)/page.php
page.php是一個文件,用於定義網頁的基本結構。換句話說,它是頁面模板。我們現在要做的是為您的搜索頁面創建一個模板。
重要
注意:如果看到名為search.php的文件,請不要理會它。該文件決定了搜索結果頁面的顯示方式,而不是初始搜索頁面的顯示方式。
複製page.php,並將新文件命名為searchpage.php。然後,打開它進行編輯。
該文件中的大多數代碼都需要替換,因為此處定義了典型的網頁或博客文章。相反,您需要將其剝離回來,使其僅包含搜索頁面上所需的內容。這是我如何構建搜索頁面的示例:
搜索我們的商店
歡迎來到很棒的在線商店!在這裡,您會發現各種各樣的產品,徹底改變您的工作,生活和娛樂方式。
使用下面的搜索表格,使自己朝正確的方向前進。
WordPress Codex提供了有關創建自定義搜索頁面時可以做什麼和不能做什麼的更多指導。但是,如果您喜歡我將要展示的結果,那麼您可能唯一需要更改的是出現在以下內容之間的內容:
和:
保存searchpage.php模板後,請返回WordPress。現在,我們需要創建一個名為「搜索」的頁面。
給頁面命名,然後打開側欄上的「頁面屬性」。您將看到剛剛創建的「搜索頁面」的模板:
選擇搜索模板,然後發布頁面。現在,您將在實時網址(應該為https://yourdomainname.com/search/)上看到該網址。而且,如果您使用了與上面的代碼相似的代碼,則將導致頁面看起來像這樣:
創建並發布此頁面後,您可以根據需要進行操作。您可以將其添加到菜單中或鏈接到其他位置。只要確保鏈接放置在您的訪客容易看到它的地方即可。
提示2:讓您的WordPress搜索不僅限於頁面和帖子
儘管上面的技巧為您提供了一個運行WordPress搜索的新地方,但是它不能解決搜索哪種內容的問題。對我們來說幸運的是,有許多插件可以解決此問題。
使用WP擴展搜索升級基本WordPress搜索
如果您只想能夠瀏覽網站上的更多內容和元數據,那麼WP擴展搜索是一個不錯的選擇。
使用此插件,您的訪客將能夠從以下位置檢索結果:
-
- 帖子
- 頁數
- 媒體文件
- 分類目錄
- 標籤
- 摘錄
- 元數據(如作者姓名)
這是一個輕巧且易於配置的插件,可改善小型企業網站和博客的基本搜索功能。
使用高級Woo搜索升級WooCommerce搜索
如果您有電子商務網站,則可以改用Advanced Woo Search插件。
啟用後,您可以將WooCommerce搜索表單放置在網站上的任何位置。如果您希望它替換已經存在的所有基本WordPress搜索表單,則該插件具有快速的「無縫集成」選項,可以自動將它們替換為您。
您也可以手動將表單添加為小部件或簡碼。由你決定。
該表格將類似於基本的WordPress表格:
此表格與您以前的表格有兩個主要區別。
首先是該表單搜索您的WooCommerce產品內容和元數據,包括標題,SKU,摘錄,類別,標籤和ID。
這是第二個區別:
當您的訪客開始輸入他們的搜索查詢時,將顯示匹配的結果。這就是所謂的「實時」搜索,而且由於插件使用了AJAX,它可以即時發生。
如果這些選項看起來很有希望,但是您正在尋找WordPress搜索表單的更強大或更快速的升級,請繼續閱讀。
提示3:改善WordPress搜索結果的顯示方式
接下來,讓我們討論一下您可以採取哪些措施來改善如何向訪問者顯示搜索結果。
這就是為什麼您不能忽略此提示的原因:
默認情況下,WordPress搜索顯示的結果與此頁面相似。頁面頂部將顯示「搜索結果:(關鍵字)」,然後是每個匹配的頁面或帖子。如果有特色圖片(如上面的牛仔褲),它將完整顯示。
然後摘錄:
這只是一個匹配結果。想像一下,如果有幾個「牛仔」匹配,更不用說數十個或幾百個,那麼進入此搜索結果頁面將有多困難。
要解決此問題,我們將尋找WordPress插件來提供幫助。
通過象牙搜索改善表格的外觀
像上面提到的插件一樣,象牙搜索使您可以選擇從中提取哪種類型的內容和元數據搜索結果。不過,有了這個,您就不必在基本頁面和發布數據或電子商務之間做出選擇。您可以在這裡挑選垃圾:
關於此插件的另一個值得注意的提示是,它使您可以自定義搜索表單以及網站的其餘部分:
您可以控制搜索表單的所有方面:
-
-
- 色彩
- 文本
- 樣式
- 表格動畫
- 裝載機圖片
-
除此之外,您還可以配置諸如實時AJAX搜索之類的功能,並為訪問者帶來實時查看其匹配項的好處:
將此插件視為WordPress搜索的下一步。
自定義Ajax搜索的搜索結果顯示方式
現在,不僅僅是搜索表單的外觀會在訪問者身上留下深刻的印象。您所做的結果顯示也會影響他們的體驗。
藉助Ajax Search Lite和Pro插件,您將為它們帶來更智能,更快捷的搜索體驗,從而為他們帶來驚喜。
以下是一些您可以做什麼的示例:
行為使訪問者的搜索體驗更有效,例如,當他們開始鍵入內容時立即打開搜索表單,並將他們重定向到搜索結果,無論他們按下返回鍵還是放大鏡圖標。
自動完成和建議功能利用Google搜索功能來加快訪問者的搜索速度。
關鍵字突出顯示是另一個有用的功能,可以在匹配結果中突出顯示用戶的關鍵字。這使得更容易發現更相關的結果。
這是一個顯示方式的示例:
該插件還使您能夠指示結果應如何顯示:結果頁面的布局方式和應顯示的元素(例如精選圖片+摘錄+作者姓名)。
此外,您可以告訴搜索引擎從特定位置提取圖像。例如,如果沒有精選圖片,則可以請求將頁面上的第一張圖片用於搜索結果。
您還可以決定如何裁剪每張圖像以及以何種尺寸裁剪。這樣,您可以使搜索結果頁面的大小和外觀更易於管理-隨著網站內容量的增加,這一點變得尤為重要。
還有一件事:該插件不僅可以幫助您使搜索結果看起來更好。它也加快了他們在訪問者面前的顯示速度:
您可以在此插件中進行三種性能優化:
-
-
- 應用自定義AJAX處理程序。
- 禁用圖像裁剪。
- 在頁腳中載入JavaScript。
-
通過配置這三個設置,可以幫助您的Web伺服器不被連續搜索請求所淹沒。
就是說,這只是優化WordPress搜索速度時的冰山一角。繼續閱讀以了解有關Elasticsearch的更多信息。
提示4:加快WordPress搜索
儘管WordPress搜索表單的外觀和搜索功能很重要,但一切發生的速度也是如此。
通過Elasticsearch獲得超快速和複雜的搜索功能
在某些時候,WordPress搜索插件和您的MySQL資料庫將不再適用。當您網站的搜索查詢不斷增加時,確保最佳搜索體驗的唯一方法是使用Elasticsearch。
Elasticsearch是一個開源搜索和分析引擎,以其速度,穩定性和可擴展性而聞名,它只是Elastic堆棧的一部分。當與Logstash(用於數據處理)和Kibana(用於數據可視化和管理)結合使用時,Elasticsearch以前所未有的方式為網站的搜索引擎提供支持:
-
-
- 查詢更多內容類型(如PDF)和元數據
- 模糊匹配以減少「無結果」
- 相關內容建議
- 特定於地理位置的內容推薦
- 多面(多過濾器)搜索
- 更快的查詢處理
- 實時訪問搜索查詢數據
-
儘管Elasticsearch是開源的並且可以免費使用,但是您將需要託管的Elasticsearch託管(這不是免費的)。您可以通過多種方式獲得此信息:
1. ElasticPress + Kinsta
ElasticPress插件使您能夠將Elasticpress搜索功能無縫集成到WordPress網站中:
如果您想在WordPress中使用Elasticsearch的高級索引和快速查詢功能,這是一個不錯的選擇。如果您需要將Elastisearch添加到Kinsta託管的網站上,則應與客戶支持聯繫並請求它,但是您將無法訪問完整堆棧(Elasticsearch + Logstash + Kibana),因為在Kinsta上使用Elasticsearch僅限於將服務與WordPress集成以支持更快的查詢。
要獲得完整的堆棧訪問許可權,您需要使用外部Elasticsearch託管服務。
2.彈性
如果需要,您可以直接使用源代碼:Elastic。您也可以使用多種選擇來部署搜索引擎。
您可以獲得完整的堆棧,並利用其先進的數據處理和管理工具。這是設置和入門過程的一部分:
此外,您可以控制如何優化Elasticsearch伺服器:
根據您的網站將要處理的查詢類型提供建議,這使您可以輕鬆決定如何最好地加快和增強搜索引擎。
如果您想簡化設置,請改用Elastic的站點搜索工具:
然後,您將被帶到該儀錶板,在該站點中,一旦您的站點被索引,您可以:
-
-
- 使用JavaScript代碼段安裝搜索引擎。
- 自定義搜索引擎如何與結果排名,權重和同義詞一起使用。
- 管理可以顯示在搜索結果中的內容。
- 設置轉化跟蹤。
- 配置搜索建議。
- 查看您的搜索查詢數據。
-
它的解決方案不如Elastic Stack強大,但是如果您只是在尋找易於實現和管理的高性能搜索,那麼這是一個不錯的選擇。
3.亞馬遜彈性搜索
亞馬遜擁有自己的Elasticsearch服務也就不足為奇了。如果您已經在使用AWS託管和部署服務,那麼這對您來說是個不錯的選擇。
與上述選項類似,它是一項託管服務,可讓您創建具有複雜查詢功能的快速搜索引擎。
提示5:緩存搜索結果頁面
優化WordPress搜索速度的另一種方法是通過緩存搜索結果。啟用緩存後,您的伺服器將不必一遍又一遍地連續處理相同的查詢。相反,它將檢索並顯示靜態搜索結果頁面,從而為訪問者提供近乎瞬時的結果。
啟用緩存的一種方法是使用WordPress緩存插件。
One of the top-rated plugins, W3 Total Cache, calls attention to the caching of search results pages, so start there if you』re looking for a caching solution that prioritizes the kinds of performance optimizations you need.
Or you might try WP Rocket. Although it doesn』t cache search results pages by default, it』s created the Cache Search Results helper plugin for that exact purpose.
Another way to enable this is by using the Ajax Search Pro plugin mentioned earlier. I』ve already shown you a few ways that the Lite version of the plugin optimizes search performance. The Pro version adds even more optimizations, including image precaching and search phrase caching.
Tip 6: Activate Search Tracking in Google Analytics
Last but not least, remember to activate search tracking in Google Analytics. You』ll find it under Admin > All Web Site Data > View Settings.
To turn on-site search tracking, switch the toggle to 「ON」. This will reveal a new field called 「Query parameter」. This is the element in your URL (and database) that defines a search query and result.
The letter 「s」, in this case, is what defines the search query on the website. If you』re unsure of what your own search parameter is, run a test search and locate the letter or word following the question mark.
If your search allows visitors to select categories and filters, you can enable site search categories, too. You may need to indicate multiple parameters here.
Once you』re done setting up search in Google Analytics, you』ll be able to find all of your data under Behavior > Site Search.
Just like the rest of Google Analytics, this data provides you with a wealth of opportunity to figure out:
-
-
- What』s drawing visitors to your site in the first place.
- Which search terms are queried, but your website has failed to provide an answer or solution for.
- Which content or products get searched the most.
- Which search queries lead to the most conversions.
- Which pages more search queries take place on.
-
Pay close attention to what your visitors are doing with search and you can more effectively shape the rest of the on-site experience for them.
Internal search is normally overlooked but it provides invaluable insights about your users. Learn how to improve and speed up the WordPress search functionality! ??
Click to Tweet
摘要
WordPress search might seem like a simple enough matter — and it is if all you need is a basic search function to help visitors navigate a dozen or so pages.
You can add a simple WordPress search function to a number of areas on your website, like the header, menu, sidebar, footer, and even in-line with your content. There are a number of ways you can add these search elements, too:
-
-
- Your theme』s settings
- A WordPress widget
- A page builder plugin
- A pre-made theme template
- Code
-
Don』t forget: the larger your website is and the more complex your navigation becomes, the more you』re going to need a solution that enhances your WordPress search capabilities to provide a better UX to your visitors. And a better UX, most of the times, results in increased conversions for you.
1 Shares
- 0
- 0
- 1個
- 0
- 0
- 0
- 0
- 0
.essb_links .essb_links_list li a {
margin-top:0px;
}
@media only screen and (min-width: 64em) {
.container–narrow.pb–60,
.knowledgebase .user-content {
職位:相對
}
.widget-share {
position: absolute;
left: -200px;
top: 0px;
height: 100%;
width: 200px;
box-sizing: border-box;
}
.widget-share-aligner {
width: 200px;
padding-right: 62px;
box-sizing: border-box;
}
html(lang="nl") .widget-share-aligner {
width: 210px;
}
.widget-share-inner {
padding-bottom: 62px;
}
.knowledgebase .user-content .widget-share-inner {
padding-top: 0;
}
.widget-share .amount {
顯示:flex;
align-items: center;
justify-content: flex-end;
width: 100%;
margin-right:11px;
font-size: 14px;
font-weight:500;
margin-bottom:10px;
}
.widget-share .amount svg {
margin-right:8px;
margin-left:10px;
}
.essb_links .essb_links_list {
flex-direction: column;
align-items: flex-end;
}
.essb_links .essb_links_list li {
display: block;
margin-bottom:5px !important;
}
.widget-share__total {
margin-bottom:0px !important;
}
.widget-share__total .heading–small {
color: #999999;
font-size:14px;
font-weight: 300;
}
.essb-total-value {
margin-right:4px;
}
}
.essb_links {
margin:0px;
padding:0px;
}
.essb_counter_right {
display:none !important;
}
.essb_links.essb_template_circles-retina .essb_link_hackernews a,
.essb_links.essb_template_circles-retina .essb_link_reddit a,
.essb_links.essb_template_circles-retina .essb_link_mail a,
.essb_links.essb_template_circles-retina .essb_link_mwp a,
.essb_links.essb_template_circles-retina .essb_link_buffer a,
.essb_links.essb_template_circles-retina .essb_link_linkedin a,
.essb_links.essb_template_circles-retina .essb_link_facebook a,
.essb_links.essb_template_circles-retina .essb_link_twitter a
{
color: #43414e !important;
background: #f3f3f6 !important;
}
.essb_links.essb_template_circles-retina li a:focus, .essb_links.essb_template_circles-retina li a:hover {
border-color: #fff !important;
background: #43414e !important;
}
.essb_links.essb_template_circles-retina a {
border-color: #f3f3f6 !important;
background: #f3f3f6;
}
.essb_links .essb_icon:before {
font-size:15px !important;
top:8px;
left:9px;
}
.essb_links .essb_icon {
width:32px;
height:32px;
}
.essb_links.essb_counter_modern_right .essb_counter_right {
background: #f3f3f6 !important;
}
@media only screen and (max-width: 63.999em) {
.widget-share-aligner {
position: relative !important;
top:0!重要;
}
.essb_links .essb_links_list li {
margin-right:8px!important;
}
}