Làm cách nào để thêm mã css vào wordpress?

Bạn có muốn áp dụng CSS và chỉnh sửa kiểu trang web của mình không? . Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn các cách khác nhau để thêm CSS vào WordPress để bạn có thể tùy chỉnh trang web của mình và tạo ấn tượng với khách truy cập

Mặc dù WordPress có rất nhiều chủ đề và mẫu mà bạn có thể sử dụng, nhưng nếu bạn muốn thay đổi giao diện trang web của mình, sớm muộn gì bạn cũng sẽ phải thêm mã CSS

Thêm CSS vào một trang web khá dễ dàng. Trước đây chúng ta đã thấy cách áp dụng CSS bằng công cụ dành cho nhà phát triển trình duyệt nhưng có nhiều cách khác. Tất cả các phương pháp khác nhau này đều có ưu và nhược điểm, vì vậy người mới bắt đầu có thể khó hiểu đâu là cách tốt nhất để thêm CSS cho tình huống cụ thể của họ. Đó là lý do tại sao trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn các cách khác nhau để thêm kiểu CSS vào trang web WordPress

Cách thêm CSS vào WordPress

Có một số cách để áp dụng kiểu CSS cho trang web WordPress

1. Thông qua tùy chỉnh chủ đề
2. Chỉnh sửa tập tin chủ đề con
3. Tải lên tệp CSS của riêng bạn
4. Áp dụng CSS cho tiêu đề có móc
5. Thêm CSS vào phụ trợ

Hãy cùng xem xét từng phương pháp, để bạn có thể chọn phương pháp phù hợp nhất cho mình

GHI CHÚ. Chúng tôi sẽ không giải thích chi tiết về cấu trúc của CSS trong bài đăng này, vì vậy chúng tôi khuyên bạn nên có hiểu biết cơ bản về CSS để có thể làm theo hướng dẫn này mà không gặp bất kỳ sự cố nào

Ở bước trước để áp dụng CSS, chúng tôi khuyên bạn nên sử dụng công cụ dành cho nhà phát triển trình duyệt để tìm các phần tử HTML cụ thể mà bạn muốn thay đổi. Nếu bạn không chắc chắn cách thực hiện, hãy xem hướng dẫn của chúng tôi về cách áp dụng CSS bằng công cụ dành cho nhà phát triển trình duyệt

1) Áp dụng CSS với tùy biến Chủ đề

Cách dễ nhất và nhanh nhất để thêm mã CSS tùy chỉnh vào WordPress là chèn nó vào trình chỉnh sửa CSS bổ sung của tùy biến chủ đề. Đây là trình chỉnh sửa CSS WordPress có sẵn và nó có mặt trên tất cả các trang web theo mặc định. Tuy nhiên, hãy nhớ rằng một số chủ đề và plugin có thể tắt tính năng này

Để áp dụng CSS của bạn bằng cách sử dụng tùy biến chủ đề, hãy đi tới trang tổng quan của bạn và chuyển đến Giao diện > Tùy chỉnh > CSS bổ sung để mở trình chỉnh sửa CSS. Ở đó, bạn sẽ thấy mã CSS của trang web của mình và bạn sẽ có thể thêm mã của mình

Một trong những ưu điểm lớn nhất của phương pháp này là bạn có thể xem trước kết quả tùy chỉnh CSS theo thời gian thực ở bên phải màn hình

Khi bạn thêm mã của mình, nó sẽ được lưu vào cơ sở dữ liệu trong bảng *_posts, dưới loại bài đăng custom_css. Mặc dù bạn có thể áp dụng tất cả các loại tùy chỉnh ở đây, nhưng đây không phải là một phương pháp được khuyến nghị cho một danh sách lớn các quy tắc CSS vì hiệu suất

2) Chỉnh sửa tệp chủ đề Con

Một cách khác để thêm kiểu CSS vào WordPress là chỉnh sửa các tệp CSS của chủ đề con. Phương pháp này có hiệu suất tốt hơn so với áp dụng mã trực tiếp từ Tùy biến vì nó tải mà không cần truy xuất mã từ cơ sở dữ liệu

Hầu hết các chủ đề con có một phong cách. css, vì vậy bạn chỉ cần thêm CSS tùy chỉnh của mình vào đó. Để tìm phong cách. css của chủ đề con của bạn, trong bảng điều khiển WordPress của bạn, hãy chuyển đến Giao diện> Trình chỉnh sửa chủ đề. Sau đó nhấn menu thả xuống ở trên cùng bên phải, chọn chủ đề con của bạn và nhấp vào kiểu. css như hình bên dưới

Nếu chủ đề con của bạn không có kiểu. css hoặc bất kỳ tệp nào khác có. css, bạn có thể tạo và áp dụng nó như được mô tả trong phần tiếp theo

Ngoài ra, một số chủ đề con có thư mục CSS chứa một số tệp trong đó. Nếu đó là trường hợp của bạn, hãy đảm bảo bạn chỉnh sửa đúng kiểu. tập tin css

3) Tải lên tệp CSS của riêng bạn

Nếu bạn muốn thêm mã CSS tùy chỉnh lớn vào WordPress, bạn nên đặt mã đó trong một tệp riêng và tải mã đó lên tệp trang web của mình trên máy chủ. Hãy xem cách thực hiện từng bước

3. 1) Tạo tệp CSS bằng trình chỉnh sửa mã

Để thực hiện việc này, bạn cần sử dụng trình chỉnh sửa mã như Visual Studio Code, Sublime text hoặc bất kỳ trình chỉnh sửa mã nào khác hỗ trợ tệp CSS

Tạo một tệp mới với phần mở rộng CSS và dán mã của bạn vào đó. Trong ví dụ này, chúng tôi đã đặt tên tệp là my-styles. css

Sau khi bạn dán mã của mình, hãy lưu tệp và tiếp tục với bước tiếp theo

3. 2) Tải tệp lên thư mục Chủ đề con

Nếu chủ đề con của bạn có thư mục CSS, chỉ cần sao chép và dán tệp của bạn vào đó. Ngoài ra bạn cũng có thể upload ngay trong thư mục main theme con. Đừng lo lắng về vị trí trong thư mục chủ đề con, chúng tôi sẽ nhắm mục tiêu đường dẫn tệp trong bước tiếp theo

Bây giờ, hãy sử dụng cPanel hoặc ứng dụng khách FTP như FileZilla để tải tệp lên

Nếu bạn đang sử dụng máy chủ localhost, bạn chỉ cần sao chép và dán tệp vào thư mục chủ đề con nằm trong thư mục chung của máy chủ localhost của bạn

Theo ví dụ của chúng tôi, chúng tôi sẽ dán kiểu của tôi. tệp css trong chủ đề con

3. 3) Enqueue tùy chỉnh của bạn. tệp CSS

Bây giờ bạn cần liệt kê tệp CSS tùy chỉnh của mình trên các chức năng. php của chủ đề con của bạn để làm cho nó hoạt động. Dán tập lệnh PHP sau vào sau bất kỳ mã nào có trong hàm. tập tin php

function my_styles() {
wp_register_style( 'my-styles', get_stylesheet_directory_uri() . '/my-styles.css');
wp_enqueue_style( 'my-styles');
}
add_action( 'wp_enqueue_scripts', 'my_styles' );

Đảm bảo rằng tệp mới tạo được gọi đúng theo đường dẫn tùy thuộc vào vị trí của tệp trong thư mục chủ đề. Ngoài ra, hãy nhớ thay đổi tên của tệp (my-styles. css trong ví dụ này)

Bạn có thể sử dụng đoạn mã sau để kiểm tra xem đường dẫn có đúng hay không

add_action('wp_head',function(){
echo get_stylesheet_directory_uri() . '/my-styles.css';
});

Đó là nó. Đó là cách bạn có thể áp dụng CSS cho WordPress bằng cách tải lên tệp CSS của riêng bạn

4) Áp dụng CSS cho phần tiêu đề bằng hook

Nếu bạn có một số kỹ năng mã hóa, bạn cũng có thể thêm CSS vào trang web của mình bằng hook

The wp_head()hook is very useful when developing websites. Although it is not recommended to use it to include a script in the HTML tag, it allows you to make quick tests and debug.

If you are working with multiple CSS stylesheets or on complex websites and something isn’t working as expected, you can add your CSS code right in the section using this hook.

add_Action('wp_head','my_head_css');
function my_head_css(){
echo "
";}

Ví dụ: với tập lệnh này, chúng tôi đang thay đổi kích thước tiêu đề, màu nền, đường viền và phần đệm

Bằng cách này, bạn có thể đảm bảo rằng tập lệnh CSS được áp dụng cho giao diện người dùng trên bất kỳ tệp CSS nào khác hoặc được đưa vào trang web theo bất kỳ cách nào khác

5) Thêm CSS vào phụ trợ

Cuối cùng, có thêm một cách để thêm kiểu CSS vào WordPress. Bạn có thể áp dụng CSS tùy chỉnh cho phần phụ trợ bằng cách sử dụng móc nối admin_head() như sau

add_Action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
echo '';
}

Trong ví dụ này, chúng tôi đang thay đổi màu nền (#602e93)

Method 4 and 5 can be very useful and can help you save time by inserting a CSS script right in the HTML section. However, it is not a recommended practice and you shouldn’t use this method for applying styles permanently.

Phần kết luận

Nói chung, với một chút CSS, bạn có thể tùy chỉnh giao diện trang web của mình. Thêm CSS rất dễ nhưng có một số cách để thực hiện, vì vậy có thể khó biết bạn nên sử dụng phương pháp nào

Trong hướng dẫn này, chúng tôi đã chỉ cho bạn năm phương pháp khác nhau để thêm CSS vào trang web WordPress của bạn

1. Thông qua tùy chỉnh chủ đề
2. Chỉnh sửa tập tin chủ đề con
3. Tải lên tệp CSS của riêng bạn
4. Áp dụng CSS cho tiêu đề có móc
5. Thêm CSS vào phụ trợ

Mỗi phương pháp đều có ưu và nhược điểm. Ví dụ: thêm CSS từ Trình tùy chỉnh chủ đề thật dễ dàng và đi kèm với bản xem trước theo thời gian thực. Tuy nhiên, đây không phải là một phương pháp được khuyến nghị cho một danh sách lớn các quy tắc CSS. Ngoài ra, bạn có thể chỉnh sửa các tệp của chủ đề con hoặc tải tệp CSS của riêng bạn lên chủ đề con của bạn

Even though it is not recommended a recommended practice, you can use hooks to include a script in the HTML tag to make quick tests and debug your site.

Bạn đã thêm CSS vào trang web của mình chưa?