WordPress主题制作

  1. 主页
  2. 文档
  3. WordPress主题制作
  4. 引入外部CSS样式文件和JS脚本文件
  5. wp_enqueue_style

wp_enqueue_style

函数用法:

<?php 
wp_enqueue_style( $handle, $src, $deps, $ver, $media ); 
?>

参数解释:

  • $handle:用于区别 CSS 的名称,即标识字串 (string);
  • $src:CSS 的文件 URL (string);
  • $deps:加载的 CSS 所依存的其他 CSS 标识字串数组 (array:string, 非必需);
  • $ver:CSS 文件的版本号,留空则使用当前 WP 版本号 (string, 非必需);
  • $media:用于加载 CSS 的头部标签 link 的 media 参数值 (string, 非必需)。

示例1:引入主样式表style.css

$theme_version = wp_get_theme()->get( 'Version' );

wp_enqueue_style( 'twentytwenty-style', get_stylesheet_uri(), array(), $theme_version );

实例2:

//全局加载一般的样式表
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' );

其他示例:

//全局加载仅用于IE的样式表
    wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );

注意: 非WP自带的CSS 文件,版本号要加上,不要留空,否则使用当前 WP 版本号

如下没有添加 版本号 ,则显示如下,导致无法打开css文件

<link rel='stylesheet' id='bootstrap-style-css'  href='http://127.0.0.1/startbootstrap/wp-content/themes/startbootstrap0.1/vender/bootstrap/css/bootstrap.min.css?ver=5.3.2' media='all' />

这篇文章对您有用吗?

我们要如何帮助您?