php 将其他 css 文件添加到 wp_head

Adding other css files to wp_head

提问by probablybest

I am editing the standard twentythirteen theme that comes with the latest wordpress.

我正在编辑最新 wordpress 附带的标准二十三个主题。

I need to add a few of my own .css files into the wp_head but I'm not sure how to do this. I'm currently calling my files outside of wp_head but this is messy and would like to do it properly.

我需要将一些我自己的 .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(); ?>

Where is it being defined what goes into wp_head and how do I add my own to it?

在哪里定义 wp_head 的内容以及如何将自己的内容添加到其中？

回答by random_user_name

To add your own css in the wp_head(), you need to use a collection of WordPress functions:

要在 wp_head() 中添加您自己的 css，您需要使用一组 WordPress 函数：

First, you'll put this in your theme's functions.php file:

首先，您将把它放在主题的 functions.php 文件中：

add_action('wp_enqueue_scripts', 'your_function_name');

add_action('wp_enqueue_scripts', 'your_function_name');

(This uses the add actionhook, hooking into the wp_enqueue_scriptsaction.)

（这使用add 动作挂钩，挂钩到wp_enqueue_scripts动作。）

Then, you'll need to add the function to your functions.php file that will utilize the WordPress function wp_enqueue_style:

然后，您需要将该函数添加到将使用 WordPress 函数wp_enqueue_style 的functions.php 文件中：

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

Note the use of get_stylesheet_directory_uri()- this gets the proper stylesheet directory for your theme.

请注意get_stylesheet_directory_uri()的使用- 这会为您的主题获取正确的样式表目录。

This is also the proper way to enqueue scripts into your header. Example:

这也是将脚本排入标题的正确方法。例子：

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

Which uses the WordPress wp_enqueue_scriptfunction.

它使用 WordPress wp_enqueue_script函数。

Finally, it is worth mentioning that altering the twenty thirteen (or any other core theme) theme directly is usually discouraged. The recommendation is to create a child theme (overkill in my opinion, but worth mentioning).

最后，值得一提的是，通常不鼓励直接更改二十十三（或任何其他核心主题）主题。建议是创建一个子主题（在我看来有点矫枉过正，但值得一提）。

回答by Tom

use wp_enqueue_style for stylesheets and wp_enqueue_scripts for javascript

将 wp_enqueue_style 用于样式表，将 wp_enqueue_scripts 用于 javascript

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

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

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

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

回答by The Bumpaster

@cale_b My plugins are based on jQuery library and calling the jQuery from the wp_head() function was not successful on this way

@cale_b 我​​的插件基于 jQuery 库，通过这种方式从 wp_head() 函数调用 jQuery 并不成功

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

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

the proper way is adding this to the header.php before everything...

正确的方法是在一切之前将它添加到 header.php 中......

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

It's very important that you call jquery first before the wp_head(); hook of the other imports... The WordPress comes with the jQuery library because he is using it for the wp-admin pages and some other $post and $get requests on the page... Using their script is much more secure and easier way then adding your own jquery.min.js file inside the themes directory...

在 wp_head() 之前先调用 jquery 非常重要；其他导入的钩子...... WordPress 带有 jQ​​uery 库，因为他将它用于 wp-admin 页面和页面上的其他一些 $post 和 $get 请求......使用他们的脚本更安全，更容易然后在主题目录中添加您自己的 jquery.min.js 文件...

wp_head(); function is just the best way calling the stylesheets but when it gets to the Javascripts and Javascript libraries it can get buggy.

wp_head(); 函数只是调用样式表的最佳方式，但是当它访问 Javascript 和 Javascript 库时，它可能会出错。

Also note that sometimes the WordPress wont render your ' $ 'as a jQuery variable and you will get errors for TypeError, which of course is correct. In that case you should change all of the ' $ ' with ' jQuery ' which is also a defined variable inside the WordPress jQuery library...

另请注意，有时 WordPress 不会将您的“$”呈现为 jQuery 变量，并且您会收到 TypeError 错误，这当然是正确的。在这种情况下，您应该使用“ jQuery ”更改所有“ $ ”，这也是 WordPress jQuery 库中定义的变量...

Also note that sometimes you will need an inline javascript, etc

另请注意，有时您将需要内联 javascript 等

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

All of these inline scripts should not be inside your index.php nor your header.php nor footer.php... You can list all of them inside another your-inline-scripts.js and call them like this just where they should have been listed before like this:

所有这些内联脚本都不应在您的 index.php 或 header.php 或 footer.php 中......您可以在另一个 your-inline-scripts.js 中列出所有这些内联脚本，并在它们应该有的地方像这样调用它们以前是这样列出的：

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

or

或者

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

I prefer this second option...

我更喜欢第二个选项......

回答by maioman

Stylesheets can be loaded almost anywhere, but the default wordpress installation uses the wp_head()hook to output the main stylesheet (style.css);

样式表几乎可以在任何地方加载，但默认的 wordpress 安装使用wp_head()钩子来输出主样式表 (style.css)；

For ex.: In Twentyfourteen it is loaded at line 232 of functions.php

例如：在Twentyfourteen 中，它在functions.php 的第232 行加载

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

One of the reason why it's preferred to use this hook is that if you have two plugins that use the same stylesheet and both using the same wp_enqueue_style handle then WordPress will only add the stylesheet on the page once, another reason is that this handle has a dependency parameter, but that's another story...

首选使用此钩子的原因之一是，如果您有两个插件使用相同的样式表并且都使用相同的 wp_enqueue_style 句柄，那么 WordPress 只会在页面上添加样式表一次，另一个原因是此句柄具有依赖参数，但那是另一回事了...

回答by user2634355

Hmm yes to the above but it's also possible to link to your sheets after wp_head is called so

嗯，是的，但也可以在调用 wp_head 之后链接到您的工作表

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

This is usually what i do as it's clearer to read.

这通常是我所做的，因为它更易于阅读。

In addition I'd also recommend using something like http://html5blank.comfor a nice clean blank wp theme instead of trying to alter the default theme (so no child theme just a different theme altogether)

此外，我还建议使用类似http://html5blank.com 的东西来获得一个漂亮干净的空白 wp 主题，而不是尝试更改默认主题（因此没有子主题只是完全不同的主题）