Trong bài viết này, chúng ta sẽ tìm hiểu cách tích hợp Bulma (CSS Framework) vào WordPress mà không sử dụng bất kỳ plugin nào.
Thay thế cho Bootstrap, Bulma là một trong các CSS framework và ngày càng trở nên phổ biến hơn.
Bạn đang xem: How to Integrate Bulma (CSS Framework) in WordPress?
Trong hướng dẫn này, bạn sẽ tìm hiểu:
- Bulma.io là gì và cách sử dụng nó?
- Tích hợp Bulma vào chủ đề GeneratePress.
- Tích hợp Bulma vào chủ đề WP Astra.
- Và nhiều hơn nữa…
Mặc dù việc thêm Bulma.io CDN khá đơn giản, nhưng có thể gây xung đột với chủ đề WordPress hiện tại của bạn. Vì vậy, hãy sử dụng nó một cách cẩn thận.
Khi tôi lần đầu biết về Bulma CSS Framework, tôi mở VS Code và thử nghiệm. Tôi nhanh chóng phải lòng Bulma.
Contents
Bulma.io là gì?
Vậy Bulma là gì và làm thế nào để bắt đầu?
Bulma là một CSS framework thay thế cho Bootstrap và các CSS framework khác.
Đây là một framework CSS miễn phí, nguồn mở nơi bạn có thể thiết kế một trang web đáp ứng một cách nhanh chóng.
Với hơn 45000 lượt đánh giá sao trên Github, Bulma là một framework mạnh mẽ và bạn đang được sự hỗ trợ từ các nhà phát triển tốt.
Để bắt đầu với Bulma Framework, bạn cần có kiến thức cơ bản về HTML. Hãy đến tài liệu Bulma và bắt đầu sử dụng nó.
Các bước tích hợp Bulma (CSS Framework) vào WordPress
Xem thêm : 15+ Phần mềm thiết kế web dành cho người không chuyên: Lựa chọn tốt nhất cho bạn
Ở đây, chúng ta sẽ tích hợp Bulma vào hai chủ đề WordPress phổ biến: GeneratePress và Astra.
1. Thêm Bulma vào chủ đề GeneratePress
Làm theo những bước sau để thêm và sử dụng Bulma trong chủ đề GP.
- Kích hoạt Module Elements
Chúng ta cần thêm Hook vào GeneratePress để chèn Bulma.io CDN vào trang web của chúng ta. Hãy kích hoạt Module Element.
Đi tới Appearance > GeneratePress > Elements > Activate.
Bạn cần phải có một module cao cấp của chủ đề GeneratePress để thực hiện điều này.
- Thêm Hook mới
Thêm Hook mới vào Element.
Đi tới Appearance > Elements > Add New Element.
Chọn loại Element là Hook. Đặt tiêu đề Hook mới là “Bulma CDN URL”.
Ở đây, chúng ta sẽ thêm liên kết HTML Bulma CDN.
Để bắt đầu, bạn chỉ cần một URL.
Xem thêm : Top 5 phần mềm thiết kế giao diện Web miễn phí
Để biết liên kết CDN mới nhất, hãy truy cập trang web chính thức. Tôi đang sử dụng phiên bản 0.9.3 khi viết hướng dẫn này.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
- Quản lý thiết lập Hook
Sau khi chèn mã, hãy điều chỉnh các thiết lập Hook.
Đi tới Hook Settings và chọn Hook để hiển thị wp_head. Để trống các thiết lập khác.
Sau đó, điều chỉnh Display Rules và chọn Location để hiển thị trên Toàn bộ trang web.
- Tạo một bài viết/trang để sử dụng CSS Bulma
Tạo một bài viết/trang mới mà bạn muốn sử dụng mã Bulma.
2. Thêm Bulma vào chủ đề WP Astra
Làm theo những bước sau để thêm và sử dụng Bulma trong chủ đề Astra.
- Kích hoạt Custom Layouts Module
Bây giờ đi đến Appearance > Astra Options > Custom Layouts > Activate.
- Thêm Custom Layouts Bulma Hook
- Đầu tiên, đi đến Appearance > Astra Options > Custom Layouts.
- Nhấp vào nút Add New để thêm custom layouts.
- Bật tùy chọn Enable Code Editor ở đầu trang.
- Đặt tiêu đề cho Bulma Integration.
- Dưới Layout Option, chọn Hooks.
- Bây giờ, bạn sẽ thấy nhiều tùy chọn Hooks khác.
Sao chép và dán mã sau vào hộp snippet.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
- Quản lý thiết lập Custom Layouts
- Trong mục Action, chọn wp_head.
- Để trống trường Priority.
- Để trống trường Spacing.
- Chọn Entire Website trong Display On.
- Để trống trường Responsive Visibility.
- Để trống các thiết lập khác.
- Cuối cùng, nhấn nút Publish.
- Tạo một bài viết/trang trong Astra để sử dụng CSS Bulma
Tạo một bài viết/trang mới trong chủ đề Astra mà bạn muốn sử dụng mã Bulma.
Kết Luận
Đó là hướng dẫn tích hợp Bulma (CSS Framework) vào WordPress. Hy vọng rằng bạn có thể dễ dàng thêm Bulma.io CDN vào trang web của mình. Trong hướng dẫn này, tôi chỉ đề cập đến các bước cho chủ đề Astra và GeneratePress.
Tương tự, bạn có thể thử nghiệm chủ đề mà bạn đang sử dụng với quy trình tương tự. Nếu bạn có bất kỳ câu hỏi nào về hướng dẫn này, hãy để lại bình luận bên dưới.
Nguồn: https://laptrinhc.edu.vn
Danh mục: Web