複数のタグを検索し、ページテンプレートにjQuery依存のスクリプトを追加する？

Question

私はツリービューメニューのボックスをチェックするためのこの単純なJavaScriptファイルを持っています。

treeview.js

$(".acidjs-css3-treeview").delegate("label input:checkbox", "change", function() {
    var
        checkbox = $(this),
        selectNestedListCheckbox = checkbox.parents("li").children("label").children("input"),
        siblingCheckboxes = checkbox.parentsUntil("ul","li").children("label").children("input");

    if(checkbox.is(":checked")) {
        return selectNestedListCheckbox.prop("checked", true);
    }
   selectNestedListCheckbox.prop("checked", false);
});

これを私のWPテンプレートファイルとして持っています：

テンプレート

get_header(); ?>


<?php
//create right sidebar template
kleo_switch_layout('right');
?>

<?php get_template_part('page-parts/general-title-section'); ?>

<?php get_template_part('page-parts/general-before-wrap'); ?>

<?php
if ( have_posts() ) :
    // Start the Loop.
    while ( have_posts() ) : the_post(); ?>

<!-- Begin the Treeview menu -->
<form method="get" action="<?php bloginfo('url'); ?>">
    <div class="form-group">
        <input class="form-control" type="text" name="s" value="" placeholder="Search…" maxlength="50" required="required" />
    </div>
    <p>Refine search to posts containing chosen tags:</p>
<div class="acidjs-css3-treeview">
    <ul>
        <li><input type="checkbox" id="node-0" /><label><input type="checkbox" name="tag[]" value="node-0" /><span></span></label><label for="node-0">node-0</label>
            <ul>
                <li><input type="checkbox" id="node-0-0" /><label><input type="checkbox" name="tag[]" value="node-0-0" /><span></span></label><label for="node-0-0">node-0-0</label>
                    <ul>
                        <li><input type="checkbox" id="node-0-0-0" /><label><input type="checkbox" name="tag[]" value="node-0-0-0" /><span></span></label><label for="node-0-0-0">node-0-0-0</label></li>
                        <li><input type="checkbox" id="node-0-0-1" /><label><input type="checkbox" name="tag[]" value="node-0-0-1" /><span></span></label><label for="node-0-0-1">node-0-0-1</label></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><input type="checkbox" id="node-1" /><label><input type="checkbox" name="tag[]" value="node-1" /><span></span></label><label for="node-1">node-1</label>
            <ul>
                <li><input type="checkbox" id="node-1-0" /><label><input type="checkbox" name="tag[]" value="node-1-0" /><span></span></label><label for="node-1-0">node-1-0</label>
                    <ul>
                        <li><input type="checkbox" id="node-1-0-0" /><label><input type="checkbox" name="tag[]" value="node-1-0-0" /><span></span></label><label for="node-1-0-0">node-1-0-0</label></li>
                        <li><input type="checkbox" id="node-1-0-1" /><label><input type="checkbox" name="tag[]" value="node-1-0-1" /><span></span></label><label for="node-1-0-1">node-1-0-1</label></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
<!-- End the Treeview menu -->
<input class="btn btn-primary" type="submit" value="Submit" />
</form>

<?php

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_template_directory_uri() . '-child/assets/js/treeview.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

?>

        <?php
        /*
         * Include the post format-specific template for the content. If you want to
         * use this in a child theme, then include a file called called content-___.php
         * (where ___ is the post format) and that will be used instead.
         */
        get_template_part( 'content', 'page' );
        ?>

        <?php get_template_part( 'page-parts/posts-social-share' ); ?>

        <?php if ( sq_option( 'page_comments', 0 ) == 1 ): ?>

            <!-- Begin Comments -->
            <?php comments_template( '', true ); ?>
            <!-- End Comments -->

        <?php endif; ?>

    <?php endwhile;

endif;
?>

<?php get_template_part('page-parts/general-after-wrap'); ?>

<?php get_footer(); ?>

このテンプレートのアイデアは、ユーザーが検索語に基づいて検索を実行し、結果をフィルタリングするために複数のタグを選択できるようにすることです。

私はツリービューメニューを設定しているので、ユーザーが子タグを選択した場合は、自動的にそのすべての先祖も選択されます。

これは、メニューが理想的にどのように見えて機能するかのjFiddleです。

問題

1. JavaScriptが実行されていないため、子がチェックされるときに先祖はチェックされていません。
2. 検索が正しく機能していません。そのようなクエリ文字列を返します。

URLは http://example.com/?s=searchterm&tag [] = key-Word1＆tag [] = key-Word2 と表示されます。

これにより、タグがフィルタリングされなくなります。 ここで複数のタグを検索するためのコードを見つけました。 そのリンクはWP 4.4が登場するまで機能しないことを示唆しているようです。 。これを現在のWP 4.3.1で動作させる方法はありますか。

Answer 1

Jqueryはwordpressによって "noconflict"モードでロードされます。これを使用するには、$記号を "jQuery"に置き換える必要があります。

Answer 2

Miloのアドバイスに従って、$をjQueryに置き換える必要がありました。

treeview.js

jQuery(".acidjs-css3-treeview").delegate("label input:checkbox", "change", function() {
    var
        checkbox = jQuery(this),
        selectNestedListCheckbox = checkbox.parents("li").children("label").children("input"),
        siblingCheckboxes = checkbox.parentsUntil("ul","li").children("label").children("input");

    if(checkbox.is(":checked")) {
        return selectNestedListCheckbox.prop("checked", true);
    }
   selectNestedListCheckbox.prop("checked", false);
});
});

次のようにエンキューコードをfunctions.phpファイルに移動しました。

functions.php

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_template_directory_uri() . '-child/assets/js/treeview.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

だから私のテンプレートHTMLはこれに縮小されました：

テンプレート

get_header(); ?>


<?php
//create right sidebar template
kleo_switch_layout('right');
?>

<?php get_template_part('page-parts/general-title-section'); ?>

<?php get_template_part('page-parts/general-before-wrap'); ?>

<?php
if ( have_posts() ) :
    // Start the Loop.
    while ( have_posts() ) : the_post(); ?>

<!-- Begin the Treeview menu -->
<form method="get" action="<?php bloginfo('url'); ?>">
    <div class="form-group">
        <input class="form-control" type="text" name="s" value="" placeholder="Search…" maxlength="50" required="required" />
    </div>
    <p>Refine search to posts containing chosen tags:</p>
<div class="acidjs-css3-treeview">
    <ul>
        <li><input type="checkbox" id="node-0" /><label><input type="checkbox" name="tag[]" value="node-0" /><span></span></label><label for="node-0">node-0</label>
            <ul>
                <li><input type="checkbox" id="node-0-0" /><label><input type="checkbox" name="tag[]" value="node-0-0" /><span></span></label><label for="node-0-0">node-0-0</label>
                    <ul>
                        <li><input type="checkbox" id="node-0-0-0" /><label><input type="checkbox" name="tag[]" value="node-0-0-0" /><span></span></label><label for="node-0-0-0">node-0-0-0</label></li>
                        <li><input type="checkbox" id="node-0-0-1" /><label><input type="checkbox" name="tag[]" value="node-0-0-1" /><span></span></label><label for="node-0-0-1">node-0-0-1</label></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><input type="checkbox" id="node-1" /><label><input type="checkbox" name="tag[]" value="node-1" /><span></span></label><label for="node-1">node-1</label>
            <ul>
                <li><input type="checkbox" id="node-1-0" /><label><input type="checkbox" name="tag[]" value="node-1-0" /><span></span></label><label for="node-1-0">node-1-0</label>
                    <ul>
                        <li><input type="checkbox" id="node-1-0-0" /><label><input type="checkbox" name="tag[]" value="node-1-0-0" /><span></span></label><label for="node-1-0-0">node-1-0-0</label></li>
                        <li><input type="checkbox" id="node-1-0-1" /><label><input type="checkbox" name="tag[]" value="node-1-0-1" /><span></span></label><label for="node-1-0-1">node-1-0-1</label></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
<!-- End the Treeview menu -->
<input class="btn btn-primary" type="submit" value="Submit" />
</form>

        <?php
        /*
         * Include the post format-specific template for the content. If you want to
         * use this in a child theme, then include a file called called content-___.php
         * (where ___ is the post format) and that will be used instead.
         */
        get_template_part( 'content', 'page' );
        ?>

        <?php get_template_part( 'page-parts/posts-social-share' ); ?>

        <?php if ( sq_option( 'page_comments', 0 ) == 1 ): ?>

            <!-- Begin Comments -->
            <?php comments_template( '', true ); ?>
            <!-- End Comments -->

        <?php endif; ?>

    <?php endwhile;

endif;
?>

<?php get_template_part('page-parts/general-after-wrap'); ?>

<?php get_footer(); ?>

これらの修正により、JavaScriptは正しく動作するようになりました。私はまだタグ検索のための修正が必要ですが、私はその問題に関して別の質問をします。