Marcelo Torres

Entradas categorizadas em ‘WordPress’

Atualização do brblack – versão 1.7

08/09/2009 · Deixe um comentário

preview-subpageNessa atualização do brblack, ajustei as sub-páginas que agora não aparecem mais “quebradas”, para ver como ficou basta ver a pré-visualização do tema.

Notas de atualização:

Atualizações:

  • arquivo header.css, style.css
  • Modificação na estrutura do menu principal, para que seja exibida as sub-páginas de forma mais organizada.
  • Adicionado o arquivo menui6.css para corrigir o problema das pseudos-classe no ie6.

Visite a página do tema para saber mais sobre elehttp://marcelowd.wordpress.com/meus-temas-para-wp/

Categorias: WordPress · brblack
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: , , ,

WordPress 2.8 – Minhas primeiras impressões

23/06/2009 · Deixe um comentário

Como era de se esperar a nova versão do WordPress não teve nenhuma novidade bombastica, nada muito além do que postei à 2 semana, no dia do lançamento, realmente ficou muito bom os novos paineis de Plugins, Temas e o highlight no editor de tema, o painel de Widgets não me agradou muito prefiro o modelo antigo…

Não recomendo ultilizá-lo ainda, é melhor esperar uma nova versão(como sempre acontece), que terá a correção de alguns bugs, e também por causa de compatibilidade de plugins.

Enfim, visualmente não mudou nada(ainda bem), boas melhorias nos paineis principais, correções de vários bugs da versão anterior.

Você tem algo a acrescentar, comenta ai!

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