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.
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:
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.
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.
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:
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.
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:
chức năng custom_button_shortcode($atts) {
$atts = mã ngắn_atts(
mảng(
'nhãn' => 'Nhấp vào đây',
'url' => '#',
),
$atts,
'nút tùy chỉnh'
);
trả về ' ' .esc_html( $atts['label'] ) . ' ';
}
add_shortcode('nút_tùy_chỉnh', 'nút_tùy_chỉnh_mã_ngắn');
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ế.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.
Để đả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",
"sameAs": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
}
';
}
add_action( 'wp_head', 'add_schema_markup' );
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 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.
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.
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àongà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 đượ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.
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 ConveyThis , các trang đã dịch của bạn sẽ gây được tiếng vang với độc giả, mang lại cảm giác gần gũi với ngôn ngữ đích.
Mặc dù đòi hỏi nỗ lực, nhưng kết quả sẽ xứng đáng. 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 7 ngày!