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. 然后在“值”输入你要添加显示的代码 ▼

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

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

<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怎么自定义页眉？安装WordPress页脚页眉插件

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

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

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

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插件是什么？

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 合并的媒体移除

以下是来自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代码》，对您有帮助。