wordpress主题如何不同页面加载不同的css、js文件?[WP教程]

wordpress主题如何不同页面加载不同的css、js文件?[WP教程]

wordpress主题如何不同页面加载不同的css、js文件?

如果没有打开字段的需要给字段这个功能打开,我以古藤为例

第一步

右边三个点有一个偏好设置点击它

第二步

图片[1]-wordpress主题如何不同页面加载不同的css、js文件?[WP教程]-乡野博文

下面正式教程来了

一、添加自定义字段

图片[2]-wordpress主题如何不同页面加载不同的css、js文件?[WP教程]-乡野博文

操作步骤:
1、打开 后台 → 页面 → 编辑对应的页面;
2、在编辑页面找到自定义字段板块,添加自定义字段:
page_css,值为:

<link rel="stylesheet" href="文件目录/about.css" type="text/css" media="screen" />

page_js,值为:

<script type="text/javascript" src="文件目录/about.js"></script>

【保存/更新页面】

二、代码调用自定义字段:

操作步骤:

1、打开 后台 → 外观 → 主题编辑器,找到主题的 header.php 文件;

2、在</head>之前添加以下代码:

<?php 
// 判断是页面类型
if(is_page()){
  // 判断 page_css 自定义字段是否有值
  if(get_post_meta($post->ID, "page_css", true)){
    // 直接输入自定义字段
    echo get_post_meta($post->ID, "page_css", true);
  }
  // 判断 page_js 自定义字段是否有值
  if(get_post_meta($post->ID, "page_js", true)){
    // 直接输入自定义字段
    echo get_post_meta($post->ID, "page_js", true);
  }
}
?>

如下图:

图片[3]-wordpress主题如何不同页面加载不同的css、js文件?[WP教程]-乡野博文

保存代码后,到前台对应的页面看一下是否生效即可

温馨提示:本文最后更新于2022-05-11 22:31:13,某些文章具有时效性,若有错误或已失效,请在下方留言或联系乡野博文
您阅读这篇文章共花了: 0小时00分00秒
-----本页内容已结束,喜欢请分享!-----
© 版权声明
THE END
喜欢本站内容,请点【点赞】【分享】和【收藏】~
点赞8 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容