wordpress5.3主题开发第六课：如何引入样式文件和脚本文件

插入脚本和样式

为主题添加脚本和样式的正确方法是将它们添加到 functions.php 文件中。style.css 是所有主题都需要的文件，除此之外，您还可能需要添加其他文件以扩展主题的功能。

插入脚本和样式的基础是：

1. 使用wp_enqueue_script()将 JS 文件插入队列
2. 使用wp_enqueue_style() 将 CSS 文件插入队列

官方自带的twentytwenty主题引入样式和脚本的参考代码如下：

/**
 * Register and Enqueue Styles.
 */
function twentytwenty_register_styles() {

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

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

	// Add output of Customizer settings as inline style.
	wp_add_inline_style( 'twentytwenty-style', twentytwenty_get_customizer_css( 'front-end' ) );

	// Add print CSS.
	wp_enqueue_style( 'twentytwenty-print-style', get_template_directory_uri() . '/print.css', null, $theme_version, 'print' );

}

add_action( 'wp_enqueue_scripts', 'twentytwenty_register_styles' );

/**
 * Register and Enqueue Scripts.
 */
function twentytwenty_register_scripts() {

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

	if ( ( ! is_admin() ) && is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}

	wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version, false );
	wp_script_add_data( 'twentytwenty-js', 'async', true );

}

add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );

样式排队函数的基本功能是：

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

您可以包含以下参数：

• $handle 样式表名称。
• $src 样式文件所在的位置，其余参数是可选的。
• $deps 指的是此样式表是否依赖于另一个样式表。如果设置了此项，则除非首先加载其依赖的样式表，否则不会加载此样式表。
• $ver：版本号。
• $media：可以指定要加载此样式表的媒体类型，例如 ‘all’, ‘screen’, ‘print’ 或 ‘handheld’。

加载 JavaScript 脚本时，您应该使用 wp_enqueue_script 函数。这样做可以确保脚本能够按照正确的加载，并在浏览器中缓存合适的版本，除此之外，您还可以使用条件函数在 WordPress 中按需加载脚本。

wp_enqueue_script使用类似的语法 wp_enqueue_style。该函数的基本使用方法如下：

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

它包含下面的参数：

• $handle：脚本的名称。
• $src：脚本文件所在的位置。
• $deps：依赖的脚本数组，例如 jQuery。
• $ver：脚本的版本号。
• $in_footer：是一个布尔数（true / false），它允许您将脚本放在 HTML 文档的页脚中，而不是放在  中，这样它就不会延迟加载 DOM 树。

style.css样式文件

/*
theme name:XXX职业技术学院
author:李书明
version:1.0
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    background-size: cover;
    height: 100vh;

    font-family: "Raleway", sans-serif;
    letter-spacing: 1px;
}
h1 {
    text-align: center;
    color: #fff;
    padding-top: 20px;
}

ul {
    list-style: none;
}

nav {
    height: 40px;
    margin: 40px auto;
    background-color: rgba(23, 23, 50, 0.7);
    text-align: center;
    border-radius: 4px;
}
.main {
    display: flex;
    justify-content: center;
}
.main > li {
    margin: 0 2%;
}
.main > li a{
    border-left:1px solid rgba(23, 23, 50, 1);
}
a {
    text-decoration: none;
    color: #ffe;
    text-transform: capitalize;
    font-family: monospace;
    display: block;
    padding: 10px 15px;
    font-size: 16px;
    transition: background-color 0.5s ease-in-out;

    font-family: "Raleway", sans-serif;
}

a:hover {
    background-color: #631818;
}

.sub-menu li {
    opacity: 0;
    transform-origin: top center;
}

.sub-menu li a {
    background-color: rgba(23, 23, 50, 0.7);
    padding: 10px 0;
}



.main li:hover .sub-menu li{
    animation: sub-menu 0.3s ease-in-out forwards;
    animation-delay: 0.3s;
}


@keyframes sub-menu {
    from {
        opacity: 0;
        transform: translateX(30px) rotateY(90deg);
    }
    to {
        opacity: 1;
        transform: translateX(0) rotateY(0);
    }
}

在functions.php引入style.css样式文件

/**
 * 注册样式和脚本
 */
function mytheme_register_styles() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0' );
}

add_action( 'wp_enqueue_scripts', 'mytheme_register_styles' );

header-pc.php文件 

    
    
    
    
    



 'pc-top',
            'container' => 'nav',
            'container_class' => 'menu-container',
            'menu' => '',
            'menu_class' => 'main',
         )
    );

}
?>

最终的效果