1

codepen のこのコードを使用して、WordPress アーカイブおよびカテゴリ ウィジェット用のカスタム選択ボックスを作成することができました。リンクが期待どおりに機能しないことを除いて、すべてのブラウザでうまく機能します。つまり、オプションを選択すると、オプション内のリンクを使用してカテゴリ ページに移動する必要があります。

以下は、デフォルトの WordPress選択コードです。

<div id="categories-2" class="widget_categories widget">
    <div class="widgettitle">
        <h3>Categories</h3>
    </div>
    <select name="cat" id="cat" class="postform">
        <option value="-1">Select Category</option>
        <option class="level-0" value="10">Education&nbsp;&nbsp;(2)</option>
        <option class="level-0" value="8">Entertainment&nbsp;&nbsp;(2)</option>
        <option class="level-0" value="11">Finance&nbsp;&nbsp;(2)</option>
    </select>
</div>

以下は、 codepen から JavaScript コードを追加した後の WordPress選択コードです。

<div id="categories-2" class="widget_categories widget">
    <div class="widgettitle">
        <h3>Categories</h3>
    </div>
    <div class="select">
        <select name="cat" id="cat" class="postform select-hidden">
            <option value="-1">Select Category</option>
            <option class="level-0" value="10">Education&nbsp;&nbsp;(2)</option>
            <option class="level-0" value="8">Entertainment&nbsp;&nbsp;(2)</option>
            <option class="level-0" value="11">Finance&nbsp;&nbsp;(2)</option>
        </select>
        <div class="select-styled">"Select Category"</div>
            <ul class="select-options" style="display: none;">
                <li rel="-1">Select Category</li>
                <li rel="10">Education&nbsp;&nbsp;(2)</li>
                <li rel="8">Entertainment&nbsp;&nbsp;(2)</li>
                <li rel="11">Finance&nbsp;&nbsp;(2)</li>
            </ul>
        </div>
    </div>
</div>

ご覧のとおり、私が使用した JavaScript コードは、オプション タグ<option> を<li>tags とvalue=""に変更しましたrel=""。以下は、変更を行う JavaScript コードです。

$('select').each(function(){
    var $this = $(this), numberOfOptions = $(this).children('option').length;

    $this.addClass('select-hidden'); 
    $this.wrap('<div class="select"></div>');
    $this.after('<div class="select-styled"></div>');

    var $styledSelect = $this.next('div.select-styled');
    $styledSelect.text($this.children('option').eq(0).text());

    var $list = $('<ul />', {
        'class': 'select-options'
    }).insertAfter($styledSelect);

    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    var $listItems = $list.children('li');

    $styledSelect.click(function(e) {
        e.stopPropagation();
        $('div.select-styled.active').each(function(){
            $(this).removeClass('active').next('ul.select-options').hide();
        });
        $(this).toggleClass('active').next('ul.select-options').toggle();
    });

    $listItems.click(function(e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        $list.hide();
        //console.log($this.val());
    });

    $(document).click(function() {
        $styledSelect.removeClass('active');
        $list.hide();
    });

});

私は JavaScript の専門家ではありません。コードを変更して、選択ボックスで選択したリンクが参照されたカテゴリまたはアーカイブ ページに移動するのを手伝ってくれる人が必要です。

4

0 に答える 0