Dropdown com seleção de categoria

2

Eu criei um site de diretórios com menus suspensos no menu, permitindo que o usuário navegue pelas categorias e subcategorias. [Site]

Estou usando wp_dropdown_categories() para exibir os menus e o javascript compartilhado aqui para permitir que o usuário selecione categoria e ser navegado para essa página. Quando 'Todas as categorias' é selecionado, nada acontece. Como essa funcionalidade pode ser adicionada?

$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;

    
por MF1 07.10.2014 / 19:39

3 respostas

3

Aqui está uma variação do código que você usa. Estou usando get_categories() aqui para alcançar o mesmo objetivo. Eu tive que ajustar um pouco meu código para torná-lo aceitável para sua necessidade.

No entanto, existem outras modificações que você precisa fazer para que isso funcione. Quando você seleciona a opção All Categories , você será levado a uma página que exibirá o que você precisa exibir. Esta página você terá que manualmente criar

Não há páginas de arquivo de índice no Wordpress como você deve saber. ( Confira esta postagem que fiz sobre o mesmo assunto ). O que isto significa é que domain.com/category/ retorna um 404.

Então, para que tudo isso funcione, você terá que fazer uma cópia do page.php, renomeá-lo para algo como page-category.php (veja o codex sobre como criar modelos de página personalizados), abra-o, crie sua consulta personalizada para exibir o que você gostaria de exibir quando esta página é visitada

Agora você precisa criar sua página no back end. Sugiro que você use o slug category para que, quando visitar domain.com/category/ , essa página seja exibida. ( Lembre-se, você não pode criar páginas filho para esta página, isso quebrará a hierarquia ). Eu também fiz o código para ir para domain.com/category/ quando All Categories é selecionado

Além disso, o código deve funcionar bem. Você só precisa verificar as estruturas de URL, talvez, e também definir os parâmetros em get_categories() para atender às suas necessidades. Aqui está o código suspenso.

<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>

EDITAR

Eu realmente tive uma idéia aqui que será útil. Recentemente, fiz uma resposta sobre a exibição de todas as categorias em uma lista com todos os títulos de postagens na categoria específica. Essa mesma ideia pode ser usada em seu modelo page-category.php.

Quando um usuário seleciona a opção All Categories , eles serão direcionados para esta página, que listará todas as categorias e postará o título.

Aqui está o código completo: ( para uma explicação do código, veja minha postagem aqui )

Em suas funções.php

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

function publish_new_post() {
   delete_transient( 'category_list' );
}

No seu modelo, onde você precisa exibir sua lista

<?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>';
    }


?>
    
por Pieter Goosen 23.10.2014 / 20:45
2

Eu adicionaria isso como um comentário, mas meus pontos de repetição ainda não são altos o suficiente:)

Passei cerca de 20 minutos testando / andando pelo que você tem. Meu primeiro teste replicou o problema que você descreveu, mas quando eu configurei alguns pontos de interrupção (o evento de mudança e um LOC específico) e observei expressões usando as ferramentas de depuração incorporadas do Chrome, o problema parece ter parado de ocorrer. Estou assumindo que você corrigiu o problema ou houve alguma alteração de estado que ocorreu na minha sessão com base no uso da ferramenta Chrome Inspect para que ela funcione agora.

Você parece ter um erro no seu JS: em cada lugar você tem o código:

dropdown(x).onchange = onCatChange(x); 

(por exemplo, linhas 567, 4840, 4851), este código está lançando um erro quando o valor é 0 (a entrada 'All' é escolhida) e possivelmente também -1 (a entrada 'Browse' selecionada), embora eu suspeite que isso ocorre simplesmente porque selecionar BROWSE faz com que a entrada All de nível superior seja definida novamente por padrão (o que, por sua vez, aciona o erro).

Talvez em alguns casos, esse erro seja interrompido, fazendo com que a execução pare, dependendo das configurações dos navegadores para o tratamento de erros de Java? E ao ativar as ferramentas de depuração, posso ter alterado uma mudança no modo de execução para que o código continue com essa falha? Apenas uma ideia.

Além disso, quando seleciono "Atividades" no menu suspenso1, "Boliche" no menu suspenso2 e, em seguida, altero a seleção do menu suspenso2 para "Todas as atividades", o URL permanece como:

enlace

mas o conteúdo da página muda para exibir o texto simples "categoria".

De qualquer forma, espero que isso ajude você!

Paul

    
por Paul Zee 23.10.2014 / 19:46
2

Você provavelmente poderia apenas modificar o script acima para isso:

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;

Se você quiser incluir também -1 (PROCURAR CATEGORIAS), poderá alterar a segunda condicional para: dropdown.options[dropdown.selectedIndex].value <= 0

    
por Howdy_McGee 23.10.2014 / 21:03