WordPress主题开发:安全的引入主题CSS和JS

在本小节中我将带领大家安全的引入我们在模板开发时需要使用的主题css和js文件。

描述

在上一小节中我讲解了一个基础的HTML首页:

WordPress主题开发:首页

在本小节中我将带领大家安全的引入我们在模板开发时需要使用的主题css和js文件。

开始

1.何为安全引入?

在常规开发中,我们引入css、js代码会如下(index.php文件):

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	
</body>
</html>

直接在head 标签中使用link标签引入,这样的引入方式在WordPress主题中自然是可行的,但是这样引入并不方便管理和版本迭代,也不利于后期的用户的二次开发,于是WordPress定义了wp_head函数。

WordPress头部资源函数:wp_head

该函数仅仅是一个do_action 的钩子,在后续的开发中你只需要将你的css、js等其他需要在头部出现的标签挂钩在这里即可。而对于这个,WordPress也定义了相关函数:

所以修改代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <?php wp_head(); ?>
</head>
<body>
	
</body>
</html>

可以看到,这里我们甚至连 title 标签都已经去掉了,这是因为一般的主题中我们也许会对title进行额外的seo设置,也或者我们为了让自己的模板更可持续化的发展,我们兼容了其他seo插件堆头部title标签的设置,后续的其他插件只需要对wp_head钩子操作即可。

为TA充电
共{{data.count}}人
人已赞赏
主题开发

WordPress主题开发:首页

2021-5-25 8:35:45

主题开发

WordPress关闭顶部管理员BAR

2021-9-24 14:34:24

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索