將其他css文件添加到wp_head

Question

我在編輯最新wordpress附帶的標準二十三主題。

我需要添加一些我自己的.css文件到wp_head，但我不知道如何做到這一點。我目前在wp_head之外調用我的文件，但這很麻煩，並希望正確執行。

<meta charset="<?php bloginfo('charset'); ?>"> 
<meta name="viewport" content="width=device-width"> 
<title><?php wp_title('|', true, 'right'); ?></title> 
<link rel="profile" href="http://gmpg.org/xfn/11"> 
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>"> 
<!--[if lt IE 9]> 
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> 
<![endif]--> 
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo("template_url"); ?>/bootstrap.css" /> 
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/bootstrap.min.js"></script> 

<?php wp_head(); ?> 

它在哪裏定義了什麼進入wp_head，我該如何添加自己的？

Answer 1

要添加自己的CSS在wp_head（），你需要使用的WordPress的功能集合：

首先，你會把它放在你主題的functions.php文件中：

add_action('wp_enqueue_scripts', 'your_function_name');

（這裏使用了add action鉤，鉤住wp_enqueue_scripts行動）

然後，你需要的功能添加到將使用WordPress的功能wp_enqueue_style您的functions.php文件：

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

請注意使用get_stylesheet_directory_uri() - 這會爲您的主題獲取正確的樣式表目錄。

這也是將腳本排入標題的正確方法。示例：

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'); 
} 

它使用WordPress wp_enqueue_script函數。

最後，值得一提的是，直接修改二十三個（或任何其他核心主題）主題通常是不鼓勵的。建議是創建一個兒童主題（在我看來是過度的，但值得一提）。

Answer 2

使用wp_enqueue_style的樣式表和wp_enqueue_scripts爲JavaScript

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

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

Answer 3

嗯沒錯以上，但它也可以wp_head被稱爲經過這麼

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

這通常是我做的，因爲它是更清晰的閱讀鏈接到你的牀單。

另外我也建議你使用類似http://html5blank.com一個乾淨的空白WP主題，而不是試圖改變默認主題（所以沒有兒童主題只是一個不同的主題共）

Answer 4

樣式表幾乎可以裝任何地方， 但默認wordpress安裝使用wp_head（）鉤子輸出主樣式表（style.css）;

例如：在二十四個它被加載在函數的232行。PHP

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

一個爲什麼它最好使用這個鉤子的理由是，如果你有使用相同的樣式表兩個插件，並同時使用相同的wp_enqueue_style處理，然後WordPress的，只會增加樣式表在頁面上一次， 另一個原因是，這個手柄具有相關性的參數，但這是另一個故事...

Answer 5

@cale_b 我的插件是基於jQuery庫，並從wp_head（）函數調用jQuery的不成功就這樣

wp_enqueue_script（'jquery'，'get_stylesheet_uri（）; 。 'js/jquery.min.js'）;

的正確方法是增加這之前的所有的header.php ...

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

這是非常重要的，你撥打的jQuery第一wp_head前（）;其他進口的鉤子...... WordPress隨jQuery庫一起提供，因爲他將它用於wp-admin頁面以及頁面上的其他$ post和$ get請求......使用它們的腳本更加安全和簡單然後在主題目錄中添加自己的jquery.min.js文件...

wp_head（）;函數只是調用樣式表的最好方式，但是當它到達Javascript和Javascript庫時，它可能會出現錯誤。

另請注意，有時WordPress不會將您的'$'作爲jQuery變量呈現，您將獲得TypeError錯誤，這當然是正確的。在這種情況下，你應該改變所有的「$」與「jQuery的」，這也是WordPress的jQuery庫裏面定義的變量的......

另外請注意，有時你會需要一個內聯JavaScript等

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

所有這些內聯腳本不應該在你的index.php裏面，也不要在你的header.php和footer.php裏......你可以把它們全部列在你的inline-scripts.js文件裏，並且像這樣稱呼它們他們應該已經像這樣列出了：

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

或

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

我喜歡這個第二個選項...