插入脚本和样式
为主题添加脚本和样式的正确方法是将它们添加到 functions.php 文件中。style.css 是所有主题都需要的文件，除此之外，您还可能需要添加其他文件以扩展主题的功能。
插入脚本和样式的基础是：
- 使用
wp_enqueue_script()将 JS 文件插入队列 - 使用
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',
)
);
}
?>最终的效果
