1) Tại sao chúng tôi tạo một trang web mới và không thể chỉ “Chuyển đổi chủ đề”

Khi chúng tôi lần đầu xác định nhu cầu thay đổi, nhiệm vụ có vẻ đơn giản: "Thay đổi khối trên cùng và làm cho lời kêu gọi hành động hiệu quả hơn". Theo giá trị thực tế, điều này có vẻ như là một giải pháp nhanh chóng, nhưng chúng tôi sớm nhận ra rằng nhiệm vụ nhỏ này đã tiết lộ những vấn đề cơ bản lớn hơn nhiều với cấu trúc và thiết kế của trang web. Vấn đề không chỉ là một khối; mà là toàn bộ kiến trúc của trang web cần được đại tu.

Trang web của chúng tôi đã được xây dựng theo thời gian, với các trang khác nhau được thêm vào bằng nhiều thiết kế và bố cục khác nhau, mà không có bất kỳ chủ đề hoặc mẫu thống nhất nào. Mỗi trang đều có thiết kế riêng, nghe có vẻ sáng tạo nhưng lại dẫn đến một vấn đề quan trọng: không nhất quán. Nếu chúng tôi tiếp tục và tạo một thiết kế mới chỉ cho khối trên cùng trong khi vẫn giữ nguyên phần còn lại của trang web, điều đó có nghĩa là phải cập nhật thủ công khối đó trên hơn 700 trang và bài đăng. Tệ hơn nữa, quy trình thủ công này sẽ cần phải được lặp lại mỗi khi chúng tôi muốn thực hiện các thay đổi trong tương lai. Hãy tưởng tượng sự kém hiệu quả khi phải sàng lọc qua hàng trăm trang, đảm bảo mỗi trang đều có bản cập nhật mới nhất. Rõ ràng là việc tiếp tục làm việc với trang web cũ sẽ không bền vững.

Ngoài việc chỉ cập nhật hậu cần cho từng trang, chúng tôi còn phải xem xét trải nghiệm người dùng tổng thể. Người dùng ngày nay mong đợi những trải nghiệm liền mạch, gắn kết khi họ truy cập một trang web. Nếu họ cuộn xuống một trang và thấy thiết kế không nhất quán – với mỗi khối sử dụng các kiểu khác nhau – điều này tạo ra ấn tượng rời rạc và thiếu chuyên nghiệp. Tệ hơn nữa, khi người dùng di chuyển từ trang này sang trang khác và nhận thấy bố cục và thiết kế hoàn toàn khác nhau, điều này sẽ củng cố cảm giác hỗn loạn.

Sự không nhất quán còn vượt ra ngoài bố cục. Nhiều hình ảnh trên trang web đã lỗi thời, có kiểu dáng kém hoặc thậm chí được tạo ra không phù hợp bởi mạng nơ-ron. Những hình ảnh này không phù hợp với các tiêu chuẩn thiết kế hiện đại và việc thay thế chúng là một nhiệm vụ khó khăn khác. Việc sử dụng hình ảnh xấu phản ánh không tốt đến chất lượng chung của trang web, khiến người dùng có ấn tượng tiêu cực về sản phẩm hoặc dịch vụ mà chúng tôi cung cấp.

Không có cách đơn giản nào để cập nhật toàn diện trang web bằng một công cụ như Elementor. Mỗi trang và khối đều chứa các kiểu nội tuyến riêng, nghĩa là không thể thực hiện thay đổi trên toàn cầu. Nếu chúng tôi muốn cập nhật kiểu của trang web, chúng tôi sẽ phải duyệt qua từng trang và cập nhật thủ công từng khối, điều này sẽ tốn thời gian và không hiệu quả. Với suy nghĩ này, rõ ràng là giải pháp duy nhất của chúng tôi là xây dựng một trang web mới từ đầu. Điều này sẽ cho phép chúng tôi chuyển toàn bộ nội dung trong khi vẫn duy trì cùng một URL nhưng với thiết kế mới, nhất quán và dễ cập nhật.

2) Tại sao chúng tôi quyết định không sử dụng Elementor

Elementor là một trong những trình tạo trang phổ biến nhất cho WordPress. Trên bề mặt, nó có vẻ như là một công cụ tuyệt vời cho phép tạo trang nhanh chóng và dễ dàng. Tuy nhiên, sau khi làm việc nhiều với nó, chúng tôi gặp phải một số hạn chế khiến chúng tôi quyết định không dùng Elementor nữa và thay vào đó chọn một trang web tùy chỉnh.

Những hạn chế và thách thức của Elementor:

1. Lỗi và trục trặc : Mặc dù Elementor cung cấp nhiều tính năng hữu ích, nhưng nó không phải là không có vấn đề kỹ thuật. Ví dụ, khi chúng tôi sao chép một trang và cố gắng chỉnh sửa, trang mới thường trông khác với trang gốc, ngay cả trước khi thực hiện bất kỳ thay đổi nào. Có nhiều lỗi thường gặp về cách hiển thị các thành phần, chẳng hạn như thuộc tính "chiều rộng hình ảnh tối đa" không hoạt động chính xác. Những trục trặc này khiến việc đảm bảo kiểu dáng nhất quán trên các trang trở nên khó khăn.
2. Quá nhiều sự tự do sáng tạo, dẫn đến sự không nhất quán : Một trong những điểm bán hàng chính của Elementor là khả năng tùy chỉnh mọi thứ. Tuy nhiên, tính linh hoạt này có thể là con dao hai lưỡi, đặc biệt là khi nhiều biên tập viên cùng làm việc trên trang web. Những người không chuyên nghiệp rất dễ vô tình tạo ra các trang có thiết kế không nhất quán. Ví dụ, chúng tôi đã thấy những trường hợp biên tập viên sử dụng văn bản màu hồng trên các nút màu hồng hoặc thêm các hình tam giác màu cam bay ở nền, dẫn đến thiết kế lộn xộn và khó hiểu. Nếu không có hệ thống thiết kế nghiêm ngặt, sẽ không thể duy trì bản sắc trực quan gắn kết.
3. Tùy chỉnh hạn chế cho chức năng nâng cao : Trong khi Elementor nổi trội trong việc xây dựng trang cơ bản với văn bản và hình ảnh, thì nó trở nên khó khăn hơn khi bạn cần thêm chức năng tùy chỉnh. Chúng tôi thường thấy mình bị giới hạn trong các khối tích hợp, vốn khó tùy chỉnh cho các tính năng phức tạp hơn. Khi nhu cầu của chúng tôi tăng lên vượt ra ngoài các bố cục cơ bản, thì những hạn chế của Elementor ngày càng trở nên rõ ràng.
4. Mã cồng kềnh và các vấn đề về hiệu suất : Phương pháp xây dựng trang của Elementor đưa ra việc lồng ghép quá mức các phần tử. Ví dụ, Elementor tự động tạo ra nhiều
   các container trong khác

   các phần tử, mỗi phần tử có một bộ kiểu riêng. Điều này dẫn đến một cấu trúc phình to ảnh hưởng tiêu cực đến tốc độ tải, hiệu suất trang và cuối cùng là thứ hạng SEO của trang web. Khi chúng tôi chạy thử nghiệm tốc độ, kết quả luôn kém và phần lớn là do mã nặng do Elementor tạo ra.
5. Không có khả năng kiểm tra A/B : Trong bối cảnh kỹ thuật số ngày nay, kiểm tra A/B là điều cần thiết để tối ưu hóa trải nghiệm người dùng. Tuy nhiên, Elementor không cung cấp khả năng hiển thị các phiên bản khác nhau của trang web cho những người dùng khác nhau. Mọi người đều thấy cùng một trang web, điều này hạn chế khả năng kiểm tra và tinh chỉnh các yếu tố thiết kế như màu sắc, hình dạng nút và hình ảnh nền của chúng tôi. Nếu không có chức năng này, chúng tôi không thể tối ưu hóa trang web dựa trên hành vi thực tế của người dùng.
6. Database Bloat : Có lẽ một trong những nhược điểm đáng kể nhất của Elementor là cách nó xử lý các kiểu và nội dung. Elementor lưu trữ các kiểu, cấu trúc lồng nhau và các thẻ không cần thiết khác được trộn lẫn với nội dung trong cơ sở dữ liệu. Điều này dẫn đến một cơ sở dữ liệu phình to không được dọn dẹp ngay cả khi Elementor bị vô hiệu hóa hoặc gỡ cài đặt. Do đó, việc chuyển sang một chủ đề hoặc khung mới không giải quyết được vấn đề - các kiểu đó vẫn được nhúng trong các trang, tiếp tục gây ra sự cố.

Với tất cả những thách thức này, rõ ràng là chúng tôi cần một giải pháp mạnh mẽ hơn. Chúng tôi đã quyết định xây dựng một trang web mới, độc lập mà không cần Elementor, lựa chọn một cách tiếp cận bền vững và linh hoạt hơn.

3) Cách tạo trang trên trang web mới

Việc xây dựng trang web mới từ đầu đã cho chúng tôi cơ hội thiết lập một quy trình sạch sẽ, hợp lý để tạo trang. Trong hệ thống mới, việc tạo trang rất đơn giản:

1. Đăng nhập vào bảng quản trị WordPress và nhấp vào Trang -> Thêm trang mới .
2. Bạn sẽ thấy trình soạn thảo WordPress chuẩn, nơi bạn có thể viết hoặc dán văn bản, thêm liên kết và tải hình ảnh lên.

Quá trình này đơn giản nhưng linh hoạt. Thay vì dựa vào hệ thống khối phức tạp của Elementor, trình chỉnh sửa nội dung trong WordPress gọn gàng hơn nhiều, cho phép cập nhật nhanh chóng và tùy chỉnh dễ dàng. Bên dưới trình chỉnh sửa, có các cài đặt cho Advanced Custom Fields (ACF), đã được định cấu hình để duy trì tính nhất quán trên toàn bộ trang web.

ACF cho phép chúng ta tạo các phần nội dung linh hoạt, với các khối như Nội dung 1…Nội dung 15 , nơi bạn có thể dễ dàng đặt tiêu đề, văn bản, hình ảnh và nhãn nút cho từng phần của trang. Các khối này tự động thay đổi vị trí của hình ảnh và văn bản, đảm bảo rằng bố cục vẫn hấp dẫn về mặt thị giác mà không cần điều chỉnh thủ công.

Đối với hình ảnh, chúng tôi đã triển khai hệ thống khớp màu tự động áp dụng gradient trong các màu chính của trang web. Điều này đảm bảo rằng tất cả hình ảnh đều phù hợp với tính thẩm mỹ chung. Đối với logo hoặc ảnh chụp màn hình cần giữ nguyên màu sắc, có tùy chọn "giữ nguyên màu sắc" ghi đè lên gradient.

Hệ thống này đơn giản hóa việc quản lý nội dung trong khi vẫn duy trì tính nhất quán về thiết kế trên tất cả các trang.

4) Cách tạo bài đăng mới

Việc tạo bài đăng trên trang web mới tuân theo quy trình hợp lý giống như việc tạo trang, với một số điểm khác biệt chính:

• Bài đăng có URL bao gồm ../blog/.. , phân biệt chúng với các trang.
• Ở thanh bên phải, một khối sẽ tự động hiển thị ba bài viết mới nhất, giúp blog luôn năng động và hấp dẫn.

Mẫu cho tất cả các bài đăng nằm trong tệp template-parts/content/content-single.php , xử lý cấu trúc và bố cục của mỗi bài đăng trên blog. Mẫu nhất quán này cho phép cập nhật dễ dàng và đảm bảo rằng tất cả các bài đăng đều tuân thủ cùng một nguyên tắc thiết kế.

5) Trường tùy chỉnh nâng cao (ACF)

ACF là một phần thiết yếu trong quá trình phát triển trang web mới của chúng tôi. Nó cho phép chúng tôi tạo các trường tùy chỉnh có thể dễ dàng quản lý thông qua bảng điều khiển quản trị WordPress. Các trường như content_1 được tham chiếu trong mã PHP, cho phép chúng tôi tự động kéo nội dung chính xác cho từng trang và bài đăng.

Tính linh hoạt này rất quan trọng để đảm bảo chúng tôi có thể quản lý và cập nhật trang web một cách hiệu quả trong khi vẫn có thể tùy chỉnh khi cần.

6) Kiểm tra A/B

Một trong những cải tiến quan trọng nhất mà chúng tôi thực hiện với trang web mới là việc triển khai thử nghiệm A/B. Thử nghiệm A/B cho phép chúng tôi so sánh hai phiên bản của trang web để xem phiên bản nào hoạt động tốt hơn với người dùng. Điều này có thể bao gồm thử nghiệm các màu sắc, hình dạng nút, hình nền hoặc thậm chí là bố cục khác nhau.

Chúng tôi đã triển khai chức năng này bằng cách sử dụng tham số GET trong URL. Ví dụ, có thể tạo hai chiến dịch quảng cáo giống hệt nhau nhưng có URL khác nhau:

• https://www.conveythis.com/?param=1

• https://www.conveythis.com/?param=2

Khi người dùng nhấp vào các liên kết này, tham số được lưu trong cookie. Tùy thuộc vào giá trị của tham số, trang web sẽ hiển thị các phiên bản khác nhau của trang, chẳng hạn như màu nút hoặc hình nền khác nhau. Điều này cho phép chúng tôi thu thập dữ liệu có giá trị về sở thích và hành vi của người dùng.

Tất cả các sự kiện được ghi lại trong một .csv tệp, cũng như trong cơ sở dữ liệu MySQL, cho phép chúng tôi phân tích dữ liệu và đưa ra quyết định sáng suốt về việc cải thiện trang web.

7) Tệp tin functions.php

8) Xử lý SEO và Tốc độ trang web

Trọng tâm chính trong quá trình cải tạo trang web là cải thiện SEO và hiệu suất chung của trang web. Trang web gốc, được xây dựng bằng Elementor, gặp sự cố về thời gian tải chậm và các hoạt động SEO không tối ưu do mã cồng kềnh và hình ảnh không được tối ưu hóa.

Cải thiện SEO

Để đảm bảo trang web mới của chúng tôi thân thiện với SEO, chúng tôi đã triển khai một số biện pháp thực hành tốt nhất ngay từ đầu:

• HTML ngữ nghĩa : Chúng tôi đã cẩn thận cấu trúc HTML của trang web bằng cách sử dụng đúng các thẻ tiêu đề (
  ,
  , v.v.), đảm bảo rằng các công cụ tìm kiếm có thể dễ dàng phân tích và hiểu được hệ thống phân cấp nội dung. Điều này đặc biệt quan trọng đối với cả thứ hạng SEO và khả năng truy cập.
• Thẻ Meta và Dữ liệu Open Graph : Chúng tôi tận dụng plugin Yoast SEO để xử lý tiêu đề meta, mô tả và dữ liệu Open Graph để chia sẻ trên mạng xã hội. Bằng cách sử dụng Yoast, chúng tôi đảm bảo rằng mỗi trang và bài đăng đều có siêu dữ liệu được tối ưu hóa, điều này rất quan trọng đối với khả năng hiển thị của công cụ tìm kiếm và tỷ lệ nhấp chuột từ các nền tảng truyền thông xã hội.
• Schema Markup : Sử dụng tệp functions.php , chúng tôi đã thêm schema markup tùy chỉnh cho dữ liệu có cấu trúc, cải thiện cách các công cụ tìm kiếm hiển thị các trang của chúng tôi trong kết quả tìm kiếm. Ví dụ, chúng tôi đã bao gồm schema cho các bài viết, nghiên cứu tình huống và sản phẩm, giúp các công cụ tìm kiếm phân loại nội dung của chúng tôi tốt hơn.

hàm add_schema_markup() {
  tiếng vọng '
  {
    "@context": "http://schema.org",
    "@type": "Tổ chức",
    "tên": "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' );


Tối ưu hóa tốc độ trang web

Hiệu suất là yếu tố quan trọng không chỉ đối với trải nghiệm người dùng mà còn đối với thứ hạng SEO. Chúng tôi đã thực hiện một số bước để cải thiện tốc độ trang web:

• Tối ưu hóa hình ảnh : Chúng tôi sử dụng các định dạng hình ảnh hiện đại như WebP , cung cấp tỷ lệ nén tốt hơn so với các định dạng truyền thống như PNG và JPEG. Tất cả hình ảnh đều được phục vụ ở kích thước phù hợp dựa trên độ phân giải màn hình của người dùng, đảm bảo thời gian tải nhanh ngay cả trên thiết bị di động.
• Tải chậm : Bằng cách triển khai tải chậm cho hình ảnh, chúng tôi đảm bảo rằng chỉ những hình ảnh hiển thị trên màn hình của người dùng mới được tải ban đầu. Các hình ảnh bổ sung sẽ được tải khi người dùng cuộn, giúp giảm thời gian tải trang ban đầu.
• Lưu trữ đệm và thu nhỏ : Chúng tôi sử dụng WP Rocket để lưu trữ đệm, thu nhỏ và nén các tệp HTML, CSS và JavaScript. WP Rocket giúp chúng tôi đạt được thời gian tải nhanh hơn bằng cách giảm kích thước tệp tổng thể và phục vụ các phiên bản lưu trữ đệm tĩnh của các trang cho những khách truy cập thường xuyên.

9) Tối ưu hóa và dọn dẹp cơ sở dữ liệu

Trang web cũ đã tích lũy một lượng lớn dữ liệu "rác" do Elementor phình to và cấu trúc cơ sở dữ liệu không hiệu quả. Để đảm bảo trang web mới chạy trơn tru, chúng tôi đã thực hiện dọn dẹp và tối ưu hóa cơ sở dữ liệu kỹ lưỡng.

• Xóa dữ liệu Elementor cũ

Như đã đề cập trước đó, ngay cả sau khi hủy kích hoạt Elementor, các kiểu và cài đặt của nó vẫn được nhúng trong cơ sở dữ liệu. Chúng tôi đã sử dụng các truy vấn tùy chỉnh để xóa dữ liệu dư thừa này và dọn dẹp cơ sở dữ liệu. Ngoài ra, chúng tôi đã xóa mọi tệp phương tiện không sử dụng, bản sửa đổi bài đăng và các bản tạm thời đã hết hạn đã tích lũy theo thời gian.

• Lập chỉ mục cơ sở dữ liệu

Chúng tôi cũng tối ưu hóa cơ sở dữ liệu bằng cách thêm chỉ mục vào các cột thường xuyên truy vấn, đảm bảo rằng các truy vấn cơ sở dữ liệu nhanh hơn và hiệu quả hơn. Ví dụ, thêm chỉ mục vào ngày đăng cột này tăng tốc các truy vấn liên quan đến các bài đăng gần đây, cải thiện hiệu suất của các trang blog của chúng tôi.

Phần kết luận

Quyết định xây dựng một trang web mới từ đầu được thúc đẩy bởi những hạn chế và sự kém hiệu quả của trang web cũ. Việc chỉ đơn giản chuyển đổi chủ đề không phải là một lựa chọn khả thi do sự không nhất quán trong thiết kế, kiểu dáng cồng kềnh và các vấn đề về hiệu suất do Elementor gây ra. Bằng cách tạo một trang web mới với sự phát triển tùy chỉnh và Advanced Custom Fields, chúng tôi đã đạt được một trang web hiệu quả hơn, gắn kết hơn và chuyên nghiệp hơn, giúp nâng cao trải nghiệm của người dùng đồng thời cho phép cập nhật hợp lý hóa và chức năng thử nghiệm A/B. Trang web mới này cung cấp nền tảng vững chắc cho sự phát triển và cải tiến trong tương lai.