在JS中使用wordpress短代码
Use wordpress shortcode in JS
我正在使用WordPress建立一个网站。在我使用的模板中,html代码的一部分是用JS编写的。我想在网站的特定部分使用幻灯片。我有一个幻灯片的快捷代码。我搜索了大量关于这个主题的文档,但他们说,如果没有重大的定制,这是不可能的。我仍然认为应该有办法绕过它,但我不知道怎么做。所以我的问题是如何在JS中使用短代码。
短代码:
[metaslider id=274]
用于创建HTML结构的JS:
Preview.prototype = {
create : function() {
// create Preview structure:
this.$title = $( '<h3></h3>' );
this.$description = $( '<p></p>' );
this.$href = $( '<div><a href="#">Visit website</a></div>' );
this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href);
this.$loading = $( '<div class="og-loading"></div>' );
this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
this.$closePreview = $( '<span class="og-close"></span>' );
this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
// append preview element to the item
this.$item.append( this.getEl() );
// set the transitions for the preview and the item
if( support ) {
this.setTransition();
}
}
我徒劳的尝试:
this.$fullimage = $( '<div class="og-fullimg">' . <?php echo do_shortcode("[metaslider id=274]"); ?> . '</div>' ).append( this.$loading );
我希望有办法解决我的问题。。。
幻灯片是JS脚本。您可以在不使用任何快捷代码的情况下初始化幻灯片放映。根据幻灯片脚本阅读文档。
PS。Metaslider使用Flexslider脚本
我知道你只需要用图像建立一个无序的列表,然后用Flexslider在JS中调用它,它就会对列表进行幻灯片放映。所以我尝试了这样的东西:
this.$fullimage = $( '<div class="og-fullimg"><ul>' +
'<li><img src="wp-content/uploads/2015/03/SurveyApp-500x370.png" alt="testImg">I DO NOT UNDERSTAND THIS ****!!!!</li>' +
'<li><img src="wp-content/uploads/projects/project' +
this.$item.index() + '-slide2.png"></li>' +
'</ul></div>' ).append( this.$loading );
但这行不通。我放在列表中的图像就是不显示。。在我的HTML结构中,我得到了以下内容:
<ul>
<li>I DO NOT UNDERSTAND THIS ****!!!!</li>
<li></li>
</ul>
怎么了?
它很管用!
我把flexfladder的JS放在脚本文件中,我还把前面展示的点击函数放在那里。对它做了一些更改,它成功了!现在看起来是这样的:
/* -- PROJECT SLIDESHOW -- */
$('.og-grid li a').click(function() {
setTimeout(function() {
var expander = document.getElementsByClassName('og-expander');
if (expander.length > 0) {
var lists = document.getElementsByClassName('slides');
var list = lists[0];
var i;
for (i = 0; i < 5; i++) {
var img = document.createElement('img');
img.src = "http://*my-link*/wp-content/uploads/"
+ "projects/" + list.id + "-slide" + (i+1) + ".png";
img.alt = "slide " + (i+1) + " van " + list.id;
var listItem = document.createElement('li');
listItem.appendChild(img);
list.appendChild(listItem);
}
$('.flexslider').flexslider({
animation: "slide",
slideDirection: "horizontal",
slideshow: false,
slideshowSpeed: 7000,
animationDuration: 600,
controlNav: true,
directionNav: true,
keyboardNav: false,
mousewheel: false,
prevText: "Vorige",
nextText: "Volgende",
pausePlay: false,
pauseText: "Pauze",
playText: "Afspelen",
randomize: false,
animationLoop: true,
pauseOnHover: false
});
}
}, 10);
});
布局非常难看,但我可以用一些自定义CSS来解决这个问题。
我太高兴了!!感谢"tutankhamun"给了我使用flexslider的想法!以那些告诉我没有自由职业者是不可能的支持人员为例:)
我成功地将图像放在了一个列表中。所以在我们讨论的JS文件中,我做了以下操作:
this.$fullimage = $( '<div class="og-fullimg"><div class="flexslider" id="flexslider"><ul class="slides" id="project' + this.$item.index() + '"></ul></div></div>' ).append( this.$loading );
在另一个JS文件中,我搜索了<ul>并使其生成如下的te列表项:
$('.og-grid li a').click(function() {
setTimeout(function() {
var expander = document.getElementsByClassName('og-expander');
if (expander.length > 0) {
var lists = document.getElementsByClassName('slides');
var list = lists[0];
var i;
for (i = 0; i < 5; i++) {
var img = document.createElement('img');
img.src = "http://*my-link*/wp-"
+ "content/uploads/projects/" + list.id + "-slide"
+ (i+1) + ".png";
img.alt = "slide " + (i+1) + " van " + list.id;
var listItem = document.createElement('li');
listItem.appendChild(img);
list.appendChild(listItem);
}
}
}, 10);
});
这部分工作,并给了我想要的图像列表。现在我想添加柔性滑块。所以我遵循了这个网站上的步骤:http://www.woothemes.com/flexslider/
它对布局做了一些事情,所以css可以工作,但flex滑块的JS不可以。我得到以下错误:https://i.stack.imgur.com/PLmbt.png
这是我现在的HTML结构:
<div class="flexslider" id="flexslider">
<ul class="slides" id="project2">
<li><img src="http://*my-link*/wp-content/uploads/projects/project2-slide1.png" alt="slide 1 van project2"></li>
<li><img src="http://*my-link*/wp-content/uploads/projects/project2-slide2.png" alt="slide 2 van project2"></li>
<li><img src="http://*my-link*/wp-content/uploads/projects/project2-slide3.png" alt="slide 3 van project2"></li>
<li><img src="http://*my-link*/wp-content/uploads/projects/project2-slide4.png" alt="slide 4 van project2"></li>
<li><img src="http://*my-link*/wp-content/uploads/projects/project2-slide5.png" alt="slide 5 van project2"></li>
</ul>
</div>
- 在WordPress站点中加载jquery.js后加载javascript代码
- 在JS中使用wordpress短代码
- 如何在WordPress中设置此代码
- 正在尝试获取此代码'在wordpress页面中工作的功能
- 如何将JSBIN代码嵌入wordpress博客
- 如何使jQuery代码不适用于已登录的Wordpress用户
- Wordpress basic'引导程序'插件开发代码
- 如何在Wordpress文件中添加自定义javascript代码"single.php”;
- 需要帮助将一些JavaScript代码添加到我的wordpress主题中
- 如何在WordPress插件中添加JavaScript代码
- 需要在重力表单wordpress插件中的表单标签中添加代码
- 导致WordPress管理部分无法工作的滚动代码
- WordPress闪烁代码不起作用
- 一行JS代码在Wordpress中被破坏了.不知道为什么
- 在wordpress中为图像生成嵌入代码
- 通过functions.php向wordpress添加点击跟踪代码
- 在wordpress中添加带有短代码的联系表单ajax
- 动态行wordpress的短代码
- 在页面上多次使用WordPress短代码时的唯一ID
- RegEx用于处理WordPress短代码