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 định dạng nội tuyến riêng, có nghĩa là không thể thực hiện thay đổi trên toàn hệ thống. Nếu muốn cập nhật kiểu dáng trang web, chúng ta sẽ phải xem xét 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ĩ đó, rõ ràng 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 ta chuyển toàn bộ nội dung trong khi vẫn giữ nguyên các URL nhưng với thiết kế mới, nhất quán và dễ cập nhật.
Elementor là một trong những trình tạo trang phổ biến nhất cho WordPress. Thoạt nhìn, đây có vẻ 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 rộng rãi 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 từ bỏ Elementor và thay vào đó chọn một trang web được xây dựng tùy chỉnh.
Elementor’ Những hạn chế và thách thức:
các thùng chứa bên trong các thùng chứa khác các yếu tố, mỗi yếu tố có một tập hợp các phong cách riêng. Điều này dẫn đến cấu trúc cồng kềnh, ảnh hưởng tiêu cực đến tốc độ tải trang, 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 nguyên nhân là do mã nặng được tạo ra bởi Elementor.Với tất cả những thách thức này, rõ ràng là chúng ta 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 Elementor, lựa chọn một cách tiếp cận bền vững và linh hoạt hơn.
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:

Quy 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 Elementor’s, 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 thiết lập cho Trường tùy chỉnh nâng cao (ACF), đã được 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.
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:
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ế.
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.
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.
Một trong những công dụng chính của tệp functions.php là tạo các loại bài đăng và phân loại tùy chỉnh, cho phép chúng tôi sắp xếp nội dung hiệu quả hơn. Thay vì chỉ dựa vào cấu trúc mặc định của WordPress (các trang và bài đăng), chúng tôi đã giới thiệu các loại tùy chỉnh cho nội dung cụ thể, chẳng hạn như nghiên cứu tình huống, lời chứng thực hoặc tính năng sản phẩm. Điều này không chỉ giúp nội dung của chúng tôi được sắp xếp tốt hơn mà còn cải thiện trải nghiệm của người dùng bằng cách giúp điều hướng và tìm thông tin có liên quan dễ dàng hơn.
Ví dụ, để tạo loại bài đăng tùy chỉnh cho các nghiên cứu tình huống, chúng tôi đã thêm đoạn mã sau vào functions.php :
hàm create_case_study_post_type() {
register_post_type( 'nghiên cứu trường hợp',
mảng(
'nhãn' =>mảng(
'tên' => __( 'Nghiên cứu tình huống' ),
'singular_name' => __( 'Nghiên cứu tình huống' )
),'public' => đúng,
'has_archive' => đúng,
'viết lại' => mảng('slug' => 'nghiên cứu trường hợp'),
)
);
}
thêm_hành_động('init', 'create_case_study_post_type' );
Điều này đã tạo ra một loại bài đăng mới có tên là “Nghiên cứu tình huống” có chức năng tương tự như các bài đăng thông thường nhưng có cấu trúc lưu trữ và phân loại riêng.
Một ứng dụng quan trọng khác của functions.php là tải các tập lệnh và kiểu bên ngoài, đảm bảo rằng trang web của chúng tôi có tất cả các thư viện và khung cần thiết. Ví dụ, chúng tôi tích hợp các thư viện như Slick.js cho thanh trượt và AOS (Animate on Scroll) để có hoạt ảnh mượt mà. Bằng cách tải có chọn lọc các tài sản này chỉ khi cần thiết (ví dụ: trên các trang hoặc mẫu cụ thể), chúng tôi đã giảm được tình trạng phình to không cần thiết và cải thiện tốc độ tải trang.
Sau đây là cách chúng tôi xử lý việc tải các kiểu và tập lệnh:
hàm load_custom_scripts() {
// Tải thanh trượt Slick cho các mẫu cụ thể
nếu( 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', mảng('jquery'), '', đúng );
} // Tải hoạt ảnh AOS trên toàn trang web
wp_enqueue_style('aos-css', get_template_directory_uri() . '/css/aos.css' );
wp_enqueue_script('aos-js', get_template_directory_uri() . '/js/aos.js', mảng('jquery'), '', đúng );
}
thêm_hành_động('wp_enqueue_scripts', 'load_custom_scripts');
Bằng cách sử dụng kiểm tra có điều kiện (ví dụ: là_trang_mẫu()), chúng tôi đảm bảo rằng các tập lệnh không cần thiết không được tải trên toàn bộ trang web, do đó tối ưu hóa hiệu suất.
Để cải thiện tính linh hoạt cho người dùng không chuyên quản lý nội dung trang web, chúng tôi đã thêm mã ngắn tùy chỉnh qua functions.php . Các mã ngắn này cho phép người dùng dễ dàng chèn chức năng phức tạp hoặc các thành phần được tạo kiểu mà không cần phải chạm vào mã. Ví dụ: chúng tôi đã tạo mã ngắn để thêm các nút tùy chỉnh ở bất kỳ đâu trên trang web:
[ĐÃ XÓA]
Mã ngắn này giúp biên tập viên dễ dàng thêm các nút có văn bản và URL tùy chỉnh, cho phép điều chỉnh nhanh mà không làm hỏng thiết kế.
Một trọng tâm chính trong quá trình cải tiến trang web là cải thiện SEO và hiệu suất tổng thể của trang web. Trang web ban đầu, được xây dựng bằng Elementor, gặp vấn đề về thời gian tải chậm và các phương pháp SEO không tối ưu do mã nguồn cồng kềnh và hình ảnh chưa được tối ưu hóa.
Để đả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:
, , 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.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",
"giống như": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
}
';
}
thêm_hành_động('wp_head', 'thêm_đánh_giá_lược');
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:
Trang web cũ đã tích lũy một lượng lớn dữ liệu “rác” do cấu trúc cơ sở dữ liệu cồng kềnh và kém hiệu quả của Elementor’. Để đảm bảo trang web mới hoạt động trơn tru, chúng tôi đã tiến hành dọn dẹp và tối ưu hóa cơ sở dữ liệu một cách kỹ lưỡng.
Như đã đề cập trước đó, ngay cả sau khi vô hiệu hóa Elementor, các kiểu dáng 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à làm sạch cơ sở dữ liệu. Ngoài ra, chúng tôi đã xóa mọi tập tin phương tiện không sử dụng, các bản sửa đổi sau khi đăng và các dữ liệu tạm thời đã hết hạn tích lũy theo thời gian.
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.
Quyết định xây dựng một trang web mới từ đầu xuất phát từ những hạn chế và sự thiếu hiệu quả của trang web cũ. Việc chỉ đơn thuầ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 về thiết kế, kiểu dáng cồng kềnh và các vấn đề về hiệu suất gây ra bởi Elementor. Bằng cách tạo một trang web mới với tính năng phát triển tùy chỉnh và Trường tùy chỉnh nâng cao, chúng tôi đã đạt được một trang web hiệu quả hơn, mạch lạc hơn và chuyên nghiệp hơn, giúp nâng cao trải nghiệm người dùng đồng thời cho phép cập nhật hợp lý 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.
Dịch thuật, không chỉ là biết ngôn ngữ, là một quá trình phức tạp.
Bằng cách làm theo các mẹo của chúng tôi và sử dụng ConveyThisCác trang dịch của bạn sẽ gây được tiếng vang với người đọc, tạo cảm giác như đang nói ngôn ngữ mẹ đẻ của họ.
Mặc dù đòi hỏi nhiều nỗ lực, nhưng kết quả đạt được rất đáng giá. Nếu bạn đang dịch một trang web, ConveyThis có thể giúp bạn tiết kiệm hàng giờ với dịch máy tự động.
Dùng thử ConveyThis miễn phí trong 3 ngày!