使用Javascript

1条评论

使用Javascript

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疑难解答

可以使用 Text Control Plugin来处理将Javascript引入文章时产生的问题。通过 Text Control Plugin,用户可以在单篇文章或所有文章的基础上,决定是否关闭WordPress的自动格式化功能,将可执行代码转换为可读代码。把需要引入Javascript的文章设置为No FormattingMarkupnl2brNo Character Formatting。用户可能需要试验一下是否设置成功。提醒:使用Text Control Pulgin时,用户需要先保存文章,然后再进行编辑,之后才能看到Text Control Pulgin的选项。

选择No Formatting会导致文章内容集中在一起,这样就不得不在其中添加段落标签以及其他HTML标签,以达到平时WordPress系统自动生成的格式效果。

Javascript无法运行时,请仔细检查是否在avascript复制到多文件或单个文件的过程中出错。确保使用文本编辑器而不是文字处理系统来创建Javascript文件。检查脚本文件和网站上的函数名称。有时Javascript会与PHP命令产生冲突而导致无法运行,但这种情况非常少见。

如果仍然有问题,请到 WordPress Support Forum上寻求帮助。

相关资源

#1
很不错的文章。具体的javascript 我感觉还是使用jquery 更方便点