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 文档的页脚中,而不是放在 <head> 中,这样它就不会延迟加载 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文件 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><<?php bloginfo('name'); ?></title>
    <?php wp_head() ?>
</head>
<body>
<!--  在这里写pc端的代码-->
<?php
if (has_nav_menu('pc-top')) {

    wp_nav_menu(
        array(
            'theme_location' => 'pc-top',
            'container' => 'nav',
            'container_class' => 'menu-container',
            'menu' => '',
            'menu_class' => 'main',
         )
    );

}
?>

最终的效果

 

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页