Exatamente, aqui estou eu novamente para louvar o Wordpress. Que existem milhares de temas grátis pra usar todo mundo já sabe, mas que tal você usufruir de layouts realmente profissionais por valores baixos? Existem diversas empresas no mundo que sobrevivem apenas de desenvolver temas para a plataforma. Confira a lista das melhores:

Elegant Themes

Elegant Themes

Woo Themes

Woo Themes

WP Zoom

WP Zoom

Acosmin

Acosmin

ithemes

ithemes

Conhece outros? Envie seu comentário com sugestão e ajude a melhorar essa galeria.

Quem já trabalha com Wordpress certamente saberá do que se tratam as seguintes template tags:

• the_title – Título;
• the_content – Conteúdo;
• the_excerpt – Resumo do Conteúdo;
• the_permalink – Link permanente do post;

Esse simples tutorial vai lhe ensinar a definir quantas palavras devem ser exibidas através da tag the_excerpt, responsável pela exibição do resumo do seu post. O Excerpt exibe o início do seu primeiro parágrafo ou o resumo que você escolher, caso preencha o campo de resumo logo após o Text Area de inserção do seu artigo. Uma dúvida comum é como definir quantas palavras devem ser exibidas, já que isso influencia diretamente no seu layout e no tamanho do seu html.

Abra o arquivo functions.php, responsável pelo controle de boa parte do funcionamento do seu tema e insira o seguinte código:

/* limite de palavras do excerpt */
function my_excerpt_length($text){return 30; }
add_filter('excerpt_length', 'my_excerpt_length');

Onde tem “return 30″, não preciso nem explicar que o 30 é o número de palavras não é mesmo? Mude para o número que deseja de acordo com a sua necessidade. Mais fácil impossível. Como extra, em padrão após encerrar o resumo o Wordpress insere o texto [...]. Para alterar esse texto, acrescente o seguinte código no seu arquivo functions.php.

/* texto no fim do excerpt */
function new_excerpt_more($more) {return 'leia mais...'; }
add_filter('excerpt_more', 'new_excerpt_more');

Substitua o “leia mais…” pelo texto de sua preferência.

Por mais que o Wordpress já seja um sistema maravilhoso, ao fazermos trabalhos para clientes utilizando-o, é importante ficar atento a alguns detalhes que passam mais profissionalidade. Uma delas é substituir a logo do Wordpress no admin pela logo do cliente, deixando o sistema com mais identidade e agradando o cliente.

Abra o arquivo functions.php do seu tema e insira o seguinte código:

function minha_logo_wp_login() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_directory').'/images/minha-logo.gif) !important; }
    </style>';
}

add_action('login_head', 'minha_logo_wp_login');

Neste exemplo, a logo personalizada encontra-se na pasta images do seu tema, caso prefira em outro local, altere o endereço conforme sua escolha.

Lembrando que o intuito não é esconder que foi utilizado um CMS. Sempre recomendo a todos que trabalham com Wordpress que fique claro para o cliente que você está utilizando uma plataforma preparada e quais seus benefícios.

Além de deixar visível as formas de contato, perfis nas redes sociais, também é importante mostrar ao seu leitor o que tem de mais atrativo dentro do seu blog. Uma das maneiras de fazer isso é exibir quais são os posts que mais receberam comentários. Além disso ser uma espécie de Ranking, facilitará um novo leitor a participar da comunidade formada dentro do blog.

Abra o seu arquivo sidebar.php (arquivo responsável pelo conteúdo lateral), dentro deste arquivo insira o código abaixo onde deseja exibir a listagem.

<h2>Mais Comentados</h2>
<ul>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> (<?php echo $commentcount ?>)</li>
<?php } } ?>
</ul>

Creio que seja auto explicativo:

• $result = resultado exibido após selecionar no banco de dados os posts mais comentados, listando de forma descendente (ORDER BY comment_count DESC)
• $postid = ID do post
• $title = Título do Post
• $commentcount = Número de Comentários

Lembrando que com um pouco de criatividade você pode criar um bloco diferente, atribuindo imagens, ícones ou planos de fundo a seu critério.

Inserir posts relacionados em um artigo publicado no seu site é uma técnica de otimização em todos os aspectos. Com assuntos relacionados, existe uma maior probabilidade de que o usuário encontre outras informações de seu interesse e continue no site. Além disso, links para páginas relacionadas são extremamente importantes para o SEO (Otimização para Motores de Busca).

Os usuários de Wordpress podem aplicar esta técnica de maneira fácil e prática, principalmente através de plugins como WordPress Related Posts e o Yet Another Related Posts Plugin. Entretanto o uso excessivo de plugins no Wordpress é extremamente prejudicial ao próprio sistema, aumentando desnecessariamente consultas ao banco dados ou outras especificações, dependendo do plugin.

Para inserir posts relacionados em seus artigos basta inserir o código abaixo, onde deseja exibir os posts relacionados, dentro do arquivo single.php (arquivo específico das páginas de postagem do seu blog).

 <?php
 $randomPost = $wpdb->get_var("SELECT guid FROM $wpdb->posts WHERE post_type = 'post' AND post_status = 'publish' ORDER BY rand() LIMIT 1");
 $categories = get_the_category($post->ID);
 if ($categories) {
 $category_ids = array();
 foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;

 $args=array(
 'category__in' => $category_ids,
 'post__not_in' => array($post->ID),
 'showposts'=>5,
 'caller_get_posts'=>1
 );
 $my_query = new wp_query($args);
 if( $my_query->have_posts() ) {
 echo '<div id="postsrelacionados">Conte&uacute;do Relacionado<ul>';
 while ($my_query->have_posts()) {
 $my_query->the_post();
 ?>
 <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
 <?php
 }
 echo '</ul>';
 echo '</div>';
 }
 }
 ?>

Observe que foi utilizado a tag de lista para cada post relacionado, personalize da forma que achar mais adequada.

Este é meu primeiro vídeo tutorial, onde ensino como instalar o Wordpress através do programa XAMPP. Preciso fazer algumas melhorias nos próximos vídeos nos quesitos iluminação e audio do video, mas este é apenas um começo. No meu canal do youtube irei publicar vídeos sobre tutoriais, desenvolvimento web, design, mobile e afins. Subescreva no Youtube!

Envie sua opinião, crítica e/ou sugestão.

Mais inspirações para o Dia do Design, desta vez selecionei nove sites feitos na plataforma Wordpress. Quando falo em Wordpress, gosto sempre de ressaltar que não se resume a uma plataforma de blogs e sim de sites. Com um pouco mais de conhecimento sobre a ferramenta é possível adaptar qualquer layout para Wordpress, mas isso fica para um outro post.

Eu diria que a maioria dos temas profissionais do Wordpress costumam trabalhar o menu com lista no estilo Drop Down para exibir as subcategorias de uma categoria. Não gosto muito de ter meus sites desta forma, apesar de que em alguns casos é uma solução eficiente.

Independente de usar Drop Down ou não, no menu, é interessante que os links das subcategorias estejam disponíveis dentro da página da categoria que clicamos. Para isso, basta verificarmos se existe uma subcategoria. Utilize o seguinte código php:

if (is_category()) {

  //Verificar o ID da categoria atual
  $this_category = get_category($cat);

  //Exibir as subcategorias
  if (get_category_children($this_category->cat_ID) != "") {
    echo "<h1>Subcategorias</h1>";
    echo "<ul>";
    wp_list_categories('orderby=id&show_count=0&use_desc_for_title=1&child_of='.$this_category->cat_ID);
    echo "</ul>";

  }
}

Utilizei uma função que é natural do Wordpress, chamada wp_list_categories. Para identificar o ID da categoria utilizei a função get_category. Para mais detalhes sobre a função wp_list_categories, leia a referência em: http://codex.wordpress.org/Template_Tags/wp_list_categories.

Lembrando que as subcategorias serão exibidas em forma de lista (<li>), a formatação fica por sua conta.

Fazia tempo que eu não postava nada sobre o Wordpress, ferramenta na qual sou completamente apaixonado (tentarei aumentar a frequência de posts desta categoria). O assunto de hoje é bem simples, trata-se de remover aqueles blocos no administrador do Wordpress que você acha completamente desnecessário ou que atrapalha algo na sua gerência.

Que blocos são esses? Dei o nome de blocos para ficar mais fácil de assimilar. Trata-se dos campos do administrador ao fazer uma postagem ou criar uma página: tags, categorias, resumo, comentários, revisão, senha, etc. Isso é muito útil pois cada site exige coisas diferentes e é necessário saber filtrar, não apenas para você, mas também para seu cliente.

Suponhamos que está desenvolvendo um site institucional em Wordpress, cujo não haverão campos de comentários. No administrador haverão campos relacionados, como o controle de permissão de comentários e trackbacks, e os avisos de comentários pendentes para aquele post em específico. Retirando esses blocos, a experiência do usuário administrador do site será melhor, sem precisar te perguntar para que servem tais blocos (afinal a resposta poderia ser: “não serve pra nada nesse site”).

Para ter o controle sobre os blocos é muito fácil, abra o arquivo functions.php do seu tema e adicione o seguinte código php:

<?php
class removeMetas{
 private $boxes = array();
 public function __construct(){
 add_action('do_meta_boxes', array($this, 'removeMetaBoxes'), 99, 3);

 //Blocos de Post
 $this->boxes[] = 'postexcerpt';
 $this->boxes[] = 'passworddiv';
 $this->boxes[] = 'trackbacksdiv';
 $this->boxes[] = 'commentstatusdiv';
 $this->boxes[] = 'commentsdiv';
 $this->boxes[] = 'slugdiv';
 $this->boxes[] = 'postcustom';
 $this->boxes[] = 'tagsdiv';
 $this->boxes[] = 'categorydiv';
 $this->boxes[] = 'authordiv';
 $this->boxes[] = 'submitdiv';
 $this->boxes[] = 'revisionsdiv';

 //Blocos de Páginas Estáticas (Pages)
 $this->pageboxes[] = 'pageparentdiv';
 $this->pageboxes[] = 'pagecustomdiv';
 $this->pageboxes[] = 'pagecommentstatusdiv';
 $this->pageboxes[] = 'pageslugdiv';
 $this->pageboxes[] = 'pageauthordiv';
 $this->pageboxes[] = 'pagesubmitdiv';
 $this->pageboxes[] = 'pagepassworddiv';
 $this->pageboxes[] = 'revisionsdiv';

 }

 public function removeMetaBoxes($type, $context, $post){
 foreach ($this->boxes as $box){
 foreach (array('normal', 'advanced', 'side') as $context){
 remove_meta_box($box, 'post', $context);
 }
 }
 foreach ($this->pageboxes as $box){
 foreach (array('normal', 'advanced', 'side') as $context){
 remove_meta_box($box, 'page', $context);
 }
 }
 }
}

$removeMetas = new removeMetas();
?>

Verifique a diferença, existem os blocos quando você adiciona um Post e outros blocos quando adiciona uma página estática (Page). O código dessa forma irá ocultar os blocos, então você deverá escolher quais quer eliminar, os demais basta apenas deletar a linha ou de preferência comentar o php.

Quem não fizer a menor ideia de como se comenta uma linha php, existem duas maneiras, uma delas é igual a css (/* conteudo comentado */) ou adicionando barras duplas no início da linha, veja:

//$this->boxes[] = 'categorydiv';
/* $this->boxes[] = 'categorydiv'; */

Saiba abaixo para que serve cada uma dos blocos (MetaBoxes) que vamos controlar:

• postexcerpt: Bloco de resumo do post (na nomenclatura php do wordpress, é o excerpt);
• passworddiv: Proteção do Post por senha;
• trackbacksdiv: Controle de permissão de trackbacks;
• commentstatusdiv: Bloco Discussão;
• commentsdiv: Últimos comentários do post;
• slugdiv: Edição de slug (a definição do seu permalink);
• postcustom: Bloco de Campos Personalizados (Custom Fields);
• tagsdiv: Bloco de Tags;
• categorydiv: Bloco de Categorias;
• authordiv: Alterar autor do Post;
• submitdiv: Bloco de Publicar; e
• revisionsdiv: Bloco que indica a data e horário de quando foram feitas alterações naquele post e quem fez a alteração.

Verifique quais considera úteis para preservar. Vejam abaixo o que sempre oculto no meu admin:

• trackbacksdiv e commentsdiv: Prefiro gerenciar tudo relacionado a comentários na sessão de comentários;
• authordiv: em alguns sites sou o único administrador e em outros, acho incoerente mudar o autor de um post;
• revisionsdiv: não me interessa a informação de quando eu fiz alteração no post. Se considerar que muitas vezes altero para corrigir erros de português então.

Espero que seja útil. O Wordpress é maravilhoso, melhor ainda quando você deixa ele exatamente da maneira que você quer. Até o próximo post. 8-|

Todos já devem saber o quanto é fácil ter um blog, seja com domínio próprio ou não. Diversas ferramentas são criadas e disponibilizadas gratuitamente na internet todos os dias. Dentre estas ferramentas as mais conhecidas são os Sistemas de Gerenciamento de Conteúdo.

Mas não basta apenas criar seu blog, a criação de um layout singular ajuda a destaca-lo perante os demais.

Observação: esse tutorial usa o Wordpress como exemplo, entretanto a maior parte das dicas usadas aqui servem para personalização de templates de outras ferramentas como Joomla e Drupal.

Para customizar temas no Wordpress é necessário:

• Noções básicas de HTML
• Noções básicas de CSS
• Noções básicas em algum programa gráfico (Photoshop, Fireworks, Illustrator, etc)

Índice do Tutorial

• Download do template
• Inserindo imagem no Template
• Editando arquivos HTML e CSS
• Resultado

Download do Template

No site oficial do Wordpress você encontra centenas de temas gratuitos para baixar, acesse http://wordpress.org/extend/themes/ . Você deve clicar em download no tema escolhido. Após concluir acesse o ftp de seu site e envie para a pasta themes, dentro de wp-content.

Para esse tutorial eu escolhi o tema jQ.

Template Wordpress jQ

Agora ative seu tema no menu Appearance > Themes (Aparência > Temas) do administrador.

Ative o tema Wordpress no administrador

Inserindo imagem no Template

Muitos dos temas possuem uma boa área no seu topo para ser explorada. Com alguns conhecimentos gráficos, seja no Photoshop, Fireworks ou Illustrator você pode criar uma arte para usar no blog. Veja a imagem criada para este tutorial (assunto: os bizarros):

Arte Gráfica para inserir no topo do tema

Editando arquivos HTML e CSS

No wordpress o arquivo responsável pelo topo do blog é o header.php. Para fazer minha personalização apenas substitui o título do blog pela imagem criada. Veja:

Inserindo a imagem do topo (arquivo header.php)

Agora é a vez de mudar a cor do plano de fundo e dos links, para isso é necessário editar a folha de estilos (CSS). Caso não saiba do que se trata, recomendo estudar o básico pelo site do Maujor.

Para mudar as cores no seu arquivo CSS basta saber o código RGB dela. Para isso você precisará do auxílio de uma paleta de cores. Para quem não trabalha com programas gráficos recomendo o site Color Blender para encontrar o valor RGB da cor que deseja.

Veja como formatar as cores via CSS:
color:#RRGGBB; (para cor do texto)
background-color:#RRGGBB; (para cor do plano de fundo)

Para essa customização alterei o plano de fundo para a cor azul marinho escuro (background:#040116;) e a cor dos links para um tom de vermelho (color:#aa182b;). Veja:

Alterando o CSS do template (arquivo style.css)

Dica: se quiser alterar um plano de fundo já existente no seu template sem precisar editar o HTML ou CSS, basta salvar sua nova imagem com o mesmo nome e extensão (jpg, gif ou png) da imagem original e substitui-la.

Resultado

Veja abaixo a comparação do template original e do resultado:

Antes

Resultado da customização do template

Esse tutorial é de nível básico e envolve os elementos mais simples de um template. É um ótimo caminho para começar a desvendar a estrutura de outros templates até que possa se sentir confiante para criar o seu.

Esse post foi elaborado especialmente para Netto Silva e Italo Veloso, que fizeram o pedido através do RGB Magazine. Caso também queira fazer o seu pedido sobre algum tutorial clique aqui. O post ficou um pouco extenso, se tiver dúvidas envie seu comentário.