Design website

Làm quen với trình chỉnh sửa giao diện web trong WordPress

Trình chỉnh sửa (Site Editor) – Công cụ mạnh mẽ để tùy chỉnh giao diện website

Công cụ này được ra mắt trong WordPress phiên bản 5.9 vào tháng 01/2022. “Trình chỉnh sửa” là công cụ mạnh mẽ cho mọi thay đổi, chỉnh sửa giao diện website với thao tác kéo thả vô cùng đơn giản mà không cần phải có kiến thức kĩ thuật hay kĩ năng lập trình gì cả.

Tuy nhiên, công cụ này chỉ hỗ trợ cho những Block themes, chúng ta sẽ không thể tìm thấy tính năng này trên các Classic themes.

Có 2 cách để chúng ta truy cập vào “Trình chỉnh sửa”:

  • Từ giao diện quản trị: Chọn mục “Giao diện” (Themes) > “Trình chỉnh sửa” (Editor).
  • Từ giao diện người dùng: Từ thanh tiêu đề đầu trang web (thanh tiêu đề này chỉ xuất hiện khi bạn đã đăng nhập vào trang quản trị bằng tài khoản có quyền chỉnh sửa) > “Sửa mẫu trang” (Edit site). Sau đó chúng ta sẽ click vào logo ở góc trên cùng bên trái trang để truy cập vào trình chỉnh sửa.

Sau khi truy cập vào “Trình chỉnh sửa” của WordPress, chúng ta sẽ thấy 1 bảng điều khiển cung cấp 5 công cụ cần thiết cho phép chúng ta thiết kế, chỉnh sửa mọi thành phần trên trang web. Từ bảng điều khiển thiết kế, chúng ta sẽ thấy 2 vùng:

  • Bên trái là bảng công cụ thiết kế bao gồm 5 công cụ dùng cho việc thiết kế trang web của bạn, bao gồm:
    • Điều hướng (Menu)
    • Kiểu hiển thị (Styles)
    • Trang (Pages)
    • Mẫu trang (Templates)
    • Mẫu khối (Patterns)
  • Bên phải sẽ là giao diện xem trước của trang web đang chỉnh sửa. Bất cứ thay đổi gì của bạn trên trang web này đều sẽ được hiển thị ở đây cho bạn xem trước trước khi lưu và phát hành chính thức.

Mẫu trang (Templates) là gì? Templates được dùng để làm gì?

Website của chúng ta thường bao gồm nhiều trang web, mỗi trang web có thể sẽ có giao diện, bố cục khác nhau. Mẫu trang cung cấp bố cục mẫu cho những trang web đó. Chúng ta có thể xem danh sách mẫu trang thông qua mục “Mẫu trang” trên bảng công cụ.

Tùy vào mỗi theme, chúng ta sẽ được cung cấp nhiều mẫu trang khác nhau để sử dụng. Tuy nhiên, hầu hết các theme đều sẽ có những mẫu trang dành cho những trang web chung chung, thường bắt gặp trong website WordPress như:

  • Trang chủ (home page).
  • Trang blog.
  • Trang hiển thị kết quả tìm kiếm bài viết.
  • Trang lỗi 404 (không tìm thấy).

Tất nhiên, chúng ta không bị giới hạn bởi việc chỉ sử dụng những mẫu trang có sẵn. Chúng ta hoàn toàn có thể tùy chỉnh mẫu trang có sẵn theo ý muốn hoặc tạo những mẫu trang mới.

Mẫu khối (Patterns) là gì? Patterns được dùng để làm gì?

Mỗi 1 trang web sẽ bao gồm nhiều thành phần nhỏ cấu thành. Những thành phần nhỏ đó được gọi là những mẫu khối (patterns). Chúng ta có thể xem danh sách mẫu khối thông qua mục “Mẫu khối” trên bảng công cụ.

1 số mẫu khối phổ biến thường thấy trong mỗi trang, đặc biệt là trang chủ (home page) như:

  • Đầu trang (header).
  • Chân trang (footer).
  • Banner.
  • Danh sách dịch vụ cung cấp.
  • Giới thiệu danh sách thành viên (teams).
  • Hiển thị những nhận xét của khách hàng (reviews).
  • Thư viện ảnh (gallery).
  • Hiển thị những dịch vụ nổi bật.
  • Danh sách bài viết được xem, quan tâm nhiều.

Cũng như mẫu trang, chúng ta cũng có thể tạo bản sao mẫu khối có sẵn và chỉnh sửa theo ý muốn, hoặc chúng ta cũng có thể tạo mới mẫu khối, không hề bị giới hạn.

Kiểu hiển thị (Styles)

Công cụ này dùng để thiết lập kiểu dáng, màu sắc, hiệu ứng của những văn bản, hình ảnh và từng thành phần nhỏ khác trên từng trang web cũng như toàn bộ website.

Công cụ này thường được sử dụng cho mục đích branding, khi đó chúng ta muốn giữ mọi thứ trên website không thay đổi (như nội dung, bố cục,…) ngoài trừ màu sắc tổng thể của website hoặc kiểu dáng thiết kế của các thành phần trên website nhằm mang đến tính đặc trưng, riêng biệt cho website.

Chúng ta cũng có thể sử dụng kiểu hiển thị sẵn có, hoặc chỉnh sửa theo ý thích, hoặc thêm mới kiểu hiển thị tương tự như đối với mẫu khối và mẫu trang.

Trang (Pages)

Khi truy cập vào Trang trên thanh công cụ, chúng ta sẽ thấy danh sách tất cả các trang giống như những gì chúng ta sẽ thấy khi truy cập mục “Trang” từ trang quản trị.

Chúng chỉ khác nhau ở mục đích sử dụng. Theo đề xuất từ WordPress, nhầm tương thích và tránh những lỗi về giao diện cũng như tính năng khi nâng cấp lên phiên bản WordPress mới cho website, chúng ta nên:

  • Sử dụng trang trên thanh công cụ cho mục đích chỉnh sửa giao diện, bố cục trang web.
  • Sử dụng trang từ trang quản trị cho mục đích chỉnh sửa nội dung trên trang web.

Điều hướng (Menu) có chức năng gì?

Thanh điều hướng là nơi chứa những liên kết đến những trang quan trọng trong website mà chúng ta mong muốn người dùng sẽ dễ dàng truy cập và khám phá.

Công cụ “điều hướng” trên thanh công cụ giúp chúng ta quyết định những thành phần nào sẽ xuất hiện trên thanh điều hướng, vị trí xuất hiện và hình dáng hiển thị (màu sắc, kích thước, kiểu chữ,…).