[英]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>
那是怎么回事?
我努力將圖像放入列表中。 因此,在我們正在討論的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>的類,並使其生成如下列表項:
$('.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);
});
該部分有效,並給了我所需的圖像列表。 現在,我想添加flexslider。 因此,我按照此網站上的步驟操作: http : //www.woothemes.com/flexslider/
它對布局有作用,所以CSS可以工作,但是flexslider的JS不能。 我收到以下錯誤: http : //i.imgur.com/Cpkhxw7.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>
有用!
我將flexslider的JS放到了腳本文件中,在這里我還放了我前面展示的click函數。 對其進行了一些更改,就可以了! 所以現在看起來像這樣:
/* -- 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的想法! 拿那些告訴我的支持者來說,沒有自由職業者是不可能的:)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.