WSONX.COM
心之所愿,无所不成

WordPress 加载JS和CSS文件的方法

征求热心网友的 [投稿] ,一起为美好的网络无私分享世界加油!

在 网站DIY的过程中 少不免要添加一些JS代码和CSS样式代码,为了方便自己管理

可以新建文件再引入到网站里,通常都是直接在主题Header.php文件 </body> 前加入以下代码实现.

//加载主题目录wsonx目录下wsonx.js文件
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/wsonx/wsonx.js"></script>
//加载主题目录wsonx目录下wsonx.css文件
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/wsonx/wsonx.css">

还有一种方法就是直接在主题functions.php 中加载,添加以下代码即可

//添加代码整个网站顶部
function wpb_hook_javascript() {
?>
//加载主题目录wsonx目录下wsonx.js文件 
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/wsonx/wsonx.js"></script>
 //加载主题目录wsonx目录下wsonx.css文件 
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/wsonx/wsonx.css">
<?php
}
add_action('wp_head', 'wpb_hook_javascript');
//添加代码到指定的文章中 16为文章ID
function wpb_hook_javascript() {
if (is_single ('16')) {
?>
//加载主题目录wsonx目录下wsonx.js文件
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/wsonx/wsonx.js"></script>
 //加载主题目录wsonx目录下wsonx.css文件 
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/wsonx/wsonx.css">
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
//添加代码到指定的页面中 10为页面ID
function wpb_hook_javascript() {
if (is_page ('10')) {
?>//加载主题目录wsonx目录下wsonx.js文件
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/wsonx/wsonx.js"></script>
 //加载主题目录wsonx目录下wsonx.css文件 
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/wsonx/wsonx.css">
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
//添加代码到站点的页脚中
function wpb_hook_javascript_footer() {
?>
//加载主题目录wsonx目录下wsonx.js文件
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/wsonx/wsonx.js"></script>
 //加载主题目录wsonx目录下wsonx.css文件 
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/wsonx/wsonx.css">
<?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');

这样就能简单的实现加载JS和CSS文件了

掰掰~~~


赞(0)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《WordPress 加载JS和CSS文件的方法》| 南星博客
文章链接:https://wsonx.com/archives/554.html
本站內容大部分来源于网络,仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。如有侵权内容请留言来信告知,本站將会立即处理 E-mail:gdsuiyuan@163.com

征求热心网友的 [投稿] ,一起为美好的网络无私分享世界加油!
觉得不错就分享给朋友吧➤

评论 抢沙发

#点我快捷打卡#

  • 昵称 (必填)
  • 邮箱 (必填)
  • Q Q(选填)
  • 网址