Chỉnh sửa mẫu html

Đôi khi vì lý do gì đó, khi bạn cài đặt mẫu blogger mới nhưng mẫu lại không hiển thị như mong muốn hoặc xuất hiện thêm 1 số tiện ích dư thừa. Ở bài viết này, Vietrick sẽ hướng dẫn các bạn cài đặt template Blogger theo cách cơ bản, dễ hiểu, đảm bảo template không còn thừa mã từ template cũ

Đây là bài viết hướng dẫn cài đặt template Blogger dành cho người mới

Hướng dẫn cài đặt mẫu Blogger

Để thực hiện cài đặt template [giao diện] cho Blogger, các bạn hãy thực hiện theo các bước bên dưới

Sao lưu

Trước khi chuẩn bị thay đổi mẫu cho Blogger, các bạn nên tiến hành sao lưu để phòng trường hợp có sai sót

• Xem thêm bài viết sao lưu và phục hồi Blogger

Sau khi sao lưu đầy đủ, chúng ta có sẵn để cập nhật mẫu

Chỉnh sửa HTML đã sửa

Tiếp đến, các tại trang quản trị của Blogger, các bạn di chuyển đến menu Chủ đề [Theme]. Vào menu QUY ĐỊNH [Tùy chỉnh], nhấn nút menu chọn mục Chỉnh sửa HTML

Update HTML

Tại phần cập nhật nội dung HTML, các bạn sao chép và dán đoạn mã nội dung bên dưới vào và nhấn Lưu [Save]

Sau khi cập nhật đoạn mã trên, quay lại kiểm tra trang chủ sẽ thấy nội dung là một trang trắng

Đến lúc này chúng ta đã xóa cơ bản sẽ làm sạch widget dữ liệu còn sót lại từ mẫu cũ. Lúc này bạn có thể yên tâm cập nhật mẫu mới

Cập nhật mẫu mới

Cũng tại mục chỉnh sửa HTML, các bạn mở tệp .xml chứa mã mẫu, sao chép và dán đè vào nội dung soạn thảo HTML. Sau đó nhấn Save để hoàn tất

Các bạn có thể tham khảo thêm Template VTrick do Vietrick phát triển

Kết quả

Sao khi thực hiện, các bạn quay lại trang chủ và kiểm tra mẫu mới đã hoạt động. Lúc này, mẫu mới sẽ có thể hiển thị gần giống với bản demo, những khác biệt còn lại cần được cấu hình theo nội dung bài viết và nhãn trong blog của bạn

Nếu bạn là người không hiểu về ngôn ngữ PHP hay HTML/CSS thì có thể bỏ qua phần này vì mình xin nói thẳng là bạn sẽ không làm được gì trong template nếu không biết những điều trên. Nhưng nếu bạn đã có kiến ​​thức đó và cần cách tùy chỉnh hiển thị của Woocommerce trên trang web thì có thể tham khảo để có thể tùy chỉnh giao diện Woocommerce đúng cách, không bị mất khi tiến hành cập nhật phiên bản

Tìm hiểu về template của Woocommerce

Các mẫu của Woocommerce nó là những tệp mẫu để thiết lập cấu trúc hiển thị của nó ra bên ngoài trang web. Ví dụ khi bạn vào xem một sản phẩm thì những gì bạn thấy trong đó đều được hiển thị theo mẫu mà Woocommerce đã cấu hình sẵn. Và một điều kiện hiển thị, chúng tôi muốn biến đổi cách hiển thị những phần đó thì sẽ tiến hành sửa đổi mẫu

Những mẫu mặc định của Woocommerce sẽ được lưu tại thư mục /wp-content/plugins/woocommerce/templates/ và tất cả các tệp trong đó đều là mẫu được hiển thị, mọi thứ đều có trong đó

Danh sách mẫu của Woocommerce

Nếu bạn chưa hiểu ý nghĩa của các tập tin và thư mục bên trong đó thì mình giải thích như sau

• auth/ – Chưa biết. D
• giỏ hàng/ – Các tập tin mẫu liên quan đến hiển thị giỏ hàng
  • giỏ hàng trống. php – Hiển thị thùng hàng trống
  • giỏ hàng-mục-dữ liệu. php – Hiển thị biến thể bên trong giỏ hàng
  • giỏ-vận chuyển. php – Hiển thị khu vực chọn kiểu giao nhận trong Thùng hàng
  • tổng số giỏ hàng. php – Hiển thị hộp tính tổng giỏ hàng
  • xe đẩy. php – Hiển thị cả giỏ hàng
  • bán chéo. php – Hiển thị sản phẩm bán chéo
  • xe đẩy nhỏ. php – Hiển thị giỏ hàng mini ở widget
  • quá trình-đến-thanh-nút. php – Nút chuyển qua trang thanh toán. Thế mà nó cũng vô thành một template nữa
  • máy tính vận chuyển. php – Hiển thị hộp tính phí giao nhận trong Thùng hàng
• checkout/ – Các tập tin mẫu hiển thị phần thanh toán
  • lỗi giỏ hàng. php – Hiển thị trang Giỏ hàng bị lỗi
  • lập hóa đơn. php – Hiển thị các biểu mẫu nhập thông tin hóa đơn của khách hàng
  • kiểm tra hình thức. php – Constructor full form trang thanh toán
  • mẫu phiếu giảm giá. php – Hiển thị biểu mẫu nhập mã ưu đãi
  • đăng nhập biểu mẫu. php – Hiển thị biểu mẫu đăng nhập
  • hình thức trả tiền. php – Hiển thị phần trả tiền, bao gồm phần tổng kết hàng và phần chọn phương thức thanh toán
  • hình thức vận chuyển. php  – Hiển thị khung nhập địa chỉ nhận hàng
  • phương thức thanh toán. php – Hiển thị nút chọn phương thức thanh toán
  • thanh toán. php – Hiển thị thông tin các phương thức thanh toán và nút đặt hàng
  • xem xét đơn đặt hàng. php – Hiển thị phần xem lại hóa đơn
  • Cảm ơn. php – Hiển thị trang cám ơn sau khi thanh toán xong
• email/ – Các mẫu hiển thị thông báo email của Woocommerce
  • plain/ – Mẫu hiển thị email ở dạng chữ thông thường
  • quản trị viên đã hủy đơn đặt hàng. php – Nội dung email báo đơn hàng bị hủy cho quản trị viên
  • admin-new-order. php – Nội dung email thông báo đơn hàng mới cho quản trị viên
  • khách hàng-hoàn thành đơn đặt hàng. php – Nội dung email thông báo đơn hàng đã hoàn thành cho khách hàng
  • Hóa đơn của khách hàng. php – Nội dung email thông báo hóa đơn cho khách hàng
  • khách hàng-tài khoản mới. php – Nội dung email thông báo thông tin tài khoản mới cho khách hàng
  • lưu ý khách hàng. php – Nội dung email thông báo có ghi chú mới vừa thêm vào hóa đơn cho khách hàng
  • khách hàng-xử lý đơn đặt hàng. php – Nội dung email thông báo đơn hàng đang xử lý cho khách hàng
  • khách-hàng-hoàn-tiền. php – Nội dung email thông báo đơn hàng đã được hoàn trả
  • khách hàng đặt lại mật khẩu. php – Nội dung email thông báo Khôi phục mật khẩu cho khách hàng
  • địa chỉ email. php – Phần hiển thị địa chỉ trong email
  • chân trang email. php – Phần hiển thị footer trong email
  • email-đặt hàng-mục. php – Phần hiển thị các sản phẩm của đơn hàng trong email
  • phong cách email. php  – CSS của email
• toàn cầu/ – Các mẫu hiển thị các thành phần trên toàn bộ các trang của Woocommerce
  • vụn bánh mì. php – Hiển thị thanh điều hướng
  • đăng nhập biểu mẫu. php – Hiển thị biểu mẫu đăng nhập
  • số lượng đầu vào. php – Hiển thị trường lựa chọn số lượng
  • thanh bên. php – Hiển thị sidebar của Woocommerce
  • kết thúc trình bao bọc. php – Hiển thị phần kết thúc của phần tử bao quanh cấu trúc trang
  • bắt đầu trình bao bọc. php – Hiển thị phần bắt đầu của phần tử bao quanh cấu trúc trang
• loop/ – Toàn bộ các phần tử trong vòng lặp hiển thị sản phẩm của Woocommerce
  • thêm vào giỏ hàng. php – Thêm nút vào giỏ hàng
  • loop-end.php – Phần tử kết thúc vòng lặp, chỉ có mỗi thẻ
    trong đó hehe.
    • bắt đầu vòng lặp. php – Phần tử bắt đầu vòng lặp
    • không tìm thấy sản phẩm. php – Dòng hiện thị không tìm thấy sản phẩm
    • gọi món. php – Khung hiển thị kiểu sắp xếp sản phẩm
    • phân trang. php – Hiển thị phân trang
    • giá bán. php – Hiển thị giá
    • Xếp hạng. php – Hiển thị cái đánh giá sản phẩm
    • đếm kết quả. php – Hiển thị số lượng tính toán kết quả
    • giảm giá. php – Hiển thị cái nhãn hiển thị chữ SALE trên sản phẩm khi sản phẩm được giảm giá
    • Tiêu đề. php – Hiển thị tiêu đề sản phẩm
  • myaccount/ – Các mẫu hiển thị phần tài khoản trong Woocommerce
    • hình thức-thêm-phương thức thanh toán. php – Biểu mẫu hiển thị trang bổ sung phương thức thanh toán
    • hình-sửa-tài-khoản. php – Hiển thị biểu mẫu sửa đổi tài khoản
    • form-chỉnh sửa-địa chỉ. php – Hiển thị email đã chỉnh sửa biểu mẫu
    • đăng nhập biểu mẫu. php – Form đăng nhập
    • mẫu-mất-mật-khẩu. php – Form quên mật khẩu
    • tài khoản của tôi. php – Mẫu hiển thị trang Tài khoản của tôi
    • địa chỉ của tôi. php – Mẫu hiển thị trang Địa chỉ của tôi
    • Tải xuống của tôi. php – Mẫu hiển thị các phần sản phẩm đã mua có thể tải xuống
    • đơn đặt hàng của tôi. php – Mẫu hiển thị phần Đơn đặt hàng của tôi
    • xem thứ tự. php – Mẫu hiển thị trang xem đơn hàng trong trang tài khoản
  • thông báo/ – Các mẫu hiển thị thông báo
    • lỗi. php – Thông báo lỗi
    • để ý. php – Thông báo
    • thành công. php – Thông báo thành công
  • order/ – Các mẫu hiển thị menu hàng
    • theo dõi biểu mẫu. php – Form theo dõi đơn hàng
    • đặt hàng lại. php – Hiển thị phần đặt lại menu hàng
    • chi tiết đơn hàng-khách hàng. php – Hiển thị thông tin chi tiết khách hàng trong đơn hàng
    • chi tiết đơn hàng. php – Hiển thị thông tin chi tiết sản phẩm trong đơn hàng
    • chi tiết đơn hàng. php – Hiển thị thông tin chi tiết của đơn hàng
    • theo dõi. php – Hiển thị trang theo dõi đơn hàng
  • single-product/ – Các mẫu hiển thị các phần tử trong trang hiển thị chi tiết các sản phẩm
    • add-to-cart/ – Các mẫu hiển thị nút thêm vào giỏ hàng trong trang chi tiết sản phẩm
      • bên ngoài. php – Nút bổ sung vào giỏ hàng đối với sản phẩm liên kết bên ngoài
      • nhóm lại. php – Nút thêm vào giỏ hàng đối với sản phẩm được nhóm
      • giản dị. php – Nút thêm vào giỏ hàng với sản phẩm đơn giản
      • Biến đổi. php – Nút thêm vào giỏ hàng với sản phẩm có thể chứa biến
    • tabs/ – Các mẫu hiển thị nội dung của thông tin tab trong sản phẩm
      • thông tin thêm. php – Tab hiển thị thông tin bổ sung của sản phẩm
      • sự mô tả. php – Tab display product description
      • tab. php – Cấu hình các tab
    • meta. php – Hiển thị phần thông tin meta của sản phẩm như danh mục, từ khóa,…
    • giá bán. php – Hiển thị giá
    • thuộc tính sản phẩm. php – Hiển thị thuộc tính sản phẩm
    • Hình ảnh sản phẩm. php – Hiển thị hình ảnh sản phẩm
    • sản phẩm-hình thu nhỏ. php – Hiển thị các thư viện hình ảnh của sản phẩm
    • Xếp hạng. php – Hiển thị phần đánh giá điểm sao
    • có liên quan. php – Hiển thị phần sản phẩm liên quan
    • kiểm tra lại. php – Hiển thị danh sách đánh giá khách hàng
    • giảm giá. php – Hiển thị nhãn hiển thị chứ Bán
    • đăng lại. php – Hiển thị phần chia sẻ sản phẩm lên mạng xã hội
    • Mô tả ngắn. php – Hiển thị phần mô tả ngắn
    • Tiêu đề. php – Hiển thị tiêu đề
    • bán thêm. php – Hiển thị sản phẩm bán thêm
  • lưu trữ-sản phẩm. php – Mẫu hiển thị cấu trúc trang lưu trữ của sản phẩm
  • nội dung-sản phẩm. php – Mẫu hiển thị cấu trúc nội dung hiển thị sản phẩm được gọi từ archive-product. php
  • nội dung-product_cat. php – Mẫu hiển thị cấu trúc nội dung sản phẩm trong danh mục
  • nội dung-đơn-sản phẩm. php – Mẫu hiển thị cấu trúc nội dung hiển thị trong trang chi tiết một sản phẩm
  • nội dung-widget-sản phẩm. php – Constructor display content product in widget
  • sản phẩm-searchform. php – Constructor display form found product
  • đánh giá sản phẩm đơn lẻ. php – Cấu trúc hiển thị danh sách đánh giá của khách hàng trong trang chi tiết sản phẩm
  • sản phẩm duy nhất. php – Cấu trúc hiển thị trang chi tiết một sản phẩm
  • taxonomy-product_cat. php – Cấu trúc hiển thị trang danh mục sản phẩm
  • taxonomy-product_tag. php – Constructor display page from key product

  Và nếu bạn đã xem qua mã của các mẫu đó thì chắc chắn rằng bạn sẽ thấy tùy chọn Woocommerce dễ dàng hơn bạn tưởng tượng nhiều.

  Cách tùy biến mẫu Woocommerce an toàn

  Như bạn đã thấy, các mẫu mặc định sẽ nằm trong plugin thư mục và bạn cũng có thể chỉnh sửa trực tiếp trong đó, nhưng nó sẽ mất và trở về mặc định khi bạn cập nhật phiên bản Woocommerce mới

  Vì vậy, để tùy biến lại mẫu mà không bị mất, bạn cần phải sao chép thư mục /wp-content/plugins/woocommerce/templates sang thư mục chủ đề hiện đang sử dụng trên blog, sau đó đổi tên thư mục mẫu trong đó . Nếu bạn nghe đến đây vẫn chưa hiểu thì hãy xem video nhé

  Sao chép thư mục mẫu từ plugin sang chủ đề và đổi tên thành woocommerce

  Và bây giờ, các mẫu nó sẽ sử dụng các tập tin bên trong chủ đề thay vì tải từ plugin ra nên bạn cần tùy biến thay đổi gì thì cứ sửa mẫu bên thư mục chủ đề thôi

  Cách đọc mẫu của Woocommerce

  Khi tùy biến template của Woocommerce, ngoài các đoạn code PHP khá dễ hiểu trong các thư mục con bên trong các template thì nó còn 1 số phần khai báo hook mà có thể nhiều bạn chưa hiểu

  Ví dụ khi mình mở mẫu archive-product. php ra thì thấy đoạn sau

  Nó chỉ có một đoạn chứ không hề có thêm mã nào để chúng ta tùy biến. Nhưng nếu bạn chịu khó đọc thì họ đã comment rất rõ ràng ở những dòng @hooked, tức là nó khai báo hàm nào đang móc vào cái móc này

  Action hook ta được biết nó sẽ được tạo ra bởi các hàm do_action[] mà chúng ta có thể dễ dàng tìm thấy mã trên đó là nó tạo ra hook woocommerce_before_shop_loop ngay tại vị trí đó. Và những đoạn chú thích ở trên là những đoạn hàm nó đang được móc vào cái móc này. Ví dụ

  
  
   * @hooked woocommerce_result_count – 20
  
   * @hooked woocommerce_catalog_ordering – 30
  
  

  Nghĩa là hàm woocommerce_result_count[] đang được móc vào móc này với số thứ tự ưu tiên là 20. Và để biết hàm được khai báo ở đâu, cách nhanh nhất là chúng ta tìm tại trang https. // tài liệu. wootheme. com/wc-apidocs/, ví dụ mình sẽ tìm hàm woocommerce_result_count

  Sau khi tìm ra, chúng ta sẽ thấy nó thuộc Package nào trong tài liệu, và quan trọng là tập tin nào khai báo nó [Nằm ở]

  Bấm vào đường dẫn Tọa lạc tại, chúng ta sẽ xem được mã khai báo nó

  Nhìn vào đoạn mã, chúng ta có thể dễ dàng hiểu hàm này sẽ có chức năng hiển thị mẫu loop/result-count. php trong mẫu thư mục vì hàm wc_get_template[] được dùng để tải mẫu của Woocommerce, và nó sẽ ưu tiên các tệp mẫu bên thư mục chủ đề hơn

  Chà, bây giờ suy ra chúng ta muốn sửa nội dung của hàm này là vào thư mục mẫu/vòng lặp/đếm kết quả. php, thế là xong. Các tập tin khác nhau làm tương tự, khi bạn gặp hàm wc_get_template[], cứ hiểu là nó gọi tập tin trong thư mục mẫu đó

  Thực hiện ra bài hướng dẫn này mình viết dành cho những bạn nào đã có kiến ​​thức lập trình PHP và sử dụng HTML/CSS nên mình sẽ không viết chi tiết thêm. There are again the biến tùy chọn là do bạn cả thôi

  Ở bài tiếp theo, mình sẽ nói qua về một số action hook và filter hook của Woocommerce để chúng ta dễ dàng làm việc