在Wordpress响应工具提示上调用Javascript

时间:2013-10-18 20:47:14

标签: javascript wordpress responsive-design tooltip

所以我阅读了Wordpress关于在特定页面中调用javascript的文章。

我只想在一个页面上,因为我只使用该页面上的脚本。

我用于工具提示的教程在这里:

http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

我认为我错误地调用了脚本:

以下是我在页面上使用的代码:

<script type="text/javascript" src="http://www.frgraphicsolutions.com/working/wp-content/themes/responsive-child/tooltip.js"></script>

<abbr title="We provide companies with advice and best practices on how to promote and     advance your graphic marketing projects. Our consultative approach analyzes your current practices and offers ideas on how to lower your costs and increase the effectiveness of your (limited) marketing budget." rel="tooltip"><img style="vertical-align: middle;" alt="" src="http://frgraphicsolutions.com/wp-content/uploads/2013/06/001.png" /></abbr> 

<abbr style:"float: right" title="We offer turn-key programs for small and medium-sized business to build your brand and establish an online presence, including the development of web pages, social media and lead-generation email campaigns. Services include graphic design and copywriting." rel="tooltip"><img style="vertical-align: middle;" alt="" src="http://frgraphicsolutions.com/wp-content/uploads/2013/06/002.png" /></abbr>

它不起作用,我仍然对如何在wordpress上调用javascript感到困惑。

有人可以澄清吗?

非常感谢你。 :)

2 个答案:

答案 0 :(得分:1)

我查了一下你的网站,我发现了一个问题,为什么它可能无法正常工作。您需要编辑脚本以使用jQuery无冲突语法。

打开你的tooltip.js

和第一行

$( document ).ready( function()

改为

jQuery( document ).ready( function($)

此“情况”描述为jQuery noConflict Wrappers

  

我仍然对如何在WordPress上调用JavaScript感到困惑。

为此,请使用Google,WordPress文章enqueueing a script

答案 1 :(得分:1)

好的,所以这里是我通过一些严肃的互联网搜索和wordpress论坛帮助找到的解决方案:

1.对Javascript进行更改,使其成为noConflict(正如Ivan Hanak所说)

第一行变为:

jQuery( document ).ready( function($)

参考:

  • jQuery noConflict Wrappers

    2.在我的cild主题中创建一个function.php文件

    我想确保该功能仅适用于我网站的某个页面,这样才不会降低我网站的效果

因此文件的php看起来像这样:

<?php
if ( !function_exists( 'tool_tips' ) ) {
function tooltips() {
if ( is_page( 'Services' ) ) {
wp_enqueue_script( 'tooltips', get_stylesheet_directory_uri() . '/js/tooltips.js', '', '1.0', true );
   }
  }
}
add_action( 'wp_enqueue_scripts', 'tooltips' );

?>

  

is_page

函数允许我调用我想要加载java的任何特定页面。

参考(在Wordpress.org Codex上):

  • 功能参考/ wp入队脚本
  • 功能参考/是页面
  • 儿童主题

感谢你的帮助,我花了很多东西,但现在我的网站运行得更好了!