我的脚本在wordpress静态站点中不起作用
My Script is not working in wordpress static site
我正在我的wordpress网站上工作,我使用静态页面作为我的首页/主页。我想使用视差滚动,但我无法让我的脚本加载和工作。
我在标题中链接了它,如下所示:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scroll.js"></script>
这是我的滚动脚本:
(function($) {
$.fn.parallax = function(options) {
var windowHeight = $(window).height();
// Establish default settings
var settings = $.extend({
speed: 0.15
}, options);
// Iterate over each object in collection
return this.each( function() {
// Save a reference to the element
var $this = $(this);
// Set up Scroll Handler
$(document).scroll(function(){
var scrollTop = $(window).scrollTop();
var offset = $this.offset().top;
var height = $this.outerHeight();
// Check if above or below viewport
if (offset + height <= scrollTop || offset >= scrollTop + windowHeight) {
return;
}
var yBgPosition = Math.round((offset - scrollTop) * settings.speed);
// Apply the Y Background Position to Set the Parallax Effect
$this.css('background-position', 'center ' + yBgPosition + 'px');
});
});
}
}(jQuery));
$('.parallax-section-1').parallax({
speed : 0.15
});
我找到了一些文章,我必须使用这些功能.php并编写脚本,但我以前从未这样做过,所以我有点迷茫,所以任何帮助将不胜感激。
首先,让我们以"WordPress Way"加载脚本。 这实际上有助于简化故障排除。
为此,请编辑主题的functions.php
文件。
在该文件中,添加此 PHP 代码。 确保它位于<?php
开始/结束标签之间。
通常,我建议将其添加到文件末尾,但是如果您的文件包含此?>
- 您添加的代码在?>
之前:
add_action('enqueue_scripts', 'my_custom_script');
function my_custom_script() {
// Be sure jQuery is loading
wp_enqueue_script('jquery');
// Load your script
wp_enqueue_script('my-parallax-script', get_template_directory_uri() . '/js/scroll.js', array('jquery'), FALSE, TRUE);
}
现在 - 完成此操作后,您将需要确保您的脚本实际上正在加载。 为此,请访问该页面,然后在浏览器中执行查看源代码。 当您查看源代码时,请搜索"scroll.js"的代码 - 如果您找到它,那就太好了。 单击URL(或将其复制/粘贴到浏览器窗口中),并确保脚本引用了正确的位置。 如果没有,您需要确保将脚本移动到正确的位置,以便页面加载它。
下一步
您的脚本有问题,无法在WordPress中工作。 您正在使用$
符号引用jQuery,并且似乎您直接引用了一个元素,这意味着当脚本运行时该元素很有可能不存在,这意味着它不会产生所需的效果。
相反,我们需要做两件事。 因为WordPress在所谓的无冲突模式下加载jQuery,所以你需要使用jQuery
而不是$
来引用它。 并且您需要将代码放入文档就绪函数中。
值得庆幸的是,为了方便起见,jQuery提供了一种准备好文档的巧妙方法,它公开了文档内部的$
:
// Shorthand version of "No-conflict-safe" document ready
jQuery(function($) {
// Inside here, we can use $ instead of jQuery
$('.parallax-section-1').parallax({
speed : 0.15
});
});
如果在所有这些之后它仍然不起作用,那么您需要在浏览器中打开控制台,并查找任何 javascript 错误。 他们将帮助您确定正在发生的事情,这是解决问题的第一步。
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 监视函数从服务返回不起作用,但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- 引导工具提示在实时站点上不起作用,但在控制台上运行良好
- 当我将javascript代码放在外部站点.js文件中时,Ajax页面方法不起作用
- AJAX/jquery 在返回的 PHP 站点上不起作用
- html 站点中的菜单项不起作用
- 引导弹出框在 joomla 站点上不起作用
- 链接在具有 node.js 和 ejs 的多页站点中不起作用
- 幻灯片在下载的站点中不起作用
- jQuery 在内联网站点上不起作用
- 为什么我的 javascript 在测试环境中工作,但在实时站点上不起作用
- Javascript 谷歌地理位置在实时站点中不起作用
- 跨站点ajax请求不起作用
- 站点覆盖不起作用&;未捕获的ReferenceError:未定义closeav &;
- 移动站点中的呼叫链接不起作用
- 我的脚本在wordpress静态站点中不起作用