25

我正在编辑最新的 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 以及如何添加我自己的？

4

5 回答 5

41

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

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

add_action('wp_enqueue_scripts', 'your_function_name');

（这使用了添加操作挂钩，挂钩到wp_enqueue_scripts操作。）

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

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函数。

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

于 2013-08-29T19:38:46.107 回答
1

将 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

于 2013-08-29T19:38:13.317 回答
1

@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(); ?>

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

wp_head(); 函数只是调用样式表的最佳方式，但是当它到达 Javascripts 和 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 中...您可以在另一个 your-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>

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

于 2015-07-19T20:11:37.667 回答
0

样式表几乎可以在任何地方加载，但默认的 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 只会在页面上添加一次样式表，另一个原因是此句柄有依赖参数，但这是另一个故事......

于 2014-08-29T13:29:05.290 回答
-4

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

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

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

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

于 2014-06-28T14:33:23.273 回答