Css tùy chỉnh là gì

Thông thường, khi bạn tùy biến CSS của trang web WordPress thông qua công việc chỉnh sửa trực tiếp trong tệp chủ đề hoặc bổ sung thêm mã vào mục CSS bổ sung trong Trình tùy chỉnh thì các biến tùy chọn đó sẽ được áp dụng cho tất cả các trang có trên trang web. Sẽ thế nào nếu bạn chỉ muốn chèn mã CSS vào từng trang hoặc bài viết nhất định. Đây là lúc bạn cần đến sự trợ giúp của các plugin chuyên dụng. Và plugin mà tôi muốn giới thiệu đến các bạn trong bài viết hôm nay là WP Add Custom CSS

Tham khảo thêm

• Top 5 plugin miễn phí giúp chỉnh sửa CSS trong WordPress
• Loại bỏ các file CSS mặc định của WooCommerce

Tại sao bạn nên chọn WP Thêm CSS tùy chỉnh?

• Hoàn toàn miễn phí
• Dễ dàng cài đặt và sử dụng
• Hỗ trợ tất cả các bài viết, trang và các định dạng bài viết tùy chỉnh (Loại bài đăng tùy chỉnh)
• Hỗ trợ syntax highlighter giúp bạn chỉnh sửa code một cách trực quan và dễ dàng hơn

Chèn CSS vào từng trang trong WordPress

1. Để làm được điều này, trước tiên bạn phải cài đặt và kích hoạt plugin WP Add Custom CSS (tải xuống)

2. Tiếp theo, truy cập vào Add Custom CSS. Tại đây, các bạn sẽ thấy một số thiết lập như hình bên dưới

in which

• CSS chính. cho phép bạn chèn mã CSS để hiển thị trên toàn bộ các trang của trang web
• Loại bài đăng. cho phép tùy chọn hiển thị tính năng chèn mã CSS trên các loại bài viết tùy chỉnh
• Trình chỉnh sửa nâng cao. bật công cụ đánh dấu cú pháp tính năng. Nếu bạn thấy tính năng này không quá cần thiết thì nên tắt đi cho nhẹ

Nhấp vào nút Lưu để lưu lại sau khi thiết lập xong

3. Mở trình soạn thảo trang hoặc bài viết của bạn lên. Kéo xuống bên dưới, các bạn sẽ thấy xuất hiện thêm một khung có tên là Custom CSS. Vui lòng chèn mã CSS của bạn vào các khung này

Sau khi bạn xuất bản hoặc cập nhật bài viết/trang. CSS sẽ tự động được áp dụng cho bài viết/trang mà bạn chèn mã. Đơn giản thật phải không nào?

Bạn có biết cách khác đơn giản và hiệu quả hơn giúp chèn CSS vào từng trang hoặc bài viết riêng biệt trong WordPress không?

Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Thank you very many. . )

Để tùy chỉnh giao diện cho trang WordPress, bạn cần chèn mã CSS. Do đó, hãy chèn CSS như thế nào và có phức tạp không?

CSS là gì?

CSS, viết tắt của Cascading Style Sheet, có thể hiểu CSS đơn giản như sau

• CSS mô tả, định dạng, bố cục cục bộ các thành phần của HTML được hiển thị như thế nào trên màn hình, trang web hoặc trên các phương tiện tiện ích khác
• Định dạng CSS tiết kiệm thời gian định dạng vì nó có thể điều khiển bố cục bộ, màu sắc, màu chữ,.. của nhiều trang web cùng một lúc

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML không được thiết kế để gắn thẻ nhằm giúp định dạng trang web

Phương thức hoạt động của CSS là nó sẽ tìm kiếm dựa trên các vùng lựa chọn, vùng lựa chọn có thể là tên một thẻ HTML, tên một ID, lớp hoặc nhiều kiểu khác. Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó

Chèn CSS vào Theme Customize

Đây là cách đơn giản nhất để chèn 1 số dòng mã CSS vào WordPress của bạn mà không cần cài đặt thêm bất cứ thứ gì. Theme Customize là một trong các tính năng mặc định của WordPress, việc áp dụng sẽ không ảnh hưởng nhiều đến trang web của bạn

Để thực hiện chèn CSS vào WordPress, trong trang Admin, các bạn truy cập menu Giao diện > Tùy chỉnh. Lúc này sẽ chuyển sang phần tùy biến giao diện chủ đề đang được sử dụng

Chèn CSS qua Theme Customize

Chúng ta tiếp tục truy cập vào mục CSS bổ sung. Bạn có thể chèn CSS vào ô soạn thảo trên hình

Chèn CSS vào từng trang riêng

Thông thường khi bạn thêm CSS vào WordPress thông qua CSS bổ sung trong Theme Customize hoặc tệp .css, thì mã CSS sẽ được áp dụng cho toàn bộ trang web. Nếu như bạn muốn áp dụng mã CSS cho từng bài viết hoặc trang nhất định thì cần phải sử dụng plugin chuyên dụng

Để chèn code CSS vào WordPress cho từng trang/bài viết riêng biệt, các bạn có thể sử dụng plugin Header Footer Code Manager

Plugin Header Footer Code Manager

Tại sao nên sử dụng plugin này

• Plugin này miễn phí. phiên bản miễn phí đáp ứng đầy đủ nhu cầu
• Dễ dàng cài đặt và sử dụng
• Hỗ trợ tùy chỉnh cả bài viết, trang và loại bài viết (Custom taxonomy)
• Supported by device. di động / máy tính / bảng máy tính
• Hỗ trợ shortcode
• Hỗ trợ nhiều vị trí chèn mã. Header / Footer, Top / Bottom bài viết

Chèn thêm tệp CSS vào chủ đề

Các bạn có thể sử dụng plugin Header Footer Code Manager được cập nhật ở trên để chèn thêm tệp CSS vào chủ đề

Nếu bạn không thích sử dụng plugin, chúng tôi cần chỉnh sửa tệp functions.php tại chủ đề đang sử dụng để tiến hành

Các bạn tải lên tệp custom-style.css vào thư mục chủ đề đang sử dụng tại. /wp-content/themes/. Sau đó thêm đoạn mã bên dưới vào tệp functions.php

Tệp này chứa văn bản Unicode hai chiều có thể được diễn giải hoặc biên dịch khác với nội dung hiển thị bên dưới. Để xem lại, hãy mở tệp trong trình chỉnh sửa hiển thị các ký tự Unicode bị ẩn. Tìm hiểu thêm về các ký tự Unicode hai chiều

Hiển thị ký tự ẩn

/**@ VIETRICK. Chèn CSS vào chủ đề@ sử dụng hook wp_enqueue_scripts() để hiển thị nó ra bên ngoài giao diện người dùng* */ . css của chủ đềfunction vietrick_styles() {/** Hàm get_stylesheet_uri() sẽ trả về giá trị dẫn đến file style.css của theme* Nếu sử dụng chủ đề con, thì tệp kiểu tùy chỉnh. css này vẫn tải ra từ chủ đề chính*/wp_register_style ( '< . custom-style', get_template_directory_uri() . ' /kiểu tùy chỉnh. css ' , ' tất cả ' );wp_enqueue_style( 'custom-style' );}add_action( 'wp_enqueue_scripts', 'vietrick_styles' );

xem wp-custom-css thô. php được lưu trữ với ❤ ​​bởi GitHub

Việc chèn tệp CSS với phương pháp ở trên có điểm ưu tiên là tương thích cao với WordPress và tốc độ tối ưu của plugin. WP-Rocket, LightSpeed Cache,…

Đọc thêm

• Tạo mục lục WordPress không sử dụng plugin
• Xóa Gutenberg CSS khỏi WordPress (block-library/style. tối thiểu. css)

Kết quả

Việc chèn mã CSS vào WordPress thực ra rất đơn giản. Tùy theo nhu cầu của mình, các bạn hãy áp dụng phương pháp phù hợp nhất nhé