Hướng dẫn add css to wordpress - thêm css vào wordpress
|
Để 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é! Show
1. CSS là gì?CSS, viết tắt của Cascading Style Sheet, có thể hiểu đơn giản như sau:
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 Wordpress2.1. Cách 1: Chèn Custom CSS WordPress bằng PluginsCá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 CSSMộ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 CSSSiute 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 JSCuố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 CSSSiute 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 JSCuố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 CSS3 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àiKhi 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:
Khuyết điểm:
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
Ưu điểm và nhược điểm của việc sử dụng CSS nội bộ Ưu điểm:
Khuyết điểm:
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 css3.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. Ưu điểm:
Khuyết điểm:
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 css3.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. Nếu bạn cũng đang cài browser caching để tăng tốc trang web của mình thì chỉ cần xóa bộ nhớ đệm như hướng dẫn ở trên là đủ. Ngoài ra, một số nhà cung cấp hosting cũng có các công cụ tự động lưu cache để tăng hiệu suất cho trang WordPress của bạn, chẳng hạn như Hostinger. Plugin bộ nhớ đệm đã được tích hợp vào wordpress và cần được tắt tạm thời trong Plugins –› Installed Plugins –› Must-Use.Plugins –› Installed Plugins –› Must-Use. 4.2. Misspelled CSS Syntax – Lỗi cú pháp CSSLỗi cú pháp rất dễ mắc phải, vì vậy custom CSS sẽ không hiển thị đúng. Nếu bạn thấy rằng trang hiển thị không chính xác mà không do cache, hãy sử dụng CSS validator để kiểm tra lỗi. Chỉ cần dán code CSS vào và chạy. Nó sẽ hiển thị cho bạn các lỗi hoặc lỗi đánh máy sẽ xuất hiện. 4.3. Quá nhiều lựa chọnĐôi khi bạn sử dụng custom CSS wordpress quá nhiều. 2 hoặc nhiều lựa chọn của một phần tử được gán giống nhau sẽ gây ra xung đột. Bởi vì CSS không thể biết bạn muốn sử dụng cái nào, giá trị nào. Lỗi này thường gặp khi gọi stylesheet lên trên một stylesheet đã có sẵn. Nếu bạn thử thay đổi tiêu đề h2 và không có gì xảy ra, hãy kiểm tra lại style sheet cho entries cũ. 4.4. Không có ý tưởngMặc dù đây không phải là một lỗi, nhưng có nhiều trường hợp phần khó nhất là custom CSS nào sẽ được sử dụng cho WordPress. Vì có quá nhiều lựa chọn, bạn có thể bị nhầm lẫn dẫn đến hoa mắt chóng mặt. Trên đây là 3 Chèn CSS vào Wordpress đơn giản, nhanh chóng. Hy vọng compamarketing đã mang đến bạn những thông tin hữu ích trong quá trình quản lý, sử dụng website wordpress. Nếu có bất kì thắc mắc gì, hãy để lại comment bên dưới cho compamarketing nhé! Chúc các bạn thành công và đừng quên theo dõi các bài viết chia sẻ về thủ thuật wordpress của compamarketing.3 Chèn CSS vào Wordpress đơn giản, nhanh chóng. Hy vọng compamarketing đã mang đến bạn những thông tin hữu ích trong quá trình quản lý, sử dụng website wordpress. Nếu có bất kì thắc mắc gì, hãy để lại comment bên dưới cho compamarketing nhé! Chúc các bạn thành công và đừng quên theo dõi các bài viết chia sẻ về thủ thuật wordpress của compamarketing. |
