Marcelo Torres

Entradas categorizadas em ‘Tutoriais’

5 links bacanas com tutoriais do Gimp

26/10/2009 · Deixe um comentário

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

WordPress + JQuery – Lista de categorias em Menu Accordion

16/08/2009 · 9 Comentários

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

<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’);?>/jquery.js“></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’);?>/menuaccordion.js“></script>

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:

$(document).ready(function(){
$(‘#accordion-container > li > a’).bind(‘click’,function() {
var $next = $(this).next();
if ($next.is(‘:visible’)) return false;
$(this).parent().parent().find(‘li > ul:visible’).slideUp(‘normal’);
$next.slideDown(‘normal’);
return false;
});});

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:

#menu-accordion ul {margin:0;padding:0;list-style:none;}
#menu-accordion ul#accordion-container {width:200px;padding:2px;}
#menu-accordion ul#accordion-container > li {margin-top:1px;background:#000;}
#menu-accordion ul#accordion-container > li > a {display:block;padding: 4px; color: #fff;text-decoration:none;outline:none;}
#menu-accordion ul#accordion-container > li > a:hover {background: #666;}ul.accordion-menu {display:none;background:#000;}
#menu-accordion ul.accordion-menu a {display:block;padding-left: 4px;background:#aaa;color:#555;text-decoration:none;outline:none;}
#menu-accordion ul.accordion-menu a:hover {color:#fff;}

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)

<div id=”menu-accordion”>/* div pai que engloba todo o menu*/

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

Instalando o WordPress MU em localhost(com o Xampp for Windows)

24/06/2009 · 11 Comentários

Finalmente depois de muitas tentativas consegui achar um jeito para instalar o WPMU em localhost ultilizando com o Xampp, não vou entrar em detalhes de como instalar o WPMU, pois o objetivo desse tutorial é apenas configurar seu servidor local para depois instalar o WPMU, veja como proceder então.

Depois de você já ter baixado o WPMU, coloque a pasta descompactada no diretório:

c:\xampp\htdocs

Feito isso, siga para o diretório:

c:\WINDOWS\system32\drivers\etc

Abra o arquivo hosts no notepad e acrescente a seguinte linha no fim do documento:

127.0.0.1 localhost.localdomain

Salve e feche o arquivo hosts, abra o navegador e digite o seguinte endereço:

http://localhost.localdomain/wordpress-mu

Pronto agora você ja pode instalar o WordPress Mu no seu computador.

#Nota: Vou tentar descobrir como fazer isso no Linux e depois posto aqui, se alguém souber deixa um comentário, ok?!

Tutorial feito com base do site: http://maketecheasier.com/install-wordpress-mu-in-windows-localhost-with-xampp/2009/05/02

Categorias: Tutoriais · WordPress
Etiquetado: , , ,

Como mostrar o perfil do autor no post e configurar o arquivo author.php no WordPress

16/06/2009 · 3 Comentários

Neste post irei mostrar como exibir informações do autor do post, como mostra a imagem abaixo e como configurar o arquivo author.php que exibe as informações dos autores do blog/site .

Parte I – Arquivo single.php

Primeiro, vamos criar a área na parte inferior de cada post. Estou alterando o tema default, mas sinta-se livre para usá-lo em seus próprios temas. Abra o single.php e encontre a função the_content() e insira:

<div>
<?php echo get_avatar (get_the_author_id() , 80 ); ?>

Na segunda linha, temos obtido o Gravatar do autor usando seu ID. E depois definindo a dimensão 80 × 80 pixel do Gravatar. Na sequência:

<h4> Autor: <a href = "<? php the_author_url ();?>">
<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
<? php the_author_description ();?>

Isto irá exibir o primeiro e último nome do autor, com um link para seu site. Abaixo disso é a sua mini-biografia. Todos estes detalhes estão sendo puxado pelo perfil do autor no Dashboard.

<p><a href="<?php bloginfo ( 'url');?>/?author=<?php the_author_ID ();?>"> Ver perfil</a></p>
</div>

Isto faz o link para o página do autor (o que vamos criar em seguida).

Parte II – Arquivo author.php

Crie um arquivo chamado author.php na pasta do seu tema. WordPress irá automaticamente utilizar este arquivo para visualizar o perfil do autor. Sem esse arquivo, o WordPress iria usar o arquivo archive.php.

No início nós incluímos o layout básico para o cabeçalho do tema default. Isto provavelmente será diferente se você estiver usando um tema diferente.

<?php get_header(); ?> 
<div id="content">

Agora, incluir o seguinte:

<?php
if(get_query_var('author_name')):
$curauth = get_userdatabylogin (get_query_var('author_name'));
else:
$curauth = get_userdata(get_query_var('author'));
endif;
?>

Sobre a única página, fomos capazes de obter as informações diretamente do autor a partir do WordPress loop. No entanto, uma vez que não está a obtenção de um determinado post ainda, funções do loop não vão funcionar. O código acima irá obter informações para nós e armazená-los em um array.

<div>
<?php echo get_avatar( $curauth->ID , 80 ); ?>

Como você pode ver, na linha 2, incluímos o Gravatar novamente, mas desta vez estamos usando o nosso novo método para obter o ID do autor.

<h4><a href="<?php echo $curauth->user_url; ?>">
<?php echo $curauth->first_name; ?> <?php echo $curauth->last_name; ?></a></h4>

O nome do autor e um link para seu site está incluído; novamente usando o novo método de recuperação.

<p><?php echo $curauth->description; ?></p>
</div>

Finalmente, nós incluímos a mini-biografia do autor. Você pode incluir qualquer detalhe do autor aqui:

  • $curauth->aim;
  • $curauth->description;
  • $curauth->display_name;
  • $curauth->first_name;
  • $curauth->ID;
  • $curauth->jabber;
  • $curauth->last_name;
  • $curauth->nickname;
  • $curauth->user_email;
  • $curauth->user_login;
  • $curauth->user_nicename;
  • $curauth->user_registered;
  • $curauth->user_url;
  • $curauth->yim;
(Leia Mais: WordPress Codex)

Agora você pode inclui um WordPress Loop normal, exibindo o post como se você necessitar. Apenas as postagens do autor serão recuperadas. Exemplo:

<div>
<h4><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h4>
<hr />
</div>

Parte III – Estilizando

Inclua o seguinte código na parte inferior do seu arquivo style.css, faça seus ajustes se necessários:

.postauthor {
    background-color: #fafafa;
    border: 1px solid #f3f3f3;
    padding: 10px;
    margin: 10px 0;
    }

.postauthor h4 {
    font-size: 1.2em;
    margin: 0 0 10px 0;
    }

.postauthor img {
    float: left;
    margin: 0 15px 8px 0;
    }
Artigo Traduzido do site: http://blog.themeforest.net/wordpress/wordpress-author-details/ – com adaptações

Categorias: Tutoriais · WordPress

Fazendo a busca do WordPress funcionar apenas para algumas categorias

07/06/2009 · 4 Comentários

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. :D

Categorias: Tutoriais · WordPress
Etiquetado: , , ,