本地主机中的 WordPress 滑块 url 问题

Posted

技术标签:

【中文标题】本地主机中的 WordPress 滑块 url 问题【英文标题】：WordPress slider url issue in a localhost 【发布时间】：2018-08-11 06:00:52 【问题描述】：

我正在尝试根据以下代码在本地主机的 wordpress 中实现照片滑块：

https://github.com/devfreelex/sliderdevmean 和视频 https://www.youtube.com/watch?v=_nSPiKWWmhs

问题如下：

在索引页面中我有 html 代码：

<article class="slider_item active"  slider-bg="image/slider/slide1.jpg">
<div class="slider_content">
    <h1>The title</h1>
        <p>Lorem ipsum dolor sit amet, nemo voluptatum accusamus!</p>
</div>

在 jQuery 页面中我有 js 代码：

// DEFINE BACKGROUND DO SLIDE
(function($)
    $('.slider_item').each(function()
        var sliderBg = $(this).attr('slider-bg');
        $(this).css('background-image': 'url("http://localhost/wordpress/wp-content/themes/photographysite/"'+sliderBg+')');
    );
(jQuery));

目标是将url传递给CSS

    element.style  background-image: url('http://localhost/wordpress/wp-content/themes/photographysite/image/slider/slide1.jpg');

http://localhost/wordpress/wp-content/themes/photographysite/image/slider/slide1.jpg 不起作用，那么如何将 url 参数与图像一起传递？

【问题讨论】：

/photographysite/"'+ 去掉 URL 中的双引号。应该移到最后')'追加 我不知道sliderBg 是什么。如果它与问题中的一样，那么它是一个不完整的网址。您实际上只需要将 " 移动到字符串连接中的正确位置。 'url("http://localhost/wordpress/wp-content/themes/photographysite/'+sliderBg+'")' 嗨 Taplar 你的意思是： 然后是 $(this).css('background-image': 'url ('+sliderBg+')');也没有用
如果您从同一个地方获取所有图像，则将变量设置为该目的地可能会更容易。 @João 不，我是说如果您更改连接问题，那么您无需更改有关元素上的值或其他任何内容的任何其他内容。现在您正在错误地构建 url，因为它将被构建为 'url("http://localhost/wordpress/wp-content/themes/photographysite/"image/slider/slide1.jpg)' 。你明白为什么这种连接是错误的了吗？ 【参考方案1】：

我设法复制了错误。我做了一些事情来纠正这个问题。

1) 我通过我的functions.php 文件加载了.css 和.js 文件，这些文件将包含（或创建）在每个Wordpress 主题中。如果您需要帮助，请关注LINK。

2) 更改了slider.js 中的编码以使用我的完整本地路径。例如，我的是http://localhost/sliderJSreplica.com/wp-content/themes/twentyseventeen/。所以我的整个代码是：

(function($)
    $('.slider_item').each(function()
        var sliderBg = $(this).attr('slider-bg');
        $(this).css('background-image': 'url(http://localhost/sliderJSreplica.com/wp-content/themes/twentyseventeen/'+sliderBg+')');
    );
(jQuery));

请注意我的撇号所在的位置，因为您可能放错了位置。

3) 根据每张幻灯片将属性slider-bg 的HTML 标记为slider-bg="image/slider/slide1.jpg"&gt;。

我希望这对你有用！如果没有，我很乐意通过 TeamViewer 提供一对一支持来进一步提供帮助。

【讨论】：

【参考方案2】：

首先，我认为您在 Wordpress 中使用 jQuery 时可能会遇到我以前遇到的问题。尝试在 function 开始之前添加此 variable 并将所有 $ 替换为 j。

var j = jQuery.noConflict();

其次，请将 Wordpress 问题发送至Wordpress Stack Exchange。它将帮助您更快地找到答案。

【讨论】：

他正在使用 IIFE，传入 jQuery，然后使用参数 $。没有冲突不应该是他的问题。 我知道这是真的，你是对的，但是我以完全相同的方式做到了，并且遇到了类似的问题。它对我有用的唯一方法是使用noConflict 解决方案。这可能不是他的实例所需的解决方案，但值得一试。 将 jQuery 分配给不同的变量并使用该变量与将 jQuery 传递到 IIFE 之间的区别非常有限。在一种情况下，您自己创建变量，而在另一种情况下，您使用函数参数命名来为您创建变量。它们实际上是相同的。 当我第一次看到解决方案时，我也不认为它会起作用，但它确实起作用了。可能与插件发生冲突，但无论出于何种原因，使用 IIFE 对我来说完全停止工作，noConflict 是唯一有效的方法。 亲爱的团队，我下载了带有 和 $(this).css( '背景图片': 'url('+sliderBg+')');并且它的串联工作 100% 没有任何冲突问题

以上是关于本地主机中的 WordPress 滑块 url 问题的主要内容，如果未能解决你的问题，请参考以下文章

如何解决本地主机中的 WordPress 登录问题？

我想在本地主机 xampp 上恢复 wordpress 站点备份

WordPress 本地主机站点重定向到实时站点

如何删除转到 wordpress 的旧本地主机？

如何删除转到 wordpress 的旧本地主机？

本地主机中的 Wordpress 空白页