Header Footer Code Manager WordPress外掛介紹

什麼是WordPress網站?

Header Footer Code Manager 簡稱 HFCM,安裝外掛之後在 WordPress後台側欄也會出現 HFCM 的外掛選項,可以在那邊修改您添加在頁眉(header)或頁腳(footer)的程式代碼。

如何安裝外掛呢?先至網站後台,側欄–>外掛–>安裝外掛,在搜尋處搜尋HFCM,就可以找到外掛囉!安裝之後並啟用,即可開始進行設定。

截圖 2022 10 11 下午2.41.20
安裝HFCM外掛

使用HFCM的好處

永遠不必擔心添加代碼無意中破壞您的網站,也可以避免無意中將代碼片段放在錯誤的位置。HFCM 幫您整合了添加代碼的方式,讓您可以以一個外掛擋十個外掛!減少不必要的外掛。在切換或更改主題時永遠不會丟失代碼,更讓您知道網站上正在加載哪些代碼片段,它們顯示的位置以及添加的人是誰

外掛設定列表非常簡單明瞭,這邊會顯示目前您加在網站上的代碼,以及您當初設定的代碼名稱,也有開關可以控制是否運作。

截圖 2022 10 11 下午2.38.26
儀表板 – 所有程式碼片段

如何使用HFCM

目前外掛已有本地化,可以看到中文版,在設定上更方便。

可以點選新增代碼片段(Add New Snippet)修改代碼片段(Edit Snippet)

這邊可以填寫

  • 代碼名稱
  • 代碼類型:HTML、CSS、Javascript
  • 頁面顯示:整個網站、特定的文章或頁面、特定的分類或標籤、最新的文章或短代碼等等
  • 排除的頁面
  • 排除的文章
  • 插入代碼的地方:Header或是Footer
  • 在什麼裝置下顯示:全部的裝置、只有在桌上型電腦顯示、只有在行動裝置顯示
  • 代碼狀態:啟用或停用

在下方的區塊程式碼片段就可以新增代碼。

截圖 2022 10 11 下午2.43.56
HFCM設定

什麼代碼會加在Header?

我們常說的網站埋碼就是加在Header唷!例如常見的Google Analytics的追蹤代碼、臉書的像素代碼、html驗證、驗證meta等等。

<head> 標籤作用上是當作一個容器,裡面包含著不同用途的 HTML tags,而這些 tag 的內容通常不會被顯示在頁面上,僅用來說明關於該網頁的元資訊 (metadata),像是指定網頁的標題,或像是指定該網頁所使用的編碼等。

被包含在 <head> 裡面的標籤有這些:

  • <title> 網頁名稱
  • <meta> 網頁 metadata
  • <style> CSS 樣式
  • <link> CSS 樣式表
  • <script> JavaScript 程式碼
  • <noscript> 網頁不支援 JavaScript 時的處理
  • <base> base URL

什麼代碼會加在Footer?

foot 通常加 js 程式碼,有時埋碼也會加在這裡。

<footer> 標籤 (tag) 用來定義一個頁尾或結尾區塊,常見的 footer 是網頁最下面的頁尾區塊會包含作者、版權、聯絡方式等資訊。

一個網頁中除了可以有主要的網頁頁尾 (page footer) 區塊外,<article>, <section>, <aside>, <nav> 這些 HTML 語意區塊中都可以有自己的 <footer>。

外掛支援服務

  • Google Analytics
  • Google Adsense
  • Google Tag Manager
  • Clicky Web Analytics or 其他分析追蹤代碼
  • Chat modules 像是 Olark, Drip
  • Pinterest 網站驗證
  • Facebook 像素, Facebook 代碼, Facebook og:image 標籤
  • Google Conversion 像素
  • Twitter
  • 任何服務的任何代碼 (HTML / Javascript / CSS)

延伸閱讀:

HTTP 301與302網站轉址的差異及SEO

HTTP 301、302轉址的差異

什麼是 Redirect/Redirection 重定向?

根據維基百科,Redirect 重定向的定義通常指的是「網域名稱轉址」:網域名稱轉址(英語:URL redirection,或稱網址重新導向或URL重定向),是指當使用者瀏覽某個網址時,將他導向到另一個網址的技術。

簡單來說,重定向網址指的就是當你進入 A.com 網址時,它會自動跳轉自 B.com 網址。

我們通常會使用重定向來改變網址連結的路經,通常出自於以下原因:

  • 原始 URL 已不存在
  • 通訊協定的變更:http轉https
  • 原始網站已經刪除
  • 網址從 www 轉成 non-www
  • 在特定期間想要自動跳轉到活動頁面
  • 網站正在進行維護
  • 網站進行 A/B 交叉測試
  • 從舊網站遷移至新網站
  • 更改網站平台時遷移資料

轉址分為多種方式代碼方式,不同的代碼有其對應的意圖,主要分為:

  • 300=Multiple Choices
  • 301=Moved Permanently
  • 302=Found
  • 303=See Other
  • 304=Not Modified
  • 305=Use Proxy
  • 306=(Unused)
  • 307=Temporary Redirect

其中以301、302、307最為常見,301代表永久轉址,對於搜尋引擎判定頁面改變有直接影響,302代表暫時轉址,通常用於頁面暫時修改,之後會在恢復網址時使用。在 SEO 上,將錯誤的302轉址改成301轉址對網站排名有相當作用。

HTTP 301與302
HTTP 301與302轉址 (圖片來源:WP Daddy

什麼時候使用HTTP 301 轉址?

301表示永久性跳轉。如果A頁面已經被搜索引擎收錄了,對此頁設定301,搜尋引擎就知道你已經更換網址成B頁面,下次搜尋引擎再度來訪網站時就會從B頁面索引網站,同時數據庫中會將A頁面刪除,替換成B頁面。 當您有設定301也能較完整的將原本A頁面的網站排名、頁面權重、流量轉移到B頁面上去

什麼時候使用HTTP 302 轉址?

302表示暫時性跳轉,302與301的區別在於,搜索引擎的數據庫不會刪除A頁面,但仍會增加B頁面,只是原先A頁面的權重排名並不會轉移到B頁面,只會轉移流量。但不能濫用 302 ,否則當你使用的時間過長,仍然會傷害你原始網站的 SEO 排名,導致兩個網站的排名都不佳。

舉例,如果你今天想要在某節日建立一個活動頁面,讓進入首頁的使用者能夠先跳轉至活動頁面時,就適合使用 302 轉址。

不使用HTTP 301、302轉址的話?

如果網站管理員修改頁面鏈接,將A頁面改成B頁面,但是沒有在服務器上設置跳轉屬性(IIS、Apache、Websphere等等),那麼雖然對於用戶訪問是沒有影響,但是搜索引擎並不知道,會導致兩個不好的結果:

產生404狀態

搜尋引擎仍然會試圖去訪問原來的A頁面(有兩種可能:1.搜索引擎數據庫還沒有更新,仍然保留著A頁面,因此會去訪問。2.外面有些網站的外部鏈接仍然是A頁面,搜索引擎爬到之後就仍然去訪問A頁面),結果發現是404狀態,由於404表示網站出錯,搜索引擎認為網站沒有做好,因此就會給予網站懲罰,網站的排名就會下降,因為顯示錯誤的網站對於使用者來說是很不好的體驗。

新網頁優化速度很慢

過了一段時間,搜索引擎發現網站多了一個B頁面,並進行收錄,但是由於沒有設置跳轉,因此它認為這是全新的頁面,跟原來的A頁面沒有關系,原來A頁面的權重和排名就不會傳導給B頁面,B頁面就要重新開始排名的計算,一般來說需要2-3個月,假如A頁面原來的排名不錯,那B頁面重新開始計算,就會非常吃虧。

轉址測試工具

資料來源:301、302錯誤頁面對SEO的重要性https://seo.whoops.com.tw/301-302-redirect-seo/

延伸閱讀:你需要知道的HTTP狀態碼

如何安全的更新WordPress外掛、主題、核心?3步驟告訴你

更新
更新
WordPress.org

重大資安問題務必要優先更新

WordPress相關的外掛、主題、核心,若出現重大資安問題時,都會快速做出回應,且馬上推出補丁提供用戶更新,這時候可以先了解一下資安問題詳情,並馬上更新,避免網站受到攻擊或是掛掉。這也是使用WordPress架站的好處,有眾多的WordPress使用者,若發現了問題官方很快就會做出回應及提出補救措施。

若更新的部分屬於無資安問題

有時外掛、主題、核心會不定時更新,不是因為出現資安問題,可能是官方增加了新功能、新的編輯方式或為了與最新的WordPress版本相容,如果您暫時用不到也不用急著更新唷!可以先了解更新內容之後,再看看目前網站用不用得到、需不需要這些功能,再進行更新。有時更新內容改變較大,會需要先了解、熟悉操作方式,都可以先多看看官方說明的文章、或已使用的用戶提供的教學。

在更新前可以觀察版本數字的變化。例如,3.1.4、 3.1.5…(第2位是較大更新,第3位是微幅更新)。若是屬於微幅更新,您不一定要更新;若是較大功能性的更新,則要很小心。

更新時的3步驟

更新WordPress
更新前注意
  1. 更新前要先備份:有備份有保佑!若更新出現問題,可以將網站即時還原到更新前。
  2. 更新前可以先看有無災情:核心、外掛、主題間有無相容性問題、有沒有其他用戶更新出現問題,如果有可能要先觀望一陣子再更新比較好。
  3. 一次更新一個外掛:點選更新,等候更新完成,一次更新一個外掛就好,每更新一次可以測試前、後台瀏覽是否都正常,正常後再繼續更新下一個外掛。

更新完後發現問題怎麼辦

可以將網站還原備份或檢查哪裡出現了相容性問題,如果您的WordPress核心有在更新,那麼外掛就最好要跟著更新,才能保證較高的相容性。

您可以不用一定要更新到最新版,但是至少要不定時更新一下,讓外掛的版本確定能相容您當前的WordPress版本


如果是我們的主機用戶,享有免費無限次備份還原!
如果是我們的安心管理用戶,會協助處理更新及相容性問題!

延伸閱讀:

Elementor (the_content)編輯時頁面中找不到內容區域?

the content

當出現這樣的訊息時,不要緊張,讓我們來一步步看看是哪裡有問題!

什麼是the_content,為什麼 Elementor 需要它?

Elementor the_content 函數是一個 WordPress 函數,它從數據庫中獲取內容並將其打印在螢幕上。鑑於Elementor的內容替換了頁面的內容,如果不調用此功能,則Elementor無法工作。

此錯誤是否僅發生在特定頁面上,而不發生在所有頁面上?

如果是這樣的話,有幾種項是發生這種狀況最常見的原因。

從錯誤的地方進入Elementor後台

你是否正在嘗試編輯 部落格 Archieve 頁面文章單頁…等等?這些都是 Archieve 頁面,只能通過 Elementor 的 Theme Builder 功能進行編輯。

或是你正在試著編輯WooCommerce商品頁面或是WooCommerce商店頁面?

WooCommerce 商店頁面目前無法由 Elementor 直接編輯。但是,我們會使用Elementor創建一個新的商店Archieve頁面來代替默認的商店頁面。因此你可以從該頁面的前台或是後台的Elementor Theme Builder 進入編輯Elementor的地方。

shop front
從前臺進入elementor編輯區
shop back
從後臺進入elementor編輯區


WooCommerce 產品頁面必須使用 Elementor的 WooCommerce Builder 進行編輯。如果你在那裡編輯它而不是進入 WooCommerce,你將不會收到 the_content 錯誤,並且你將能夠將模板分配到你的 WooCommerce 產品頁面。

重複的永久連結(slug)

如果這發生在你嘗試創建的新頁面上,請檢查該頁面的永久連結 slug(設置為“plain”以進行故障排除)。如果你已經在其他地方使用了相同的 slug 名稱,例如文章類別或產品類別,然後將相同的名稱分配給頁面,則永久連結混淆可能會導致發生此錯誤。例如,如果你有一個帶有“sports”字樣的類別,請不要使用“sports”作為你頁面的 slug。將你的新頁面命名為其他名稱,問題將得到解決。

與Elementor不相容的佈景主題

你或主題的開發人員是否為你的主題創建了不包含 the_content 功能的自定義 WordPress 頁面模板?你需要在代碼中包含 the_content 以使用 Elementor 對其進行編輯或切換到不同的主題,這通常可以解決問題。可以嘗試切換到 Twenty SeventeenGeneratePress 之類的佈景主題,看看你的問題是否已解決。

編輯 Elementor Loop Item 時

Elementor 於 2022年11月10日 推出 3.8 新版本,Elementor 3.8 Pro 引入了 Loop Builder 的第一階段。Loop Builder 使您能夠創建和設計用於重複內容(即循環)的主要項目,例如列表,以及自定義其在頁面上的佈局。透過自己創建一個主要項目模板,與 Posts 小工具相比,您可以更靈活地設計您的列表並包含其他動態內容。 

01 Loop Builder A
Elementor Loop Item (圖片來源:Elementor)
01 Loop Builder B
Elementor Loop Item (圖片來源:Elementor)

在範本–>版型–>使用 Elementor 編輯 Loop Item 的版型時,若跑出 the_content 找不到頁面內容,可能是 Single Post 版型的實例在「全部頁面」,影響到 Loop Item 的結構。

這時將 Single Post 的實例改成「全部文章」,就可以順利使用 Elementor 編輯 Loop Item 的版型囉!

一般應該是比較少碰到這個情況,因為較不會將Single Post 版型的實例設定在「全部頁面」,通常都會套用設定到「全部文章」唷!有可能設定時跑掉或沒注意設定錯誤,記得再檢查一下!:)

elementor loop
Elementro Loop Item & Single Post
套用條件設定
Single Post 套用條件設定

使用任何主題時,此錯誤發生在所有頁面上?

有可能是因為以下問題:

緩存問題

請清除瀏覽器的緩存並檢查是否有幫助。這是相關的,特別是如果它不時發生。

與瀏覽器插件衝突

在這種情況下,你可以切換到另一個瀏覽器(必須是 Chrome、Safari、Firefox 或 Opera)。

後端問題

嘗試從前台點擊“使用 Elementor 編輯”並檢查它是否以這種方式工作。

外掛衝突

停用Elementor和Elementor Pro之外的所有外掛以檢查是否消除了錯誤消息,如果是,請一一重新激活以找到罪魁禍首。 

發布你的頁面

請確保你也發布了頁面,因為有時衝突或異常的服務器配置可能會導致無法在草稿頁面上使用 Elementor 進行編輯。

當遇到這種情形時莫驚慌,有可能是各種狀況,好好的一步一步找出原因!

資料來源:How to Fix “The Content Area Was Not Found in Your Page” Error

延伸閱讀: