Tùy biến giao diện WordPress

Tùy biến giao diện là chức năng có sẵn của WordPress, bạn không cần cài plugin để làm việc này.

Chức năng trên giúp bạn có những điều chỉnh cơ bản & quan trọng liên quan đến các vấn đề thuộc về giao diện của website.

Để truy cập vào khu vực này, ở giao diện tiếng Anh bạn vào Appearance > Customize:

giao diện > tùy biến, bản tiếng Anh

Còn ở giao diện tiếng Việt bạn vào Giao diện > Tùy biến:

giao diện > tùy biến

Các chức năng của khu vực tùy biến giao diện rất khác nhau tùy thuộc vào từng giao diện cụ thể. Thường các giao diện bạn đi mua, khu vực tùy biến này sẽ phức tạp hơn hẳn các giao diện miễn phí.

Giao diện tùy biến của theme Twenty Sixteen (free):

tùy biến theme Twenty Sixteen

Giao diện tùy biến của theme Twenty Seventeen (free):

tùy biến theme Twenty Seventeen

Giao diện tùy biến của theme Soledad (có phí) – phía dưới còn rất nhiều nhưng tôi không chụp được hết màn hình:

giao diện tùy biến của theme Soledad

Giao diện tùy biến của theme Newspaper (có phí):

giao diện tùy biến của theme newspaper

Ở trên mình vừa dẫn ra phần tùy chỉnh giao diện của 4 theme khác nhau.

Các tùy chỉnh chính

Mặc dù có các tùy chỉnh rất khác nhau, các theme thường chia sẻ một số chức năng phổ biến như:

1. Site Indentity / Định danh cho site

Khu vực này thường được dùng để điều chỉnh tên trang web (site title) và tagline (các mô tả ngắn ngay dưới tên trang web). Ngoài ra nó cũng là nơi bạn up logo của trang web và favicon (site icon) – biểu tượng nho nhỏ của website trên trình duyệt:

Site Identity

Với Site Icon bạn nhớ tuân thủ kích cỡ mà nó gợi ý, ở đây họ nói hình phải là hình vuông (square) và có kích cỡ ít nhất là 512 px * 512 px

2. Background Image / Ảnh nền

Là ảnh được dùng làm background cho website:

ảnh được dùng làm background

Có 2 lựa chọn liên quan đến ảnh làm background:

  • Bạn chọn bức ảnh thật lớn làm nền cho trang web, ưu điểm là nó có thể giúp website của bạn trông khá cá tính, nhưng nó làm trang web tải chậm hơn với người truy cập lần đầu(*). Bạn có thể tìm kho ảnh miễn phí trên Pixabay để làm ảnh nền. Các ý tưởng sử dụng ảnh lớn làm nền cho web bạn tham khảo ở Awwwards.
  • Bạn chọn các bức ảnh mẫu rất nhỏ làm nền (pattern, textures), và nó sẽ lặp lại để bao trùm toàn bộ nền của website. Vì các bức ảnh nhỏ có dung lượng rất bé nên ưu điểm của nó là không gây ảnh hưởng gì đến tốc độ truy cập web. Ví dụ bạn có thể vào trang Toptal hoặc Transparenttextures để tìm các mẫu như vậy.

(*): Để giảm dung lượng ảnh, bạn có thể quan tâm đến việc sử dụng công cụ, plugin nén ảnh:

3. Menu và widget

Bạn có thể tùy chỉnh menu và widget thông qua phần này của website, tuy nhiên bạn nên vào các phần chuyên biệt của nó để các tùy chỉnh được thoải mái & dễ thao tác hơn. Bạn xem hướng dẫn cho từng phần ở đây:

4. Colors / Màu sắc

tùy chọn color - màu sắc

Đây là khu vực bạn tùy chỉnh màu sắc, nó có thể bao gồm các tùy chỉnh sau:

  • Background color: màu nền của cả trang web
  • Page Background color: màu nền của trang
  • Link color: màu nền của liên kết
  • Main text color: màu chữ chính trên website
  • Secondary text color: màu chữ phụ trên website

5. Header Image

Chỉ đến ảnh được dùng làm header (ảnh làm to ở phần đầu trang web):

chọn ảnh làm header

Khi chọn ảnh header bạn chú ý kích cỡ tối ưu mà nó gợi ý, ví dụ trong phần trên, kích cỡ tối ưu là 1200px * 280px (giá trị cụ thể còn tùy theme). Nếu ảnh bạn up không có kích cỡ tối ưu thì thường nó vẫn được chấp nhận, nhưng có thể nó sẽ làm website của bạn trông không được đẹp.

Khi chọn ảnh header, bạn cố gắng tối ưu dung lượng của nó, vì đây là ảnh thường sẽ xuất hiện trong mọi bài viết (ảnh làm background cũng là ảnh thường xuất hiện trong mọi bài viết).

Bạn nên cân nhắc sử dụng plugin nén ảnh, nó sẽ giúp ảnh trên toàn bộ website nhẹ hơn, mà hầu như không ảnh hưởng đến chất lượng ảnh.

6. Additional CSS

Thêm CSS – đây là phần không dành cho các tay mơ. CSS được dùng để điều chỉnh những thứ liên quan đến bề ngoài của trang web như kích cỡ chữ, màu sắc, màu nền, viền, vân vân. Chỉ có điều để sử dụng được nó bạn cần biết CSS là gì và cách viết.

Nếu không biết gì về CSS tốt nhất bạn không động đến phần này.

8 thoughts on “Tùy biến giao diện WordPress”

  1. A ơi cho e hỏi e muốn tạo 1 web bán hàng theo nền tảng wordpress. E ko có nhu cầu dùng visa nên ko làm thẻ nhưng có chơi bitcoin 😀 ko biết a có thể gợi ý những trang uy tín bán domain và hosting thanh toán bằng bitcoin ko ạ. Sẵn tiện e hỏi là nếu bán hàng thì dung lượng bao nhiêu là chuẩn a nhỉ?

    Reply
    • Em có thể xem bài viết này để biết cách chọn mua hosting nhé: https://kiencang.net/mua-hosting-cho-wordpress/

      Anh nghĩ dùng woocommerce nếu em muốn thêm các tính năng giỏ hàng, còn nếu muốn đơn giản (nhất là khi em ít sản phẩm), dùng trang web thuần túy nội dung cũng rất tốt.

      Em nên làm thẻ VISA, vì có thể nơi bán tên miền và hosting tốt họ không chấp nhận bitcoin.

      Reply
  2. Chào bạn!
    Cho mình hỏi một chút, mình đang tùy biến trang wordpress của mình, theme là sparkling, nhưng không thể tìm thấy nút lưu lại thay đổi.
    Vậy trong trường hợp này là lỗi gì hả bạn?
    Mình cám ơn!

    Reply
    • Thật lạ khi không có nút thay đổi. Có thể theme đó chủ động khóa tính năng này để tránh người dùng chỉnh sửa theme. Nếu đúng như vậy thì không có cách nào cả. Nhưng mình đoán thì không phải vậy, vì tính năng tuy biến là tính năng cơ bản nhất mà. Bạn thử kiểm tra lại xem nhé.

      Reply
      • Mình có đổi qua theme twenty fifteen, nhưng vẫn không có thay đổi.
        Một số hướng dẫn trên mạng có suggest cách là deactivate tất cả các plugin, rồi activate lại… nâng cấp php version, nhưng không hiệu quả với trường hợp của mình. Có lẽ sai sót chỗ nào đó.
        Cảm ơn bạn!

        Reply
  3. Bạn cho mình hỏi, mình đang xài theme Onepage Lite, nhưng không biết chỉnh sao cho nó hiện cái hình nền bự bự ngay chỗ homepage. Và website mình có kết nối facebook chat, mình có thấy hiển thị trong preview nhưng khi coi trên web lại không thấy hiển thị.

    Reply
    • Chào bạn mình chưa dùng theme đó bao giờ nên không tư vấn sâu được cho bạn, nhưng theme nào cũng có hướng dẫn sử dụng, bạn thử vào hướng dẫn sử dụng của nó xem cách khắc phục như thế nào nhé.

      Reply

Leave a Comment