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

在这篇文章中，将和大家分享如果以正确的方式在WordPress主题中引入css样式和Javascript。如果你以前没有使用Wordpress来创建过网站，你可能习惯于使用 <link href = “”> 和 <script src = “”> 标签。虽然这些标签可以直接插入到主题中，但这是WordPress开发中的“坏习惯”。

WordPress 通过wp_enqueue_style()和wp_enqueue_script()函数来通过自己的特定方式来处理CSS样式和Javascript 。

使用WordPress的方式来添加CSS和Javascript可能代码量多一些，但是与直接使用标签相比，它具有一些真正的优势，例如代码的可重用性，基本的依赖项管理以及以下事实：如果正确插入Css样式和Javascript ，插件可以出于各种目的（如压缩和合并）对其进行控制。

让我们开始来学习WordPress的方式吧！

文章目录

在WordPress主题中添加CSS样式

要添加样式表，我们首先要通过钩子来添加到WordPress。如果您想了解有关WordPress 钩子的所有细节，可以看下我们之前分享的教程：

总之……挂钩就像在烹饪过程中的某个特定时刻要求厨师打电话给你。例如，当他需要在汤中添加蔬菜时，叫他打电话给你，这样你就可以添加自己喜欢的蔬菜了。在我们的例子中，WordPress 正在编写网页，我们希望在它需要收集样式和脚本（enqueue_scripts）时来联系我们，以便我们可以添加自己的样式和脚本。

挂载到 WordPress

将以下代码添加到主题的functions.php中

<?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时执行。

add_action() 函数需要以下4 个参数：

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

请注意，在这种情况下，我们不需要最后两个参数，因此我们不会传递它们，但是稍后我们将介绍它们。

为了避免名称冲突，最好在函数名称前加上主题名称。因此，如果你的主题称为“personal-theme”，则将上述回调函数重命名为“ personal_theme_enqueue_styles ”，并相应地在add_action()函数中更改名称。

这段代码并不会做太多，所以让我们开始添加样式表。作为本教程的示例，我将添加PureCss框架。您可以将其更改为Bootstrap或任何您喜欢的CSS。

引入远程CSS样式文件

更新您的functions.php中的代码，并从下面的第6行添加代码：

<?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个参数：

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

上面的代码会“排入/添加”新的样式表，而WordPress会将以下链接标记输出到你的网页顶部：

<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以上的任何浏览器

更改您的functions.php中的代码，并将代码添加到第8至12行。

<?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()函数添加了条件。该函数接受三个参数：

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

现在，该代码将在网页顶部加入并输出两个带有条件注释的样式表：

<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文件，其实和上面基本一样的操作，只是有一个地方不一样。

更新您的functions.php中的代码，并从下面的第14行添加代码：

<?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不会中断。

现在，代码将在网页的头部加入并输出额外的本地样式表，并带有如下所示的完整网址：

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

更新您的functions.php中的代码，并在下面的第16至18行添加代码：

<?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 。此函数接受两个参数：

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

最后，我们再次使用wp_enqueue_style()函数排队样式，仅传递句柄名称。

现在，该代码将在网页顶部加入并输出内联样式，如下所示：

<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添加到主题的过程与添加样式非常相似，但是有一些细微的区别和额外的选择。

再次挂载到WordPress

让我们开始向你的functions.php添加另一个钩子。你可以很好地使用我们刚刚用于样式的钩子，但是我建议您为了保持可维护性而将它们分开。

更新您的functions.php中的代码，并将代码从下面的第4行添加到第9行：

<?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钩子，就像我们对样式所做的一样。

同样，这并没有太大作用，因此让我们添加第一个Javascript文件。

引入Javascript文件

更新您的functions.php中的代码，并从下面的第6行添加代码：

<?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文件。

wp_enqueue_scripts() 函数接受的前4个参数和 wp_enqueue_styles() 一样，但是第5个参数不一样。对于css样式，最后一个参数是 $media ，而javascript 的最后一个参数是 $in_footer ，如果设置为 true，将在页脚加载这个javascript文件。

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

现在，代码将进入网页的页脚并在其中输出新的Javascript标记，如下所示：

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

删除一个Javascript文件

在某些情况下，删除一些不必要的脚本会更好一些。例如，大多数WordPress主题都会加入jQuery库。现在，如果你的主题（或插件）不需要它，则从页面上删除它对性能会更好。

更新您的functions.php中的代码，并从下面的第6行添加代码：

<?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库。

将数据从php传递到Javascript

假设你已经创建了一段Javascript，该Javascript以某种方式操作你的网页，使其输出部分界面。很好，但是如果其中一部分是您想要翻译的某种文本怎么办？或者，如果该脚本取决于主题的路径怎么办？该路径可能会被其他人更改！

WordPress 可以使用wp_localize_script()将数据从php传递到Javascript 。顾名思义，此函数最初旨在传递可翻译/本地化的字符串，但非常适合用于传递其他数据，例如路径或主题版本。

更新n你的functions.php中的代码，并将代码从第8行添加到下面的16：

<?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的新数组，其中包含要传递的数据。在这种情况下，我们传递两个值：

some_string: 在这里，我们使用WordPress I18N功能使字符串可翻译
themepath: 在这里，我们从get_template_directory_uri()函数传递路径到主题。

然后，我们将$data_array传递给wp_localize_script()函数，该函数受3个参数：

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

最后，我们再次使用wp_enqueue_script()函数使脚本入队。

上面的代码将在网页的页脚中产生以下输出：

<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脚本中传递的数据。

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

这里的object_name变量（对象）名称来自传递给wp_locatize_script()函数的$name参数。它的成员/值来自我们传递的$data_array数组。

更改链接和脚本标签

最近，对于在链接和脚本标签上是否确实需要type属性，存在一些争论。这取决于你，但是如果你希望删除它们，或者由于其他原因（例如测试新的资源优先级属性）想要更改标签，则将以下代码添加到functions.php中。

<?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()函数。

add_filter() 接受4个参数，就像 add_action() 函数一样：

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

在上面的代码中，我们使用add_filters()函数添加了两个过滤器挂钩。但是这次我们确实传递了最后两个参数，因为我们需要回调函数来接受更多参数。所以在这种情况下，我们设置 $priority 为10，然后 style_loader_tag 的$accepted_args设为4， script_loader_tag 的 $accepted_args 设为 3 。

现在， my_theme_optimize_style_tags() 将被所有css在引入的时候进行调用，并且接受我们设定的 4 个参数：

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

在此函数中，我们需要返回$html参数的更改/过滤后的值，但是我们只想返回一个包含链接标签的新字符串，因为我们希望它由WordPress使用带有php字符串enterpalation的传入参数来输出。

my_theme_optimize_script_tags() 将被所有javascript在引入的时候进行调用，并且接受我们的设定的3个参数：

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

同样，我们需要返回更改后的$tag值，我们返回一个包含script标签的新字符串，因为我们希望它由WordPress输出。

上面的代码将更改输出以下内容到你的网页中。

<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” 属性。我仍然需要找到解决方案。如果你知道任何信息，请让我知道，以便我可以将其添加到本文中。

异步/延迟Javascript

异步和延迟是脚本标记的相对较新的属性。您可以在此处阅读有关defer的所有内容，并在此处进行异步。要将它们添加到脚本标签中，我们需要从较早的my_theme_optimize_script_tag()函数中更改代码，如下所示。

<?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，则传递一个空字符串。

然后，我们将$defer变量的内容添加到返回的脚本标签中。

上面的代码更改将添加 defer和async 到 my-theme-scripts 脚本标签中，如下所示：

<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 作为私有属性。

返回的类实例还包含get()方法，该方法可用于从对象中获取上述值。例如，你可以使用此代码为句柄添加前缀，并将主题版本传递给wp_enqueue_style()和wp_enqueue_script()函数，如下所示：

<?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标签的输出中。

完整的代码

你可以在下面找到完整的代码，可以将它用作functions.php文件的样板。

<?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://vanaf1979.nl/wordpress-css-styles-and-javascripts-in-theme-development-in-depth/ ，由WordPress大学翻译整理，转载请注明该说明和网址。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

{{userData.name}}已认证

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

在WordPress主题中添加CSS样式

挂载到 WordPress

引入远程CSS样式文件

添加条件样式表

引入本地CSS样式文件

引入内联CSS样式

将Javascript添加到WordPress主题

再次挂载到WordPress

引入Javascript文件

删除一个Javascript文件

将数据从php传递到Javascript

更改链接和脚本标签

异步/延迟Javascript

使用wp_get_theme

完整的代码

WordPress为文章和自定义文章类型添加自定义模板

为古腾堡区块添加Dashicons或自定义SVG图标

WordPress 6.7 新功能预览：缩小模式、元框、块绑定 API 等等

WordPress 6.7 默认主题 Twenty Twenty-Five 的开发者讲解

WordPress 安装或更新插件时遇到 PCLZIP_ERR_BAD_FORMAT (-10) 错误

FluentSMTP：为 WordPress 配置多个SMTP发送服务器

使用 WP Dashboard Notes 插件在 WordPress 仪表盘添加备注信息

调查问卷投票插件 TotalPoll 专业版

机械工具五金产品营销模板 B2B001

多肉绿植花园产品营销模板 B2B018

WordPress性能优化插件 WPTurbo

公告/通知栏插件HashBar Pro中文汉化优化版

建筑重工机械产品营销模板 B2B028

汽车清洗保养产品营销模板 B2B013

WordPress热门关键词推荐插件专业版

{{userData.name}}已认证

在WordPress主题中添加CSS样式

挂载到 WordPress

引入远程CSS样式文件

添加条件样式表

引入本地CSS样式文件

引入内联CSS样式

将Javascript添加到WordPress主题

再次挂载到WordPress

引入Javascript文件

删除一个Javascript文件

将数据从php传递到Javascript

更改链接和脚本标签

异步/延迟Javascript

使用wp_get_theme

完整的代码

WordPress为文章和自定义文章类型添加自定义模板

为古腾堡区块添加Dashicons或自定义SVG图标

正确加载 Javascript 和 CSS 到 WordPress

为自制WordPress主题/插件的后台设置页面添加ajax支持

为你的WordPress主题框架建立起始文件

在WordPress管理后台正确加载js和css脚本

调查问卷投票插件 TotalPoll 专业版

机械工具五金产品营销模板 B2B001

多肉绿植花园产品营销模板 B2B018

WordPress性能优化插件 WPTurbo

公告/通知栏插件HashBar Pro中文汉化优化版

建筑重工机械产品营销模板 B2B028

汽车清洗保养产品营销模板 B2B013

WordPress热门关键词推荐插件专业版