Bootstrap là gì? Blogger có thể tận dụng Bootstrap vào việc gì trong khi bạn đang dùng nền tảng WordPress để viết blog?
Có thể bạn không biết: tất cả các theme WordPress đều có style CSS riêng nhưng hầu như đều thiếu những định dạng nội dung phổ biến mà bạn hầu như chấp nhận như một thói quen.
Bài viết này sẽ không hướng dẫn bạn cách nhúng toàn bộ Bootstrap đầy đủ vào website WordPress vì sẽ gây hại đến tốc độ website của bạn.
Thay vào đó, tôi hướng dẫn bạn cách thêm những gì cần thêm và có thể tự mình thêm vào.
Bootstrap là gì? Ý nghĩa của Bootstrap với WordPress?
Bootstrap là một nền tảng tạo giao diện website miễn phí phổ biến nhất thế giới. Đặc biệt trong thiết kế giao diện của ứng dụng nền web và website tĩnh.
Người tạo website không cần viết lại css cho website mà chỉ cần nhúng Bootstrap vào và sử dụng cũng như nâng cấp các phiên bản cao hơn dễ dàng.
Vì vậy có thể nói Bootstrap… KHÔNG LIÊN QUAN gì tới WordPress.
What!!!?
Vậy tại sao bạn cần quan tâm đến Bootstrap?
Bootstrap có một thư viện mẫu CSS dựng sẵn và nó đẹp, được hậu thuẫn tốt từ cộng đồng.
Chúng ta có thể dùng cho WordPress trông đẹp hơn cũng như học hỏi cách Bootstrap viết code CSS chuẩn.
Trong bài viết này tôi sẽ giới thiệu cho bạn một số CSS của Bootstrap mà tôi đã trích sẵn. Bạn chỉ copy và paste vào theme là dùng ngay ở những ví dụ ở mục dưới.
Alert – Tạo hộp thoại thông báo đẹp mắt cho bài viết
Hộp thoại thông báo cực kỳ quan trọng khi bạn viết bài. Vì nó sẽ phân loại thông tin mà bạn muốn người đọc tập trung hơn và tăng chuyển đổi tốt hơn.
Giờ đây bạn không cần phải tìm kiếm, cài đặt thêm plugin vì bạn có thể thêm vào theme nhanh chóng.
Bạn hãy xem ví dụ về các hộp thoại thông báo của Bootstrap dưới đây:
Ví dụ nâng cao một chút:
Bootstrap CSS Shadow được trích ra (bạn copy và dùng):
/* Alert */
.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-heading{color:inherit}.alert-link{font-weight:700}.alert-dismissible{padding-right:4rem}.alert-dismissible .close{position:absolute;top:0;right:0;padding:.75rem 1.25rem;color:inherit}.alert-primary{color:#004085;background-color:#cce5ff;border-color:#b8daff}.alert-primary hr{border-top-color:#9fcdff}.alert-primary .alert-link{color:#002752}.alert-secondary{color:#383d41;background-color:#e2e3e5;border-color:#d6d8db}.alert-secondary hr{border-top-color:#c8cbcf}.alert-secondary .alert-link{color:#202326}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert-success hr{border-top-color:#b1dfbb}.alert-success .alert-link{color:#0b2e13}.alert-info{color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}.alert-info hr{border-top-color:#abdde5}.alert-info .alert-link{color:#062c33}.alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.alert-warning hr{border-top-color:#ffe8a1}.alert-warning .alert-link{color:#533f03}.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-danger hr{border-top-color:#f1b0b7}.alert-danger .alert-link{color:#491217}.alert-light{color:#818182;background-color:#fefefe;border-color:#fdfdfe}.alert-light hr{border-top-color:#ececf6}.alert-light .alert-link{color:#686868}.alert-dark{color:#1b1e21;background-color:#d6d8d9;border-color:#c6c8ca}.alert-dark hr{border-top-color:#b9bbbe}.alert-dark .alert-link{color:#040505}Shadow – Tạo hiệu ứng đổ bóng cho các hộp thoại
Ngoài Alert ra, bạn vẫn còn thêm lựa chọn khác là Shadow. Các hiệu ứng đổ bóng này không giới hạn ở hộp thoại. Bạn có thể áp dụng vào thiết kế blog của bạn.
Ví dụ: Hiệu ứng đổ bóng
/* Shadow */
.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.shadow-none{box-shadow:none!important}Cards – Thiết kế Sidebar Widget cho blog
Đây là code hơi phức tạp khi bạn cần kết hợp HTML và CSS để tự tạo các Sidebar dạng card. Nhưng chịu khó một chút bạn có thể tự tạo ra các sidebar đẹp mắt.
Những dạng Card này sẽ cho bạn những ý tường trong thiết kế Sidebar với HTML Widget.
Ví dụ Card của Bootstrap:
Tiêu đề của card
Nội dung miêu tả của card.
Card trên được render theo mã HTML dưới đây:
<div class="card" style="width: 18rem;">
<img src="https://cuongthach.com/wp-content/uploads/2020/03/undraw_landscape_mode_53ej.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Tiêu đề của card</h5>
<p class="card-text">Nội dung miêu tả của card.</p>
<a href="#" class="button">Nút CTA</a>
</div>
</div>.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.shadow-none{box-shadow:none!important}Cách dùng Bootstrap CSS cho WordPress
Các ví dụ trên chỉ là một trong số các thành phần của Bootstrap để bạn tham khảo (Sẵn tiện trích sẵn CSS cho bạn dùng). Để có thể tự dùng Bootstrap bạn phải theo các bước sau:
Tự trích bất cứ thành phần Bootstrap CSS nào bạn thích
Không cần thiết phải download toàn bộ mã nguồn CSS của Bootstrap về máy tính hoặc chỉnh sửa bằng phần mềm. Bạn có thể thao tác nhanh trên trình duyệt Chrome siêu tốc.
Kiểm tra xem bạn muốn trích các thành phần nào của Bootstrap CSS tại trang Bootstrap Documentation.
Sau đó vào link Bootstrap CSS bằng trình duyệt như bình thường: https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css
Trích Bootstrap CSS ngay trên trình duyệt (dùng công cụ tìm kiếm Ctrl+F)
Thêm Bootstrap CSS đã trích vào WordPress theme
Sau khi đã copy xong, bạn hãy dán CSS đó vào theme (bạn có thể thêm vào Additional CSS của theme cho nhanh hoặc Stylesheet của child theme).
Sau khi thêm CSS xong thì Bootstrap đã sẵn sàng để sử dụng.
https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css
Thêm CSS class của Bootstrap khi cần
Bất cứ khi nào bạn muốn định dạng hộp thoại khi viết bài hay thiết kế blog bạn chỉ cần thêm CSS class vào Advanced của Block là xong.
Danh sách tham khảo đầy đủ Bootstrap CSS Class bạn có thể tham khảo tại W3School Bootstrap Reference.
Một số lưu ý khi dùng Bootstrap
Tại sao bạn lại cần tận dụng Bootstrap CSS?
- Bởi vì Bootstrap CSS được viết sẵn từ các chuyên gia CSS, bạn đơn giản chỉ đem ra áp dụng sao cho thuần thục thay vì viết lại từ đầu.
- Bootstrap ưu tiên cho giao diện điện thoại, điều này cực hữu ích vì nó là một trong những tiêu chí đầu tiên khi bạn chọn theme WordPress ngày nay.
- Bootstrap có thiết kế đẹp tiêu chuẩn. Nếu bạn để ý thì rất nhiều plugin WordPress có cho phép bạn lựa chọn giao diện thiết kế theo phong cách Bootstrap hay giao diện theme. Bởi vì Bootstrap được xem như một tiêu chuẩn thiết kế (FluentForm, WP Ninja Table,… là ví dụ).
Có thể nói, thành bại của giải pháp này là THUỘC LÒNG BOOTSTRAP CLASS. Lúc đầu sẽ hơi khó khăn, nhưng về lâu dài sẽ ngày càng dễ hơn với bạn và mang lại lợi ích rất lớn.
Lời kết…
Giải pháp này chỉ đơn giản là CHÔM code CSS từ Bootstrap để áp dụng vào theme của WordPress mà đa số đều thiếu sót mà không gây ảnh hưởng đến TỐC ĐỘ website của bạn.
Bootstrap đặc biệt hữu ích nếu bạn vẫn chưa có ý tưởng nên bắt đầu từ đâu để trang trí, thiết kế hay định dạng bài viết của mình như thế nào cho chuẩn.
Các WordPress plugin định dạng nội dung không phải lúc nào cũng là giải pháp tốt. Đôi khi bạn chỉ cần thêm một vài định dạng mở rộng là đã đáp ứng được nhu cầu cần thiết.
Với cách trích CSS của Bootstrap như trên blog của bạn sẽ không hề bị ảnh hưởng đến tốc độ bởi vì dung lượng CSS chỉ tăng thêm 7.72KB (cho toàn bộ code trên), không tải thêm hay JS, Popper.js, và jQuery gây nặng cho theme bạn đang sử dụng hoặc trùng lắp chức năng sẵn có của theme WordPress.
Tham khảo Cuong Thach