Suporte » Temas » Customizar cor de título de acordo com a categoria

  • Eu gostaria de saber como faço pra customizar a cor do título das notícias de acordo com a categoria.

    Por exemplo:
    Se pertencer a categoria Polícia = título vermelho
    Se pertencer a categoria Esporte = título verde
    Se pertencer a categoria Política = título amarelo

    A query chama a categoria por meio de variável, pois defino qual categoria será exibido via painel do tema:

    <div id="destaque">
    <?php $recent = new WP_Query("cat=".get_theme_mod('featuredcat')."&showposts=10"); while($recent->have_posts()) : $recent->the_post();?>
    <div id="featuredpost">
    <h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
Visualizando 15 respostas - 1 até 15 (de um total de 18)
  • Dai cara, blz?

    Olha não me deparei com um problema como esse ainda, mas.. vou tentar ajudar.

    Bom ao se gerar a categoria, pode se gerar junto a tag de estilo como um <span> um id com o nome da categoria tipo:
    <span id="<?=get_category()?>"><?=get_category()?></span>

    Ai você vai em estilo e define:

    <style type=”text/css”>
    <!–
    #id_da_categoria { color: #FF0000; }
    –>
    </style>

    Dê uma tentada, se der certo já é uma coisa boa, pode ter outras maneiras, mas não vejo outra mais fácil.

    Me avise se deu certo, hehe.

    Abraço.

    Criador do tópico pedropapito

    (@pedropapito)

    Fiz um pequeno teste e funcionou… Acho que é isso mesmo! Obrigado!

    Após eu implementar a formatação, havendo sucesso, volto para dar o tópico como resolvido =)

    Bom gente, o pedropapito conseguiu resolver mas não explicou como, já que estou com a mesma dúvida gostaria que alguém ajudasse postando a solução, preciso, estou a 5 dias tentando fazer isso, na prática o que eu altero ?

    Criador do tópico pedropapito

    (@pedropapito)

    Estou voltando a este tópico pq tenho uma dúvida.

    Anteriormente, eu havia customizado a cor dos títulos das postagens conforme a categoria, entre as seguintes tags:
    <h1 class="<?php echo cat_id_to_name(get_theme_mod('box5cat')); ?>"></h1>

    Onde, cat_id_to_name:

    function cat_id_to_name($id) {
    	foreach((array)(get_categories()) as $category) {
        	if ($id == $category->cat_ID) { return $category->cat_name; break; }
    	}

    e (get_theme_mod('box5cat')) é a categoria vinculada, nas opções do theme.

    O problema disso é que no css, ao configurar as class, tinha que ser com o nome da categoria. E com isso, categorias que tivessem acentos ou espaços, já não funcionava.

    Descobri que, ao invés de puxar o nome da categoria, eu podia puxar o slug. Então, criei uma function:

    function cat_id_to_slug($id) {
    	foreach((array)(get_categories()) as $category) {
        	if ($id == $category->cat_ID) { return $category->category_nicename; break; }
    	}

    E pra chamar a class:
    <h1 class="<?php echo cat_id_to_slug(get_theme_mod('box5cat')); ?>"></h1>

    Funcionou perfeitamente, e os títulos puxam a formatação correta, de acordo com a class criada no css.

    Só que tenho uma dúvida.

    Como faço para chamar a class em um título que esteja num lugar da página que não está previamente vinculado nas configurações do tema? Por exemplo, se eu estiver chamando um título por meio de custom fields, não será este mesmo código que utilizarei:
    <h1 class="<?php echo cat_id_to_slug(get_theme_mod('box5cat')); ?>"></h1>
    o qual está chamando a categoria referente ao box 5, customizado nas opções do tema.

    Acredito que a alteração deve ser feita no lugar do get_theme_mod('box5cat'), chamando a categoria por meio de outro código.

    Podem me ajudar?
    Grato.

    Não sei se entendi bem o que vc quer fazer, mas tenta subsituir
    <h1 class=”<?php echo cat_id_to_slug(get_theme_mod(‘box5cat’)); ?>”></h1>

    por
    <?php
    $category = get_the_category(); ?>
    <h1 class=”<?php echo $category[0]->category_nicename; ?>”></h1>

    Nesse caso ele vai pegar a primeira categoria associada ao post e usar seu slug como classe css.

    Criador do tópico pedropapito

    (@pedropapito)

    Perfeito, renato_s!!!

    Funcionou!

    Muito obrigado!

    Criador do tópico pedropapito

    (@pedropapito)

    Trago para esta discussão sobre customização de cores p/ cada categoria mais duas questões…

    Como não conheço as diferentes formas de se programar em wordpress, trago para a realidade do theme o qual estou customizando, tendo visto que o código acima não se encaixa para as seguintes ocasiões:

    1 – Como eu faria para colorir o menu (uma categoria de cada cor)? No meu theme o seguinte código exibe o menu:
    <?php wp_list_categories('orderby=name&order=ASC&title_li=&exclude=50,51'); ?>

    2 – Como eu faria para colorir o widget que exibe as últimas notícias? No meu theme o seguinte código exibe as 5 últimas notícias:
    <?php wp_get_archives('type=postbypost&limit=5&format=custom&before=<li>&after=</li>'); ?>

    Agradeço desde já.

    achei um plugin que se chama DaeColor, mas no caso do tema newswire que estava tentando colorir a categoria a única coisa que consegui foi um quadradinho colorido ao lado do post, mesmo assim não testei em outros temas, mas ele promete. Outra coisa interessante são esses temas com opções de configuração onde você escolhe quantos posts exibir e etc. no caso do newswire você escolhe a BOX e quantidade de posts, seria interessante se tivesse opção de como escolher a cor predominande dessa box específica, alguns temas que tem painel de configuração tem opção de escolha de cores, mas isso tem que ser estudado bastante se quiser ser adaptado, enquanto isso sofro procurando solução para o newswire.

    Criador do tópico pedropapito

    (@pedropapito)

    Acredito que as respostas para as questões mencionadas aqui ajudarão muitos que pretendem fazer o mesmo, tendo que visto que é uma dúvida comum e frequente entre os próprios wordpress developers, pelo que pude constatar conversando com alguns.

    Achei um plugin bacana que se chama Theme Tweaker ele muda as cores do link do site num click só, mas no caso de uma categoria de cada cor ainda não consegui fazer funcionar, mas quem quizer testar segue o link

    http://wordpress.org/extend/plugins/theme-tweaker/

    Pergunta 1:
    Examine seu html, lá deve haver algo assim para cada item da lista de categorias:
    <li class=”cat-item cat-item-21″>

    No style.css crie uma classe chamada cat-item-21 e coloque a cor que quiser (troque o 21 pelo ID da categoria).

    Pergunta 2:
    Use o Firebug para Firefox para identificar qual a DIV que envolve o widget. Mude a cor no local correspondente no style.css.

    Estou com este problema.
    Só que meu caso, a categoria foi feita de forma mais simples e somente com referência no menu (WP3.1).
    Tenho duas categorias no momento e gostaria de personalizar as cores de h1 e borda da img. Só que minha página categoria está assim:

    <div id="pagina">
      <img src="<?php bloginfo('template_directory'); ?>/midias /banner468x60.gif" width="468" height="60" class="banner_468"/>
       <?php if (have_posts()): while (have_posts()) : the_post();?>
    	<div class="post">
    	<img src="<?php echo get_option('home');?>/<?php $key="img";echo get_post_meta($post->ID,$key,true);?>" title="<?php the_title();?>" alt="<?php the_title();?>" width="170" height="105">
    	<small>Postado em: <?php the_time('j M Y');?> | Categoria: <?php the_category(', ');?></small>
    	<h1><a href="<?php the_Permalink()?>" title="<?php the_title();?>" alt="<?php the_title();?>"><?php the_title();?></a></h1>
    	<p><?php the_excerpt(20);?></p>
    </div>
    <?php endwhile; else:?>
    <?php endif;?>
    </div><!--FECHA PAGINA-->

    É a mesma estrutura da pagina inicial com um the_excerpt menor.

    Troque isso

    <div id=”pagina”>

    por

    <div id=”pagina” <?php post_class(); ?>>

    agora personalize como quiser com as classes de categorias que irão ser geradas.

    Saiba mais sobre post_class()
    http://codex.wordpress.org/Function_Reference/post_class

    Mas no meu caso, o código acima serve para todas as categorias.
    Como uso o <div id=”pagina” <?php post_class(); ?>> se este post_class se refere a class de uma categoria?
    Não seria preciso usar uma condição (if)?

    É eu errei neste caso na hora de postar o código, no seu caso seria para usar o post_class() na div de class .post assim

    <div <?php post_class('post'); ?>>

    Assim irá gerar várias classes que vc pode personalizar.

    Uma delas vc vai fazer a personalização genêrica, as duas categorias que vc quer dar um efeito diferente vc coloca a baixo da .class genêrica e sobrescreve as regras já criadas.

Visualizando 15 respostas - 1 até 15 (de um total de 18)
  • O tópico ‘Customizar cor de título de acordo com a categoria’ está fechado para novas respostas.