编辑“WordPress中使用Javascript”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[WordPress进阶课题|上一页]] | {{Template:WordPress导航}}</span>
<div style="clear:both;"></div>
WordPress中可以运行Javascript。大多数Javascript在模板文件中运行顺利，但在文章中运行[[Javascript]]又是另一回事。

用户熟悉PHP后可能会不习惯Javascript，但却不得不用Javascript来达到特定效果。如果你自认有能力将WordPress中的[[PHP]]代码、标签或脚本替换成Javascript，那么请便，之后一切操作都会变得简单方便。但如果没有这样的能力，请静下心来看看下面这些内容，它会告诉你如何在WordPress中运行Javascript。

==在模板文件中运行Javascript==
为了在[[网站]]中重复使用[[Javascript]]，用户可以在header.php模板文件（文件位于meta标签和样式表单链接之间）的<head>部分设置对Javascript的调用。这和在其他[[HTML]]页面中使用Javascript一样。要将Javascript文件“载入”网站，请在<head>部分添加如下代码：
 <script type="text/javascript" src="/scripts/emailpage.js"></script>  
注意要将类型进行准确定义，否则网站无法验证。

在希望使用Javascript的地方设置对Javascript的调用。例如，如果需要用Javascript来为访问者设置“email this page”的链接，并希望把链接放在文章标题下方，可以用下面这种方法：
 < h3 class="storytitle">
  <a href="<?php the_permalink() ?>" rel="bookmark">
  <?php the_title(); ?></a>
 </h3>
 < div class="emailpage">
  <script type="text/javascript"><!--//--><![CDATA[//><!--
  emailpage();
  //--><!]]></script>
 </div>

==在文章中运行Javascript==
在WordPress文章中使用Javascript，可能相对麻烦一些。由于只能在一小部分实例中使用Javascript，因此没有必要在header.php中添加脚本。

如果用户偶尔使用Javascript，需要将脚本置入Javascript文件，然后从文章中调用Javascript。每个脚本都要由其函数名定义，例如：
 function updatepage(){var m="Page updated "+document.lastMo.......}  
要将Javascript置入某篇文章，用户需要联合调用脚本文件和Javascript本身：
 <script type="text/javascript" src="/scripts/updatepage.js"></script>
 <script type="text/javascript">
 <!--
 updatepage();
 //--></script>
若JavaScript标签的src属性被除去，请关闭富文本编辑器（从控制面板中进入Users > Persona选项）。即使是在HTML弹出窗口中进行手动编辑，使用富文本编辑器也会导致Javascript标签的src属性被除去。
==创建一个多脚本文件==
用户可能有一个不时会调用的脚本集，这可能是一个计算区时或距离的脚本集，也可能是能在页面上生成某种特定效果的脚本集。可以考虑将所有脚本集中到一个文件来循环调用Java脚本。

在下面的例子中，我们将多Javascript文件命名为scriptfile.js（用户可以选择其它名称），假设该文件包含updatepage，emailpage以及caltimezone脚本。用户将每个Javascript复制到文件中，确保文件的函数名称唯一，如下：
 function updatepage() {var m="Page updated "+document.lastMo.......}
 function emailpage() {mail_str = "mailto:?subject=....}
 function caltimezone() {var timerID ; function tzone(tz, os, ds, cl) {this.ct =......} 
将包含所有Javascript的脚本文件放在header.php模板文件（文件位于meta标签和样式表单链接之间）的<head>部分。文件被载入浏览器存储记忆后留在原处，等待其中的脚本被调用。

 <script type="text/javascript" src="/scripts/scriptfile.js"></script>  
在文章中希望使用Javascript的位置上，用以下方法调用：
 <script type="text/javascript">
 <!--
 updatepage();
 //--></script>
==在文章或页面中使用多Javascript文件==
使用多Javascript文件中的函数时，需要在header.php中写入Javascript引用。如果要在文章或页面的正文部分写入脚本引用，请确保Javascript文件的URL以左斜线（"/"）开头，该斜线表示用户web服务器的文件根目录（Apache服务器则是其“htdocs”目录）。

这被称为绝对[[URL]]。如果没有使用起始左斜线，就成为相对URL ("../../relative/path/to/javacripts/file.js")，相对URL按照目录结构中当前位置的相对位置来计算。使用相对URL的用户需要保留多个相对地址，因为所显示内容的不同部分由不同位置生成。例如，页面由WordPress根目录（注意：不是web服务器的跟目录）中的.php模板文件生成，文章则是由所选定主题的目录（"/path-to-wordpress-root/wp-content/themes/yourtheme/partofpost.php"）中的.php文件生成。这就是两种不同的路径。

==Javascript疑难解答==
可以使用[http://dev.wp-plugins.org/wiki/TextControl Text Control   Plugin]来处理将Javascript引入文章时产生的问题。通过[http://dev.wp-plugins.org/wiki/TextControl Text Control   Plugin]，用户可以在单篇文章或所有文章的基础上，决定是否关闭WordPress的自动格式化功能，将可执行代码转换为可读代码。把需要引入Javascript的文章设置为<STRONG>No   Formatting</STRONG> 或<STRONG>Markup</STRONG>或<STRONG>nl2br</STRONG>或<STRONG>No   Character Formatting</STRONG>。用户可能需要试验一下是否设置成功。提醒：使用Text Control   Pulgin时，用户需要先<EM>保存文章</EM>，然后再进行<EM>编辑</EM>，之后才能看到Text Control Pulgin的选项。

选择<STRONG>No   Formatting</STRONG>会导致文章内容集中在一起，这样就不得不在其中添加段落标签以及其他[[HTML]]标签，以达到平时WordPress系统自动生成的格式效果。
Javascript无法运行时，请仔细检查是否在avascript复制到多文件或单个文件的过程中出错。确保使用文本编辑器而不是文字处理系统来创建Javascript文件。检查脚本文件和网站上的函数名称。有时[[Javascript]]会与PHP命令产生冲突而导致无法运行，但这种情况非常少见。

如果仍然有问题，请到[http://codex.wordpress.org/support WordPress Support Forum]上寻求帮助。
==相关资源==
*[http://javascript.internet.com/ Javascript Source]
*[http://www.scriptdownloads.com/ Script Downloads]
*[http://www.hotscripts.com/ Hotscripts]
*[http://php.resourceindex.com/ PHP Resource Index]
*[http://www.onlyphp.com/ Only PHP]
*[http://www.php-scripts.com/ PHP   Scripts] 
==相关条目==
*[[Drupal]] 
*[[OBLOG]] 
*[[X-Space]] 
*[[SaBlog-X]] 
*[[Bo-Blog]]

[[category:WordPress中文文档|W]]
[[category:WordPress网站开发|W]]