Question

在WordPress中，默认存档窗口小部件显示一个表单选择，其中包含每月存档列表并执行on change：

document.location.href = this.options [this.selectedIndex]。价值;

我需要相同的功能，但风格类似于Bootstrap dropbdown

<div class="btn-group dropdown">
    <button class="btn btn-link">Dropdown Button</button>
    <button class="btn dropdown-toggle btn-large" data-toggle="dropdown"><span class="caret"></span></button>

    <ul class="dropdown-menu">
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
    </ul>
</div>

我怎样才能做到这一点？

是否有任何类可以添加到select中，以便我获得Bootstrap下拉样式以及相同的功能？

Answer 1

无法修改该窗口小部件的输出。您必须复制整个WP_Widgets_Archives并创建自己的小部件。

请参阅Widgets_API以及这篇旧的，但仍然有效的文章：The complete guide to creating widgets in WordPress 2.8。

您必须将代码放在此块中：

if ( $d ) {
    ?>      
        <div class="btn-group dropdown">
            <button class="btn btn-link">Dropdown Button</button>
            <button class="btn dropdown-toggle btn-large" data-toggle="dropdown"><span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu">
                <?php wp_get_archives( array('type' => 'monthly', 'format' => 'html', 'show_post_count' => $c)); ?>
            </ul>
        </div>
    <?php
}

请注意html的格式wp_get_archives，这会产生<li>列表。

Answer 2

如果您使用的是 SASS

@import "~bootstrap/scss/bootstrap";

.widget_archive select {
  @extend .form-control;
}

Archives小部件下拉列表样式为Bootstrap下拉列表

2 个答案: