Để sắp xếp, định dạng các phần tử hiển thị trên website của mình, bạn cần tùy chỉnh CSS. Vậy chèn CSS như thế nào và có phức tạp không? Trong bài viết hôm nay, compamarketing sẽ tổng hợp 3 Cách chèn CSS vào Wordpress đơn giản, nhanh chóng giúp bạn thuận tiện hơn trong quá trình thiết kế, quản lý website wordpress. Cùng theo dõi để tham khảo nhé!3 Cách chèn CSS vào Wordpress đơn giản, nhanh chóng giúp bạn thuận tiện hơn trong quá trình thiết kế, quản lý website wordpress. Cùng theo dõi để tham khảo nhé!
1. CSS là gì?
CSS, viết tắt của Cascading Style Sheet, có thể hiểu đơn giản như sau:
- CSS mô tả, định dạng và bố cục cách các phần tử HTML xuất hiện trên màn hình, trang web hoặc các phương tiện khác.
- CSS tiết kiệm thời gian định dạng, vì nó có thể kiểm soát bố cục, màu sắc, màu văn bản, v.v. của nhiều trang web cùng một lúc.
Bạn có thể tìm hiểu thêm về CSS nội tuyến, CSS bên ngoài và CSS nội bộ trong bài viết này. Vì nó đóng một vai trò lớn trong việc định hình phong cách của một trang web nên CSS rất quan trọng trong thiết kế trang web. Và khi bạn muốn trang web của mình không giống ai, độc đáo và duy nhất trên internet thì đó là lúc bạn cần tìm hiểu thêm cách chèn CSS tùy chỉnh [CSS cá nhân] vào trang web của mình. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn 3 cách để chèn CSS vào WordPress, CMS mã nguồn mở lớn nhất trên thế giới hiện nay.
2. 3 cách chèn CSS vào Wordpress
2.1. Cách 1: Chèn Custom CSS WordPress bằng Plugins
Cách dễ nhất để chèn CSS tùy chỉnh vào WordPress là sử dụng một plugin. Khi nói đến plugin WordPress, bạn sẽ có rất nhiều sự lựa chọn, chúng tôi sẽ giới thiệu một số plugin CSS tùy chỉnh WordPress phổ biến nhất và tất cả đều có thể được cài đặt trong phần Plugins –› Add New của trang quản trị WordPress.Plugins –› Add New của trang quản trị WordPress.
2.1.1. Simple Custom CSS
Đây là plugin CSS custom WordPress phổ biến nhất. Nó giúp điều chỉnh styles và ghi đè lên CSS hiện tại của theme. Giá trị đặt ở đây cũng sẽ được giữ nguyên khi thay đổi theme.
Khi được kích hoạt, công cụ này sẽ xuất hiện trong phần Appearance –› Custom CSS. Cách sử dụng vô cùng đơn giản. Nhập bất kỳ giá trị nào bạn cần vào trình chỉnh sửa và lưu nó.Appearance –› Custom CSS. Cách sử dụng vô cùng đơn giản. Nhập bất kỳ giá trị nào bạn cần vào trình chỉnh sửa và lưu nó.
Sau đó, bạn sẽ thấy sự thay đổi bằng cách làm mới trang web.
2.1.2. WP Add Custom CSS
Một công cụ mạnh mẽ khác để chèn CSS vào WordPress
Khi quá trình cài đặt hoàn tất, nó sẽ hiển thị một phần riêng biệt trong dashboard. Ở đó, bạn có thể tùy chỉnh custom css của riêng mình và áp dụng CSS cho toàn bộ trang.
Điều tốt là bạn cũng thấy Custom CSS WordPress editor dưới mỗi bài đăng. Vì vậy, bạn có thể chèn các CSS khác nhau vào mỗi bài đăng nếu cần.
Cuối cùng, hãy xem lại thay đổi bằng cách tải lại trang:
2.1.3. Site Origin CSS
Siute Origin CSS là một Custom CSS plugin thân thiện với người dùng và có tính tương tác cao:
Sau khi được cài đặt, công cụ sẽ xuất hiện trong Appearance › Custom CSS. Appearance › Custom CSS.
Plugin này cũng hỗ trợ một trình soạn thảo tiện lợi ngay tại mỗi phần của trang web để bạn có thể chỉnh sửa hoặc theme code thủ công.
2.1.4. Simple Custom CSS and JS
Cuối cùng, nhưng không kém phần “nguy hiểm”, bạn có thể thích plugin custom css này. Nó có nhiều chức năng bổ sung so với các plugin trước đó. Một trong số đó là thêm các mục JavaScripts.
Khi plugin này được cài đặt, mục quản lý sẽ xuất hiện trong dashboard. Ở đó, bạn có thể tạo custom CSS tương tự như cách bạn đăng một bài mới trong WordPress.
Để xem trước, chúng tôi sẽ thay đổi màu của thẻ h2.
Tất cả các thay đổi sẽ hiển thị khi bạn tải lại trang.
2.1.3. Site Origin CSS
Siute Origin CSS là một Custom CSS plugin thân thiện với người dùng và có tính tương tác cao:Appearance –› Customize trong dashboard.
Site Origin CSSAdditional CSS.
Appearance › Custom CSS.
Site origin css custom wordpress 3
2.1.4. Simple Custom CSS and JS
Cuối cùng, nhưng không kém phần “nguy hiểm”, bạn có thể thích plugin custom css này. Nó có nhiều chức năng bổ sung so với các plugin trước đó. Một trong số đó là thêm các mục JavaScripts.
3. 3 cách nhúng thêm CSS
3 cách để nhúng chính mã css vào giao diện của bạn.
Inline – css nội tuyến [nhúng trực tiếp vào một phần tử HTML bằng cách sử dụng thuộc tính style của phần tử]: Xin chào
Internal – css nội bộ vẫn có thể là css nội tuyến [tạo bộ chọn trực tiếp trên trang bằng cách đặt thẻ : thẻ này trong tùy chỉnh giao diện có chỗ để thêm css, giống như các theme WordPress bất kỳ hỗ trợ điều này
External – css bên ngoài [tạo một tệp css riêng và nhúng nó vào trang bằng thẻ để nhúng trang: trong WordPress, nó sẽ là file style.css, file .css plugin themes… Tôi sẽ gọi chúng là tệp CSS
3.1. Nhúng tệp CSS bên ngoài
Khi bạn đặt css của mình vào file.css thì tệp đó sẽ được nhúng vào trang web.
Khi trang web được tải, tệp sẽ được tải xuống cùng với nó.
Trong WordPress, nó thường sẽ là các tệp style.css hoặc themes.css hoặc plugin.css
Khi bạn sử dụng theme WordPress, giao diện sẽ để lại cho bạn một tệp có tên style.css để bạn chỉnh sửa thêm css vào.
Đoạn code này bạn đặt trong tệp functions.php
function wptangtoc_styles[ ] {
wp_register_style[ 'wptangtoc-style', get_stylesheet_directory_uri[] . "wptangtoc.css",'1.0','all' ];
wp_enqueue_style[ 'wptangtoc-style' ];
}
add_action[ 'wp_enqueue_scripts', 'wptangtoc_styles',100 ];Xong, bạn vào đường dẫn thư mục themes: wp-content / themes / themes-cua-ban / sau đó bạn tạo tên tệp là wptangtoc.css
Khi bạn chỉnh sửa hoặc thêm bất kỳ css nào, bạn chỉ cần đưa nó vào file wptangtoc.css như vậy.
Ưu điểm và nhược điểm của việc sử dụng tệp bên ngoài
Ưu điểm:
- Tận dụng tốt bộ nhớ đệm của trình duyệt [đây là điều quan trọng nhất].
- Css có thể tái sử dụng là tốt. [Một quy tắc có thể sử dụng nhiều hơn một html].
- Các công nghệ nén tối ưu như gzip và brotli. [đặc biệt là brotli].
- Sử dụng nhiều mẹo tối ưu hóa css.
Khuyết điểm:
- Phải hiểu cách kiểm soát cache của trình duyệt thì mới có thể, sử dụng được cái này là tốt rồi. bạn có thể tham khảo tại: cache của trình duyệt
- Nếu bạn không hiểu điều này thì trang web của bạn rất dễ bị lỗi và không phát huy hết tiềm năng của nó.
- Nếu trang web có quá nhiều css trên 60kb css trở lên khi gzip và brotli đã được nén, nó sẽ chặn hiển thị html.
- Thứ tự ưu tiên chồng chéo kém nhất, bạn cần có tư duy xử lý chồng chéo css tối ưu, bạn có thể tìm hiểu về loại bỏ css chồng chéo và thứ tự ưu tiên css
3.2. CSS nội bộ
CSS nội bộ hiểu đơn giản có nghĩa là nó chèn css vào html, khi html được tải, css đó đã được tải.
Khi bạn đưa css của mình vào css giao diện tùy chỉnh của mình [hoặc một số css bổ trợ], hầu hết mọi tiện ích bổ sung đều hỗ trợ tính năng này, giúp bạn thêm css.
Hoặc bạn có thể tạo mã tự nhúng của riêng mình như thế này.
Mã bạn đặt trong functions.php. tập tin
function wptangtoc_add_css_noi_tuyen[] { ?> /**** cho đoạn css vào trong đây trong 2 thẻ style ****/
?>
/**** cho đoạn css vào trong đây trong 2 thẻ style ****/