分類: wordpress

【Ｗordpress】Enfold佈景主題介紹

Enfold是一套付費的wordpress佈景主題，網路上的教學資源遠不如Elementor多，一方面可能因為功能較簡略，一方面可能不像Elementor、Oxygen『所見及所得』的操作方式，而是需要一些『想像力』，使用門檻較高，但它也有一些相對而言的優勢，讓我們繼續往下瞭解：

一. Enfold的優缺點

1-1. 優點

  • 輕量、載入速度快
  • 製作手機版很有效率
  • 多一個Portfolio Items資料表可與文章分開運用
  • 內建基礎的GSAP及AOS動畫，還有許多特殊元件
  • 購買常規許可證，一個網站授權永久有效

就個人用戶來說，價錢上enfold比elementor划算不少，elementor不僅是年約，還在漲價的路上。

1-2. 缺點

  • 能調整的屬性較少（外觀比較不靈活）
  • 教學資源較少
  • 切版方式須在後台對照位置，需要想像力不易上手
  • 自訂版型功能尚不齊全
  • 大多使用舊的CSS float語法

不管是enfold還是elementor，特定佈景主題一家獨大的關係，目前仍有萬年bug，例如elementor在版本更新後會出現雙重選單，或enfold文章列表無法真正實踐類別篩選等（Elementor目前此篩選功能也尚未完善，只能仰賴其他elementor附加外掛）。雖然是滿基礎的功能，卻難以避免dynamic data取用上的瑕疵，只能說比較適合做形象網站。

二. Enfold設置

2-1. 基本設定

與原本wordpress一般設定大同小異：

  • 輸入網站名稱及描述
  • 指定網站首頁及部落格頁面
  • 指定網站識別圖片：分別為為Logo和Favicon

2-2. Layout版型設定

在Enfold的General Layout頁面中，你可以選擇標準的選單置頂，或改為左右選單。
儘管Elementor也能製作左右選單，但必須用範本(template)製作，然後發布於所有頁面。

Elementor範本製作有高度彈性，而Enfold須藉由小工具(widgets)來設定想展示的內容，前者利於客製化，後者快速。

2-3. 全域顏色設定

在 General Styling 裡面，可以針對不同區塊（頁首/主要內容/頁腳…等）設置主要/次要/強調的顏色。最上方的 Select A Predefined Color Scheme 提供好幾款預設配色組合，供使用者直接套用。

enfold_general styling color-set

若想要客製化CSS，也能在General Styling分頁下方，找到Quick CSS，就能在欄位中輸入自訂的全域CSS。

enfold_custom_css

2-4. 全域樣式/元件設定

Advanced Styling進階樣式分頁用於設定常用HTML標籤及元件樣式，舉例來說：H1~H3等標題標籤，或是主選單的連結（Ｍain Menu Links）樣式，按鈕樣式等…，會於網頁上重複出現的東西，在此分頁預先設定可加速作業流程。

在Elementor中，對應功能位於網站設定＞佈景主題樣式中。值得一提的是，全域字型與排版樣式不同，全域字型是自訂字型樣式名稱進行套用，排版樣式直接套用於全域的<H1>~<H6>標籤上。

三. Enfold的區塊

Enfold的外框有三種，在Elementor中對應的元件為Container和Grid，不過屬性設置略有差異：

3-1. Enfold的3種外框

  1. Color Section：一般外框，有最大寬度，置中且不會佔滿整個畫面。
  2. GridRow：網格外框，寬度100%，會佔整個畫面。
  3. TabSection：分頁外框，顧名思義就是做切換分頁的外框。

3-2. Enfold的欄位(column)

外框中如果要使內容水平排列，可以放置column，預設的寬度選項只有相對值，一欄100%、1/2、1/3、1/4或1/5等數字。

column欄位仍使用CSS2語法，若水平欄位高度依據各自內容，使用float:left;進行水平排列；
若水平欄位等高，欄位父層會被一個外框（.flex_column_table）包裹，並使用display:table與display:table-cell屬性進行等高排列，應用上不太靈活。

如果要使用FlexBox，需給外框 display:flex; 屬性。

四. Enfold的垂直置中

垂直置中的方式，依據選用的外框不同有所變化，使用GridRow外框時，單元格(Cell)可以直接選擇將內容置中。

然而，最常見的方法是利用水平欄位(column)使內容垂直置中，因為三種外框內部都能放置column，使用率相對的高很多。
此方法必須點選水平欄位中的第一欄編輯，點選第一欄以外的欄位，不會出現Row Layout選項（看不到下面示意畫面），選擇欄位等高後，再選擇垂直置中對齊。

順帶一提，根據上圖Row Layout可以設定的內容，可得知水平欄位之間的間距，也是在第一欄進行設置。

五. Enfold手機版順序對調

有一種常見的網頁排版方式，在桌面板時呈現圖文交錯的模樣，如下圖所示：

這種交錯水平排列方法，可以增加視覺豐富度又不失規律；
但手機版寬度變窄、自動轉為垂直排列後，原本的順序也會『繼承』到手機版，因此我們需要將部分區塊的內容順序倒轉。

要怎麼做才能倒轉垂直排列的順序呢？

答案與前一章節類似，如果要倒轉的是水平欄位，這也是第一欄才能設定的內容；在Row Screen Options中選擇Reverse order，就能在手機版欄位占全寬時倒轉，使閱讀順序看起來合理。

如果要倒轉GridRow外框內的單元格(Cell)，則點選整個GridRow外框的編輯>進階>Responsive，然後選擇Reverse order。

六. Enfold的單篇文章樣板

根據官方文件的說明，在6.0版以後可以自訂版型及動態內容，動態內容的元件確實新增了不少，例如標題元件可以直接取用頁面Title或其他資訊，不需要一個個重打。

至於版型嗎……觀看教學影片，會發現需要借助其他外掛來達成，用外掛建立新的資料表，而非更改舊有的文章版型，因此彈性度不高。

Custom Layout & Dynamic Content

較麻煩的是，需要一篇篇到進階編輯器，點選Custom Layout套用做好的版型，好像比修改全靜態內容方便一點(就那麼一點)，但大幅更改使用者原本的操作方式，不知道意義是什麼？為什麼不直接針對文章類別或所有文章套用版型呢？也許直接改CSS及佈景主題更快呢？

七. Enfold的特殊元件

7-1. Before | Afrer 元件

整型廣告常常會有整形前後的對照圖，而這個enfold元件是有互動效果的，訪客可以拖曳箭頭查看兩側圖片，也能改成垂直拖曳。

7-2. Lottie Animation 元件

Lottie近年作為網頁動畫可以算是非常火紅，可以用AE製作並匯出成json格式，輕量又不會有解析度的問題，又能做出較精細複雜的動畫，是以前gif動圖的良好替代方案。

7-3. 熱點圖元件

此元件用於標示圖片上的熱點，又附帶擴散效果的小動態，十分實用。

    【WordPress疑難雜症】如何解決SSL正常，但某一頁出現不安全提示的狀況？

    問題描述：Wordpress網站的某一頁出現『不安全』提示，除此之外其他頁面都正常。
    點選提示，也確定SSL憑證有效，到底是怎麼一回事，又該怎麼解決呢？

    這種狀況通常是因為該頁面上有不安全的內容（即使用 HTTP 而不是 HTTPS 資源），如果頁面中包含未加密的資源（如圖片、影音、腳本、樣式表等），即使SSL有效，瀏覽器仍然會提示該頁面不安全。

    接下來，讓我們找出包含問題內容的區塊：

    一、檢查混合內容（Mixed Content）

    1. 在顯示不安全提示的頁面上，點擊右鍵並選擇「檢查」或按下鍵盤上的F12。
    2. 切換到「Console」（主控台）分頁
    3. 看到瀏覽器報告的錯誤，這些錯誤通常會提到「Mixed Content」或「不安全內容」，並列出具體的 HTTP 資源。

    以下圖為例，不安全內容是上傳到媒體庫的影片，原因不明一套用就變成http://

    二、更新資源網址

    我們的目標就是確保網站資源的URL通過HTTPS提供，以下提供幾個常見的做法：

    方法1. 到後台變更網站位址及WordPress 位址

    後台側邊欄＞設定＞一般
    如果本頁的 WordPress 位址 (網址)以及 網站位址 (網址)是http開頭，請改成https，如下圖所示：

    變更完之後可能要重新登入或重整SEO外掛。

    方法2. 更改佈景主題的functions.php

    在佈景主題的 functions.php 加入這段程式碼，強制取代 http:// 網址為 https://

    add_filter('wp_get_attachment_url', function($url) {
    return str_replace('http://', 'https://', $url);
});

    方法3. 變更資源的存放位置

    上述範例是影片，如果影片不放本地主機，也可以用非公開模式放在其他平台（如youtube）來取得影片網址。優點是不占主機空間，載入速度可能還更快，但不是一次性解決此問題。

    三、記得清除緩存

    已經變更網址或刪除http資源，卻仍顯示不安全頁面，記得清除CDN緩存。


    此外，在已登入狀態編輯模式下，與其他訪客查看的結果可能不同，請在瀏覽器按下『ctrl+F5』重整，或用無痕模式檢查。

    【WordPress 疑難雜症】為什麼網站圖示（favicon）沒有出現在搜尋引擎中？

    這是一個常見的問題，幾乎可以當罐頭訊息回覆：
    網站已經被搜尋引擎成功索引，點開網頁也確定頁籤上有小圖示，但在搜尋結果中卻是空白的，與其他鄰近網站相比，就顯得缺乏吸引力跟公信力，影響訪客點選的意願。

    需要先理解的是，搜尋引擎（Google、Bing）的爬蟲，並不會在管理員更新網頁的當下，就立刻跑來爬，而是定期前往爬取。因此，icon及文章內容在搜尋結果上更新，經常花費數天至數個月。

    這個問題要怎麼解決？先按照以下項目檢查，看到favicon有被爬取到的跡象，就可以先停止。

    favicon更新的前兆

    1. 前台頁面出現icon
    2. GSC（Google Search Console）有出現icon圖示
    3. wordpress 後台開始出現icon圖示
    GSC-出現icon小圖示

    表示網站的favicon可能已經能被搜尋引擎找到了，若沒達成這些條件，再執行以下檢查及操作。

    一般流程

    Step.1 確認網站識別的圖片格式

    根據google搜尋引擎對於favicon格式的說明文件，幫大家整理幾個重點：

    1. 必須是正方形
    2. 點陣圖：邊長必須是48px的倍數
    3. 向量圖（svg）：比例須為1:1
    4. 格式為ico、png、gif，所有瀏覽器都有支援（只要版本不過舊），svg和jpg則大部分都有支援(除了IE瀏覽器)
    5. 小圖示網址穩定，不要常換
    6. 確保未阻止google爬蟲訪問

    Step.2 提交網站地圖給GSC、或Bing Webmaster Tools要求更新索引

    讓你的網頁更快被google找到，不外乎向搜尋引擎提交網站地圖及網址（url）。
    雖然時間一長，網站也會自動被找到，但既然會來查，肯定就是等不了的，那麼要如何申請GSC(Google Search Console)呢？
    如果網站是使用wordpress製作的，建議安裝 Google Site Kit 外掛，這比更改DNS或在<head>標籤中嵌入代碼要快得多。

    wordpress外掛-sitekit

    如果是一般網站，就請照著GSC的指南，使用DNS驗證吧！好處在於可以捕捉到所有子網域及通訊協定的資料。

    GSC的兩種驗證方式

    輸入網域並按下繼續，以本站來說輸入的內容為 mobuyashea.club，不用特意加上http://、https://或www等前置字元，因為這些通通都會包含進去。

    彈窗出現時，按下複製按鈕，把GSC提供的TXT紀錄加入網域DNS。

    GSC的DNS驗證

    關於變更網域供應商DNS設定的流程，可以參考【網域管理】Namecheap & Vercel，把子網域指向不同主機 或 【SMTP】如何用Emil信箱收到網站訪客填表的內容 兩篇文章中的第二步。

    Host名稱填寫@即可。

    DNS增加GSC的TXTrecord

    添加完成後，回到GSC按下『驗證』按鈕（可能需要幾分鐘到幾小時不等），成功的話會出現『已擁有驗證資源』的綠勾勾彈窗。

    Step.3 查看被索引的首頁的原始碼

    提交了網站地圖，還需要確認是否有索引到『首頁最新版』，在GSC上面的搜尋框輸入網站首頁的網址，並在檢查結果畫面點選『查看已檢索的網頁』。

    GSC網址檢查-查看已檢索的網頁

    確認原始碼中是否存在icon，你可以點選右上角的放大鏡圖示，搜尋 “icon” 關鍵字。

    Step.4 等待

    核對上述icon格式，並執行提交網站地圖以後，還是需要等待幾天時間，如果有效，就會出現icon更新的前兆。

    絕招→用傳統方式上傳favicon

    如果你的icon長時間未出現，可以考慮這個方法：

    將正方形且邊長為48px倍數的favicon.ico檔案，上傳到根目錄的位置。若上傳成功，輸入網址 https://你的網域/favicon.ico 能看到圖片。

    然後到佈景主題編輯器中，將以下代碼更換為你的域名，並將它加進<head>標籤。

    <link rel="icon" href="https://你的網域/favicon.ico">

    建議一次只嘗試一種方法，來確定哪種方法更有效。

    【Elementor】影片元件能放youtube短影音(shorts)嗎？

    第一次有Elementor影片元件能否放短影音的疑問，是在工作中被問到，即使一般的影片能放，但畢竟短影音的『網址』跟一般Youtube影片不同。直接將短影音的網址複製貼上是不行的，查找了一番後，確定只要改格式就能放。

    1. 更改網址格式，就可以放短影音

    範例：若短影音網址為 https://www.youtube.com/shorts/HEAMuXYIfFM 或後方有 ?feature=share ，不論哪種，以此範例來說，影片代碼就是『HEAMuXYIfFM』，以下修改請把範例的代碼部分換成你的影片代碼。

    把網址改為以下兩者其中之一：

    方法1影片代碼前縮減為 https://youtu.be/https://youtu.be/HEAMuXYIfFM
    方法2把 shorts 改為 embedhttps://www.youtube.com/embed/HEAMuXYIfFM
    Elementor影片更改短影音網址

    這兩種格式的shorts網址，才能順利嵌入Elementor的影片元件。

    2. 符合短影音比例的播放環境

    2-1. 長寬比改為9：16

    到影片元件的樣式分頁，將長寬比改為9：16（直式），啟用燈箱時才不會壓縮到畫面範圍。

    Elementor影片封面設定-9比16
    Elementor影片封面設定-9比16

    2-2. 幫外連影片換個好看的封面

    嵌入外連視訊（如 youtube、Vimeo等）時，來源網站的影片撥放UI會一起出現，會讓外觀看起來很雜亂。為解決這個視覺上的問題，只要啟用內容分頁『圖片覆蓋』的控制項，就能使用自己上傳、簡單乾淨的封面，提高影片區塊的一致性。

    另外，還能更改或上傳自定義的播放圖示。

    Elementor影片封面設定-啟用圖片覆蓋

    【Elementor Pro教學】如何使用Loop Builder打造完美文章列表

    本篇文章將介紹 Elementor Pro 的 Loop Builder 功能及其應用，幫助你打造彈性又美觀的文章列表，如果你有使用WooCommerce，還能進一步應用在商品列表。

    Loop元件和其他動態內容功能，只能在 Elementor Pro 上使用，如果對寫程式或更改佈景主題不熟悉，但希望實現理想的版型，Loop元件可以提升文章列表和跑馬燈的客製化自由度，因此購買 Elementor Pro 是值得的投資。

    1. Loop Builder 元件是什麼？

    在 2022 年底，Elementor 發布了一篇文章介紹其新功能：【Loop Builder】。

    一個LoopItem按照所有文章數量循環出現

    這個功能允許你將客製化的「單元」格式應用到網格（Loop Grid）或跑馬燈（Loop Carousel）中，使這些單元重複出現。此功能提升了 HTML 排版的彈性，不再受限於 Elementor 舊元件的框架。

    套用文章／商品動態內容的意思是…？

    更新文章或商品後，某個文章列表或跑馬燈區塊也隨之更新，就是動態內容；反過來說，如果區塊沒有隨之更新，而要手動去修改，代表內容沒有跟資料庫連動，就是靜態的。

    Elementor Pro 能讓使用者套用動態標籤（變數）到元件，以文章的格式來說，動態標籤有：標題、特色圖片、摘要、內容、類別、標籤、日期、作者，還有其他自訂欄位，這些內容都可以在元件中套用。

    2. 實做應用

    如果你發現 Elementor 的原有元件架構無法滿足你的需求，可以按照以下步驟進行 Loop Builder 客製化：

    2-1.前往後臺建立「一個單元」的範本

    1. 後台＞範本＞新增
    2. 版型類型選擇「Loop Item」，來源類型選擇「文章」，為版型命名後按下「建立版型」

    接著進入Elementor的編輯模式，進行此單元的編輯。

    2-2. 範例：建立兩個水平排列的欄位，左邊放「特色圖片」元件

    選擇Loop Item範本的特色圖片元件
    每篇部落格的特色圖片（文章封面）都是不同的，若要呈現動態的內容，就不能放一般的圖片元件，不然會出現一樣的圖片喔。另外，讓欄位出現動態內容圖片的方法不只一種，若欄位右側有這個資料庫圖示，代表他可以套用動態內容，自信的點下去，選擇你要的動態標籤吧。
    Elementor元件若有提供動態標籤(資料庫ICON)

    若要讓圖片以正方形方式呈現，你可以點選特色圖片元件＞「內容」分頁＞圖片尺寸為「自訂」寬高，它會在等比例的前提下，把多餘的部分裁切掉。

    Loop Item特色圖片比例變更

    2-3. 右邊欄位放「文章標題」、「文章資訊」元件

    文章標題元件沒什麼特別好說的，動態內容就是文章標題。至於文章資訊元件，可以透過下拉選單選取要套用的動態標籤，此範例選擇套用『類別』、『自訂欄位』。

    Loop Item文章資訊-文章動態內容套用

    文章資訊元件類型點選「分類項目」，並點選「分類法」的格子，選擇「分類」。

    Loop Item文章資訊-分類項目

    其他文章資訊也比照設定，完成「一個單元」範本後記得存檔。

    2-4. 套用 Loop Item 範本

    新增Loop grid或Loop Carousel元件，選擇剛剛做好的Loop Item範本，就會看到文章列表用範本的排版方式呈現，既美觀又和別的網站不同，是不是很有成就感呢？

    Loop grid套用Loop item文章

    3. 為了 Loop Builder 購買 Elementor Pro 值得嗎？

    如果你覺得一年費用較高，可以考慮是否有合租的管道。但需要注意的是，合租會有共用帳號的麻煩，且無法保障資訊安全，因此建議確定好用後自行購買較為保險。

    如果你對 WordPress 的佈景主題架構有一定了解，可以參考【wordpress套件】不需要編輯器！自訂你的文章列表，該文說明了更高彈性的修改方式，可能比Elementor Loop Builder 更適合你的需求。

    Elementor Bug –– header出現2個選單，無法收合怎麼辦?

    這是一個Elementor常見的BUG，常見於版本更新後，Elementor設定跑回預設值，就會出現這種狀況。

    以下提供兩個方法：

    1. 重新生成CSS

    到wordpress後台＞Elementor＞工具＞一般

    Regenerate CSS & Data > 點選『Regenerate Files & Data』

    此方法比較不便，每次改動header後都可能都會出現雙選單，需要重按生成按鈕。

    2. 找到其他自訂斷點(Additional Custom Breakpoints)並改為不活躍(inactive)

    到wordpress後台＞Elementor＞設定＞Features＞

    接著往下找，找到Additional Custom Breakpoints這欄，把下拉選單改為Inactive後存檔。

    這個方法比較持久，除非下次Elementor更新設定再度跳掉，才會需要重新變更。

    延伸閱讀～【Elementor Pro教學】如何使用Loop Builder打造完美文章列表