MARKETING × TECHNOLOGY
Nhận tư vấn →
ONMATE / WORDPRESS

WordPress

Website dễ quản trị, thuận tiện cập nhật và mở rộng.

ONMATE xây dựng hoặc cải tiến website WordPress với cấu trúc nội dung rõ ràng, mẫu trang dễ chỉnh sửa và quyền truy cập phù hợp. Phần triển khai đi kèm kiểm thử, sao lưu và hướng dẫn để đội ngũ chủ động quản trị.

HÀNH TRÌNH TRÊN WEBSITE WORDPRESS

Một website WordPress tốt là website cửa hàng tự chăm được, không phụ thuộc vào một người duy nhất.

Website đi qua nhiều chặng, từ chọn giao diện tới chăm đều đặn. Chọn một chặng để xem việc ở đó.

CHẶNG 01

Chọn giao diện

Giao diện nhẹ, có giao diện con và kiểu chung cho màu, chữ, đầu trang. Sửa một chỗ là cả website đổi theo.

Sáu chặng quay quanh một điểm. Chọn một chặng để đọc chi tiết.

WORDPRESS
SÁU PHẦN VIỆC

Chọn một phần việc để xem
toàn bộ cách làm.

Mỗi phần việc có màn hình làm việc, đầu vào và cách đo riêng.

Chạm vào một thẻ để đổi nội dung bên dưới.

Đang xemSửa một chỗ, cả website đổi
Nội dung của thẻ Sửa một chỗ, cả website đổiChọn thẻ khác
GIAO DIỆN CHUNG

Sửa một chỗ, cả website đổi — Giao diện nhẹ, màu và chữ đặt một lần; chỉnh riêng nằm ở giao diện con.

Hợp khi website mỗi trang một kiểu, màu và chữ lệch nhau, hoặc mỗi lần đổi đầu trang phải sửa từng trang.

Tài liệu tham khảo:WordPress: giao diện ↗WordPress: trình soạn khối ↗

01
TRÔNG NHƯ THẾ NÀO

Giao diện và kiểu chung trông như thế nào.

Ba màn hình: danh sách giao diện, sửa đầu trang và bảng kiểu chung. Bấm từng mục để xem.

Giao diện con giữ chỉnh sửa riêng

Giao diện đang dùng là giao diện con của Khối Cơ bản. Thẻ báo ngay khi giao diện gốc có bản mới; giao diện cũ không dùng có nút Xóa.

Đọc tiếp

Chỉnh sửa riêng đặt ở giao diện con nên cập nhật giao diện gốc không ghi đè lên. Giao diện không dùng là mã cần cập nhật, nên xóa đi.

MÔ PHỎNG · SỐ MẪU
nhathom.example/wp-admin/themes.php
  1. Giao diện con: chỉnh sửa của cửa hàng nằm riêng ở đây. Giao diện gốc cập nhật thì chỉnh sửa vẫn còn nguyên.
  2. Bản mới của giao diện gốc: sao lưu, thử trên bản thử rồi mới cập nhật. Có thể lệch bố cục.
  3. Giao diện cũ không dùng: nên xóa. Giao diện nằm đó không chạy nhưng vẫn là mã cần cập nhật và theo dõi.

Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.

Tài liệu tham khảo:WordPress: giao diện ↗WordPress: trình soạn khối ↗

02
LÀM NHƯ THẾ NÀO

Năm bước dựng giao diện.

Chọn giao diện trước, rồi mới chỉnh. Mọi chỉnh sửa đi qua kiểu chung.

  1. 01Xem logo, màu, kiểu chữ và vài trang hiện có để biết cần giữ gì.
  2. 02Chọn giao diện nhẹ, được cập nhật thường xuyên, hợp nội dung. Tạo giao diện con cho chỉnh sửa riêng.
  3. 03Đặt bảng màu và kiểu chữ trong kiểu chung, kiểm tra độ tương phản từng cặp màu chữ và nền.
  4. 04Dựng đầu trang và chân trang một lần trong phần mẫu, rồi áp cho các mẫu trang.
  5. 05Xem trước trên điện thoại, máy tính bảng, máy tính; ghi quy chuẩn giao diện cho người sửa nội dung.
Bạn đưa vào
  • Logo và bộ nhận diện
  • Màu và kiểu chữ đang dùng
  • Địa chỉ website hiện tại
  • Người sẽ sửa nội dung sau này
Giao diện, kiểu chung và phần mẫuONMATE cùng doanh nghiệp
Bạn nhận lại
  • Giao diện con, bảng màu và kiểu chữ chung, đầu trang và chân trang dùng chung, quy chuẩn giao diện một trang.

Tài liệu tham khảo:WordPress: giao diện ↗web.dev: thiết kế đáp ứng ↗

03
CẦN CHUẨN BỊ GÌ

Cần chuẩn bị gì để dựng giao diện.

Cần bộ nhận diện và người quyết định bố cục.

NGUYÊN TẮC

Màu, chữ, khoảng cách chỉ đặt ở một nơi. Người sửa nội dung chọn từ bảng quy chuẩn, không nhập mã màu mới.

QUY CHUẨN GIAO DIỆN · MẪU
docs.google.com/spreadsheets
nhathom-quy-chuan-giao-dienTệp Chỉnh sửa Xem Chèn Định dạng Dữ liệu
ABCD
1Thành phầnGiá trịDùng ởTương phản
2Chữ chính#3d2a17 trên #fffdf9Nội dung, tiêu đề13,4 : 1
3Nền trang#fffdf9Mọi trangKhông áp dụng
4Nút chínhChữ trắng trên #8a4b12Nút kêu gọi6,8 : 1
5Cam mật#b0722aĐường viền, chữ lớn3,9 : 1
6Cỡ chữ nội dung17 px, cách dòng 1,6Mọi đoạn vănKhông áp dụng
Giao diệnCỡ chữ
  1. Giá trị: ghi mã màu và nền đi kèm. Người sửa nội dung chọn trong bảng màu, không tự nhập mã mới.
  2. Nút chính: chữ trắng trên nâu đậm đạt 6,8 : 1, vượt mức tối thiểu 4,5 : 1 của WCAG 2.2 cho chữ thường.
  3. Cam mật: 3,9:1 chỉ đạt mức 3:1 cho chữ lớn và thành phần giao diện. Không dùng cho chữ nhỏ.

Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.

Một nơi đặt màu

Chọn từ bảng màu chung

Tương phản đạt

Chữ thường từ 4,5 : 1

Sửa một lần

Đầu, chân trang là phần mẫu

Xem trước trên điện thoại

Trước khi lưu thay đổi
Bộ tài nguyên4 mục
  • LogoLogoTệp vector hoặc ảnh nền trong suốt.
  • BảngMàu thương hiệuMã màu trên bao bì và bảng hiệu.
  • TệpKiểu chữTên kiểu chữ, giấy phép nếu trả phí.
  • KháchWebsite mẫu cửa hàng thíchHai hoặc ba website tham khảo.
Xem đủ thông số và ghi chú
Nguồn
Quản lý giao diện Tài liệu WordPress hướng dẫn cài, kích hoạt, cập nhật và xóa giao diện. Giao diện không dùng nên xóa thay vì để nằm trong danh sách.
Nguồn
Độ tương phản màu WCAG 2.2 yêu cầu tỷ lệ tương phản tối thiểu 4,5 : 1 cho chữ thường, và 3 : 1 cho chữ lớn và thành phần giao diện ở mức AA.
Lưu ý
Đừng sửa thẳng giao diện gốc Chỉnh vào giao diện gốc sẽ mất khi giao diện cập nhật. Chỉnh sửa riêng đặt trong giao diện con hoặc trong trình chỉnh sửa trang web.

Tài liệu tham khảo:W3C: WCAG 2.2 ↗WordPress: giao diện ↗

04
ĐO ĐIỀU GÌ

Đo bằng tốc độ và độ ổn định khi tải.

Giao diện nặng làm trang chậm. Báo cáo Core Web Vitals trong Search Console cho thấy nhóm trang nào chậm.

CẦN ĐO

Đọc theo nhóm trang cùng một mẫu, vì giao diện ảnh hưởng cả nhóm.

CORE WEB VITALS · SEARCH CONSOLE · SỐ MẪU
search.google.com/search-console
Search Consolenhathom.exampleKiểm tra mọi URL trong nhathom.exampleN

Core Web Vitals

Mở báo cáo
Di độngMáy tính
KémCần cải thiệnTốt
6 thg 73 thg 831 thg 828 thg 9
Trạng tháiLoại sự cốNhóm URL
KémLCP lớn hơn 4 giây (di động)6
Cần cải thiệnCLS lớn hơn 0,1 (di động)14
TốtĐạt cả LCP, INP và CLS118
  1. Nhóm trang có LCP trên 4 giây trên điện thoại: đây là nhóm nên xử lý trước, vì tải chậm thấy rõ nhất.

Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.

Cách đọc số · số mẫu
Chỉ sốCho biếtCần xem lại khi
LCP trên điện thoạiTừ 2,5 giây trở xuốngNhóm trang trên 4 giây
CLS trên điện thoạiTừ 0,1 trở xuốngTrên 0,1: bố cục nhảy khi tải
INPTừ 200 mili giây trở xuốngTrên 500 mili giây
Số nhóm trang ở mức TốtTăng sau mỗi đợt sửaGiảm sau khi đổi giao diện hoặc thêm plugin
CÁCH ĐỌC

Mở báo cáo Core Web Vitals trong Google Search Console, chọn thẻ Di động rồi mở dòng có trạng thái Kém để xem nhóm trang và loại sự cố.

LƯU Ý

Báo cáo dùng dữ liệu người dùng thật trong 28 ngày nên đổi hôm nay chưa thấy ngay.

Đọc tiếp

Số trong hình là số mẫu.

Tài liệu tham khảo:web.dev: Core Web Vitals ↗PageSpeed Insights: dữ liệu thực tế và phòng thí nghiệm ↗

05
CÁCH TRIỂN KHAI

Cách xử lý các tình huống thường gặp.

Số trong bảng là số mẫu để minh họa cách đọc, không phải kết quả dự kiến.

01

Website WordPress mới

Chọn giao diện sau khi có bộ nhận diện và danh sách trang.

  1. Thu thập logo, màu, kiểu chữ
  2. Chọn giao diện nhẹ
  3. Đặt kiểu chung
  4. Dựng đầu và chân trang
02

Giao diện cũ, nhiều chỉnh sửa trực tiếp

Gom chỉnh sửa vào giao diện con trước khi cập nhật bất cứ thứ gì.

  1. Sao lưu website
  2. Liệt kê tệp đã sửa
  3. Chuyển sang giao diện con
  4. Thử cập nhật trên bản thử
03

Website nhìn lệch giữa các trang

Rà màu và chữ đang dùng rồi gom về bảng chung.

  1. Chụp màn hình các trang chính
  2. Ghi màu, chữ đang dùng
  3. Gom về bảng màu chung
  4. Sửa trang lệch nhiều nhất
DẤU HIỆU
Cập nhật giao diện làm mất chỉnh sửa
Chỉ sốGiá trị
Nơi chỉnh sửaGiao diện gốc
Sau cập nhậtBố cục về mặc định
Việc cần làmKhôi phục từ bản sao lưu và chuyển sang giao diện con
KIỂM TRA

Chỉnh sửa nằm thẳng trong giao diện gốc nên bị ghi đè.

Đọc tiếp

Chuyển các chỉnh sửa sang giao diện con.

DẤU HIỆU
Chữ khó đọc trên một số khối
Chỉ sốGiá trị
Cặp màuCam mật trên nền kem
Tương phản3,9 : 1
Việc cần làmDùng chữ nâu đậm, chỉ dùng cam mật cho chữ lớn
KIỂM TRA

Màu chữ và nền lệch nhau ở khối chọn riêng.

Đọc tiếp

Đưa màu về bảng chung và kiểm tra tương phản.

DẤU HIỆU
Sửa đầu trang mà chỉ một trang đổi
Chỉ sốGiá trị
Cách đang làmChép đầu trang vào từng trang
Số trang bị lệch5 trang
Việc cần làmDùng phần mẫu Đầu trang và xóa bản chép
KIỂM TRA

Đầu trang bị chép vào từng trang thay vì dùng phần mẫu chung.

Đọc tiếp

Chuyển sang phần mẫu rồi xóa các bản chép.

Tài liệu tham khảo:WordPress: nâng cấp ↗WordPress: giao diện ↗

06
TRƯỚC KHI BẮT ĐẦU

Danh sách kiểm tra.

Đánh dấu từng mục để xem mức sẵn sàng. Trạng thái chỉ lưu trên trình duyệt của bạn.

0%SẴN SÀNG

Tài liệu tham khảo:W3C: WCAG 2.2 ↗web.dev: thiết kế đáp ứng cơ bản ↗

NHỚ NHANH

Sáu phần việc, từ giao diện đến sao lưu và giám sát.

Chọn một ô để quay lại đúng phần nội dung ở trên.

01
NĂM BƯỚC TRIỂN KHAI

ONMATE làm gì, và doanh nghiệp nhận lại được gì.

Mỗi bước kết thúc bằng một thứ xem được. Bấm một bước để xem việc làm và thứ được bàn giao.

BƯỚC 01

Kiểm kê

Plugin, giao diện, tài khoản, sao lưu.

Bàn giaoBáo cáo hiện trạng

Tài liệu tham khảo:WordPress: sao lưu ↗WordPress: vai trò và quyền ↗

02
CÂU HỎI THƯỜNG GẶP

Những câu hay được hỏi trước khi bắt đầu.

Chọn một chủ đề. Câu trả lời nói rõ cả điều làm được lẫn điều không ai bảo đảm được.

WordPress có an toàn không?

Phụ thuộc cách vận hành: cập nhật đều, ít plugin, quyền đúng người, sao lưu và thử khôi phục.

Có nên cài nhiều plugin?

Không. Mỗi plugin thêm mã cần cập nhật và có thể xung đột; chỉ giữ plugin có lý do rõ.

Cập nhật bao lâu một lần?

Theo phát hành của lõi và plugin; bản vá bảo mật nên cập nhật sớm, bản lớn thử trước trên bản sao.

Tài liệu tham khảo:WordPress: cập nhật ↗WordPress: sổ tay quản trị ↗

03
BẮT ĐẦU

Kể điều bạn cần, bắt đầu từ đây.

Chỉ cần họ tên và số điện thoại. Các mục còn lại bỏ trống cũng được.

Dịch vụ quan tâm
Ngân sách tùy chọn

Bắt buộc: họ tên và số điện thoại. Các mục còn lại bỏ trống cũng được.

Hoặc nhắn trực tiếpFanpageMessengerZalo