专业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代码?》,对您有帮助。

WordPress怎么自定义页眉?安装WordPress页脚页眉插件(wordpress怎么设置页面)

发布于: 2022-11-03

1 Header Footer Code Manager插件是什么?

  • 2 为什么要用Header Footer Code Manager插件?
  • 3 Header Footer Code Manager特点
  • 4 Header Footer Code Manager页面显示选项
  • 5 Header Footer Code Manager插件添加代码的位置
    • 5.1 设备选项
    • 5.2 支持的服务
  • 6 多站点注意事项
  • 7 如何使用Header Footer Code Manager 插件?
  • 8 Header Footer Code Manager插件下载

 

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

Header Footer Code Manager插件是什么?

Header Footer Code Manager页眉页脚代码管理器是一个容易使用的WordPress插件,可以将代码段添加到页眉或页脚或页面内容的上方或下方。

header-footer-code-manager-site-display-1

为什么要用Header Footer Code Manager插件?

  • 永远不必担心添加代码会无意中破坏你的网站
  • 避免无意中将片段放在错误的位置
  • 只需添加一个小代码片段,就不再需要十几个或更多愚蠢的插件——插件越少越好!
  • 切换或更改主题时永远不会丢失代码片段
  • 确切知道你的网站上加载了哪些片段?它们显示的位置以及添加它们的人

Header Footer Code Manager特点

  • 在任何位置和任何帖子/页面上添加无限数量的Javascript 脚本和CSS样式
  • 管理Javascript 脚本加载的帖子或页面;
  • 支持自定义帖子类型;
  • 支持仅在特定帖子或页面或最新帖子上加载的能力;
  • 控制Javascript 脚本在页面上的确切加载位置——页眉、页脚、内容之前或内容之后;
  • 脚本只能在台式机或移动设备上加载。启用或禁用其中一个;
  • 使用简码手动将代码放置在任何地方;
  • 标记每个片段以便于参考;
  • 插件记录用户添加和最后编辑代码片段的时间,以及何时。

Header Footer Code Manager页面显示选项

  1. 每个帖子/页面上的站点范围
  2. 具体帖子
  3. 特定页面
  4. 具体类别
  5. 特定标签
  6. 特定的自定义帖子类型
  7. 仅最新帖子(你选择多少)
  8. 使用短代码手动放置

Header Footer Code Manager插件添加代码的位置

  1. 头部部分
  2. 页脚
  3. 内容顶部
  4. 内容底部

设备选项

  • 在所有设备上显示
  • 只有桌面
  • 仅限移动设备

支持的服务

  • 谷歌分析
  • 谷歌的AdSense
  • 谷歌标签管理器
  • Clicky Web Analytics 或其他分析跟踪脚本
  • 聊天模块,例如 Olark、Drip 或
  • Pinterest 网站验证
  • Facebook 像素、Facebook 脚本、Facebook 和:图像标签
  • 谷歌转换像素
  • 推特
  • 来自 Crazy Egg 的热图、通知栏 Hello Bar 等。
  • 它可以接受来自任何服务的任何代码片段(HTML / Javascript / CSS)
  • 这样的例子不胜枚举…

多站点注意事项

如果在多站点网络上使用此插件,请确保该插件仅在子站点级别激活。

如何使用Header Footer Code Manager 插件?

Header Footer Code Manager 是一个可以在网站的页眉或页脚,以及文章内容的上方和下方插入代码(HTML / Javascript / CSS等)的插件。

你可以在Header Footer Code Manager插件中创建代码片段,就像发表文章一样简单 ▼

header-footer-code-manager_001

你可以选择加载代码的页面和位置,也可以通过短代码(WordPress简码)调用,支持PC或手机的设置,或者两者都加载。

你可以在Header Footer Code Manager插件的代码片段列表,自定义禁用和启用代码 ▼

header-footer-code-manager_002

Header Footer Code Manager插件下载

点此进入WordPress官网下载 Header Footer Code Manager 插件

如果你想在WordPress文章的页眉页脚添加PHP代码,推荐使用这款WordPress插件——Head, Footer and Post Injections插件。

Head, Footer and Post Injections插件的使用详情,请参考以下教程介绍 ▼

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

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

wordpress-head-footer-and-post-injections-plugin-1

希望我们网站( https://www.wordpressx.com/ ) 分享的《WordPress怎么自定义页眉?安装WordPress页脚页眉插件》,对您有帮助。

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

发布于: 2022-11-03

1 Head, Footer and Post Injections插件是什么?

  • 2 为何安装Head, Footer and Post Injections插件?
    • 2.1 WordPress文章优化head代码
  • 3 Head, Footer and Post Injections插件下载

 

由于在这篇文章《WordPress怎么自定义页眉?安装WordPress页脚页眉插件》介绍的Header Footer Code Manager插件,目前无法添加PHP代码……

因此,在WordPress插件官网搜索,找到了可以在页眉页脚添加PHP代码的WordPress插件——Head, Footer and Post Injections插件。

Head, Footer and Post Injections插件是什么?

wordpress-head-footer-and-post-injections-plugin-2

Head, Footer and Post Injections插件,可以让你的WordPress网站不用安装超过10个插件,就能在Header添加以下常用代码:

  • Google Analytics
  • Facebook Pixel
  • 自定义跟踪代码
  • Google DFP 代码
  • Google Webmaster/Alexa/Bing/Tradedoubler 验证码

你只需启用Head, Footer and Post Injections插件即可集中管理代码,再也不用担心因为更换WordPress主题而丢失添加的代码。

为何安装Head, Footer and Post Injections插件?

你是否需要在帖子内容上方或之后插入广告横幅?

是的,使用Head, Footer and Post Injections插件,你可以在文章帖子或页面的顶部和底部添加代码:

  • 在文章和页面的顶部、底部和中间添加代码;
  • 区分移动设备和桌面设备(你不会在两者上显示相同的广告格式,对吗?);
  • 单独的帖子和页面配置;
  • 可以添加 PHP 代码;
  • 启用简码。
  • 就在打开的 BODY 标签之后
  • 在帖子内容中间(使用可配置的规则)
  • 模板上的任何地方(使用占位符)

WordPress文章优化head代码

在Head, Footer and Post Injections插件的“高级功能”标签下,可以优化WordPress文章的head代码:

  1. CSS 合并的样式 id 移除
  2. CSS 合并的媒体移除

wordpress-disables-header-meta-links

以下是来自Head, Footer and Post Injections插件开发者的文章介绍

CSS 合并的样式 id 移除

  • WordPress 有一个很棒的功能,我们可以将其命名为“样式队列”。每个需要将其样式添加到页面的插件都可以要求 WordPress 将其“排队”,WordPress 将正确添加它。
  • 但是 WordPress 甚至为此 CSS 添加了一个唯一的 ID,因此通常会阻止尝试合并 CSS 的每个模块或插件。为样式资源提供唯一 id 意味着有人可以引用它,而合并会破坏这种唯一性。
  • 通常根本不使用 id,如果删除,CSS 合并可以发生。例如 mod_pagespeed 要求删除 id 否则它不会合并样式。
  • (它也需要删除压缩,因此如果你使用缓存插件,请在使用 mod_pagespeed 时禁用压缩)。

CSS 合并的媒体移除

  • 如果你阅读了上面的段落,你应该知道另一个 CSS 链接属性会影响合并,它是“媒体”属性。media 属性主要用于添加一组样式以在打印时更改页面的外观,即使有更多的选项和用途可用。
  • 通常所有插件都添加了“media”属性设置为“all”的CSS,并且所有这些都可以合并。但是有一些插件可以将媒体设置为“屏幕”的 CSS 添加到“屏幕”,这在你的博客中可能重要或不重要(在此处阅读有关媒体类型的更多信息)。
  • 如果在你的博客中删除媒体属性没有问题,你应该受益于更广泛的样式合并。无论如何,“打印”媒体类型被保留。

Head, Footer and Post Injections插件下载

点此进入WordPress官网下载  Head, Footer and Post Injections 插件

希望我们网站( https://www.wordpressx.com/ ) 分享的《WordPress如何在文章添加head代码?WP插件优化head代码》,对您有帮助。

WordPress指定文章页眉页脚加载PHP/JavaScrip/CSS代码(wordpress添加页脚)

发布于: 2022-11-03

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

  • 2 在WordPress指定文章或页面添加自定义字段
  • 3 WordPress如何指定文章页眉页脚加载PHP/JavaScrip/CSS代码?

 

如果使用WordPress建站,需要在WordPress的指定某篇文章或页面,页眉页脚加载PHP/JavaScrip/CSS代码,该如何实现?

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

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

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

WordPress怎么添加自定义字段?

通常是打开WordPress主题的header.php 页眉文件,找到代码 ▼

<?php wp_head(); ?>

在它之后添加 ▼

<!-- 指定文章页面加载head自定义字段代码 开始 -->
    <?php if (is_single() || is_page()) {
$head = get_post_meta($post->ID, 'head', true); 
if (!empty($head)) { ?> 
<?php echo $head; ?> 
<?php } } ?>
<!-- 指定文章页面加载head自定义字段代码 结束 -->
  • 代码中的head是自定义字段的名称,可以自定义。

我们推荐通过WordPress插件添加以下指定文章页面加载foot自定义字段的PHP代码 ▼

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

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

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

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

wordpress-post-add-custom-fields_002-2

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

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

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

或者 ▼

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

来输出以上代码。

WordPress如何指定文章页眉页脚加载PHP/JavaScrip/CSS代码?

如果在WordPress主题的header.php文件添加自定义字段PHP代码,更换WordPress主题后自定义字段的PHP代码会丢失,需要再给新主题添加自定义字段的PHP代码。

更好的解决办法是,使用Head, Footer and Post Injections插件,实现在文章帖子或页面的页面和页脚添加自定义字段的PHP代码。

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

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

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

wordpress-head-footer-and-post-injections-plugin-3

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

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

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

微信 13280692153