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

要在wp_head（）中添加自己的css，需要使用一组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，为javascript使用wp_enqueue_scripts

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

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

Answer 3

@cale_b 我的插件基于jQuery库，并且从wp_head（）函数调用jQuery在这种方式上没有成功

wp_enqueue_script（＆＃39; jquery＆＃39;，＆＃39; get_stylesheet_uri（）;. ＆＃39; JS / jquery.min.js＆＃39）;

正确的方法是在所有内容之前将它添加到header.php ......

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

在wp_head（）之前首先调用jquery是非常重要的;其他导入的钩子...... WordPress附带了jQuery库，因为他将它用于wp-admin页面以及页面上的一些其他$ post和$ get请求...使用他们的脚本更安全，更容易然后在themes目录中添加你自己的jquery.min.js文件......

wp_head（）;函数只是调用样式表的最佳方式，但当它到达Javascripts和Javascript库时，它可能会出错。

另请注意，有时WordPress不会呈现您的＆＃39; $＆＃39; 作为jQuery变量，你会得到TypeError的错误，当然这是正确的。在这种情况下，你应该改变所有的＆＃39; $＆＃39;用＆＃39; jQuery＆＃39;这也是WordPress jQuery库中定义的变量...

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

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

所有这些内联脚本都不应该在你的index.php中，也不应该在你的header.php或footer.php中...你可以在另一个你的内联脚本.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>

我更喜欢第二种选择......

Answer 4

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

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

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

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

Answer 5

对于上述内容是肯定的，但也可以在调用wp_head后链接到您的工作表

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

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

此外，我还建议使用像http://html5blank.com之类的东西来获得一个漂亮干净的空白wp主题，而不是试图改变默认主题（所以没有儿童主题只是一个不同的主题）

将其他css文件添加到wp_head

5 个答案: