Para aqueles, que como eu adora o Gimp, segue 5 links bacanas com tutoriais do Gimp, para aguçar nossa criatividade e habilidades com ele.
Quem tiver outros links, pode colocar nos cometários.
Inté ++ Pessoal
Categorias: Design · Software-Livre · Tutoriais
Etiquetado: gimp, Links, Tutoriais
Olá pessoal depois de muito tempo sem postar nada por aqui, trago uma dica bacana, irei mostrar como fazer um Menu Accordion simples com Jquery incorporado com a Template Tag wp_list_categories, vamos lá então.
Passo 1:
Baixe o Jquery, caso não o tenha ainda.
Passo 2:
Renomeie o arquivo baixado para jquery.js e coloque o arquivo na pasta do seu tema, apreoveite também e crie um arquivo chamado menuaccordion.js, que vamos utilizar mais pra frente.
Passo 3:
Abra o arquivo header.php e insira as seguintes linha dentro do <head></head>:
Onde <?php bloginfo(‘template_directory’);?> é o endereço dos diretórios do WordPress até chegar no seu tema([...]wp-content/themes[...]) e jquery.js e menuaccordion.js são os arquivos javascript que você baixou e criou respectivamente na pasta do seu tema.
Passo 4:
Agora vamos colocar o código para fazer o efeito accordeon dentro do arquivo menuaccordion.js:
Não esqueça de salvá-lo.
Passo 5:
Agora vamos fazer o CSS, abra o arquivo style.css e cole o seguinte código:
Não esqueça de salvá-lo.
Passo 6:
Agora a parte mais divertida, vamos manipular a Template Tag wp_list_categories é bem simples, escolha um aquivo para inserir o código abaixo(pode ser o header.php, ou até o sidebar.php)
<ul id=”accordion-container”>/* essa parte é muito importante, essa “ul” ele engloba toda a formação do accordion*/
<li>/*aqui começa a primeira opção do menu*/
<a href=”#”>Opção 1</a>/* Link que expandirá quando clicado, para abrir as sub-opções, que nada mais é que as categorias que você definir*/
<ul class=”accordion-menu”>/*class responsável por englobar cada Opção do Menu*/
<?php wp_list_categories(‘title_li=&include=48, 50′); ?>/* Aqui você definirá o ID das categorias que serão apresentadas nessa opção, os números 48, 50 são os ID desse exemplo, o parâmetro “title_li=“ está vazia para que não apareça a palavra Categoria acimas das opções*/
</ul>
</li>/*aqui termina a primeira opção do menu*/
<li>/*aqui começa a segunda opção do menu*/
<a href=”#”>Opção 2</a>/*Idem da Opção 1*/
<ul class=”accordion-menu”>/*class responsável por englobar cada Opção do Menu*/
<?php wp_list_categories(‘title_li=&include=49, 42′); ?>/* Aqui você definirá o ID das categorias que serão apresentadas nessa opção, agora eu coloquei os números 49, 42 , você pode definir quantas categorias quizer, igual a “Opção 1″ o parâmetro “title_li=“ está vazia para que não apareça a palavra Categoria acima das opções*/
</ul>
</li>/*aqui termina a segunda opção do menu*/
</ul>
</div>
E é isso ai pessoal está pronto nosso Menu Accordeon utilizando o WordPress, você também pode utilizar a Template Tag wp_list_pages no lugar wp_list_categories, para exibir as páginas do seu blog/site. Você também pode exibir quantas opções quizer basta repitir o mesmo procedimento.
Inté++ fui
Categorias: Javascript/JQuery · Tutoriais · WordPress
Etiquetado: css, Javascript/JQuery, Tutoriais, WordPress
A quase um mês atrás fiz uma colaboração com o site tudoparawordpress do Guga Alves, ele fez uma postagem sobre como mostrar posts no resultado da busca do WordPress apenas nas categorias desejadas, então estou postando agora(muito atrasado por sinal né, :D) na integra, com as palavras do Guga no post.
Segue o post no http://www.tudoparawordpress.com.br
Me passou pela cabeça a seguinte questão: Como excluir algumas categorias da busca do WordPress ?
Passou pela sua também ? Então continue lendo esse post, a dica vem logo abaixo !
Adicione o código ao arquivo search.php:
<?php if( is_search() ) :
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts("s=$s&paged=$paged&cat=9,11,16");
endif; ?>
A seleção das categorias que farão parte da busca se dá na terceira linha, onde se lê cat=9,11,16 , troque pelo ID das categorias que você deseja exibir. O ID das categorias, conforme já expliquei em outras postagens, pode ser obtido em Posts -> Categorias posicionando o mouse no nome da categoria e vendo na barra de status (no rodapé de seu navegador) o cat_ID exibido (Ex.:http://www.seusite.com.br/wp-admin/categories.php?action=edit&cat_ID=4).
Update:
Nosso leitor e agora colaborador Marcelo Torres enviou uma outra maneira de se fazer tal alteração, segue abaixo:
<?php get_header(); ?>
<div id=”conteudo”>
<?php if (have_posts()) : ?><h1>Resultado(s) da busca por: “<?php the_search_query();?>“</h1>
<div id=”box”>
<?php while (have_posts()) : the_post(); ?>
<div class=”box_busca”>
<?php if ( in_category(3) || in_category (13) || in_category (14) || in_category (15) ): ?>
<?php else : ?>
<a href=”<?php the_permalink() ?>” title=”<?php the_title(); ?>“><?php the_title(); ?></a>
<?php the_excerpt(); ?>
<?php endif; ?>
</div>
<?php endwhile; ?>
</div>
<?php else : ?><p>Nada encontrado. Verifique o termo de pesquisa e tente outra vez!</p>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
A linha:
<?php if ( in_category(3) || in_category (13) || in_category (14) || in_category (15) ): ?>
É aonde você escolhe a categoria que não quer que escolha no post, com a sintaxe: in_category(ID);
Além disso, contribuindo ainda mais com o conteúdo desta postagem, nos avisou de um plugin chamado Advanced Category Excluder que esconde todos os posts de uma determinada categoria, porém ele não esconde apenas dos resultados de busca, esconde também do feed, posts recentes, lista de categorias, entre outros.
Marcelo, obrigado pela colaboração ! Sempre que tiver algo a acrescentar assim, pode entrar em contato ou enviar você mesmo uma matéria, registrando-se no site e fazendo sua postagem. 
Categorias: Tutoriais · WordPress
Etiquetado: busca, plugins, Tutoriais, WordPress
A função excerpt() é responsável por fazer um resumo do post , sua colocação vai dentro do loop semelhante a função content()( que exibe o conteúdo inteiro) ela é bem vinda quando não queremos mostrar todo o conteúdo do post, por exemplo, o artigo de destaque de um portal. Só que o problema maior é que a função só exibe texto simples sem nenhuma formatação HTML, impedindo a exibição de imagens…mas com o Advanced Excerpt isso é possível, esse plugins te da a opção de habilitar/desabilitar qualquer tag HTML que será exibida no post e ainda você pode determinar a quantidade de carácter que serão exibido.
Downlaod
http://downloads.wordpress.org/plugin/advanced-excerpt.zip
Instalação
Depois de ter baixado e extraídos os arquivos:
1. Enviar a pasta extraída para a pasta / wp-content/plugins.
2. Ativar o plugin através do ‘Plugins’ no menu WordPress.
3. Ir para ‘excerpt’ na guia “Ferramentas” e configurar o plugin.
#Nota: No site do Desenvolvedor tem uma explicação(em inglês) de como definir os parametros manualmente, caso você precise.
Categorias: PHP · Tutoriais · WordPress
Etiquetado: plugins, Tutoriais, WordPress
Olá pessoal neste post estarei mostrando como fazer uma galeria de imagem com CSS puro. Este exemplo foi baseado no exemplo do site http://www.dynamicdrive.com, neste site foi usado o pseudo-elemento :hover, porém eu usei o :active, fazendo com que a imagem só amplie de tamanho quando clicada, fiz também outras modificações para adaptar melhor ao IE6 e ao Opera. Falando em IE6(esta porcaria), o efeito do :active tem uma pequena diferença dos outros navegadores, no IE6 quando a imagem for clicada ela irá ampliar normal, mas quando o botão do mouse deixar de ser pressionado a imagem permanece ampliada e nos outros navegadores(Firefox, Opera, Safari, Chrome, IE7…) a imagem some para o usúario escolher outra, não consegui descobrir um jeito para consertar isso, se alguem descobrir é só falar ai nos comentários que eu adicionarei com os devidor créditos!
Bom vamos ao que interessa…
A estrutura do arquivo (X)HTML ficaria assim:
[...] <div id="galeria"> <small>Clique na miniatura para aumentar a imagem</small><br /><br /> <a class="thumb" href="#thumb"> <img src="imagens/thumb_image1.jpg" alt="" /> <span> <img src="imagens/1.jpg" alt="" /> </span> </a> </div> [...]
Onde dentro do <a> vai ficar as duas imagens, o thumbnail(miniatura) e imagem com tamanho maior(recomendo 400×300, ou aproximado),o thumbnail será a imagem clicada que recebe um link “cego” a imagem maior fica dentro de um <span> onde será feito a “mágica” com css, para aparecer quando for chamada, segue a “mágica”
Arquivo CSS:
*{padding:0;margin:0;}/*deixar margem e padding dos elementos com padrão zerado*/
small{font-size:12px; font-weight:bold;color:#333;}/*formata a mensagem de como visualizar as imagens*/
#galeria{background-color:#9FCBFF;position:relative;width:720px;margin:25px auto;padding:10px;text-align:center;}/*div pai, que englobará as imagens*/
a.thumb img{background-color:#fff;border: 1px solid #999;padding:3px;}/*estiliza as miniaturas*/
a.thumb span{position:absolute;background-color: #000;padding: 10px;left:-10000px;visibility: hidden;color: black;text-decoration: none;}/*começa a mágica*/
a.thumb:active span{visibility:visible;top: 50px;left: 120px;z-index: 50;}/*termina a mágica!*/
As declarações CSS principais para o efeito são:
a.thumb span:
a.thumb:active span:
Categorias: (x)html/css · Desenvolvimento · Design · Navegadores · Tableless · Tutoriais · Web Standards
Etiquetado: css, Tutoriais
Ultimos posts
