WordPress新建页面、文章单独加载指定JavaScript或CSS代码

  1. 下面是大佬的原话和教程:

来源: 怎么在WordPress新建页面单独加载指定JavaScript或CSS代码 from lnmpweb.cn

最近在制作数据统计并通过wordpress展示,但其中一个post设计到使用tabulator这个表格插件,需要添加额外js和css。我尝试过在head上直接添加,但全局加载会到导致网站一定程度上变慢,而且并不是每个页面和文章都需要用到这个文件,有点资源浪费。

后来搜索了很多教程终于发现lnmpweb.cn的比较简介明了,这里就记录一下。

其原理就是通过对自定义字段来判断此页面是否需要加载额外的自定义代码。

DEMO: 2019年至今IPO过会企业的现金流量净额情况

下面是大佬的原话和教程:

其实,我们可以利用 WordPress 强大的自定义字段的功能来实现不同的文章页面载入自定义的 JavaScript 或者 CSS 文件。
这篇文章将介绍你如何通过使用自定义字段实现在 WordPress 上自定义页面的 JavaScript 或者 CSS 文件,如果你能弄明白的话,自定义字段的价值就不是一个 JavaScript 跟 CSS 文件这么简单的价值了。

如何添加自定义字段到主题
用你常用的代码编辑器打开你的 WordPress 主题的 header.php文件,找到这句代码,在其后面添加上:

<?php if (is_single() || is_page()) &#123;  // 检查载入的页面是否文章页面或者独立页面,如果是,执行下面的代码
$head = get_post_meta($post->ID, 'head', true); // 检查该页面是否设置了名称为 head 的自定义字段,如果是,继续执行代码
if (!empty($head)) &#123; ?> // 检查名称为 head 的自定义字段是否为空值,如果不是,继续执行
<?php echo $head; ?> // 输出自定义字段 head 的内容
<?php &#125; // 结束语句
&#125; ?>

代码中的head是自定义字段的名称,可以自定义;

代码片段中//后面的是该行代码的注释,注释解释了该行代码的作用,在添加代码的时候你可以去掉//后面包括//的内容。

在文章页面或独立页面添加自定义字段

在 WordPress 后台编辑文章的页面的编辑器下面,有一个“自定义域”的小窗口,在名称处输入head,在值处输入你要在你所添加位置输出的代码;

点击了添加自定义域之后,更新你的文章就可以在你主题放置代码的地方输入这些自定义域的值了;

由于只是输出“值”里面的所有内容,所以需要自己在“值”里面输入或者来输出代码。


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以邮件至 [email protected]