Hướng dẫn tùy chỉnh giao diện WordPress theo ý muốn

Bạn có hài lòng với giao diện (theme wordpress) hiện tại của mình không?

Và tôi chắc rằng hơn 9/10 bạn sẽ trả lời là không hài lòng, dù không nói ra.

Ai mà chẳng muốn đứa con tinh thần của mình được đẹp đẽ, thanh lịch hơn người khác.

Mà nếu nó đã đẹp đẽ thanh lịch rồi thì lại muốn nói đẹp hơn, thanh lịch hơn!

Lòng tham để đạt sự hoàn mỹ không bao giờ có điểm dừng!

Nắm được tâm lý này của các bạn và cũng là của tôi, hôm nay nhân cơ hội này tôi sẽ hướng dẫn các bạn cách tùy chỉnh giao diện wordpress theo ý muốn dễ nhất.

Vậy theo ý muốn là như thế nào?

Tức là mình sẽ tùy chỉnh những cái mà giao diện nó không hỗ trợ (trong phần customize). Như chỉnh font size, màu nền, kiểu chữ, chỉnh khung,…

Nếu bạn đang xài theme free thì những tùy chỉnh hỗ trợ này không nhiều và bạn lại càng cần hướng dẫn này.

Nếu bạn đang xài premium theme, sẽ có rất nhiều tùy chỉnh cho bạn lựa chọn, có tiền lúc nào cũng ngon hơn mà. Tuy nhiên, 9 người thì 10 ý, nhà sản xuất theme không thể nào nắm được tất cả nhu cầu của từng người. Do đó, tôi chắc chắn rằng mặc dù các tùy chỉnh của nó là nhiều nhưng vẫn là chưa đủ đối với bạn.

Tất nhiên, bạn có thể gửi ticket support hỏi, họ sẽ trả lời rất thỏa đáng và nhanh chóng cho bạn.

Đây cũng là ưu điểm lớn nhất của theme có phí.

Lợi là lợi như vậy, nhưng trong trường hợp này có 2 lý do bạn cần phải biết mò css code:

  • Bạn có ngại khi hỏi quá nhiều những câu cực kỳ đơn giản, mà nếu biết mò thì bạn có thể làm trong 30 giây không?
  • Cái này quan trọng hơn: khi bạn cài plug in miễn phí chẳng hạn, giao diện của nó trớt quớt với cái theme bạn đang dùng. Bạn gửi ticket hỏi support thì họ có trả lời không? Tất nhiên là không rồi.

Ok, lang thang đến thế là cùng!

Tôi sẽ đi thẳng vào vấn đề làm thế nào để mò mẫm css code của giao diện.

Như mọi khi, study case của tôi sẽ là cái Plug in WP Subscibe bản miễn phí.

Tôi sẽ cài nó và thực hiện một số chỉnh sửa.

Trước khi tùy biến giao diện

Ok, tôi đã cài plug in rồi. Tôi sẽ cho nó show trong phần footer widget. Kết quả hiển thị là:

huong dan do css

Ô, suck!

Xét về tổng thể chung, nó hoàn toàn không phù hợp với mấy cái widget còn lại.

Đây là bản free nên nó không hỗ  trợ tùy chỉnh gì cả.

Còn cái phiên bản có phí WP Subscribe Pro thì nó có nhiều tùy chỉnh, chỉ cần bấm nút chỉnh thôi không mò mẫm gì cả. Đúng là sức mạnh của đồng tiền 🙂

Bonus: Hướng dẫn tải và sử dụng WP Subscribers Pro

 

Ta sẽ mò mẫm cái css code của thằng này để chỉnh sửa trong phần Apperance >> Customize >> Additional CSS.

Cách mò như thế nào? Trước tiên bạn hãy cài add on Firebug trên trình duyệt Firefox trước nhé.

Chú ý
Hiện tại thì Firefox không hỗ trợ add-on Firebug như hướng dẫn trong bài viết nữa. Tuy nhiên bạn có thể dò CSS code bằng cách sử dụng trình duyệt Chrome, click chuột phải, chọn Inspect, nó vẫn hiện lên CSS code giống như Firebug (nhưng không trực quan bằng). Sau khi có code, bạn làm tiếp giống hướng dẫn trong bài viết. Mong các bạn thông cảm vì sự bất tiện này.

Dò CSS code bằng add on Firebug trên Firefox

Việc cài đặt khá dễ dàng. Bạn search nó và bấm nút “+ Add to Firefox” thôi.

Hướng dẫn cách dò CSS Code

Ok, sau khi cài đặt xong, bạn gõ trang cần tùy biến vào Firefox. Trong trường hợp tôi là trang chủ langthangweb.com.

Click chuột phải, chọn “Inspect Element with Firebug”.

Nó sẽ hiện ra cái giao diện như thế này.

Cái mà chúng ta cần quan tâm nhất là cái khung style chứa CSS code bên phải.

Ok, việc đầu tiên là tôi sẽ cho thay đổi cái màu nền của cái widget sao cho nó trùng với màu nền của footer luôn.

  1. click chuột vào biểu tượng mũi tên
  2. rà chuột vào cái khung nền viền màu đỏ, càng gần viền càng tốt (bước này ban đầu hơi khó, nhưng làm nhuần nhuyễn sẽ quen dần)
  3. nếu bạn trỏ đúng, đoạn mã css sẽ xuất hiện ngay bên dưới

huong dan do css

Live preview sự thay đổi ngay trên Firefox

Tiếp theo, ta sẽ test sự thay đổi giao diện ngay trong firebug mà không cần phải vào theme wordpress.

Đây là tính năng test preview rất hay  của Firebug.

Mã màu của  footer hiện tại là #222222, do đó tôi sẽ nhập vào thay thế background color #f47555  thành #222222. Thật bất ngờ là cái màu nền nó thay đổi theo luôn. Bạn có thể tìm kiếm mã màu tại đây.

Nhìn có vẻ khá hơn rồi phải không nào?

Bây giờ ta hãy copy cái đoạn code này để paste vô phần Additional CSS của theme đang dùng nhé.

Tùy chỉnh giao diện bằng CSS code tìm được bằng Firebug

Bạn copy code sau: .wp-subscribe-wrap {background: #222222 none repeat scrool 0 0;}
và paste vào Additional CSS trong Customize.

Nhưng lạ là màu nền nó lại không thay đổi, không giống như trong thử nghiệm ở Firefox?

Có gì sai chăng? Vấn đề nằm ở đâu? Tôi cũng đã từng đau đầu với cái issue này.

Và đáp án là bạn chỉ cần thêm vào cú pháp ” !important” phía sau là được.

Tại sao phải thêm như vậy?

Có lẽ đây là plug in của bên thứ ba nên cần phải thêm…thú thật, tôi cũng không rõ nữa..bạn nào mà rõ giúp tôi trả lời ở phần bình luận nhé!

Tôi để ý đa số tùy chỉnh trong bản thân cái theme thì nó đổi luôn không cần thêm.

Anyway, nếu bạn thấy không hiện lên đúng ý mong muốn thì hãy thêm vào nhé, còn nếu không thì để vậy.

Tôi chỉ hướng dẫn cho bạn 1 bước làm mẫu trước như vầy thôi nhé.

Việc tiếp theo là tôi sẽ dò tiếp CSS code để thay đổi mấy cái màu nền, màu chữ của từng cái còn lại.

Xin được nói thêm là với cách làm này nó có thể thay đổi được font chữ luôn.

Cái phiên bản trả phí mặc dù chỉnh được nhiều thứ nhưng lại không chỉnh được font chữ này!

Bởi đắt chưa chắc đã ngon hết đâu nhé.

Sau một hồi lần mò từng cái một, kết quả cuối cùng của tôi là

Về tổng quan chung thì nó như vầy:

tong quan sau khi doi

 

Cũng khá thanh lịch tao nhã và hài hòa với widget của theme đúng không nào? Tôi đúng là có khiếu thẩm mỹ 🙂

Lời kết

Qua hướng dẫn trên, Vũ hy vọng các bạn có thể tự dò CSS code và tùy chỉnh giao diện theo ý muốn của mình.

Nếu bạn thấy bài viết hữu ích thì hãy bấm LikeShare để chia sẻ kiến thức hữu ích này đến với mọi người nhé! Cảm ơn các bạn đã dành thời gian đọc hết bài viết.

13 bình luận

  1. Phương 17/10/2017
  2. Minh 11/01/2018
    • Vũ Trần 11/01/2018
      • Minh 11/01/2018
  3. Corn 02/05/2018
    • Vũ Trần 03/05/2018
  4. hao 18/05/2018
    • Vũ Trần 21/05/2018
  5. Sang Sang 25/07/2018
    • Vũ Trần 25/07/2018
  6. Quang Bui Hong 12/09/2018
    • Vũ Trần 13/09/2018
  7. Quang Bui Hong 16/09/2018

Bình luận của bạn

This site uses Akismet to reduce spam. Learn how your comment data is processed.

[Black Friday 2018] Tổng hợp khuyến mãi hosting/theme/domain/software...Xem ngay!
+ +

Cài đặt và thành thạo Wordpress trong 1 giờ

Nếu không nhận link tải ebook trong inbox, bạn vui lòng kiểm tra hộp thư Spam!

Opps, bạn đã nhập sai địa chỉ mail!