Làm thế nào để thêm tập tin css tùy chỉnh trong chủ đề?

Một số chủ đề yêu cầu bạn không chỉnh sửa tệp style.css, thay vào đó hãy sử dụng tệp custom.css. Nếu bạn viết mã trên custom.css, nó sẽ ghi đè lên cùng kiểu phần tử trong style.css. Tôi nghĩ rằng điều này được thực hiện để ngăn chặn việc mất kiểu người dùng khi cập nhật chủ đề, có phải vậy không?

Làm thế nào điều này hoạt động? Họ đã bao gồm tập tin custom.css trong chủ đề của họ chưa? Nhưng làm thế nào tập tin này được bao gồm trong chủ đề để chủ đề anh ấy tìm phong cách trong custom.css trước? Cảm ơn.

Tôi thường thêm đoạn mã này nếu tôi muốn thêm tệp css khác

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/my_custom_css.css" type="text/css" media="screen" />

Tôi tin rằng các nhà sản xuất chủ đề muốn giữ lại càng nhiều càng tốt thiết kế bố cục của chủ đề. Vì vậy, một tập tin css tùy chỉnh không làm tổn thương nhiều. Tôi nghĩ đó là một câu hỏi hỗ trợ nhiều hơn. Với tệp css tùy chỉnh, các nhà sản xuất có thể giúp những người sử dụng chủ đề của họ dễ dàng hơn. Vì style.css ban đầu không được thay đổi, nên trình tạo chủ đề có thể có thể xem trong tệp css tùy chỉnh.

Sử dụng @import trong WordPress để thêm css tùy chỉnh không còn là cách thực hành tốt nhất, tuy nhiên bạn có thể thực hiện với phương pháp đó.

thực hành tốt nhất là sử dụng hàm wp_enqueue_style()trong hàm.php.

Ví dụ :

wp_enqueue_style ('theme-style', get_template_directory_uri().'/css/style.css');
wp_enqueue_style ('my-style', get_template_directory_uri().'/css/mystyle.css', array('theme-style'));

Kích hoạt chủ đề con và thêm mã ví dụ sau vào hàm.php

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles');

function child_enqueue_styles() {

wp_enqueue_style( 'reset-style', get_template_directory_uri() . '/css/reset.css', array());
}

Đề xuất của tôi sẽ là sử dụng các chủ đề trẻ em. Nó rất dễ thực hiện và tất cả các sửa đổi bạn làm (bao gồm cả kiểu) hoàn toàn tách biệt với chủ đề ban đầu.

Để tránh ghi đè CSS chủ đề chính hoặc các tệp khác, bạn LUÔN LUÔN sử dụng một chủ đề con trong WordPress ... không làm như vậy sẽ chỉ khiến bạn đau đầu và gặp vấn đề lớn.

https://codex.wordpress.org/Child_Theme

... Và với việc dễ dàng thiết lập một chủ đề con, không có lý do gì bạn không nên sử dụng một chủ đề.

Sau đó, sử dụng một chủ đề con sẽ cho phép bạn ghi đè bất kỳ tệp chủ đề chính nào bạn muốn, chỉ bằng cách sao chép từ cha mẹ vào con của bạn hoặc bằng cách tạo một tệp mới có cùng tên.

Về custom.csstập tin, có rất nhiều cách mà các nhà phát triển chủ đề xử lý việc này ... rất nhiều trong số họ làm điều này chỉ đơn giản là để thử và ngăn những khách hàng không muốn sử dụng một chủ đề con, chỉnh sửa style.csstệp chính ....

Dù bằng cách nào bạn cũng không nên lo lắng về điều đó, miễn là bạn sử dụng một chủ đề trẻ em, bạn không cần phải lo lắng về việc cập nhật chủ đề của mình sau này và mất các thay đổi của bạn ... hãy tập thói quen luôn sử dụng các chủ đề trẻ em, bạn Tôi sẽ cảm ơn tôi sau, tôi hứa.

Nếu bạn muốn để lại html của bạn. bạn có thể thêm nó vào tập tin css của bạn. Tôi nghĩ rằng điều này là tốt hơn.

@import url("../mycustomstyle.css");

cũng tùy thuộc vào chủ đề của bạn, nó sẽ hoạt động với các chủ đề con và cha mẹ.

- hãy nhớ rằng, css hoạt động tuần tự (khi sử dụng cùng một mức định danh, đã được sử dụng), vì vậy những gì cuối cùng trong tệp của bạn sẽ ghi đè lên. Vì vậy, đặt nhập kiểu tùy chỉnh của bạn ở dưới cùng nếu bạn muốn ghi đè lên công cụ.

Cách tốt nhất là kết hợp tất cả các kiểu mê hoặc vào một chức năng và sau đó gọi chúng bằng wp_enqueue_scriptshành động . Thêm chức năng được xác định vào chức năng của chủ đề của bạn ở đâu đó bên dưới thiết lập ban đầu.

Khối mã:

function add_theme_scripts() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style ( 'custom', get_template_directory_uri () . '/css/custom.css', array( 'style' ) );
}
add_action ( 'wp_enqueue_scripts', 'add_theme_scripts' );

Xin lưu ý :

Tham số thứ 3 là mảng phụ thuộc liên quan đến việc biểu định kiểu này có phụ thuộc vào biểu định kiểu khác hay không. Vì vậy, trong mã trên của chúng tôi custom.css phụ thuộc vào style.css

|
Cơ bản bổ sung:
wp_enqueue_style() hàm có thể có 5 tham số: như thế này - wp_enqueue_style ( $ handle, $ src, $ deps, $ ver, $ media );
Trong thế giới thực của WP Coding, thông thường chúng tôi cũng thêm các tệp javascript / thư viện jQuery bên trong chức năng như thế này:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

Tham số thứ 5 đúng / sai là tùy chọn (tham số thứ 2, thứ 3 và thứ 4 cũng là tùy chọn.) Nhưng rất cần thiết, nó cho phép chúng ta đặt các tập lệnh của chúng ta ở chân trang khi chúng ta sử dụng tham số boolean là true.

Chuyển đến Giao diện> Chỉnh sửa CSS từ Bảng điều khiển WordPress của bạn.

Đây là màn hình với trình soạn thảo CSS cơ bản.

Bây giờ dán CSS của bạn trực tiếp vào văn bản mặc định. Bạn có thể xóa văn bản mặc định để CSS của bạn chỉ xuất hiện trong trình chỉnh sửa. Sau đó lưu biểu định kiểu và CSS của bạn sẽ hoạt động.

Sử dụng một chủ đề con. Đó là đặt cược tốt nhất của bạn. Bằng cách này nếu chủ đề được cập nhật, bạn sẽ không ghi đè lên các bảng định kiểu bạn đã tạo.

https://codex.wordpress.org/Child_Theme

Đi theo con đường này, bạn sẽ cảm ơn chính mình sau này.