Thêm CSS riêng cho từng widget trong WordPress

Thêm CSS riêng cho từng widget

Thêm CSS riêng cho từng widget

Nếu trước đây những ai đã từng sử dụng Thesis 1 .x qua rồi thì chắc sẽ biết có một thủ thuật sử dụng hook và filter của nó làm một việc rất hay đó là thêm CSS riêng cho mỗi widget để chúng ta có thể tùy biến mỗi widget sử dụng một style khác nhau, rất có ích cho những ai muốn chèn các nội dung nổi bật vào widget. Nhưng ngay bây giờ chúng ta có thể làm việc đó dễ dàng ở bất cứ theme nào với plugin Widget CSS Classes.

Thêm CSS cho từng widget

Sau khi cài đặt plugin kia xong, các bạn vào Appearance -> Widget và mở một widget bất kỳ ra sẽ thấy chỗ nhập class như thế này.

Thêm CSS riêng cho từng widget

Bạn nhập vào cho nó một class bất kỳ và nhớ nó để chút nữa chúng ta sẽ cùng thêm CSS vào nó. Ở đây mình lấy ví dụ tên class của mình là widget_category.

Sau khi đã xác định được class cho widget đó. Các bạn ra lại ngoài trang chủ và dùng Impact Element (Google Chrome) hoặc FireBug (Firefox) để kiểm tra widget đó thì sẽ thấy class đã được thêm vào như hình.

Thêm CSS riêng cho từng widget

Ok, bây giờ chúng ta sẽ bắt đầu lên CSS cho class này nhé. Giả sử mình muốn làm đẹp tiêu đề widget thì mình sẽ dùng code CSS như sau và chèn vào file style.css:

.widget_category h4 {
font-weight: bold;
color: #FFFFFF;
padding: 5px 5px;
background: #EE383A;
}

Các bạn nào chưa có kiến thức nhiều về CSS thì có thể làm theo bằng cách thay widget_category thành tên class của bạn và sửa h4 thành thẻ heading mà theme bạn đang dùng cho các tiêu đề widget là được.

Còn nếu bạn muốn làm đẹp thêm các đối tượng thẻ trong widget (như thẻ <li> chẳng hạn) thì mình cũng ví dụ một đoạn code sau:

.widget_category li {
background: #FFFBCC;
border: 1px solid #E6DB55;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.9em;
-webkit-border-radius: 5px;
}

Và bây giờ mình đã có một widget chứa phong cách như thế này

Thêm CSS riêng cho từng widget

Màu mè không tồi xíu nào đúng không.  :bye:

Tương tự các bạn có thể thêm style riêng cho các widget khác còn lại.

Nguồn: Thêm CSS riêng cho từng widget trong WordPress | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage &amp; coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben &amp; tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Video học WordPress căn bản tiếng Việt
Tùy biến quyền người dùng với Advanced Access Manager
Tác giả

Bình luận

Leave a Message

Registration isn't required.

NguyenLp LarTheme