专业WORDPRESS主题设计制作

WordPress如何指定文章页面加载JavaScript/CSS代码?(wordpress调用指定文章)

发布于: 2022-11-03

1 WordPress主题怎么添加自定义字段?

  • 2 在WordPress文章或页面添加自定义字段
    • 2.1 WordPress自定义字段的其它用途
  • 3 WordPress如何指定文章标签和分类页眉页脚加载JavaScrip/CSS代码?

 

在制作WordPress主题时,如果有一个特定的JavaScript或CSS代码,出现在WordPress的特定页面上,它只会被使用一次。

应该把代码放在哪里? Style.css还是base.js?

但这样做的成本有点大。

示例1:

  • 尝试在WordPress网站上获得Highslide JavaScript效果。
  • 但通常只有部分加图像或所需页面才用到,并在未使用的页面上加载页面来添加Highslide部分,这样超过50 KB的JavaScript太大了。

示例2:

  • 在某篇文章中放了一个标准的兼容性方法是使用<embed>标签插入它,但插入的<embed> 标签所生成页面,无法通过W3C验证。
  • 一个很好的方法是可以使用SWFObject这个JavaScript生成通过W3C验证的代码。
  • 但问题是在WordPress的每个页面上加载SWFObject都太浪费了,而且不是页面都用到此JavaScript文件。

事实上,我们可以使用WordPress强大的自定义字段,为自定义文章或页面加载实现不同的JavaScript页面。

本文将向你展示:如何使用自定义字段在WordPress上,自定义JavaScript或CSS文件?

如果你能理解,自定义字段的值不像JavaScript和CSS文件那么简单。

WordPress主题怎么添加自定义字段?

打开WordPress主题的header.php文件,找到代码 ▼

<?php wp_head(); ?>

在它之后添加 ▼

<!-- 指定文章页面加载JavaScript/CSS代码 开始 -->
    <?php if (is_single() || is_page()) {
$head = get_post_meta($post->ID, 'head', true); 
if (!empty($head)) { ?> 
<?php echo $head; ?> 
<?php } } ?>
<!-- 指定文章页面加载JavaScript/CSS代码 结束 -->

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

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

WordPress后台编辑文章页面的编辑器中,有一个“自定义域”的小窗口。

  1. 在“名称”处输入:head
  2. 然后在“值”输入你要添加显示的代码 

wordpress-post-add-custom-fields_002

  • 单击“添加自定义字段”。
  • 更新文章将允许你为主题的代码,输入这些自定义字段的值。

由于你只输出“值”中是需要加载的代码,因此需要在“值”中,输入以下类似代码  ▼

<script type="text/javascript">...</script>

或者 ▼

<style type="text/css">...</style>

来输出以上代码。

WordPress自定义字段的其它用途

在理解了上述原则之后,你会发现WordPress自定义字段,不仅可以为自定义页面实现自定义JavaScript或CSS,还可以通过自定义字段实现许多功能,类似于:添加到文章缩略图,文章提示等。

至于要实现的功能如何实现它们,请尝试使用自定义字段。

WordPress如何指定文章标签和分类页眉页脚加载JavaScrip/CSS代码?

WordPress怎么自定义页眉?我们可以通过以下文章说明安装WordPress插件实现添加head代码 ▼

WordPress如何在文章添加head代码?WP插件优化head代码

由于在这篇文章《WordPress怎么自定义页眉?安装WordPress页脚页眉插件》介绍的Header Footer Code Manager插件,目前无法添加PHP代码……因此,在WordPress插件官网搜索,找到了可以在页眉页……

wordpress-head-footer-and-post-injections-pluginWordPress怎么自定义页眉?安装WordPress页脚页眉插件

有些WordPress的HTML / Javascript / CSS 代码只需在某篇文章或页面中显示,我们可以通过Header Footer Code Manager插件,实现在WordPress指定文章/页面内添加页眉页脚代码。Header Footer……

header-footer-code-manager-site-display

  • 这样不用担心更换WordPress主题后,自定义代码丢失或手动转移自定义代码的问题。

希望我们网站( https://www.wordpressx.com/ ) 分享的《WordPress如何指定文章页面加载JavaScript/CSS代码?》,对您有帮助。

TAG列表 wordpress最新最热TG汇集,掌握wordpress热线内容
WooCommerce 商店WordPress调试模式Avada主题演示Rich Snippets结构化数据Easy WP Cleaner插件WordPress违禁词检查Awesome Supportwordpress Post ViewsWordPress超级菜单wordpress常规设置Wordfence Security插件WordPress页脚页眉插件WordPress大气的样式WordPress外链特色图片WordPress过滤敏感词插件Mega Menu插件WP SMTP插件WooCommerce 功能Redis加速缓存插件CWP控制面板转KLOXO-MRBackWPup插件WordPress官网制作nameCheap最新优惠码隐藏WordPress代码内版本号WP SMTP插件设置Better Search Replace插件Jetpack站点加速器CDN图像缓存修改wordpress登录地址wp-json漏洞wp-json防止数据被采集WP-No-Tag-Base插件Avada主题wp-json安全设置http://www.fandutaoci.cnwordpress文章浏览数量统计扒站怎么改wordpress主题wordpress安全防护WP安全登录插件推荐Footer and Post Injections插件WordPress自动备份wordpress打开是代码CWP开启Redis缓存去除tag标签url百度熊掌号h5自适应布局安装WordPress插件主机壳WordpressImage Sizes插件Jetpack插件Markdown here插件namechep续费优惠码WordPress tag模版WordPress广告词检测WordPress网站恶意代码wordpress描文本critical automatic updatesWooCommerce 定价wp-json链接robots.txt安全设置wordpress文章卡片样式Pretty Links Pro插件织梦采集侠wordpresswordpress漏洞修复xmlrpc.php漏洞wordpress更换域名图标不显示网站添加CDNWP插件优化head代码xmlrpc.php攻击WordPress虚拟主机伪静态Dropbox上传失败WordPress站内搜索排除所有页面WordPress网站安全防什么是 WooCommercewordpress cdnShortcodes UltimateWooCommerceWordPress显示运行数据库Shortcodes Ultimate插件wp-json优化All In One WP SecurityWordPress自定义页眉WordPress站内搜索排除某些类别的文章namechep域名优惠码隐藏WordPress后台登录地址WordPress文章描文本wordpress表单跳转wordpress小图标不显示WordPress菜单自定义图标wordpress感谢页面谷歌 SEO保护robots.txtFeatured Image From URLWordPress页脚加载JSrobots.txt禁止访问WordPress网站防护bootstrap自适应布局WordPress滤敏感词过滤插件禁用 xmlrpc.phpWordPress tagwordpress Dropbox
服务电话:
0533-2765967

微信 13280692153