THỦ THUẬT WORDPRESS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Tổng hợp mã CSS thường dùng để tùy biến theme WordPress

Trong bài này mình sẽ tổng hợp tất cả những đoạn mã CSS thường dùng để tùy biến giao diện theme WordPress, rất phù hợp với những bạn không rành về lập trình web.

WordPress là một CMS dùng để làm website rất phổ biến, hay nói chính xác hơn là nó đang đứng đầu trong danh sách các CMS hiện nay. Điểm mạnh của WordPress là người dùng có thể cài đặt theme và plugin mà không cần phải biết lập trình.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Đối với những người không biết CSS thì việc tùy biến giao diện chủ yếu dựa vào phần Customize của WordPress. Nhưng với những bạn đã qua đào tạo lập trình web thì có thể kết hợp thêm phần Theme Editor để mở file CSS và thay đổi mã trong đó.

Bạn có thể xem bài viết cách tùy biến theme WordPress để hiểu rõ hơn. Và để giúp bạn dễ dàng tùy chỉnh hơn thì mình sẽ tổng hợp tất cả những đoạn mã CSS thường dùng nhất trong theme WordPress nhé.

1. Thuộc tính CSS thiết lập text

Xử lý text là công đoạn thay đổi hiển thị cho chữ trong quá trình tùy biến theme WordPress.

Thiết lập màu cho chữ

color: color_name

Trong đó color_name có thể là tên tiếng Anh như (green, blue, yellow), nhưng tốt nhất là bạn hãy sử dụng mã màu nhé.

Xem thêm bài viết color trong CSS để hiểu rõ hơn.

Thiết lập chiều cao cho chữ

line-height: 10px

Trong đó px là đơn vị điểm ảnh trong giao diện đồ họa. Màn hình máy tính sẽ được kết nối bởi các điểm ảnh, và trong CSS nó đại diện cho độ rộng của một thuộc tính nào đó.

Như trong ví dụ này thì chiều cao được thiết lập là 10px = 10 pixel.

Thiết lập kiểu font cho chữ

font-family: "Tên font"
Ví dụ
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif

Khi bạn cài đặt hệ điều hành sẽ có các font mặc định, tùy vào HĐH sẽ có các font khác nhau, vì vậy ta thường upload font lên server và khai báo trong CSS để bất kì máy tính nào cũng hiển thị đúng kiểu font. Tham khảo bài viết font trong css để hiểu rõ hơn.

Gạch chân / in nghiêng / in đậm

Dưới đây là các thuộc tính dùng để gạch chân, in nghiêng và in đậm chữ trong CSS.

Gạch chân
text-decoration: underline
In nghiêng
font-style: italic
In đậm
font-weight: bold 
Bỏ in đậm
font-weight: normal

Tăng / giảm kích thước cho chữ

font-size: 10px

Mình đã giải thích cho các bạn đơn vị Pixel ở trên rồi đấy.

Canh giữa chữ

text-align: center

Tương tự, muốn canh trái và phải thì thay center thành left right.

2. Thuộc tính CSS xử lý nền (background)

Background là phần thiết lập màu nền cho các khối giao diện nào đó trong theme WordPress, thậm chí bạn có thể thiết lập màu nền cho cả toàn trang web. Đây là thao tác sử dụng khá nhiều khi tùy biến theme WordPress.

Thiết lập màu background

background-color: tên_màu

Thiết lập background bằng hình ảnh

background: url("đường dẫn hình ảnh")

Background grandient nhiều màu sắc

Truy cập vào đây để tạo mã CSS: https://cssgradient.io/

3. Thuộc tính CSS xử lý khối

Các thuộc tính xử lý khối như tạo đường viền, tạo hiệu ứng shadow, canh vị trí của các khối cũng được sử dụng rất nhiều khi tùy biến theme WordPress.

Tạo đường viền

border: solid 1px yellow

Trong đó yellow là màu của đường viên, 1px là độ rộng của đường viên, solid là kiểu đường viền. Chúng ta hay sử dụng hai loại kiểu đường viền gồm:

  • solid: đường viền liền kết
  • dotted: Đường việc gạch nối

Tạo hiệu ứng Box Shadow

Truy cập vào đây để tạo mã: https://html-css-js.com/css/generator/box-shadow/

Cho khối nằm về bên trái hoặc bên phải

Ta sẽ sử dụng thuộc tính float.

Về bên trái
float:left
Về bên phải
float:right

Lưu ý rằng khi sử dụng thuộc tính này thì khối sẽ hiển thị ở định dạng treo, nghĩa là nó sẽ nằm đè cứng lên vị trí của nó nên những khối phía dưới có thể sẽ bị vỡ. Vì vậy ta thường thêm một thẻ div ở phía dưới và cho thuộc tính clear:both.

Tham khảo bài viết kỹ thuật clear fix trong CSS để hiểu rõ hơn nhé.

Tạo khoảng cách giữa đường viền và nội dung

Công thức
padding: trên phải dưới trái
Ví dụ
padding: 10px 10px 10px 10px;

Tạo khoảng cách giữa các khối

Công thức
margin: trên phải dưới phải
Ví dụ
margin: 10px 20px 30px 40px

Để sử dụng thành thao thuộc tính margin thì bạn phải hiểu về Box Model trong CSS nhé.

Thiết lập chiều cao / rộng cho khối

Ta sử dụng hai thuộc tính heightwidth.

Chiều cao
height: 30px
width: 300px

Nếu bạn thiết lập mà không có tác dụng gì thì phải xem đối tượng đó đang hiển thị ở dạng inline hay block nhé. Với inline thì bạn không thể thiết lập chiều cao được.

Xem bài viết thuộc tính display trong CSS để hiểu rõ hơn.

Làm mờ khối / hình ảnh

Làm mờ tức là khối đó sẽ có hiệu ứng mờ nhạt hơn so với những khối bình thường khác.

opacity: 0.1

Giá trị sẽ giao động từ 0 đến 1. Như ví dụ trên 0.1 thì nó sẽ rất mờ, còn nếu bạn thay thành opacity:1 là hiển thị sáng nhất, và thay thành opacity:0 là ẩn luôn khối đó.

Vẫn còn rất nhiêu thuộc tính CSS khác nữa, bạn có thể tham khảo thêm tại series học CSS.

Trên là tổng hợp những thuộc tính CSS đuộc dùng để tùy biến theme trong WordPress, với những đoạn mã và ví dụ này hy vọng sẽ giúp ích cho bạn trong quá trình sử dụng WordPress.

Cùng chuyên mục:

Cập nhật nhanh 3 bí kíp thiết kế web đẹp mới nhất 2021

Cập nhật nhanh 3 bí kíp thiết kế web đẹp mới nhất 2021

Sở hữu website đẹp, hấp dẫn và chuyên nghiệp là điều mà ...

Dịch vụ cài đặt blog bằng WordPress miễn phí

Dịch vụ cài đặt blog bằng WordPress miễn phí

Website là một công cụ không thể thiếu khi bán hàng online, nó giúp ta…

Bài 06: Tạo trang quản lý Options trong WordPress

Bài 06: Tạo trang quản lý Options trong WordPress

Ở bài trước mình có nêu ra một ví dụ về quản lý thông tin…

Bài 05: Options API trong WordPress: add_option / get_option ...

Bài 05: Options API trong WordPress: add_option / get_option ...

Trong database của WordPress bạn sẽ thấy một table ten là [prefix]_options, table này sẽ…

Bài 04: Tìm hiểu Hooks , Action và Filter trong WordPress

Bài 04: Tìm hiểu Hooks , Action và Filter trong WordPress

Bạn đã từng nghe khái niệm lập trình hướng sự kiện trong các Framework như…

Bài 02: WordPress API là gì? Danh sách API trong WordPress

Bài 02: WordPress API là gì? Danh sách API trong WordPress

Đáng lẽ mình không viết bài này nhưng lúc đang viết bài tiếp theo thì…

Cách tùy biến theme WordPress căn bản cho người mới bắt đầu

Cách tùy biến theme WordPress căn bản cho người mới bắt đầu

Khi [cài đặt WordPress trên Hosting] xong thì bạn có thể cài đặt theme để…

Hướng dẫn làm website WordPress chạy tiếp thị liên kết với AT

Hướng dẫn làm website WordPress chạy tiếp thị liên kết với AT

Ngày nay, công nghệ ngày càng phát triển dẫn đến khái niệm [tiếp thị liên…

Đánh giá GeneratePress - Cách sử dụng theme GeneratePress

Đánh giá GeneratePress - Cách sử dụng theme GeneratePress

Nếu bạn đang muốn tìm kiếm một theme với các tiêu chí nhẹ, nhanh và…

Làm blog cá nhân bằng WordPress với theme GeneratePress

Làm blog cá nhân bằng WordPress với theme GeneratePress

Thời gian qua chắc hẳn bạn đã nghe đến theme GeneratePress rồi phải không nào?…

Cài đặt WordPress trên localhost

Cài đặt WordPress trên localhost

WordPress được lập trình bằng ngôn ngữ PHP và sử dụng MySQL để lưu trữ,…

Bài 01: WordPress là gì? Nên làm website bằng WordPress?

Bài 01: WordPress là gì? Nên làm website bằng WordPress?

WordPress là một CMS được phát triển trên ngôn ngữ lập trình PHP ...

Tặng license theme Generatepress khi mua Hosting Tinohost

Tặng license theme Generatepress khi mua Hosting Tinohost

Chào các bạn, hiện nay WordPress đang trở thành một phổ biến nhất thế giới,…

12 Wordpress plugin tốt nhất nên dùng cho website WordPress 2021

12 Wordpress plugin tốt nhất nên dùng cho website WordPress 2021

Bạn vừa tạo một blog WordPress mới và đang phân vân không biết nên chọn…

Bài 12: Custom Taxonomy  trong WordPress

Bài 12: Custom Taxonomy trong WordPress

Bài trước mình đã hướng dẫn bạn tạo một thể loại bài viết mới bằng…

Bài 11: Tạo Custom Post Type trong WordPress

Bài 11: Tạo Custom Post Type trong WordPress

Đây là các thể loại mặc định có sẵn sau khi bạn cài đặt WordPress.…

Bài 10: Hiển thị metadata ngoài frontend

Bài 10: Hiển thị metadata ngoài frontend

Sẵn có bạn hỏi làm thế nào để hiển thị nội dung bài viết ra…

Bài 09: Bốn bước custom Meta Boxes trong WordPress

Bài 09: Bốn bước custom Meta Boxes trong WordPress

Tới bài thứ chín này thì khái niệm Custom Meta Boxes không còn xa lạ…

Bài 08: Metadata API trong WordPress

Bài 08: Metadata API trong WordPress

WordPress sử dụng mô hình EAV nhằm giúp lập trình viên có thể tùy biến…

Bài 07: Custom Meta Boxes trong WordPress

Bài 07: Custom Meta Boxes trong WordPress

WordPress là một CMS nên hệ thống dữ liệu của nó chỉ dừng lại ở…

Top