Bài 8: Hướng dẫn tùy biến theme chỉnh sửa giao diện trong wordpress

Thư viện Themes của wordpress rất đa dạng và phong phú. Tuy nhiên, để tìm kiếm được 1 themes theo ý thích thì rất khó. Bài viết này mình sẽ hướng dẫn các bạn chỉnh sửa cơ bản trong theme wordpress. Nếu bạn không muốn chỉnh sửa mà giữ mặc định từ nhà thiết kế thì có thể bỏ qua bài viết này.

Kinh nghiệm về CSS

Để tùy biến và chỉnh sửa giao diện bạn cần phải có 1 chút kiến thức về CSS. Bạn có thể search trên google để tìm một vài hiệu ứng cần chỉnh sửa cũng được. Bài viết này mình cũng chỉ hướng dẫn cơ bản nên cách thực hiện cũng dễ dàng.

Tùy biến có sẵn trong theme

Mỗi theme thiết kế sẵn đều có 1 khu vực để bạn tùy chỉnh cơ bản. Theme tính phí sẽ cho phép bạn tùy chỉnh nhiều hơn và không cần phải tự điều chỉnh lại như theme miễn phí. Mỗi theme sẽ có mỗi loại tùy biến điều chỉnh khác nhau nhưng nhìn chung thì rất dễ làm chủ nó.

Để vào phần tùy biến theme: Appearance => Customize

Tại khu vực cài đặt sẽ chia làm 2 cột: 1 cột tùy biến theme còn 1 cột hiển thị demo.

Xem Thêm:   Bài 5: Hướng Dẫn Cài Đặt Wordpress Trên Cpanel
  1. Published: Lưu lại cài đặt và đăng lên website
  2. Change: Thay đổi Theme
  3. Get All Features: Nâng cấp lên phiên bản cao cấp
  4. General Layout: Điều chỉnh màu nền website
  5. Site Identity: Thiết lập tên site và hình logo
  6. Navigation Settings: Thiết lập màu cho phân trang
  7. Header: Điều chỉnh màu cho thanh tiêu đề
  8. Background Image: Thêm hình ảnh vào trong bài viết
  9. Menus: Tùy chỉnh menus hiển thị
  10. Widgets: Tùy chỉnh các thanh widget
  11. Footer: Điều chỉnh màu chân trang
  12. Static Front Page:
  13. Additional CSS: Thêm CSS cho trang web
  14. Hiển thị review trên các thiết bị: máy tính, máy tính bản, điện thoại di động.

Tùy biến CSS cho theme

Để tùy biến các bạn vào Additional CSS để thêm CSS để thay đổi giao diện mặc định.

VD: Mình muốn xóa ngày đăng như hình dưới

Các bạn làm theo các bước sau:

Bước 1: Tìm vị trí cần thay đổi

Nhấp phải vào ngày đăng cần thay đổi chọn Inspect hoặc Kiểm tra (nếu ngôn ngữ trình duyệt là tiếng việt)

Bước 2: Thêm CSS vào trình duyệt

Phương pháp này chỉ để xem demo trên website thôi, không ảnh hưởng đến website của bạn.

Xem Thêm:   Bài 4: Hướng Dẫn Mua Tên Miền Và Host lưu trữ Tại GoDaddy

Muốn ẩn dòng hiển thị đó thêm thuộc tính visibility: hidden; vào cột bên phải.

=> Như vậy trên trang demo đã mất dòng hiển thị ngày tháng năm như mong muốn.

Bước 3: Copy CSS vào website của bạn.

Để kích hoạt, bạn cần Copy đoạn code đó vào css website của bạn.

Bước 4: Lưu lại cài đặt

Sau khi hoàn tất quá trình chỉnh sửa bạn lưu lại cài đặt để nó kích loạt lên trang web của bạn.

==> Bạn có thể sử dụng một số thuộc tính khác của CSS để thay đổi thiết kế ban đầu nếu muốn: Màu nền ( background ), căn lề chữ ( margin, padding ), cỡ chữ ( font-size )…

Bài kế tiếp: >> Bài 9: Xóa Giao Diện Không Sử Dụng Trong WordPress

Series WordPress Toàn Tập

  •  
  •  
  •  
Loading...