0

次のリンクからスライダーをWordpressで機能させるためのアドバイスを誰かが提供できることを願っています. 私は、html、css、およびかなりの量の php/mysql を使用して問題なく作業できますが、WordPress、javascript/jQuery、およびそれらが相互にどのように相互作用するかについては少し初心者です。私は検索してきましたが、解決策でこの正確な問題が見られないか、問題を完全に把握していない可能性があります。jquery が既に WP ヘッダーにエンキューされていることがわかります。

kirupa.com スライダー

私が既存のプラグインを使用していない理由は、ボタンとコンテンツの両方が動的であり、php/mysql データベース クエリと、両方を生成するための while ループに基づいているためです (製品仕様の列を考えてみてください。3 つまたは 4 つの列がラッパーに一度に表示されます)。 、上部のボタンで特定の製品を一番左の位置に移動します)。私はこの側面がうまくいったと確信しており、アニメーションを機能させるだけで十分です.現時点ではすべてが正しく読み込まれますが、ボタンは機能しません. また、デモから正確なコードを取得して、変更によって問題が発生していないことを確認してみました.WordPressのヘッダー、フッターなどをすべて含まないスタンドアロンページとして表示した場合にのみ機能します.

リンクされたスライダーを 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>
4

1 に答える 1