ZackShinra

Vídeo Tutorial: Escrevendo um post no WordPress

Lauro Adriano — Mon, 08 Mar 2010 10:15:55 +0000

Saudações queridos leitores, nesse final de semana gravei uma nova vídeo aula que tem como objetivo mostrar como escrever um post (ou “artigo” se preferirem) utilizando o WordPress.

Público alvo e utilização

Esse screencast (vídeo-tutorial) serve tanto para o wordpress.com quanto para o wordpress.org. E também serve para os usuário do WordPress MU.

O público-alvo desse tutorial são os leigos no WordPress, ou os não administradores de um site.

Por exemplo, eu administro o site Cachorros e Cia, mas quem escreve os artigos é a Amanda, a função dela é de Editora, ou seja, de escrever para o site, então esse vídeo é para ela e outras pessoas nessa mesma situação.

É claro que se for um administrador do site com instalação em WordPress, nada impede que você aprenda algo com esse tutorial. Sempre pode ter algo de novo que ainda não saibamos, é o que eu sempre digo.

E o melhor, se você for colocar um editor para trabalhar no seu site, ao invês de explicar como escrever um post, bastará apresentar esse vídeo tutorial.

Os vídeos tutoriais

A minha gravação desse screencast ultrapassou os 20 minutos, e como eu utilizo o YouTube, me vi na necessidade de dividir o vídeo em 3 partes.

Todos os vídeos foram feitos em HD, altere a qualidade do vídeo para o máximo para ver todos os detalhes nitidamente.

Parte 1

Neste vídeo você ira ver:

Entrando na área de administração do WordPress (wp-admin);
Explicação sobre diferenças entre área de administração do WP e o WP – MU;
Entrando na área de escrita de novo post;
Escrevendo o título do post;
Explicação sobre as abas “HTML” e “Visual”;
Ferramentas do editor visual, que é similar a um editor de texto (como o Microsoft Word);
Expandindo e ocultando as ferramentas adicionais do editor visual;
Escrevendo em Negrito, Itálico e Riscado;
Fazendo listas (ex: Top 10) usando “Lista ordenada” – com números, e “Lista não ordenada”;
Citando frases de outras pessoas usando a ferramenta “Citação” (tem o desenho de aspas);
Explicação sobre diferenças entre o visual do post enquanto escrevemos, e o visual final no site;
Salvando rascunho, mesmo que o WordPress tenha um salvamento automático;
Pré-visualizando um post;
Ativando o modo de tela inteira;
Explicação sobre os botões “Adicionar Mídia” (imagem, vídeo e mídia).

Parte 2

Neste vídeo você ira ver:

Adicionando imagem no post;
Upload de imagem;
Edição do título, texto alternativo, legenda e descrição da imagem;
Escolhendo o link que a imagem terá;
Diferenças no “URL do post”: quanto o tema tem ou não o arquivo attachment.php;
Tamanho da imagem e como ele irá aparecer no seu site;
Adicionando vídeo no post;
Pegando o código do vídeo (embed) do YouTube;
Configurando o player do YouTube;
Alinhando o texto (direita, centralizado, esquerda);
Pré visualizando um post.

Parte 3

Neste vídeo você ira ver:

Colocando links;
Definindo o link para abrir na mesma janela ou em uma nova janela;
Utilizando a tag more (link “Leia mais”);
Editando a tag more;
Mudando a cor da fonte;
Sublinhando o texto;
Modificando o formato do texto com seis tipos de cabeçalhos;
Adicionando tags (palavras chaves);
Selecionando as categorias do post;
Atualizando um custom field já existente;
Publicando um post imediatamente ou agendando;
Modificando o link permanente (slug) do post.

Considerações finais

No final do terceiro vídeo eu disse que tentei ser rápido, mas isso gerou cerca de 30 minutos de vídeo, imagine se tivesse sido lento, heheh.

Espero sinceramente que este vídeo tutorial seja de ajuda àqueles que tinham dificuldade em escrever um post no WordPress.

Até mais.

Vídeo Tutorial: Instalar Skins no uTorrent

Lauro Adriano — Thu, 18 Feb 2010 15:01:31 +0000

Depois do relato de algumas pessoas tendo dificuldades para mudar o visual do uTorrent pelo meu tutorial Instalar Skins no Utorrent, resolvi criar um screencast.

Espero que agora todos consigam personalizar os seus uTorrent.

ZS: um novo tema para WordPress criado por Lauro Adriano

Lauro Adriano — Tue, 22 Dec 2009 19:50:26 +0000

Saudações, é com muita satisfação que lhes apresento o tema ZS, para a plataforma WordPress. Um tema com diversos recursos e suporte para utilização de folhas de estilo.

O tema ZS nasceu com o nome de ZackBlue, a qual seria um tema com uma única aparência (folha de estilo). Porém devido os avanços que fui realizando no tema (que o tornava cada vez mais completo), surgiu a idéia de não mais criar um tema para cada projeto, mas sim um único tema que suporte vários estilos.

Com isso se evita problemas e trabalho nas atualizações, pois a cada vez que tiver que ser corrigido um problema ou implementar um novo recurso, não será preciso fazer isso em vários temas, simplesmente em um.

Visual

O tema ZS possui a possibilidade de utilizar mais de uma folha de estilo, que pode ser escolhida na área de configurações do tema.

Folhas de estilo são como skins (peles), com ele o tema ZS pode ter visuais diferentes.

Folha de estilo: Z-Blue

Criado para o site ZackShinra, utiliza como cor predominante o azul e o verde.

Folha de estilo: NDT-Red

Criado para o site Team Anime, utiliza como cor predominante o vermelho e o amarelo. Possui um cabeçalho que muda a cada atualização.

Recursos

O tema ZS, em sua versão 0.1 beta, possui atualmente os seguintes recursos:

geração automática de thumbnails (miniaturas) para os artigos;
painel de configuração;
área para artigos/posts de destaque na página principal;
suporte a rastreamento pelo Google Analytics;
suporte ao sistema de feeds FeedBurner;
suporte à monetização por banners (ex: Google Adsense);
suporte à monetização da Hot Words;
suporte à WordPress MU;
entre outros…

Notas da versão

O tema ZS se encontra na versão 0.1 beta e ainda não está completa. O mesmo não está disponível para Download.

As correções e adições de recursos podem ser acompanhadas na área “Atualizações” deste mesmo artigo.

Agradecimentos

Agradecimento ao pessoal do Fórum do WordPress.Org e ao Claudio Myst, que me ajudou muito via MSN.

Atualizações

Esta área é dinâmica, e será modificada a cada atualização do tema ZS.

Correções

05/01/10 -> tamanho da fonte (estava a 18px, sendo o correto 24px) do nome do autor dos comentários que possuiam link.
17/02/10 -> incluído a tag
no footer.php, o que é necessário para o uso de alguns plugins, como o SyntaxHighlighter Evolved;
03/03/10 -> modificado o arquivo attachment.php para que mostre as categorias do post a qual veio a imagem;
10/03/10 -> modificado a maneira como são carregadas as imagens da header, para assim sanar o problema das mesmas não aparecerem nas páginas de anexo.

Melhorias

21/02/10 -> Incluído caixa abaixo do conteúdo do post, com os Posts Relacionados (gerado via plugin) e uma área para publicidade (o local para inclusão do código da publicidade foi adicionado no Painel de Controle do tema);
26/02/10 -> Incluído no Painel de configurações a possibilidade de determinar se o menu da Header trará categorias ou páginas. Incluso também local para informar o número da categoria/página que deve ser excluído do menu;
26/02/10 -> Modificado a maneira como é carregado o favicon, agora cada estilo pode ter um favicon personalizado;
26/02/10 -> Incluído paginação nos posts e criado área para anexos de imagens;
10/03/10 -> Incluído no painel de controle local para determinar quantas imagens diferentes serão usadas na header;
10/03/10 -> Incluído link para a home no logo do estilo z-blue.

Pendências

dar suporte a caixa de comentários para textos com muitos caracteres;
remover o post de destaque da lista de “últimos artigos”;
FEITO: implementar “posts relacionados” entre o post e os comentários;
implementar sistema que permita ao usuário carregar um logo personalizado para o site;
implementar sistema que permita ao usuário fazer upload(s) da(s) imagen(s) do cabeçalho;
RESOLVIDO: corrigir conflito com o javascript que impede o uso do plugin SyntaxHighlighter Evolved;
dividir em páginas quando passarem de 50 comentários em um post, e criar uma maneira com que os comentários com mais de dois dígitos (100, 101, etc) não saiam da área dos comentários;
RESOLVIDO: página de anexos de imagens não carrega a categoria da imagem (o que não deve ter), devo alterar aquele local;
RESOLVIDO: header aleatório não é carregado em alguns locais, como a página de anexos, isso se deve a maneira a qual fiz o random na header. Devo modificar para uma maneira que não tenha esse problema;
Incluir avatar exclusivo para trackbacks, ou criar um local separado para os mesmos;
criar um local proximo aos comentários que indique um tutorial (ou explique de forma sucinta) como conseguir um gravatar;
na página de anexos, incluir abaixo da imagem, setas (em imagem) para a imagem anterior e a seguinte (ainda não sei se é uma boa idéia, pois do lado da imagem já existe isso).

Usando Custom Fields (campos personalizados) no ThimThumb

Lauro Adriano — Wed, 16 Dec 2009 12:06:14 +0000

O ThimThumb é uma excelente ferramenta para gerar miniaturas/thumbnails. No artigo ‘Gere thumbnails (miniaturas) automaticamente no WordPress’ mostrei como instalar e usar esta ferramenta, agora mostro como usar custom fields (campos personalizados) ao invés de um link estático.

Como fazer

Para usar um link de imagem vindo de um custom field, basta usar o seguinte código antes do código do timthumb (que deve estar dentro do laço do post):

$key='post-img'; // substitua o post-img pelo nome do seu custom field $link-post-img = get_post_meta($post->ID, $key, true); ?>

No código acima estamos considerando que o nome do custom field é post-img. Pode-se alterar este nome se quiser.

No código do timthumb se deve alterar o lugar do link (logo após “src”) para:

O código do timthumb ficará assim:

/scripts/timthumb.php?src=&w=322&h=206&zc=1">

Para usar o código acima, se deve alterar o caminho de instalação do script (se necessário) e as informações das dimensões do thumbnail que será gerado.

Conclusão

A grande vantagem no uso de custom fields em conjunto com o timthumb é que possibilitamos que haja uma miniatura/thumbnails diferente para cada artigo/post (o que convenhamos, é indispensável).

Ainda temos o inconveniente de o usuário poder se esquecer de colocar o link da imagem no custom field, mas este problema será sanado com um futuro artigo, onde mostrarei como colocar o link de uma imagem no custom field de forma automática.

Gere thumbnails (miniaturas) automaticamente no WordPress

Lauro Adriano — Wed, 16 Dec 2009 09:08:02 +0000

Além de deixar o site com uma estética mais bonita, os thumbnails (miniaturas) aumentam a taxa de cliques, pois uma imagem é mais chamativa ao leitor.

Uma imagem vale mais que mil palavras.

Existem plugins que podem gerar automaticamente miniaturas, mas nenhuma é mais completa que o script ThimThumb.

Ele não depende das configurações de mídia do WordPress, o que é perfeito para ser implementado junto a temas, pois não depende de configurações feitas pelo usuário. O Scarllet é um exemplo de tema que se utiliza deste script.

Esse script redimensiona a imagem sem distorce-la, grava as imagens em uma pasta do próprio tema, e é fácil de instalar e usar.

Como fazer

Instalação

Faça o download do script TimThumb e salve dentro da pasta do seu tema. Para uma maior organização, você pode colocar esse script em uma subpasta chamada “scripts”, ficando assim: \wp-content\themes\meutema\scripts\timthumb.php .

No local onde você salvou o script crie uma nova pasta com o nome de “cache”. Mude o chmod (atributos do arquivo) para 777, garantindo assim que seja possível gravar as imagens nesta pasta.

Com isso o TimThumb já pode ser utilizado.

Utilização

Você pode utilizar em qualquer lugar do seu tema, bastará usar o seguinte código (realizando as devidas modificações):

Entendendo o código:

/scripts/timthumb.php

Aqui é o caminho onde está instalado o script. Você deve altera-lo se por acaso a instalação tenha sido feito em outro lugar.

http://meusite.com/files/2009/12/exemplo.jpg

Aqui é o link da imagem original que será redimensionada. Ao invés de usar um link estático, você pode usar um custom field (campo personalizado) dentro do laço do post (veja o post: Usando Custom Fields no ThimThumb).

w=322&h=206

Aqui é o tamanho do thumbnail gerado. Ele está em pixels, o “w” representa a largura, e o “h” representa a altura. Modifique para o tamanho do thumbnail desejado.

zc=1

Este é o zoom crop, que indica se a imagem será dado zoom para realizar o corte. Deixando com o valor “1” o zoom crop está ativado e será feito o zoom, deixando a imagem ser distorção. Se deixado o valor em “0” o zoom crop está desativado e não será feito o zoom, o que pode gerar distorção na imagem.

Veja o exemplo para entender melhor.

Conclusão

Os thumbnails estão sendo usados amplamente nos mais variados tipos de sites, a exemplo temos os portais de noticias como R7 e Globo.com.

Mesmo se o seu site seguir a dinâmica de blog (vários artigos completos em uma mesma página), os thumbnails podem ser usados, por exemplo, para ilustrar os arquivo de categorias ou os resultados de pesquisa, como usado no Hongkiat.

As utilizações são inúmeras, sendo o único limitador a criatividade de quem for utilizar este recurso. Então não se limite ao utilizar os thumbnails.

NANUNI KOKORITU é NANUNI KOKORITU!

Lauro Adriano — Fri, 11 Dec 2009 18:14:12 +0000

Se você está querendo aprender fazer fotomontagens para o Orkut, clique nesta frase.

Estava vendo a minha conta do Google Reader e resolvi dar uma olhada na minha área de feeds sobre Web Design (ultimamente não entro nessa seção, pois estou mexendo com a formatura da nossa escola infantil, e sempre que vejo um tutorial ou dica interessante já quero implementar), e dando uma olhada no feed do Mestre SEO, acabei entrando por acaso no post sobre a promoção de fim de ano (por acaso pois queria entrar no post acima, mas cliquei errado).

E justamente NANUNI KOKORITU é a promoção. Se trata de premiar aquele que conseguir ficar em primeiro lugar na pesquisa do Google com esse termo (ou seja, aquele que melhor dominar a técnica de SEO com este objetivo).

Eu tenho consciência que o ZackShinra.com não ira ganhar essa promoção (teve uma pessoa que comprou um domínio só para isso, com o termo NANUNI KOKORITU), até demorei para entrar na promoção (3 dias deste o anúncio do mesmo). Porém quero ver em que posição eu ficarei, será uma experiência interessante..

NANUNI KOKORITU é um termo fictício, mas não deixa de ter um significado (mesmo que inventado):

Nanuni Kokoritu é uma raça de cachorros muito rara, que teve sua origem no Nepal. Eles são cachorros pequenos e amáveis, que nunca abandonam o seu dono e entram em depressão no caso de morte do dono. Ter um Nanuni Kokoritu como companheiro é considerado sagrado pelos moradores do Nepal e não é permitido maltratar tal tipo de animal.

O término da promoção é no dia 7 de janeiro de 2010, dia 08/01 vou colocar aqui em que posição fiquei, até lá.

Visualizações de página sem uso de plugin

Lauro Adriano — Wed, 02 Dec 2009 16:05:20 +0000

Existem diversos plugins para o WordPress que proporcionam a possibilidade de contabilizar a quantidade de visualizações dos posts.

Ex: Este post foi visualizado 5 vezes.

Porém é possível dar essa funcionalidade sem recorrer a plugins.

Como fazer

Dentro do laço do single.php (veja uma explicação de onde fica esse laço logo abaixo), adicione:

ID, $key, true);
	$new_view = $prev_value + 1;
	update_post_meta($post->ID, $key, $new_view);
?>

Com isso cada vez que o post for visualizado o custom field “view” ira somar mais um.

Agora precisamos mostrar a quantidade de visualizações ao visitante do site, para isso basta adicionar (dentro do laço):

Este artigo foi visualizado 
ID, $key, true);
	if ($vezes == 1)  {echo ' uma vez,';} else {echo $vezes.' vezes,';}
?>
 .

Pronto, o seu site já possui um contador de visualizações sem o uso de nenhum plugin.

Concluindo

Esta é uma opção para aqueles que simplesmente preferem usar a menor quantidade possível de plugins em seus sites.

E excelente opção para criadores de temas, que não vão precisar fazer com o que o usuário instale um determinado plugin para mostrar a quantidade de vezes que uma página foi visualizada.

Atualização (02/03/10)

Para esclarecer possíveis dúvidas, mostro onde fica o laço do single.php.

Aqui devem entrar os códigos do tutorial.

Problemas no uso de programas de postagem via Desktop no WordPress

Lauro Adriano — Fri, 27 Nov 2009 16:54:58 +0000

Recentemente iniciei o uso de um programa para fazer as postagens via desktop, o Windows Live Writer (em breve uma resenha sobre esse programa), achei ele muito bom, mas tive problemas ao publicar artigos/posts a partir dele.

O problema

Ao publicar um post pelo Windows Live Writer – e outros programas do gênero (como o ScribeFire), os artigos ficavam com uma codificação estranha, os sinais de maior e menor (“<” e “>”) eram removidos, o que fazia com que as tags html não fechassem.

Com isso, o código html do post que deveria ficar assim:

WordPress

Ficava assim (tanto o html como o visual):

pa href="http://br.wordpress.org/"WordPress/a/p

Ou seja, imagens e links não apareciam no post, além do texto ficar todo errado.

O porque do problema

Esse problema ocorre devido a inclusão de uma nova “libXML” na atualização do PHP, que acarreta o conflito com o WordPress. Em outras palavras, o problema está no PHP.

A solução

Para resolver isso ou se faz downgrade do libxml do PHP para a versão 2.6.30 (que não tem esse conflito), ou altera os arquivos no WordPress para que ele contorne esse conflito.

A segunda opção é a mais fácil, basta utilizar o plugin LibXML2 Fix.

Instale o plugin no seu WordPress e depois o ative, não é necessário nenhuma outra configuração.

Com isso o problema de codificação será resolvido e você poderá usar o programa de postagem via desktop de sua preferência.

Testado com…

WordPress 2.8.6
WordPress MU 2.8.6
Plugin LibXML2 FIX 0.2.2
Windows Live Writer 14.0.8089.726
Addon para Firefox ScribeFire 3.4.6

Referências

Para este artigo tomei como referência o site Techtites e um post do fórum WordPress-PT, ambos dizem que é necessário alterar os arquivos do WordPress de forma manual, porém foi nos comentários do primeiro que tive conhecimento do referido plugin.

Observações

Atualmente estou tendo problemas com o Windows Live Writer, no título dos artigos os acentos aparecem com HTML Encoding ao invés do caractere puro: ao invês de ã, aparece “ã”. Esse problema parece não ter relação com o problema deste artigo (pois com o ScribeFire está tudo normal) .

Assim que encontrar a solução, editarei esta observação.

Skype e LocalHost não combinam?

Lauro Adriano — Fri, 13 Nov 2009 12:37:18 +0000

Quem trabalha com um localhost no pc (para testar os seus sites e/ou o WordPress), e também mantem ligado o Skype, já deve ter percebido que se um estiver funcionando o outro não funciona.

No meu caso, quando ia trabalhar com o localhost, eu deixava o Skype desligado. Mas será que não tem como trabalhar com os dois ao mesmo tempo?

Tem sim, e a solução não é nada complicada.

Resolvendo o problema

Basta entrar no Skype, em Ferramentas > Opções…, será aberta uma tela de opções, nela vá até Avançado > Conexão. Lá basta retirar a seleção da opção “Usar portas 80 e 443 como alternativa para conexões de entrada”.

Pronto, reinicie o Skype e seja feliz.

Explicação

O problema está na porta 80, que é a mesma usada pelo Apache. Então se um programa já está usando um determinada porta no computador, outro programa não pode usa-la.

Caso o seu Skype deixe de funcionar (comigo não aconteceu), experimente mudar a porta padrão de 35933 para 443.

Até a próxima.

Conteúdo de posts divididos por páginas

Lauro Adriano — Fri, 16 Oct 2009 11:07:51 +0000

Em uma conversa com o Cláudio, discutiamos a deficiência do WordPress em ter a possibilidade de páginação nos posts. Ou seja, a posssibilidade de um post ser dividido em várias partes (páginas), onde para acessar as outras páginas do post haveria uma barra de navegação no final do post.

Pois bem, imaginavamos que precisariamos de um plugin ou teriamos que criar uma nova função no código do tema, mas pesquisando na internet descobri que o WordPress possui este recurso, porém ele é meio escondido.

Como fazer

Ao escrever um novo post (ou página) você deverá separar o conteúdo das páginas usando a tag

(na edição em HTML).

Exemplo de post:

Este será o conteúdo da primeira página do post. Que ira aparecer primeiro.
Este será o conteúdo da segunda página do post. Que ira aparecer quando o leitor clicar no número dois do menu de páginas no final do post.
Este será o conteúdo da terceira página do post. Que ira aparecer quando o leitor clicar no número três do menu de páginas no final do post.

A quantidade de páginas que podem ser utilizadas é ilimitada. E ao voltar para o editor visual, a tag “Next Page” terá essa aparência:

Porém algo muito importante: o tema utilizado tem que ter suporte para paginação de posts!

Caso não tenha suporte você terá que adaptá-lo.

Dando suporte a tag “Next Page” ao seu tema

Em single.php (e onde mais você quiser está fucionalidade) cole logo abaixo da função que chama o conteúdo do post ( normalmente é ).

Agora o seu tema terá suporte a páginação de posts.

Aparência do menu de páginas no seu tema

O visual padrão do wp_link_pages é:

Page 1, 2, 3

Você pode editar os argumentos do para que o visual fique como você quiser. No meu caso eu usei

Páginas

, que dá como resultado:

Páginas 1 2 3

Mas você pode por exemplo usar

, que deixa assim:

Page 1 Page 2 Page 3

Para maiores informações visite a página do Codex do WordPress sobre esse assunto (em inglês).

ZackShinra

Vídeo Tutorial: Escrevendo um post no WordPress

Público alvo e utilização

Os vídeos tutoriais

Parte 1

Parte 2

Parte 3

Considerações finais

Artigos Relacionados

Vídeo Tutorial: Instalar Skins no uTorrent

Artigos Relacionados

ZS: um novo tema para WordPress criado por Lauro Adriano

Visual

Folha de estilo: Z-Blue

Folha de estilo: NDT-Red

Recursos

Notas da versão

Agradecimentos

Atualizações

Correções

Melhorias

Pendências

Artigos Relacionados

Usando Custom Fields (campos personalizados) no ThimThumb

Como fazer

Conclusão

Artigos Relacionados

Gere thumbnails (miniaturas) automaticamente no WordPress

Como fazer

Instalação

Utilização

Entendendo o código:

Conclusão

Artigos Relacionados

NANUNI KOKORITU é NANUNI KOKORITU!

Artigos Relacionados

Visualizações de página sem uso de plugin

Como fazer

Concluindo

Atualização (02/03/10)

Artigos Relacionados

Problemas no uso de programas de postagem via Desktop no WordPress

O problema

O porque do problema

A solução

Testado com…

Referências

Observações

Artigos Relacionados

Skype e LocalHost não combinam?

Resolvendo o problema

Explicação

Leia Também

Conteúdo de posts divididos por páginas

Como fazer

Dando suporte a tag “Next Page” ao seu tema

Aparência do menu de páginas no seu tema

Leia Também