1) 為什麼我們創建了一個新網站而不能只是“切換主題”
當我們第一次確定需要進行更改時，任務似乎很簡單：“更改頂部區塊並使號召性用語更加有效。”從表面上看，這似乎是一個快速解決方案，但我們很快就意識到這個小任務揭示了網站結構和設計方面更大的潛在問題。問題不只是一個街區；而是一個街區。網站的整個架構需要徹底改造。
我們的網站是隨著時間的推移而建立的，使用不同的設計和佈局添加了不同的頁面，沒有任何統一的主題或模板。每個頁面的設計都是獨一無二的，這聽起來可能很有創意，但會導致一個重大問題：不一致。如果我們繼續僅對頂部區塊進行新設計，同時保持網站其餘部分不變，則意味著手動更新 700 多個頁面和帖子上的該區塊。更糟的是，每次我們想要進行未來的更改時，都需要重複此手動程序。想像一下，必須梳理數百個頁面以確保每個頁面都有最新更新是多麼低效。很快我們就發現，繼續使用舊站點是不可持續的。
除了更新每個頁面的後勤工作之外，我們還必須考慮整體使用者體驗。如今，用戶在造訪網站時期望獲得無縫、一致的體驗。如果他們向下捲動頁面並發現設計不一致（每個區塊都使用不同的樣式），則會產生脫節且不專業的印象。更糟的是，當使用者從一個頁面移動到另一個頁面並注意到佈局和設計完全不同時，它會強化一種無序感。
這種不一致超出了佈局的範圍。網站上的許多圖像已經過時、樣式不佳，甚至是由神經網路產生的不當圖像。這些圖像不符合現代設計標準，替換它們是另一個艱鉅的任務。使用不良圖像會影響網站的整體質量，從而給用戶留下對我們提供的產品或服務的負面印象。
使用 Elementor 這樣的工具來全面更新網站並沒有簡單的方法。每個頁面和區塊都包含自己的內聯樣式，這意味著無法全域進行變更。如果我們想要更新網站的風格，我們必須遍歷每個頁面並手動更新每個區塊，這既費時又低效。考慮到這一點，很明顯我們唯一的解決方案是從頭開始建立一個新網站。這將使我們能夠傳輸所有內容，同時保持相同的 URL，但採用新的、一致的且易於更新的設計。
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 文件
- 自訂貼文類型和分類法
function.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添加了自訂短代碼。這些短代碼允許使用者輕鬆插入複雜的功能或樣式元素，而無需接觸代碼。例如，我們創建了一個短代碼，用於在網站的任何位置添加自訂按鈕：
函數custom_button_shortcode($atts) {
$atts = 簡碼_atts(
大批（
'標籤' => '點這裡',
'網址' => '#',
),
$atts,
'自訂按鈕'
);
返回 ' ' 。 esc_html( $atts['label'] ) . ' ';
}
add_shortcode('custom_button', 'custom_button_shortcode');
此短代碼使編輯者可以輕鬆添加帶有自訂文字和 URL 的按鈕，從而可以在不破壞設計的情況下進行快速調整。8) 處理 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/#{1} #",
"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 7 天！
CONVEYTHIS