沒有銀行卡詳細信息
1) 為什麼我們創建了一個新網站而不能只是“切換主題”
當我們第一次確定需要進行更改時，任務似乎很簡單：“更改頂部區塊並使號召性用語更加有效。”從表面上看，這似乎是一個快速解決方案，但我們很快就意識到這個小任務揭示了網站結構和設計方面更大的潛在問題。問題不只是一個街區；而是一個街區。網站的整個架構需要徹底改造。
我們的網站是隨著時間的推移而建立的，使用不同的設計和佈局添加了不同的頁面，沒有任何統一的主題或模板。每個頁面的設計都是獨一無二的，這聽起來可能很有創意，但會導致一個重大問題：不一致。如果我們繼續僅對頂部區塊進行新設計，同時保持網站其餘部分不變，則意味著手動更新 700 多個頁面和帖子上的該區塊。更糟的是，每次我們想要進行未來的更改時，都需要重複此手動程序。想像一下，必須梳理數百個頁面以確保每個頁面都有最新更新是多麼低效。很快我們就發現，繼續使用舊站點是不可持續的。
除了更新每個頁面的後勤工作之外，我們還必須考慮整體使用者體驗。如今，用戶在造訪網站時期望獲得無縫、一致的體驗。如果他們向下捲動頁面並發現設計不一致（每個區塊都使用不同的樣式），則會產生脫節且不專業的印象。更糟的是，當使用者從一個頁面移動到另一個頁面並注意到佈局和設計完全不同時，它會強化一種無序感。
這種不一致超出了佈局的範圍。網站上的許多圖像已經過時、樣式不佳，甚至是由神經網路產生的不當圖像。這些圖像不符合現代設計標準，替換它們是另一個艱鉅的任務。使用不良圖像會影響網站的整體質量，從而給用戶留下對我們提供的產品或服務的負面印象。
沒有簡單的方法可以用像 Elementor 這樣的工具全面更新網站。每個頁面和區塊都有自己的內嵌樣式，意味著無法全域進行變更。如果我們想更新網站的風格，就得逐頁手動更新每個區塊，既耗時又低效率。基於此，我們明顯知道唯一的解決方案就是從零開始建立一個新網站。這樣我們就能在保留相同網址的同時轉移所有內容，但設計有新穎、一致且易於更新。
2） 為什麼我們決定不使用 Elementor
Elementor 是 WordPress 最受歡迎的頁面建構工具之一。表面上看，它似乎是一個很棒的工具，能快速且輕鬆地建立頁面。然而，經過大量使用後，我們遇到了幾個限制，決定放棄 Elementor，改用自訂網站。
Elementor的限制與挑戰：
- 錯誤與故障：雖然 Elementor 提供了許多實用功能，但技術上也存在問題。例如，當我們複製一個頁面並嘗試編輯時，新頁面常常在做任何修改前就已經和原本不一樣了。元素顯示時經常出現錯誤，例如「最大影像寬度」特性無法正常運作。這些錯誤使得確保頁面間的樣式一致變得困難。
- 過度的創作自由導致不一致：Elementor 的一大賣點是可以自訂所有內容。然而，這種彈性有時也是把雙面刃，尤其當有多位編輯同時參與時。非專業人士很容易無意中製作出設計不一致的頁面。例如，我們看到編輯者在粉紅色按鈕上使用粉紅色文字，或在背景中加入飛行橘色三角形，導致設計雜亂且令人困惑。若無嚴格的設計系統，維持統一的視覺識別變得不可能。
- 進階功能的自訂限制：雖然 Elementor 在文字與圖片基礎頁面建構上表現優異，但當你需要加入自訂功能時，挑戰性會增加。我們經常只能使用內建的方塊，這些模組很難為更複雜的功能客製化。隨著需求超越基本版面設計，Elementor 的限制越來越明顯。
- 程式碼臃腫與效能問題：Elementor 的頁面建置方法引入了過度的元素巢狀結構。例如，Elementor 會自動在其他
元素中產生多個容器，每個容器都有自己的樣式集合。這導致結構膨脹，負面影響載入速度、頁面效能，最終影響網站的 SEO 排名。我們做速度測試時，結果一直很差，而 Elementor 產生的繁重程式碼是主要原因。 - 無 A/B 測試功能：在當今數位環境中，A/B 測試對優化使用者體驗至關重要。然而，Elementor 並不提供向不同使用者顯示不同版本網站的功能。大家看到的都是同一個網站，這限制了我們測試和微調設計元素（如顏色、按鈕形狀和背景影像）的能力。沒有這些功能，我們無法根據真實用戶行為優化網站。
- 資料庫膨脹：Elementor 最大的缺點之一，或許是它處理樣式與內容的方式。Elementor 會儲存樣式、巢狀結構及其他混雜在資料庫內容中的不必要標籤。這導致資料庫膨脹，即使停用或卸載 Elementor 也無法被清理。因此，切換到新的主題或框架並不能解決問題——這些樣式仍嵌入頁面中，持續造成問題。
考慮到這些挑戰，我們明顯需要一個更強健的解決方案。我們決定建立一個新的獨立網站，不使用 Elementor，採用更永續且彈性的方式。
3) 如何在新網站上建立頁面
從頭開始建立新網站使我們有機會建立一個乾淨、簡化的頁面建立流程。在新系統中，建立頁面非常簡單：
- 登入 WordPress 管理面板，然後點擊頁面 -> 新增頁面。
- 您將看到標準的 WordPress 編輯器，您可以在其中編寫或貼上文字、添加連結以及上傳圖像。
這個過程簡單但靈活。WordPress 的內容編輯器不再依賴 Elementor 複雜的區塊系統，而是更乾淨，方便快速更新與輕鬆自訂。在編輯器下方，有進 階自訂欄位 （ACF）的設定，這些欄位已設定好以維持整個網站的一致性。
ACF 允許我們建立靈活的內容部分，例如Content 1…Content 15等區塊，您可以在其中輕鬆設定頁面每個部分的標題、文字、圖像和按鈕標籤。這些區塊會自動交替影像和文字的位置，確保佈局保持視覺吸引力，而無需手動調整。
對於圖像，我們實現了一個顏色匹配系統，可以自動在網站的主顏色中套用漸層。這確保所有圖像都符合整體美感。對於顏色需要保持完整的徽標或螢幕截圖，有一個「保留顏色」選項可以覆蓋漸層。
該系統簡化了內容管理，同時保持所有頁面的設計一致性。
4) 如何建立新帖子
在新網站上建立貼文遵循與建立頁面相同的簡化流程，但有一些關鍵區別：
- 帖子的 URL 包含../blog/.. ，以將其與頁面區分開來。
- 在右側邊欄中，一個區塊會自動顯示三篇最新文章，有助於保持部落格的動態和吸引力。
所有文章的範本位於檔案template-parts/content/content-single.php中，該檔案處理每個部落格文章的結構和佈局。這種一致的範本可以輕鬆更新，並確保所有貼文都遵循相同的設計準則。
5) 進階自訂欄位 (ACF)
ACF 一直是我們新網站開發的重要組成部分。它允許我們創建可以透過 WordPress 管理面板輕鬆管理的自訂欄位。 PHP 程式碼中引用了像content_1這樣的字段，使我們能夠動態地為每個頁面和貼文提取正確的內容。
這種靈活性對於確保我們能夠有效地管理和更新站點，同時在需要時仍提供客製化空間至關重要。
6) A/B 測試
我們對新網站所做的最重要的改進之一是 A/B 測試的實施。 A/B 測試使我們能夠比較網站的兩個版本，看看哪個版本對使用者來說表現得更好。這可以包括測試不同的顏色、按鈕形狀、背景甚至佈局。
我們使用 URL 中的GET 參數來實現此功能。例如，可以建立兩個相同的廣告活動，但具有不同的 URL：
https://www.conveythis.com/?param=1
https://www.conveythis.com/?param=2
當使用者點擊這些連結時，參數將保存在 cookie 中。根據參數的值，網站將顯示不同版本的頁面，例如不同的按鈕顏色或背景圖像。這使我們能夠收集有關用戶偏好和行為的有價值的數據。
所有事件都記錄在 .csv 文件以及 MySQL 資料庫中，使我們能夠分析資料並就網站改進做出明智的決策。
7）functions.php 文件
- 自訂貼文類型和分類法
functions.php 檔案的主要用途之一是建立自訂文章類型和分類法，讓我們能更有效組織內容。我們不再僅依賴預設的 WordPress 結構（頁面與文章），而是針對特定內容引入自訂類型，例如案例研究、見證或產品特色。這不僅讓我們的內容更有組織，也提升了使用者體驗，讓瀏覽和尋找相關資訊變得更方便。
例如，要為案例研究建立自訂貼文類型，我們在functions.php中新增了以下程式碼：
函數create_case_study_post_type() {
register_post_type( '案例研究',
大批（
'標籤'=>大批（
'姓名' => __( '案例研究' ),
'singular_name' => __( '案例研究' )
),'公共' => 真實，
'has_archive' => 真，
'重寫' => 數組('slug' => '案例研究'),
)
);
}
add_action( 'init', 'create_case_study_post_type' );
這創建了一種名為“案例研究”的新帖子類型，其行為與常規帖子類似，但具有自己的存檔和分類結構。
- 載入外部腳本和樣式
function.php的另一個關鍵用途是載入外部腳本和樣式，確保我們的網站擁有所有必要的程式庫和框架。例如，我們整合了用於滑桿的Slick.js和用於平滑動畫的AOS （滾動動畫）等函式庫。透過僅在需要時（例如，在特定頁面或模板上）選擇性地載入這些資源，我們減少了不必要的膨脹並提高了頁面載入速度。
以下是我們處理樣式和腳本載入的方式：
函數 load_custom_scripts() {
// 為特定模板載入 Slick 滑桿
if( is_page_template('template-slider.php') ) {
wp_enqueue_style( 'slick-css', get_template_directory_uri() . '/css/slick.css' );
wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/js/slick.min.js', array('jquery'), '', true );
} // 在網站範圍內載入 AOS 動畫
wp_enqueue_style( 'aos-css', get_template_directory_uri() . '/css/aos.css' );
wp_enqueue_script( 'aos-js', get_template_directory_uri() . '/js/aos.js', array('jquery'), '', true );
}
add_action( 'wp_enqueue_scripts', 'load_custom_scripts' );
透過使用條件檢查（例如， is_page_template()），我們確保不會在網站範圍內載入不必要的腳本，從而優化效能。
- 自訂短代碼
為了提高非技術用戶管理網站內容的靈活性，我們透過functions.php添加了自訂短代碼。這些短代碼允許使用者輕鬆插入複雜的功能或樣式元素，而無需接觸代碼。例如，我們創建了一個短代碼，用於在網站的任何位置添加自訂按鈕：
[刪除]
此短代碼使編輯者可以輕鬆添加帶有自訂文字和 URL 的按鈕，從而可以在不破壞設計的情況下進行快速調整。
8) 處理 SEO 和網站速度
網站改造期間的一大重點是提升 SEO 及整體網站表現。原本的網站是用 Elementor 建置，但因為程式碼臃腫和圖片優化，導致載入緩慢和 SEO 不佳的問題。
改善搜尋引擎優化
為了確保我們的新網站對 SEO 友好，我們從一開始就實施了一些最佳實踐：
-
語意 HTML ：我們透過正確使用標頭標籤仔細建立了網站的 HTML（
,等等），確保搜尋引擎可以輕鬆解析和理解內容層次結構。這對於 SEO 排名和可訪問性尤其重要。 - 元標籤和開放圖譜資料：我們利用Yoast SEO外掛程式來處理元標題、描述和開放圖譜資料以進行社交分享。透過使用 Yoast，我們確保每個頁面和貼文都具有優化的元數據，這對於搜尋引擎可見性和社群媒體平台的點擊率至關重要。
- 架構標記：使用functions.php文件，我們為結構化資料添加了自訂架構標記，改進了搜尋引擎在搜尋結果中顯示頁面的方式。例如，我們包含了文章、案例研究和產品的架構，幫助搜尋引擎更好地對我們的內容進行分類。
函數 add_schema_markup() {
迴聲'
{
"@context": "http://schema.org",
"@type": "組織",
"名稱": "ConveyThis",
"url": "https://www.conveythis.com",
"logo": "https://www.conveythis.com/logo.png",
“sameAs”：[
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
}
';
}
add_action( 'wp_head', 'add_schema_markup' );
網站速度優化
效能不僅是使用者體驗的關鍵因素，也是 SEO 排名的關鍵因素。我們採取了幾個步驟來提高網站速度：
- 影像最佳化：我們利用WebP等現代影像格式，它比 PNG 和 JPEG 等傳統格式提供更好的壓縮率。所有影像均根據使用者的螢幕解析度以適當的尺寸提供，即使在行動裝置上也能確保快速載入。
- 延遲加載：透過實現圖像的延遲加載，我們確保最初只加載用戶螢幕上可見的圖像。當使用者捲動時會載入其他圖像，從而減少初始頁面載入時間。
- 快取與最小化：我們使用 WP Rocket 來快取、壓縮 HTML、CSS 和 JavaScript 檔案。WP Rocket 幫助我們加快載入時間，透過降低整體檔案大小並提供靜態快取版本給重複訪客。
9）資料庫優化與清理
舊網站因 Elementor 的臃腫和低效率的資料庫結構，累積了大量「垃圾」資料。為了確保新網站順利運作，我們進行了徹底的資料庫清理與優化。
- 移除舊的 Elementor 資料
如前所述，即使停用 Elementor，其樣式和設定仍嵌入資料庫中。我們使用自訂查詢刪除多餘資料並清理資料庫。此外，我們移除了所有未使用的媒體檔案、文章修訂版及過期的暫時性資料。
- 資料庫索引
我們也對資料庫進行了最佳化，為頻繁查詢的欄位添加索引，確保資料庫查詢更快、更有效率。例如，新增索引 發布日期 列加快了與最近帖子相關的查詢，提高了我們部落格頁面的效能。
結論
從零開始建立新網站的決定，是因為舊網站的限制與效率不足。單純切換主題並非可行的選擇，因為設計不一致、風格膨脹，以及 Elementor 造成的效能問題。透過建立一個具備自訂開發與進階自訂欄位的新網站，我們實現了更有效率、連貫且專業的網站，提升使用者體驗，同時促進簡化的更新與 A/B 測試功能。這個新場地為未來的成長與改善奠定了堅實基礎。
總結一下這篇文章：
準備好開始了嗎？
翻譯不只是了解語言，它是一個複雜的過程。
遵循我們的建議並使用 ConveyThis，你的 翻譯的頁面會與你的讀者產生共鳴，讓你感覺像是目標的本土 用詞。
雖然需要努力，但結果是值得的。如果你正在翻譯一個網站， ConveyThis可以幫你節省自動化機器翻譯的好幾個小時。
免費試用ConveyThis 3 天！
CONVEYTHIS