WordPress主题开发中添加CSS样式和Javascript脚本

2019-10-0906:55:54网站建设与开发Comments2,713 views字数 16423阅读模式

以正确的方式在WordPress主题中引入css样式和Javascript。 如果你以前没有使用Wordpress来创建过网站,你可能习惯于使用 <link href = “”> 和 <script src = “”>  标签。虽然这些标签可以直接插入到主题中,但这是WordPress开发中的“坏习惯”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

WordPress 通过wp_enqueue_style()wp_enqueue_script()函数来通过自己的特定方式来处理CSS样式和Javascript 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

使用WordPress的方式来添加CSS和Javascript可能代码量多一些,但是与直接使用标签相比,它具有一些真正的优势,例如代码的可重用性,基本的依赖项管理以及以下事实:如果正确插入Css样式和Javascript ,插件可以出于各种目的(如压缩和合并)对其进行控制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

让我们开始来学习WordPress的方式吧!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

在WordPress主题中添加CSS样式

要添加样式表,我们首先要通过钩子来添加到WordPress。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

总之……挂钩就像在烹饪过程中的某个特定时刻要求厨师打电话给你。例如,当他需要在汤中添加蔬菜时,叫他打电话给你,这样你就可以添加自己喜欢的蔬菜了。在我们的例子中,WordPress 正在编写网页,我们希望在它需要收集样式和脚本(enqueue_scripts)时来联系我们,以便我们可以添加自己的样式和脚本。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

挂载到 WordPress

将以下代码添加到主题的functions.php中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<?php
/* Add a action to enqueue styles */
function my_theme_enqueue_styles()
{
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

你可以使用 Filter 过滤钩子或 Action 动作钩子来连接WordPress。 Filter 过滤钩子使你可以更改某些内容(我们将在稍后进行介绍),而 Action 动作钩子使你可以执行某些操作。在我们的例子中,我们需要一些事情(添加样式),因此我们使用 add_action()函数向wp_enqueue_scripts钩子添加一个动作,并注册回调函数my_theme_enqueue_styles(),该回调函数将在从你的主题中收集Css样式或Javascript时执行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

add_action() 函数需要以下4 个参数:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

  • $tag:  用于挂载回调函数的动作钩子的名称
  • $function_to_add:  你希望被调用的回调函数的名称
  • $priority:  用于指定执行与特定操作关联的功能的顺序
  • $accepted_args:  回调函数接受的参数数量

请注意,在这种情况下,我们不需要最后两个参数,因此我们不会传递它们,但是稍后我们将介绍它们。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

为了避免名称冲突,最好在函数名称前加上主题名称。因此,如果你的主题称为“personal-theme”,则将上述回调函数重命名为“ personal_theme_enqueue_styles ”,并相应地在add_action()函数中更改名称。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

这段代码并不会做太多,所以让我们开始添加样式表。作为本教程的示例,我将添加PureCss框架。您可以将其更改为Bootstrap或任何您喜欢的CSS。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

引入远程CSS样式文件

更新您的functions.php中的代码,并从下面的第6行添加代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<?php
function my_theme_enqueue_styles()
{
  /* 添加一个 purecss framework stylesheet */
  wp_enqueue_style( 'my-theme-purecss', 'https://unpkg.com/purecss@1.0.0/build/pure-min.css', array(), '1.0.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

要添加我们的样式表文件,我们使用了 wp_enqueue_style() 函数,它接受5个参数:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

  • $handle:  WordPress中的每个样式表(或脚本)都需要一个唯一的名称,以便您(或一个插件)以后可以引用它。在这里,最好在主题名称前添加前缀。
  • $src:  样式表的URL。这也可以是本地路径,但我们稍后会介绍。
  • $deps:  样式表数组,用于处理该样式表所依赖的样式。
  • $ver:  一个指定样式表版本号的字符串,它将作为查询字符串添加到URL中,以消除浏览器和CDN的缓存。
  • $media:  这个样式表的介质类型。比如 ‘all’, ‘print’ 和 ‘screen’, 或媒体查询,比如 ‘(orientation: portrait)’ 和 ‘(max-width: 640px)’ 。

上面的代码会“排入/添加”新的样式表,而WordPress会将以下链接标记输出到你的网页顶部:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<link rel='stylesheet' id='my-theme-purecss-css' href='https://unpkg.com/purecss@1.0.0/build/pure-min.css?ver=1.0.0' type='text/css' media='screen' />

添加条件样式表

PureCss需要两个条件样式表才能使其响应网格起作用。一种样式表用于Internet Explorer 8,一种样式表用于IE8以上的任何浏览器文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

更改您的functions.php中的代码,并将代码添加到第8至12行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<?php
function my_theme_enqueue_styles()
{
  wp_enqueue_style( 'my-theme-purecss', 'https://unpkg.com/purecss@1.0.0/build/pure-min.css', array(), '1.0.0', 'screen' );
  /* Add conditional framework stylesheets */
  wp_enqueue_style( 'my-theme-purecss-ie8' , 'https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css', array() , '1.0.0' , 'screen' );
  wp_style_add_data( 'purecss-ie8' , 'conditional' , 'lte IE 8' );
  wp_enqueue_style( 'my-theme-purecss-ie9' , 'https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css', array() , '1.0.0' , 'screen' );
  wp_style_add_data( 'my-theme-purecss-ie9' , 'conditional' , 'gt IE 8' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

在这里,我们像之前一样简单地加入了两个样式表,但是紧接着我们通过wp_style_add_data()函数添加了条件。该函数接受三个参数:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

  • $handle:  样式表的名称/句柄
  • $key:  我们要为其存储值的数据点的名称。 接受 ‘conditional’, ‘rtl’ , ‘suffix’, ‘alt’ 和 ‘title’
  • $value:  包含要添加的数据的字符串

现在,该代码将在网页顶部加入并输出两个带有条件注释的样式表:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<link rel='stylesheet' id='my-theme-purecss-css'  href='https://unpkg.com/purecss@1.0.0/build/pure-min.css?ver=1.0.0' type='text/css' media='screen' />
<!--[if lte IE 8]>
<link rel='stylesheet' id='my-theme-purecss-ie8-css'  href='https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css?ver=1.0.0' type='text/css' media='screen' />
<![endif]-->
<!--[if gt IE 8]>
<link rel='stylesheet' id='my-theme-purecss-ie9-css'  href='https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css?ver=1.0.0' type='text/css' media='screen' />
<![endif]-->

引入本地CSS样式文件

要引入本地CSS文件,其实和上面基本一样的操作,只是有一个地方不一样。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

更新您的functions.php中的代码,并从下面的第14行添加代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<?php
function my_theme_enqueue_styles()
{
  wp_enqueue_style( 'my-theme-purecss', 'https://unpkg.com/purecss@1.0.0/build/pure-min.css', array(), '1.0.0', 'screen' );
  wp_enqueue_style( 'my-theme-purecss-ie8' , 'https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css', array() , '1.0.0' , 'screen' );
  wp_style_add_data( 'my-theme-purecss-ie8' , 'conditional' , 'lte IE 8' );
  wp_enqueue_style( 'my-theme-purecss-ie9' , 'https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css', array() , '1.0.0' , 'screen' );
  wp_style_add_data( 'my-theme-purecss-ie9' , 'conditional' , 'gt IE 8' );
  /* 添加本地css */
  wp_enqueue_style( 'my-theme-styles', get_template_directory_uri() . '/style.css', array(), '1.0.0', 'screen' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

在这里,你看到的过程是相同的。我们再次使用wp_enqueue_style()函数,但在$src参数中使用get_template_directory_uri()函数。此函数将完整的URL返回到你主题文件夹,确保重命名主题或主题文件夹时URL不会中断。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

现在,代码将在网页的头部加入并输出额外的本地样式表,并带有如下所示的完整网址:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<link rel='stylesheet' id='my-theme-purecss-css'  href='https://unpkg.com/purecss@1.0.0/build/pure-min.css?ver=1.0.0' type='text/css' media='screen' />
<!--[if lte IE 8]>
<link rel='stylesheet' id='my-theme-purecss-ie8-css'  href='https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css?ver=1.0.0' type='text/css' media='screen' />
<![endif]-->
<!--[if gt IE 8]>
<link rel='stylesheet' id='my-theme-purecss-ie9-css'  href='https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css?ver=1.0.0' type='text/css' media='screen' />
<![endif]-->
<link rel='stylesheet' id='my-theme-styles-css'  href='http://example.com/wp-content/themes/themename/style.css?ver=1.0.0' type='text/css' media='screen' />

引入内联CSS样式

当你需要添加依赖于某些wordpress设置的样式,或者你的样式依赖于其他数据的样式时,可能需要添加内联CSS。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

更新您的functions.php中的代码,并在下面的第16至18行添加代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<?php
function my_theme_enqueue_styles()
{
  wp_enqueue_style( 'my-theme-purecss', 'https://unpkg.com/purecss@1.0.0/build/pure-min.css', array(), '1.0.0', 'screen' );
  wp_enqueue_style( 'my-theme-purecss-ie8' , 'https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css', array() , '1.0.0' , 'screen' );
  wp_style_add_data( 'my-theme-purecss-ie8' , 'conditional' , 'lte IE 8' );
  wp_enqueue_style( 'my-theme-purecss-ie9' , 'https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css', array() , '1.0.0' , 'screen' );
  wp_style_add_data( 'my-theme-purecss-ie9' , 'conditional' , 'gt IE 8' );
  wp_enqueue_style( 'my-theme-styles', get_template_directory_uri() . '/style.css', array(), '1.0.0', 'screen' );
  /* 添加内联css样式 */
  wp_register_style( 'my-theme-inline-css', false );
  wp_add_inline_style( 'my-theme-inline-css', '* { color: red; }' );
  wp_enqueue_style( 'my-theme-inline-css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

在这里,我们首先仅使用带有句柄的wp_register_style()注册样式,因此我们可以在入队之前向其添加数据。然后,我们添加要与wp_add_inline_style()函数内联的CSS 。此函数接受两个参数:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

  • $handle:  要向其添加其他样式的脚本的名称
  • $data:  包含要添加的Css的字符串

最后,我们再次使用wp_enqueue_style()函数排队样式,仅传递句柄名称。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

现在,该代码将在网页顶部加入并输出内联样式,如下所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<link rel='stylesheet' id='my-theme-purecss-css'  href='https://unpkg.com/purecss@1.0.0/build/pure-min.css?ver=1.0.0' type='text/css' media='screen' />
<!--[if lte IE 8]>
<link rel='stylesheet' id='my-theme-purecss-ie8-css'  href='https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css?ver=1.0.0' type='text/css' media='screen' />
<![endif]-->
<!--[if gt IE 8]>
<link rel='stylesheet' id='my-theme-purecss-ie9-css'  href='https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css?ver=1.0.0' type='text/css' media='screen' />
<![endif]-->
<link rel='stylesheet' id='my-theme-styles-css'  href='http://example.com/wp-content/themes/themename/style.css?ver=1.0.0' type='text/css' media='screen' />
<style id='my-theme-inline-css-inline-css' type='text/css'>
* { color: red; }
</style>

将Javascript添加到WordPress主题

将Javascript添加到主题的过程与添加样式非常相似,但是有一些细微的区别和额外的选择。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

再次挂载到WordPress

让我们开始向你的functions.php添加另一个钩子。你可以很好地使用我们刚刚用于样式的钩子,但是我建议您为了保持可维护性而将它们分开。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

更新您的functions.php中的代码,并将代码从下面的第4行添加到第9行:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<?php
/* Add a hook for javascripts */
function my_theme_enqueue_scripts()
{
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
?>

在这里,我们创建了一个名为my_theme_enqueue_scripts() 新的回调函数,并将其注册到wp_enqueue_scripts钩子,就像我们对样式所做的一样。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

同样,这并没有太大作用,因此让我们添加第一个Javascript文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

引入Javascript文件

更新您的functions.php中的代码,并从下面的第6行添加代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<?php
function my_theme_enqueue_scripts()
{
  /* 添加一个本地 javascript 文件 */
  wp_enqueue_script( 'my-theme-scripts', get_template_directory_uri() . '/public/js/app.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
?>

在这里我们没有使用 wp_enqueue_styles()  ,而是使用 wp_enqueue_scripts()  函数,因为我们要引入的是javascript文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

wp_enqueue_scripts() 函数接受的前4个参数和 wp_enqueue_styles() 一样,但是第5个参数不一样。对于css样式,最后一个参数是 $media ,而javascript 的最后一个参数是 $in_footer ,如果设置为 true,将在页脚加载这个javascript文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

  • $in_footer:  是否在</body>之前而不是<head> 加载脚本。默认为’false’

现在,代码将进入网页的页脚并在其中输出新的Javascript标记,如下所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<script type='text/javascript' src='http://example.com/wp-content/themes/themename/public/js/app.js?ver=1.0.0'></script>

删除一个Javascript文件

在某些情况下,删除一些不必要的脚本会更好一些。例如,大多数WordPress主题都会加入jQuery库。现在,如果你的主题(或插件)不需要它,则从页面上删除它对性能会更好。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

更新您的functions.php中的代码,并从下面的第6行添加代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<?php
function my_theme_enqueue_scripts()
{
  /* 删除 jquery */
  wp_deregister_script('jquery');
  wp_enqueue_script( 'my-theme-scripts', get_template_directory_uri() . '/public/js/app.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
?>

在这里,我们调用wp_deregister_script()函数并传递jquery的句柄。WordPress现在将从页面中删除jQuery库。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

将数据从php传递到Javascript

假设你已经创建了一段Javascript,该Javascript以某种方式操作你的网页,使其输出部分界面。很好,但是如果其中一部分是您想要翻译的某种文本怎么办?或者,如果该脚本取决于主题的路径怎么办?该路径可能会被其他人更改!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

WordPress 可以使用wp_localize_script()将数据从php传递到Javascript 。顾名思义,此函数最初旨在传递可翻译/本地化的字符串,但非常适合用于传递其他数据,例如路径或主题版本。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

更新n你的functions.php中的代码,并将代码从第8行添加到下面的16:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<?php
function my_theme_enqueue_scripts()
{
  wp_deregister_script('jquery');
  /* Pass sata from php to javascript */
  wp_register_script( 'my-theme-scripts', get_template_directory_uri() . '/public/js/app.js', array(), '1.0.0', true );
  
  $data_array = array(
    'some_string' => __( 'Some string to translate', 'textdomain' ),
    'themepath' => get_template_directory_uri()
  );
  wp_localize_script( 'my-theme-scripts', 'object_name', $data_array );
  wp_enqueue_script( 'my-theme-scripts' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
?>

在这里,我们不再像以前那样使用脚本,而是现在首先使用wp_register_script()函数对其进行注册。然后,我们创建一个名为$data_array的新数组,其中包含要传递的数据。在这种情况下,我们传递两个值:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

然后,我们将$data_array传递给wp_localize_script()函数,该函数受3个参数:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

  • $handle:  要将数据附加到的脚本的名称
  • $name:  将包含Javascript中数据的变量/对象的名称。(此名称在Javascript中必须是唯一的)。
  • $data:  您希望传递给Javascript的数据数组。

最后,我们再次使用wp_enqueue_script()函数使脚本入队。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

上面的代码将在网页的页脚中产生以下输出:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<script type='text/javascript'>
/* <![CDATA[ */
var object_name = {"some_string":"Some string to translate","themepath":"http:\/\/example.com\/wp-content\/themes\/themename"};
/* ]]> */
</script>
<script id='my-theme-scripts' async defer src='http://example.com/wp-content/themes/themename/public/js/app.js?ver=1.0.0'></script>

现在你可以通过如下所示的方式访问Java脚本中传递的数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

var somesting = object_name.some_string;
  
console.log( object_name.themepath );

这里的object_name变量(对象)名称来自传递给wp_locatize_script()函数的$name参数。它的成员/值来自我们传递的$data_array数组。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

更改链接和脚本标签

最近,对于在链接和脚本标签上是否确实需要type属性,存在一些争论。这取决于你,但是如果你希望删除它们,或者由于其他原因(例如测试新的资源优先级属性)想要更改标签,则将以下代码添加到functions.php中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<?php
/* 从 link 标签中删除type属性 */
function my_theme_optimize_style_tags( $html , $handle , $href , $media )
{
  return "<link rel='stylesheet' id='{$handle}' href='{$href}' media='{$media}' />" . "\n";
}
add_filter('style_loader_tag', 'my_theme_optimize_style_tags', 10, 4);
/* 从 script 标签中删除type属性 */
function my_theme_optimize_script_tags( $tag , $handle , $src )
{
  return "<script id='{$handle}' src='{$src}'></script>" . "\n";
}
add_filter('script_loader_tag', 'my_theme_optimize_script_tags', 10, 3);
?>

在使用允许你执行操作的操作之前,现在我们将使用允许你更改某些操作的过滤器。在这里,我们需要更改链接脚本标签,因此我们在这里使用add_filter()函数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

add_filter() 接受4个参数,就像 add_action() 函数一样:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

  • $tag:  用来挂载回调函数的钩子的名称
  • $function_to_add:  您希望被调用的回调函数的名称
  • $priority:  用于指定执行与特定操作关联的功能的顺序
  • $accepted_args:  回调函数接受的参数数量

在上面的代码中,我们使用add_filters()函数添加了两个过滤器挂钩。但是这次我们确实传递了最后两个参数,因为我们需要回调函数来接受更多参数。所以在这种情况下,我们设置 $priority  为10,然后 style_loader_tag 的$accepted_args设为4,  script_loader_tag 的 $accepted_args 设为 3 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

现在, my_theme_optimize_style_tags()  将被所有css在引入的时候进行调用,并且接受我们设定的 4 个参数:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

  • $html:  链接标记的完整html
  • $handle:  样式表的句柄/名称
  • $href:  样式表的网址/路径
  • $media:  此样式表的媒体类型

在此函数中,我们需要返回$html参数的更改/过滤后的值,但是我们只想返回一个包含链接标签的新字符串,因为我们希望它由WordPress使用带有php字符串enterpalation的传入参数来输出。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

my_theme_optimize_script_tags() 将被所有javascript在引入的时候进行调用,并且接受我们的设定的3个参数:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

  • $tag:  脚本标记的完整html
  • $handle:  样式表的句柄/名称
  • $src:  样式表的网址/路径

同样,我们需要返回更改后的$tag值,我们返回一个包含script标签的新字符串,因为我们希望它由WordPress输出。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

上面的代码将更改输出以下内容到你的网页中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<link rel='stylesheet' id='my-theme-purecss' href='https://unpkg.com/purecss@1.0.0/build/pure-min.css?ver=1.0.0' media='screen' />
<!--[if lte IE 8]>
<link rel='stylesheet' id='my-theme-purecss-ie8' href='https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css?ver=1.0.0' media='screen' />
<![endif]-->
<!--[if gt IE 8]>
<link rel='stylesheet' id='my-theme-purecss-ie9' href='https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css?ver=1.0.0' media='screen' />
<![endif]-->
<link rel='stylesheet' id='my-theme-styles' href='http://example.com/wp-content/themes/themename/style.css?ver=1.0.0' media='screen' />
<style id='my-theme-inline-css-inline-css' type='text/css'>
* { color: red; }
</style>

<script id='my-theme-scripts' src='http://example.com/wp-content/themes/themename/public/js/app.js?ver=1.0.0'></script>

请注意,内联样式仍然具有 type=”text/css”  属性。我仍然需要找到解决方案。如果你知道任何信息,请让我知道,以便我可以将其添加到本文中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

异步/延迟Javascript

异步和延迟是脚本标记的相对较新的属性。您可以在此处阅读有关defer的所有内容,并在此处进行异步。要将它们添加到脚本标签中,我们需要从较早的my_theme_optimize_script_tag()函数中更改代码,如下所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<?php
function my_theme_optimize_script_tags( $tag , $handle , $src )
{
  /* 添加异步延迟属性 */
  $defer = ( $handle == 'my-theme-scripts' ) ? 'async defer' : '';
  
  return "<script id='{$handle}' {$defer} src='{$src}'></script>" . "\n";
}
add_filter('script_loader_tag', 'my_theme_optimize_script_tags', 10, 3);
?>

在这里,我们检查$handle参数以查看这是否是正确的脚本,因为我们可能不想异步延迟所有JavaScript文件。如果为true,则将字符串“异步延迟”传递给$defer变量,如果为false,则传递一个空字符串。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

然后,我们将$defer变量的内容添加到返回的脚本标签中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

上面的代码更改将添加 defer和async 到 my-theme-scripts 脚本标签中,如下所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<script id='my-theme-scripts' async defer src='http://example.com/wp-content/themes/themename/public/js/app.js?ver=1.0.0'></script>

使用wp_get_theme

为了使你的functions.php文件更易于维护,我建议您使用wp_get_theme()功能。该函数返回一个WP_Theme类实例,该实例包含当前主题的 Name, ThemeURI, Description, Author, AuthorURI, Version, Template, Status, Tags, TextDomain 和 DomainPath 作为私有属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

返回的类实例还包含get()方法,该方法可用于从对象中获取上述值。例如,你可以使用此代码为句柄添加前缀,并将主题版本传递给wp_enqueue_style()wp_enqueue_script()函数,如下所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<?php
$theme = wp_get_theme();
wp_enqueue_style( $theme->get('TextDomain') . '-styles', get_template_directory_uri() . '/style.css', array(), $theme->get('Version'), 'screen' );
wp_register_script( $theme->get('TextDomain') . '-scripts', get_template_directory_uri() . '/public/js/app.js', array(), $theme->get('Version'), true );
?>

现在,当你更改主题名称或主题版本时,将自动反映在Link和Script标签的输出中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

完整的代码

你可以在下面找到完整的代码,可以将它用作functions.php文件的样板。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html

<?php
function my_theme_enqueue_styles()
{
  $mytheme = wp_get_theme();
  
  wp_enqueue_style( $mytheme->get('TextDomain') . '-purecss', 'https://unpkg.com/purecss@1.0.0/build/pure-min.css', array(), $mytheme->get('Version') , 'screen' );
  wp_enqueue_style( $mytheme->get('TextDomain') . '-purecss-ie8' , 'https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css', array() , $mytheme->get('Version') , 'screen' );
  wp_style_add_data( $mytheme->get('TextDomain') . '-purecss-ie8' , 'conditional' , 'lte IE 8' );
  wp_enqueue_style( $mytheme->get('TextDomain') . '-purecss-ie9' , 'https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css', array() , $mytheme->get('Version') , 'screen' );
  wp_style_add_data( $mytheme->get('TextDomain') . '-purecss-ie9' , 'conditional' , 'gt IE 8' );
  wp_enqueue_style( $mytheme->get('TextDomain') . '-styles', get_template_directory_uri() . '/style.css', array(), $mytheme->get('Version') , 'screen' );
  wp_register_style( $mytheme->get('TextDomain') . '-inline-css', false );
  wp_enqueue_style( $mytheme->get('TextDomain') . '-inline-css' );
  wp_add_inline_style( $mytheme->get('TextDomain') . '-inline-css', '* { color: red; }' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_scripts()
{
  $mytheme = wp_get_theme();
  
  wp_deregister_script('jquery');
  wp_register_script( $mytheme->get('TextDomain') . '-scripts', get_template_directory_uri() . '/public/js/app.js', array(), $mytheme->get('Version') , true );
  
  $data_array = array(
    'some_string' => __( 'Some string to translate', 'textdomain' ),
    'themepath' => get_template_directory_uri()
  );
  wp_localize_script( $mytheme->get('TextDomain') . '-scripts', 'object_name', $data_array );
  wp_enqueue_script( $mytheme->get('TextDomain') . '-scripts' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
function my_theme_optimize_style_tags( $html , $handle , $href , $media )
{
  return "<link rel='stylesheet' id='{$handle}' href='{$href}' media='{$media}' />" . "\n";
}
add_filter('style_loader_tag', 'my_theme_optimize_style_tags', 10, 4);
function my_theme_optimize_script_tags( $tag , $handle , $src )
{
  $defer = ( $handle == 'my-theme-scripts' ) ? 'async defer' : '';
  return "<script id='{$handle}' {$defer} src='{$src}'></script>" . "\n";
}
add_filter('script_loader_tag', 'my_theme_optimize_script_tags', 10, 3);
?>
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/16805.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/cms/16805.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定