Sản phẩm WooCommerce và WordPress đem lại cho bạn sự linh hoạt khi có thể thay đổi mã và nội dung một cách linh hoạt – điều chỉnh và tùy chỉnh hoàn toàn trang web của bạn. Sự linh hoạt là một trong những lợi ích lớn nhất của việc sử dụng WooCommerce để bán hàng trực tuyến. Bạn có thể sử dụng các plugin, tiện ích mở rộng và giao diện để thỏa mãn yêu cầu, sau đó điều chỉnh và mã hoá để tùy chỉnh giao diện và chức năng của trang web của bạn.
Tuy nhiên, khi thực hiện các điều chỉnh trang web, có một số thực hành tốt nhất mà bạn nên tuân thủ. Thường không phải lúc nào cũng rõ ràng về cách thay đổi này phải được thực hiện. Nhiều người dùng tùy chỉnh giao diện mặc định của mình bằng cách thay đổi màu liên kết, bố cục và cảm nhận. Hầu hết các người dùng chỉ cần can đảm và thay đổi mã, điều này là cách dễ nhất để làm. Tuy nhiên, cách này sẽ gây khó khăn khi cần cập nhật bản mới sau này, vì tất cả các thay đổi đều bị mất khi các tệp được ghi đè bằng bản mới.
Trong bài hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tùy chỉnh giao diện của mình một cách tốt nhất, giúp việc cập nhật trở nên ít đau đớn hơn và bạn có thể điều chỉnh quyền tùy chỉnh.
Có hai cách để tùy chỉnh:
Plugin – Những thay đổi nhỏ
Child theme – Những thay đổi lớn
Nếu bạn chỉ muốn thay đổi phong cách hoặc CSS của bảng điều khiển, thì tùy chọn tốt nhất là sử dụng một plugin cho phép bạn thêm tùy chỉnh về phong cách. Đề nghị của chúng tôi là sử dụng Jetpack để thực hiện các thay đổi liên quan đến CSS hoặc Sass.
Hãy cài đặt Jetpack. Sau khi hoàn tất, truy cập vào trang web của bạn > Bảng điều khiển > Jetpack > Cài đặt và kích hoạt Tùy chỉnh CSS.
Tiếp theo, bạn có thể vào Giao diện > Sửa CSS. Tại đó, bạn có thể thêm tất cả các kiểu CSS tùy chỉnh.
Hãy xem một ví dụ đơn giản. Chúng ta sẽ sử dụng Chrome Dev Tools để tìm màu liên kết của thanh điều hướng trong chủ đề Storefront. Chúng ta sẽ kiểm tra yếu tố như sau: chuột phải vào yếu tố và chọn kiểm tra, nó sẽ hiển thị cho chúng ta kiểu cho phần tử nav.
Trong ảnh chụp màn hình trên, chúng ta thấy kiểu cho màu liên kết trong thanh điều hướng.
.main-navigation ul li a { color: #ffffff; }
.main-navigation ul li a:hover { color: #e6e6e6; }
Sau đó, chúng ta dán phần mã này vào custom.css, chúng ta muốn thay đổi màu thành màu đỏ và màu khi di chuột qua là màu trắng. Chúng ta cũng xóa những kiểu khác mà chúng ta sẽ không thay đổi, như sau:
.main-navigation ul li a { color: red; }
.main-navigation ul li a:hover { color: white; }
Sau khi bạn lưu custom.css và làm mới trang web, bạn sẽ nhận thấy màu liên kết thanh điều hướng đã thay đổi thành màu đỏ và khi di chuột qua, nó sẽ chuyển thành màu trắng.
Bạn cũng có thể thêm kiểu mới vào stylesheet của mình để bổ sung cho những kiểu đã có sẵn trong chủ đề. Nếu chủ đề của bạn được cập nhật, Jetpack sẽ giữ cho kiểu của bạn vẫn nguyên vẹn. Chúng tôi luôn khuyến nghị bạn sao lưu chủ đề trước khi cập nhật lên phiên bản mới hơn và xem hướng dẫn nâng cấp của chúng tôi về cách thực hiện.
Sử dụng plugin Code Snippets
Plugin Code Snippets cho phép bạn thêm đoạn mã vào trang web của bạn thay vì dán vào tệp functions.php. Bạn có thể viết một mô tả ngắn để bạn biết nó làm gì và kích hoạt hoặc tắt các đoạn mã này theo nhu cầu.
Nếu bạn muốn thay đổi stylesheet hoặc CSS của một chủ đề phổ biến, thì tùy chọn tốt nhất là sử dụng một child theme để bảo vệ các tùy chỉnh trước các bản cập nhật tương lai.
Nhiều chủ đề phổ biến có các child theme có thể được cài đặt và kích hoạt để thay đổi giao diện của chủ đề cha mà không cần điều chỉnh mã hoặc phong cách. Child theme không nên được sử dụng để thêm mã tùy chỉnh, nhưng đó là một cách để thay đổi giao diện của một chủ đề thông qua thiết kế của người khác. Ví dụ, với chủ đề Storefront của chúng tôi, chúng tôi có sẵn một số child theme đa dạng.
Một child theme như vậy sẽ không phải là một công cụ tuyệt vời để thêm mã tùy chỉnh, vì lý do tương tự bạn nên tránh thêm mã tùy chỉnh vào chủ đề cha; nếu có bản cập nhật cho child theme, tất cả mã tùy chỉnh của bạn cũng sẽ bị ghi đè.
Ngoài ra, bạn có thể tự tạo child theme. Điều này giống như thêm một lớp lên trên chủ đề cha của bạn, mục đích duy nhất là ưu tiên cho mã tùy chỉnh của bạn và tránh việc loại bỏ mã của bạn ở bản cập nhật tiếp theo của chủ đề cha của chúng tôi.
Bạn có thể tạo child theme của riêng mình bằng cách sử dụng hướng dẫn của chúng tôi; Thiết lập và sử dụng child theme. Thêm thông tin về cách child theme hoạt động cũng có trên WordPress.org tại Child Themes.
Hãy khám phá thêm về các chủ đề con, cách thêm mã tùy chỉnh an toàn vào WordPress và một số mẹo tùy chỉnh WooCommerce.