带有类别选择的下拉列表

时间:2014-10-07 作者:MF1

我创建了一个目录网站,菜单中有下拉菜单,允许用户浏览整个类别和子类别。[网站]

我正在使用wp_dropdown_categories() 显示菜单和共享的javascripthere 允许用户选择类别并导航到该页面。选择“所有类别”时,不会发生任何事情。如何添加该功能?

$args = array(
    \'show_option_all\'    => \'All Categories\',
    \'show_option_none\'   => \'BROWSE\',
    \'orderby\'            => \'NAME\', 
    \'order\'              => \'ASC\',
    \'show_count\'         => 0,
    \'hide_empty\'         => 1, 
    \'child_of\'           => 0,
    \'exclude\'            => 1,
    \'echo\'               => 1,
    \'selected\'           => $cat_id2->term_id,
    \'hierarchical\'       => 1, 
    \'name\'               => \'cat\',
    \'id\'                 => \'\',
    \'class\'              => \'postform\',
    \'depth\'              => 1,
    \'tab_index\'          => 0,
    \'taxonomy\'           => \'category\',
    \'hide_if_empty\'      => false,
);

wp_dropdown_categories( $args );
JS公司

<script type="text/javascript">
var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option(\'home\'); ?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
}
dropdown.onchange = onCatChange;

3 个回复
最合适的回答,由SO网友:Pieter Goosen 整理而成

下面是您使用的代码的变体。我正在使用get_categories() 在这里实现同样的目标。我不得不稍微调整我的代码,使其符合您的需要。

不过,您还需要进行其他修改才能使其正常工作。当您选择All Categories 选项,您将进入一个页面,该页面将显示您需要显示的内容。此页您必须manually 创造

您可能知道,Wordpress中没有索引存档页。(退房this post 我在同一个主题上做过。这意味着,domain.com/category/ 返回404。

所以,要使这些都起作用,您必须制作一份page的副本。php,将其重命名为类似于页面类别的内容。php(参见codex 关于如何创建自定义页面模板),打开它,创建custom query 显示访问此页面时要显示的内容

现在需要在后端创建页面。我建议你用鼻涕虫category 所以当你访问domain.com/category/, 将显示此页面。记住,你cannot 为此页面创建子页面,它将打破层次结构。我还编写了要转到的代码domain.com/category/ 什么时候All Categories 已选定

除此之外,代码应该可以正常工作。您只需要检查URL结构,并在中设置参数get_categories() 满足您的需求。这是下拉代码。

<select name="event-dropdown" onchange=\'document.location.href=this.options[this.selectedIndex].value;\'> 
    <option value=""><?php echo esc_attr(__(\'Select Category\')); ?></option> 

    <?php 
        $option = \'<option value="\' . get_option(\'home\') . \'/category/">All Categories</option>\'; // change category to your custom page slug
        $categories = get_categories(); 
        foreach ($categories as $category) {
            $option .= \'<option value="\'.get_option(\'home\').\'/category/\'.$category->slug.\'">\';
            $option .= $category->cat_name;
            $option .= \' (\'.$category->category_count.\')\';
            $option .= \'</option>\';
        }
        echo $option;
    ?>
</select>

EDIT

实际上,我有一个主意,会派上用场的。我最近回答了在一个列表中显示所有类别的问题,其中包含特定类别下的所有帖子标题。同样的想法也可以用于您的页面类别。php模板。

当用户选择All Categories 选项,他们将被带到此页面,该页面将列出所有类别和帖子标题。

以下是完整的代码:(有关代码的解释,请参阅我的帖子here

在您的功能中。php

add_action( \'transition_post_status\', \'publish_new_post\', 10, 3 );

function publish_new_post() {
   delete_transient( \'category_list\' );
}
在需要显示列表的模板中

<?php
if ( false === ( $q = get_transient( \'category_list\' ) ) ) {

    $args = array( 
        \'posts_per_page\' => -1
    );

    $query = new WP_Query($args); 

    $q = array();

    while ( $query->have_posts() ) { 

        $query->the_post(); 

        $a = \'<a href="\'. get_permalink() .\'">\' . get_the_title() .\'</a>\';

        $categories = get_the_category();

        foreach ( $categories as $key=>$category ) {

            $b = \'<a href="\' . get_category_link( $category ) . \'">\' . $category->name . \'</a>\';    

        }

        $q[$b][] = $a; // Create an array with the category names and post titles
    }


    /* Restore original Post Data */
    wp_reset_postdata();

set_transient( \'category_list\', $q, 12 * HOUR_IN_SECONDS );
}

foreach ($q as $key=>$values) {
        echo $key;

        echo \'<ul>\';
            foreach ($values as $value){
                echo \'<li>\' . $value . \'</li>\';
            }
        echo \'</ul>\';
    }


?>

SO网友:Howdy_McGee

您可以将上面的脚本修改为:

var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option(\'home\'); ?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
    else if ( dropdown.options[dropdown.selectedIndex].value == 0 ) {
        location.href = "<?php echo get_option(\'home\'); ?>";
    }
}
dropdown.onchange = onCatChange;
如果还想包括-1(浏览类别),可以将第二个条件更改为:dropdown.options[dropdown.selectedIndex].value <= 0

SO网友:Paul Zee

我本来想加上这个作为评论,但我的代表分数还不够高:)

我花了大约20分钟的时间来测试/浏览您所拥有的内容。我的第一个测试复制了您描述的问题,但当我使用内置的Chrome调试工具设置一些断点(更改事件和特定的LOC)和监视表达式时,问题似乎已经停止了。我假设您已经修复了该问题,或者在使用Chrome Inspect工具的基础上,我的会话发生了一些状态更改,因此它现在可以工作了。

您的JS中似乎有一个错误:在每个地方都有代码:

dropdown(x).onchange = onCatChange(x); 
(例如,第567、4840、4851行),当值为0(选择“All”条目)并且可能也为-1(选择“Browse”条目)时,此代码会引发错误,尽管我怀疑这只是因为选择Browse会导致默认情况下再次设置顶级All条目(这反过来会触发错误)。

也许在某些情况下,抛出此错误会导致执行停止,具体取决于浏览器的Java错误处理设置?在打开调试工具的过程中,我可能切换了执行模式的更改,以便代码继续通过此故障?只是一个想法。

此外,当我在Dropdown1中选择“活动”,在Dropdown2中选择“保龄球”,然后将Dropdown2选择更改为“所有活动”时,URL保持为:

http://www.mydetroitjewishdirectory.com/category/activities/bowling/

但页面内容更改为显示简单的文本“类别”。

无论如何,希望这能帮到你!

保罗

结束

相关推荐

WP_DROPDOWN_PAGES默认值

我有一个页面下拉菜单,但在我转到所选页面后,让我们说“关于我们”,dropbown的默认标题按钮是页面的标题,“关于我们”,因此我希望标题/默认选项是“请选择页面”或类似的内容。我的代码是:wp_dropdown_pages(\"title_li=&depth=1&sort_column=menu_order&child_of=\".$post->post_parent.\"&echo=0&selected=$currPage\"); 我做错了什么,