Bootstrap là gì? Ứng dụng Boostrap vào Wordpress như thế nào?

Bootstrap là gì? Ứng dụng Bootstrap vào WordPress như thế nào?

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 La Gi 1

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à websitet 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.

Nà ní !!!?

Vậy tại sao bạn cần quan tâm đến Bootstrap?

Bởi vì Bootstrap có một thư viện mẫu CSS dựng sẵn và nó đẹp rất tiêu chuẩn, được hậu thuẫn tốt từ cộng đồng và cập nhật liên tục.

Chúng ta có thể CHÔM nó 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 ra 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 (đã minified, 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, 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

Bootstrap CSS Shadow được trích ra (đã minified, bạn copy và dù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

Tuy đâ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, nếu 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.

Nút CTA

Card trên được render theo mã HTML dưới đây:

<div class="card" style="width: 18rem;">
  <img src="/undraw_landscape_mode_53ej" 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>

Bootstrap CSS Shadow được trích ra (đã minified, bạn copy và dùng):

.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 (cũng như sẵn tiện trích sẵn CSS cho bạn dùng nếu thích). Để 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).

Dan Vao Additional Css Cua Theme
Thêm vào Additional CSS

Sau khi thêm CSS xong thì Bootstrap đã sẵn sàng để sử dụng.

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.

Cach Them Css Class Bootstrap
Cách thêm CSS Class vào Gutenberg block (WordPress 5)

Một số lưu ý khi dùng Bootstrap

Tại sao bạn lại cần tận dụng Bootstrap CSS?

  1. 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.
  2. 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.
  3. 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.

Nếu bạn gặp khó khăn trong việc chèn thêm các code CSS trên hãy để lại bình luận bên dưới để thảo luận nhé.

guest
Đánh Giá Bài Viết
Cảm nhận của bạn về bài viết
Lưu ý: Nếu đây là lần đầu tiên bình luận trên blog CuongThach thì bình luận của bạn sẽ cần phê duyệt để hạn chế spammer bot. Bạn sẽ nhận được email thông báo ngay khi bình luận của bạn được phê duyệt và mỗi khi bình luận của bạn được trả lời. Xin lỗi nếu bạn cảm thấy không hài lòng trong trường hợp này!
0 Bình luận
Inline Feedbacks
Xem tất cả bình luận