Thêm các tệp css khác vào wp_head

Question

Tôi đang chỉnh sửa chủ đề chuẩn mười hai đi kèm với wordpress mới nhất.

Tôi cần thêm một vài tệp .css của riêng mình vào wp_head nhưng tôi không chắc chắn cách thực hiện việc này. Tôi hiện đang gọi các tập tin của tôi bên ngoài wp_head nhưng điều này là lộn xộn và muốn làm điều đó đúng cách.

Ở đâu nó được xác định những gì đi vào wp_head và làm cách nào để thêm của riêng tôi vào nó?

Answer 1

Để thêm css của riêng bạn trong wp_head(), bạn cần phải sử dụng một tập hợp các chức năng WordPress:

Trước tiên, bạn sẽ đặt tệp này vào tệp functions.php của chủ đề:

add_action('wp_enqueue_scripts', 'your_function_name');

(. Này sử dụng móc add action, hooking vào hành động wp_enqueue_scripts)

Sau đó, bạn sẽ cần phải thêm các chức năng để tập tin functions.php của bạn mà sẽ sử dụng chức năng WordPress wp_enqueue_style:

function your_function_name() { 
    wp_enqueue_style('my-script-slug', get_stylesheet_directory_uri() . '/your_style.css'); 
} 

Lưu ý việc sử dụng get_stylesheet_directory_uri() - điều này sẽ nhận được thư mục biểu định kiểu phù hợp cho chủ đề của bạn.

Đây cũng là cách thích hợp để thêm các tập lệnh vào tiêu đề của bạn. Ví dụ:

function your_function_name() { 
    // Enqueue the style 
    wp_enqueue_style('my-script-slug', get_stylesheet_directory_uri() . '/your_style.css'); 
    // Enqueue the script 
    wp_enqueue_script('my-script-slug', get_stylesheet_directory_uri() . '/your_script.js'); 
} 

Sử dụng chức năng WordPress wp_enqueue_script.

Cuối cùng, điều đáng nói đến là việc thay đổi chủ đề mười hai mười ba (hoặc bất kỳ chủ đề cốt lõi nào khác) trực tiếp thường không được khuyến khích. Các khuyến nghị là tạo ra một chủ đề trẻ em (dư thừa trong quan điểm của tôi, nhưng đáng nói đến).

Answer 2

sử dụng wp_enqueue_style cho stylesheets và wp_enqueue_scripts cho javascript

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Answer 3

Hmm có cho ở trên nhưng nó cũng có thể liên kết đến tờ của bạn sau khi wp_head được gọi là như vậy

<?php wp_head(); ?> 
<link href="/wp-content/themes/YourTheme/cssFolder/YourOtherStyleSheet.css"> 

này thường là những gì tôi làm vì nó là rõ ràng hơn để đọc.

Bên cạnh đó tôi cũng khuyên bạn nên sử dụng một cái gì đó giống như http://html5blank.com cho một chủ đề wp trống sạch đẹp thay vì cố gắng thay đổi theme mặc định (vì vậy không child theme chỉ là một chủ đề khác nhau hoàn toàn)

Answer 4

Stylesheets có thể được nạp gần ở bất kỳ đâu, nhưng cài đặt wordpress mặc định sử dụng móc wp_head() để xuất biểu định kiểu chính (style.css);

Ví dụ: Trong Twentyfourteen nó được tải tại dòng 232 của hàm.php

// Load our main stylesheet. 
    wp_enqueue_style('twentyfourteen-style', get_stylesheet_uri(), array('genericons')); 

Một trong những lý do tại sao nó được ưa thích sử dụng hook này là nếu bạn có hai plugin sử dụng các kiểu giống nhau và cả hai sử dụng wp_enqueue_style cùng xử lý sau đó WordPress sẽ chỉ làm tăng thêm các stylesheet trên trang một lần, lý do khác là xử lý này có một tham số phụ thuộc, nhưng đó là một câu chuyện ...

Answer 5

@cale_b plugins của tôi đều dựa trên thư viện jQuery và jQuery gọi từ wp_head() chức năng đã không thành công trên con đường này

wp_enqueue_script ('jquery', 'get_stylesheet_uri(); . 'js/jquery.min.js');

một cách thích hợp sẽ bổ sung này cho header.php trước khi tất cả mọi thứ ...

<?php wp_enqueue_script("jquery"); ?> 
<?php wp_head(); ?> 

Nó rất quan trọng là bạn gọi jquery đầu tiên trước khi wp_head(); móc của các hàng nhập khẩu khác ... WordPress đi kèm với thư viện jQuery vì anh ta đang sử dụng nó cho các trang wp-admin và một số $ post và $ nhận yêu cầu khác trên trang ... Sử dụng tập lệnh của họ an toàn hơn và dễ dàng hơn sau đó thêm tệp jquery.min.js của riêng bạn vào thư mục chủ đề ...

wp_head(); chức năng chỉ là cách tốt nhất gọi các stylesheets nhưng khi nó được các thư viện Javascripts và Javascript nó có thể nhận được lỗi. Cũng cần lưu ý rằng đôi khi WordPress sẽ không hiển thị '$' làm biến jQuery và bạn sẽ gặp lỗi cho TypeError, tất nhiên là đúng. Trong trường hợp đó bạn nên thay đổi tất cả các '$' với 'jQuery' cũng là một biến được định nghĩa bên trong WordPress thư viện jQuery ...

Cũng lưu ý rằng đôi khi bạn sẽ cần một javascript inline, vv

<script> 
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 
</script> 

Tất cả các tập lệnh nội tuyến này không được nằm trong tệp index.php của bạn hay header.php của bạn cũng như footer.php ... Bạn có thể liệt kê tất cả chúng bên trong một tệp-inline-scripts.js khác và gọi chúng như thế này chúng phải được liệt kê trước đây như sau:

<script type="text/javascript" 
src="<?php bloginfo("template_url"); ?>/js/your-inline-scripts.js"></script> 

hoặc

<script type="text/javascript" 
    src="<?php echo get_stylesheet_directory_uri(); ?>/js/yourScript.js"></script> 

tôi thích lựa chọn thứ hai này ...