Để 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é! 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.  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ó. 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. 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.2. Cách 2: Chèn Custom CSS vào WordPress bằng Theme CustomizerBạn có thể dễ dàng chèn CSS vào WordPress từ phiên bản 4.7 trở lên, vì WordPress đã tích hợp sẵn công cụ theme customizer. Để sử dụng, bạn chỉ cần đi tới Appearance –› Customize trong dashboard. Cuộn xuống dưới cùng và chọn mục Additional CSS. Nó là một công cụ tích hợp cho phép bạn tinh chỉnh CSS code của mình. Rất dễ sử dụng, bạn có thể xem cả phiên bản di động và máy tính bảng của trang web. Ngày nay việc thân thiện với tất cả các loại màn hình là một ưu tiên đúng không? Xin chúc mừng! Vậy là bạn đã biết cách chèn CSS vào WordPress bằng trình theme editor mà không cần dùng bất kỳ plugin nào. 2.3. Cách 3: Chèn CSS vào WordPress bằng Child Theme2 cách trên đã hướng dẫn bạn cách chèn CSS vào theme hiện tại của trang web WordPress. Tuy nhiên, sẽ có trường hợp bạn cần kiểm tra trước, hoặc bạn không muốn làm hỏng một trang web đang chạy. Để làm như vậy, chúng tôi khuyên bạn nên sử dụng theme con WordPress. Theme con sẽ giúp bạn thực hiện mọi công việc, kiểm tra nhiều loại CSS khác nhau mà không ảnh hưởng đến trang web đang chạy.! 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ử): <p style = ”margin: 10px; color: red;”> Xin chào </p> 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ẻ <style> </style>: 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ẻ <link> để 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:
3.3. CSS nội tuyếnCSS nội tuyến là bạn nhúng nó trực tiếp vào html bằng cách sử dụng kiểu Ví dụ <div style = “padding: 10px;”> Gia Tuấn </div> Trang web WordPress, tôi khuyên bạn không nên sử dụng, chỉ tối ưu cho một số trường hợp hiếm hoi. Ưu và nhược điểm của việc sử dụng css nội tuyến Ưu điểm:
Khuyết điểm:
4. Các bản sửa lỗi CSS tùy chỉnh WordPress phổ biếnĐôi khi, bạn có thể gặp nhiều vấn đề nhỏ khi chèn CSS trong WordPress. Hãy cùng điểm qua những lỗi thường gặp nhất và cách xử lý. 4.1. Các thay đổi không được hiển thịCustom CSS WordPress có thể không áp dụng được do bộ nhớ cache. Nếu bạn đã cài đặt bất kỳ plugin bộ nhớ đệm nào, các thay đổi có thể không được áp dụng ngay lập tức, nhưng nếu bạn muốn xem các thay đổi ngay lập tức, bạn phải xóa bộ nhớ cache của WordPress. Hãy xem hướng dẫn này để biết cách xóa bộ nhớ cache. Một giải pháp khác là tạm thời vô hiệu hóa plugin bộ nhớ cache. 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. 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. |
