Question

我希望有人可以提供一些建议，让您从以下链接获取滑块，以便在Wordpress中运行。我很好用html，css和相当数量的php / mysql，但是我有点像WordPress，javascript / jQuery以及它们如何互相交互的菜鸟。我一直在寻找并且没有看到解决方案的确切问题，或者可能只是没有完全掌握问题。我确实看到jquery已经在我们的WP头中加入了。

kirupa.com slider

我没有使用现有插件的原因是因为按钮和内容都是动态的，基于php / mysql数据库查询和while循环来生成两者（想想产品规格的列，3或4可见包装一下子，顶部的按钮将特定产品带到最左边的位置。我确定我有这方面的工作，只需要让动画工作 - 目前一切都正确加载但按钮不起作用。我也尝试从演示中获取确切的代码，以确保我没有对我的更改进行任何操作 - 只有在查看为独立页面时才有效，没有所有WordPress页眉，页脚等。

如果有人能指出需要做什么才能使链接滑块在WordPress模板中运行，我可以将其应用到实际项目中，我将永远感激不尽！也许有人做了类似的事情，也可以提出其他方法来解决它 - 无论哪种方式，我都是耳朵！

提前致谢！

编辑：作为测试，在尝试对此进行排序时，我直接从上面的链接演示中获取源代码 - 这个动画作为一个htm页面自己动手，但是我将它带入WordPress页面模板的尝试失败了。我遗漏了CSS因为我不认为这是问题所在，但这里是演示正文中的全部代码。我假设我需要以不同的方式处理脚本部分 - 我是否需要创建一个单独的js文件并将其排队？标记不同？我对此一无所知，并感谢任何帮助。如果你打算在WordPress模板中运行它，你会做什么不同的？

    <div id="contentContainer">
    <div id="wrapper">
        <div id="itemOne" class="content">
            <h1>AaBbCc</h1>
            <p>For some reason, everybody likes <strong>Helvetica</strong>. In order to fit in, I have learned to like it as well.</p>
        </div>
        <div id="itemTwo" class="content">
            <h1>AaBbCc</h1>
            <p>Did you know that <strong>Georgia</strong> was designed by 
            Matthew Carter in 1993? Neither did I.</p>
        </div>
        <div id="itemThree" class="content">
            <h1>AaBbCc</h1>
            <p>The Impact font is used by people who want to make a difference 
            in the world.</p>
        </div>
        <div id="itemFour" class="content">
            <h1>AaBbCc</h1>
            <p>By using Comic Sans, the things you write automatically become 
            funnier. Try it out sometime!</p>
        </div>
    </div>
</div>
<div id="navLinks">
    <ul>
        <li class="itemLinks" data-pos="0px">1</li>
        <li class="itemLinks" data-pos="-550px">2</li>
        <li class="itemLinks" data-pos="-1100px">3</li>
        <li class="itemLinks" data-pos="-1650px">4</li>
    </ul>
</div>
<script src="http://www.kirupa.com/html5/examples/js/prefixfree.min.js"></script>
<script>
    var links = document.querySelectorAll(".itemLinks");
    var wrapper = document.getElementById("wrapper");

    for (var i = 0; i < links.length; i++) {
        var link = links[i];
        link.addEventListener('click', setPosition, false);
    }

    addClass(links[0], "active");

    function setPosition(e) {
        removeActiveLinks();

        var clickedLink = e.target;
        addClass(clickedLink, "active");

        var position = clickedLink.getAttribute("data-pos");
        wrapper.style.left = position;
    }

    function removeActiveLinks() {
        for (var i = 0; i < links.length; i++) {
            removeClass(links[i], "active");
        }
    }

    function addClass(element, classToAdd) {
        var currentClassValue = element.className;

        if (currentClassValue.indexOf(classToAdd) == -1) {
            if ((currentClassValue == null) || (currentClassValue === "")) {
                element.className = classToAdd;
            } else {
                element.className += " " + classToAdd;
            }
        }
    }

    function removeClass(element, classToRemove) {
        var currentClassValue = element.className;

        // removing a class value when there is more than one class value present
        // and the class you want to remove is not the first one
        if (currentClassValue.indexOf(" " + classToRemove) != -1) {
            element.className = element.className.replace(" " + classToRemove, "");
            return;
        }

        // removing the first class value when there is more than one class
        // value present
        if (currentClassValue.indexOf(classToRemove + " ") != -1) {
            element.className = element.className.replace(classToRemove + " ", "");
            return;
        }

        // removing the first class value when there is only one class value 
        // present
        if (currentClassValue.indexOf(classToRemove) != -1) {
            element.className = element.className.replace(classToRemove, "");
            return;
        }
    }
</script>

Answer 1

让它工作，谢谢你指出我正确的方向。如果其他人偶然发现并且和我一样对WP很新，那么脚本部分需要排队 - 这篇文章很好地说明了这一点：

http://wpcandy.com/teaches/how-to-load-scripts-in-wordpress-themes/#.UkBv7T8TPTo

整个脚本部分按原样保存在js文件中，并放在主题文件夹中。在我的项目中，我按照我链接的说明在functions.php中注册了它，并在实际项目页面上将它排入php中，因为它只需要在那一页上。

WordPress中的动态内容滑块

1 个答案: