Question

我正在使用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 );

我希望有办法解决我的问题...

Answer 1

幻灯片是JS脚本。您可以在不使用任何短代码的情况下初始化幻灯片。阅读幻灯片脚本下面的文档。

PS。 Metaslider使用Flexslider脚本

Answer 2

我知道你只需要用图像放置一个无序列表然后用JSs用Flexslider调用它，它就会生成列表的幻灯片。所以我试过这样的事情：

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>

这是怎么回事？

Answer 3

我努力将图像放入列表中。所以在我们讨论的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文件中，我搜索了＆lt;的类。 ul＆gt;并使它生成如下列表项：

$('.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>

Answer 4

有效！

我将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的想法！拿那些支持我的人来说，如果没有自由职业者，这是不可能的：）

在JS中使用wordpress短代码

4 个答案: