Chèn CSS vào Wordpress

Để tùy chỉnh giao diện cho trang WordPress thì bạn cần chèn code CSS. Vậy chèn CSS như thế nào và có phức tạp không? Bài viết này, Vietrick sẽ hướng dẫn các bạn chèn CSS vào WordPress qua Theme Customize, chèn CSS vào từng bài viết riêng bằng plugin và thêm tệp CSS vào theme.

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 thành phần của HTML hiển thị như thế nào trên màn hình, website, hoặc trên các phương tiện media khác
CSS tiết kiệm thời gian định dạng, vì nó có thể điều khiển bố cục, 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 tag để giúp định dạng trang web.

Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay 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 code 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 Appearance > Customize. Lúc này sẽ di chuyển đến phần tùy biến giao diện theme đang sử dụng.

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

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

Bình thường khi bạn chèn CSS vào WordPress qua Additional CSS trong Theme Customize hoặc file .css, thì các 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

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ợ cả bài viết, trang và loại bài viết tùy chỉnh (Custom taxonomy)
Hỗ trợ theo thiết bị: di động / máy tính / máy tính bảng
Hỗ trợ shortcode
Hỗ trợ nhiều vị trí chèn code: Header / Footer, Top / Bottom bài viết.

Chèn thêm tệp CSS vào theme

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

Nếu bạn không thích sử dụng plugin, chúng ta cần chỉnh sửa tệp functions.php tại theme đ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 theme đang sử dụng tại: /wp-content/themes/. Sau đó thêm đoạn code bên dưới vào tệp functions.php.

	/**
	@ VIETRICK: Chèn CSS vào theme
	@ sử dụng hook wp_enqueue_scripts() để hiển thị nó ra ngoài front-end
	**/
	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 child theme, thì file custom-style.css này vẫn load ra từ theme chính
	*/
	wp_register_style( 'custom-style', get_template_directory_uri() . '/custom-style.css', 'all' );
	wp_enqueue_style( 'custom-style' );
	}
	add_action( 'wp_enqueue_scripts', 'vietrick_styles' );

view raw wp-custom-css.php hosted with ❤ by GitHub

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

Đọc thêm:

Tạo mục lục WordPress không dùng plugin
Xóa Gutenberg CSS khỏi WordPress (block-library/style.min.css)

Kết

Việc chèn code CSS vào WordPress thực ra rất đơn giản. Tùy vào 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é.

Chúc các bạn thành công, nếu có khó khăn, hãy để lại bình luận bên dưới nhé.

Chèn CSS vào WordPress

CSS là gì?

Chèn CSS vào Theme Customize

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

Chèn thêm tệp CSS vào theme

Kết

Đọc thêm: