Suporte » Plugins » Filtro por categoria não funciona

  • Bom dia,

    Criei um template para exibir apenas a categoria “portfolio” dos posts adicionados e dentro desse template, incluí um filtro com as subcategorias.

    Com o intuito de que, quando clicar em uma subcategoria, aparecer na mesma página, os itens pertencentes a subcategoria em questão.

    Página criada: http://www.afirmaweb.com.br/portfolio-2/

    Código do Filtro:

    <div class="filter">
    						<?php
    						/*RECUPERA SUBCATEGORIAS PARA O FILTRO - ADICIONADO POR PAULO FAUSTINI*/
    						$filtro = array(
    							'type'                     => 'post',
    							'child_of'                 => 60,
    							'parent'                   => '',
    							'orderby'                  => 'name',
    							'order'                    => 'ASC',
    							'hide_empty'               => 0,
    							'hierarchical'             => 1,
    							'exclude'                  => '',
    							'include'                  => '',
    							'number'                   => '',
    							'taxonomy'                 => 'category',
    							'pad_counts'               => false
    						);
    							$filters = get_categories($filtro);
    						?>
    						<ul id="works_filter">
    							<li data-id="term-all">
    
    								<a href="#" class="active"><?php _e('TUDO', __SLUG__); ?></a>
    
    							</li>
    							<?php foreach($filters as $filter):	?>
    
    							<li data-id="<?php echo str_replace(' ', '-', strtolower($filter->name)); ?>">
    
    								<a href="#"><?php echo $filter->name; ?></a>
    
    							</li>
    							<?php endforeach; ?>
    
    						</ul>
    						<span class="clear"></span>
    					</div>

    Código para exibição dos posts:

    <!-- EXIBIÇÃO DOS POSTS -->
    				<?php if(have_posts()) : ?>
    
    					<div id="posts" class="triple grid">
    
    						<?php while(have_posts()): the_post(); ?>
    						<div id="post-<?php the_ID(); ?>" <?php post_class(array('postbox')); ?>>
    							<div class="posthead">
    
    							<?php
    								$postmeta = get_post_meta(get_the_ID(), 'post_meta_box', true);
    								if(is_array($postmeta) && $postmeta['video']['type'] != '0'):
    
    									if($postmeta['video']['type'] == 'vimeo'): ?>
    									<iframe src="http://player.vimeo.com/video/<?php echo $postmeta['video']['url'];?>?title=0&byline=0&portrait=0" width="100%" height="240" frameborder="0" webkitallowfullscreen="" allowfullscreen=""></iframe>
    									<?php elseif($postmeta['video']['type'] == 'youtube'): ?>
    									<iframe width="100%" height="240" src="http://www.youtube.com/embed/<?php echo $postmeta['video']['url'];?>" frameborder="0" allowfullscreen></iframe>
    									<?php
    									endif;
    								else:
    									if ( has_post_thumbnail() ) {
    										the_post_thumbnail('blog-thumb');
    									}
    								endif;
    							?>									
    
    							</div>
    							<div class="postboxmain">
    								<h2>
    									<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    								</h2>
    								<p>
    									<?php echo excerpt(170); ?>
    								</p>
    							</div>
    
    							<div class="postboxfooter">
    							</div>
    						</div>
    						<?php endwhile; ?>
    						<span class="clear"></span>
    					</div>
    					<?php else: ?>
    						<div class="postbox">
    							<div class="postboxmain">
    								<p><?php _e( 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.', __SLUG__ ); ?></p>
    							</div>
    							<div class="postboxfooter"></div>
    						</div>
    					<?php endif; ?>
    				</section>
    				<!-- end inside -->
    
    			</article>
    			<!-- end main -->
    <?php get_footer(); ?>

    Alguém saberia me informar, como fazer meu filtro funcionar da maneira pretendida?

Visualizando 9 respostas - 1 até 9 (de um total de 9)
  • Modifique no seu codigo somente esta linha e provavelmente ira funcionar.

    <a href="<?php echo site_url();?>/?category_name=<?php echo $filter->slug; ?>"><?php echo $filter->name; ?></a>

    Certifique-se que voce possui o arquivo search.php com o seu segundo bloco de code.

    Obrigado pela dica Leo, mas dessa forma o link envia o usuário para a página da categoria. O que estou tentando fazer é que esse filtro funcione apenas nessa página, mostrando os resultados na mesma página.

    Um bom exemplo do que eu quero que aconteça, é o link http://qualitypress.com.br/solucoes Onde cada tipo de solução, no meu caso seria cada subcategoria.

    Grato pela atenção.

    Paulo, então você quer que role esse filtro, mas imitando um Ajax sem carregar? Entendi.

    Deixe os links como te falei para deixar assíncrono e não prejudicar seu permalinks e SEO.

    No filtro eu inseri uma class .all-posts para facilitar. Modifique aqui no seu script também utilizando o parâmetro $filter->slug que o WordPress já fornece:

    <ul id="works_filter">
        <li data-id="term-all">
            <a href="#" class="active all-posts"><?php _e('TUDO', __SLUG__); ?></a>
        </li>
    
        <?php foreach($filters as $filter):	?>
            <li data-id="<?php echo $filter->slug; ?>">
                <a href="<?php echo site_url();?>/?category_name=<?php echo $filter->slug; ?>"><?php echo $filter->name; ?></a>
            </li>
        <?php endforeach; ?>
    </ul>

    Agora é só adicionar esta função jQuery para exibir/ocultar no evento click:

    jQuery(document).ready(function(){
    
        jQuery('#works_filter>li>a').click(function(e){
            e.preventDefault(); //cancela o link via JS
    
            var postFilter = '.post.type-post.category-' + jQuery(this).parent().attr('data-id');
    
            jQuery('#posts>div').hide(); //oculta todos os posts
            jQuery('#posts>div' + postFilter).show(); //exibe todos os posts referente a sua busca
    
        });
    
        jQuery('#works_filter>li>a.all-posts').click(function(e){
            e.preventDefault(); //cancela o link via JS
            jQuery('#posts>div').show(); //exibe todos posts independente do filtro
        });
    
    });

    Mude de hide() para fadeOut() e show() para fadeIn() caso queira mais animado.

    funcionou?

    Boa noite Leo,

    Cara, muito obrigado. Funcionou, agora só preciso que os posts fiquem organizados, entra no link http://www.afirmaweb.com.br/portfolio-2/ e clique na opção “Marketing Digital”, para você entender o que estou querendo.

    Obrigado desde então.

    Paulo, não sei o que acontece com o seu script, mas todos os seus boxes(divs) estão posicionados com position absolute. O ideal era você os posicionar somente com float:left e uma margem…

    Acredito que seja o <?php post_class(array(‘postbox’)); ?> que você está utilizando.

    Eu fiz um teste aqui usando essa formatação de CSS e ficou melhor. Mas acho que você vai ter que ajustar toda a sua estrutura pra ficar mais dinânimca:

    #posts>.post {
        position: initial,
        top: auto,
        left: auto,
        height: 486px
    }

    deixando o tamanho dinâmico não ficou muito bom. tente trabalhar com floats e veja o que consegue!

    Deu certo?

    Paulo ou Leo, poderia me enviar no e-mail,
    copie aqui mais fiquei meio confuso e nao consegui fazer funcionar..

    [E-mail removido por um moderador]

    • Esta resposta foi modificada 3 anos, 10 meses atrás por Claudio Sanches.
Visualizando 9 respostas - 1 até 9 (de um total de 9)
  • O tópico ‘Filtro por categoria não funciona’ está fechado para novas respostas.