WordPress

Guia WordPress 3 Parte10 – Plugins Posts Personalizados E Novas Taxonomias 2

Olá caros leitores!

Em nosso último artigo tratamos sobre os como criar Posts Personalizados utilizando o plug-in Custom Post Type UI:

Guia WordPress 3 Parte9 – Plugins Posts Personalizados E Novas Taxonomias 1

Algumas opções, porém, serão explicadas hoje, juntamente com a parte prática de criar Novas Taxonomias.

Menu Position

Com essa opção você pode definir o local onde o menu do post personalizado irá ficar, sendo que o padrão é debaixo de ‘Comentários’. Para definir onde o local utilize os seguintes parâmetros (somente os números inteiros):

  • 5 – abaixo de Posts;
  • 10 – abaixo de Mídia;
  • 15 – abaixo de Links;
  • 20 – abaixo de Páginas;
  • 25 – abaixo de Comentários. O mesmo que deixar em branco;
  • 60 – abaixo do primeiro separador;
  • 65 – abaixo de Plugins;
  • 70 – abaixo de Usuários;
  • 75 – abaixo de Ferramentas;
  • 80 – abaixo de Configurações;
  • 100 – abaixo do segundo separador;

Como exemplo, foi adicionado o ‘75’ para o menu ‘Filmes’ e por isso ele ficou entre ‘Ferramentas’ e ‘Configurações’:


Show in Menu

Essa opção adiciona o post personalizado como um submenu em qualquer outro menu do Painel de Administração do WordPress. Porém existem pequenos “detalhes” que precisam ser conhecidos antes:

  • A opção ‘Show UI’ precisa estar em ‘True’;
  • Não serão visualizados os submenus do post personaliazdo, tais como o ‘Adicionar’ e as taxonomias adicionadas;
  • Você será direcionado diretamente para a área de gerenciamento, de onde terá que fazer as modificações no conteúdo cadastrado;
  • Só funciona nas versões 3.1 para cima, pelo menos nos testes que eu fiz aqui;

Como exemplo, vamos utilizar novamente o ‘Filmes’ e adiciona-lo ao menu ‘Posts’:

E agora, para fazer uma coisa diferente, vamos transferir o ‘Filmes’ para ‘Aparência’:

Ainda é possível adicionar o post no local onde você desejar, inclusive para outro post personalizado:

A mágica toda acontece somente indicando o nome do arquivo .php relacionado ao “Top Menu” do Painel do WordPress, no segundo campo da opção ‘Show in Menu’:

Na figura está destacado em amarelo. Também é necessário que a primeira opção esteja como ‘True’.

O nome dos arquivos php você consegue em dois passos simples:

1.       Clique no menu que irá “receber” o novo item;

2.       Na barra de endereços, tudo o que estiver depois da última barra ‘/’, será o nome do arquivo;

Mas só funciona nos Top Menus, ou seja, o item principal do menu.

Veja alguns exemplos abaixo, todos destacados em negrito:

  • Posts: http://seudominio.com/blog/wp-admin/edit.php
  • Páginas: http://seudominio.com/blog/wp-admin/edit.php?post_type=page
  • Aparência: http://seudominio.com/blog/wp-admin/themes.php
  • Perfis (Post Personalizado): http://seudominio.com/blog/wp-admin/edit.php?post_type=perfis
  • Configurações: http://seudominio.com/blog/wp-admin/options-general.php

Opções Para As Novas Taxonomias

Na parte 8 desse guia você já conheceu esse novo recurso e por isso agora é hora da prática! Iremos utilizar o mesmo plug-in da última parte, o Custom Post Type UI. Por isso leia-o para tirar as suas dúvidas.

Para adicionar uma nova taxonomia, vá em ‘Custom Post Types -> Add New’:

Nessa área, na parte da esquerda (destacada em vermelho) estão as opções para criar a taxonomia. Basta preenche-las e clicar no botão ‘Create Custom Taxonomy’.

Nas opções básicas você tem:

  • Taxonomy Name: o nome da taxonomia de preenchimento obrigatório;
  • Label: o nome que será apresentado no menu do tipo de conteúdo escolhido. Escolha um nome no plural, de preferência;
  • Singular Label: o nome singular da taxonomia;
  • Attach to Post Type: escolha o tipo de conteúdo a qual a taxonomia pertencerá. Nessa opção estarão disponíveis todos os tipos do WordPress, incluindo os posts personalizados;

Nas ‘Advanced Label Option’ estão as opções de rótulo da taxonomia, ou seja, a forma como ele será “apresentado” dentro do WordPress. Quando não preenchidas, as opções básicas serão utilizadas, incluindo alguns termos em inglês. Por isso preencha todos, inclusive como forma de tradução para os seus usuários:

Vamos conhecê-las:

  • Search Items: o texto para pesquisa da taxonomia dentro da área de gerenciamento;
  • Popular Items: o texto para os itens mais usados, dentro da área de gerenciamento;
  • All Items: o texto para mostar todos os itens, dentro da área tela de criação, quando a taxonomia for hierárquica;
  • Parent Item: o texto para o item pai (ou mãe), usando somente quando a taxonomia for hierárquica;
  • Parent Item Colon: o mesmo para ‘Parent Item’, mas em cores;
  • Edit Item: o texto da parte superior da tela de edição do item;
  • Update Item: o texto para atualizar o item na sua edição rápida;
  • Add New Item: texto utilizado para adicionar novo item;
  • New Item Name: texto utilizado para adicionar um novo nome;

    • strong

  • Separate Items with Commas: texto usado para informar que os itens que serão criados deverão ser separados por vírgula, na tela de criação de conteúdo. É usando somente quando a taxonomia não for hierárquica;
  • Add or Remove Items: o texto para adicionar ou remover itens, usado quando o JavaScript estiver desabilitado na tela de criação de conteúdo e somente para taxonomias não hierárquicas;
  • Choose From Most Used: o texto para os itens mais usados, na tela de criação do conteúdo para taxonomias não hierárquicas;

Ainda temos as ‘Advanced Options’:

  • Hierarchical: defina se a nova taxonomia será hierárquica ou não. ‘True’ para sim e ‘False’ para não. A diferença entre ambos é bem simples: quando hierárquica, a taxonomia permite que sejam adicionados subitens, também conhecidos como itens filho ou descendentes. No WordPress seria semelhante a uma categoria. Quando não hierárquico, é semelhante a uma tag do post;
  • Show UI: defina se a taxonomia será visualizada no Painel de Administração. ‘True’ para sim e ‘False’ para não;
  • Query Var: ‘True’ para sim e ‘False’ para não. Define se a taxonomia poderá ser usada como parâmetro numa consulta, tal como em ‘http://seudominio.com/classificados/carros/’. Se algum conteúdo estiver dentro da categoria, como um post, por exemplo, e essa opção estiver como ‘False’, esses posts não serão exibidos ao acessar essa URL;
  • Rewrite: defina se poderá ser utilizado a taxonomia como link permanente, como em ‘http://meusite.com/classificados/carros’. ‘True’ para sim e ‘False’ para não;
  • Custom Rewrite Slug: defina um nome personalizado para o link permanente. Se for deixado em branco será utilizado o nome da taxonomia como padrão. Vamos supor que eu defina ‘classificados-do-site’, logo o link será mostrado como em ‘http://meusite.com/classificados-do-site/carros’;

Todas as partes para criar Posts Personalizados e Novas Taxonomias já estão bem detalhadas, incluindo a parte prática. Mas o assunto ainda não acabou e no próximo artigo iremos explorar mais opções do plug-in e do WordPress relacionadas à esses recursos.

Qualquer dúvida, sugestão, crítica ou elogio podem ser feitos nos comentários.

Fiquem na paz e até lá!

Guia WordPress 3 Parte9 – Plugins Posts Personalizados E Novas Taxonomias 1

Olá caros leitores!

Nesse artigo continuaremos a tratar sobre Posts Personalizados e Novas Taxonomias, porém da maneira prática. É de extrema importância que você conheça o novo recurso e suas capacidades e por isso a necessidade da leitura do último artigo.

Hoje iremos utilizar o plug-in mais baixado do Diretório do WordPress:

Repare que fiz uma pesquisa por ‘Post Type’ que é o termo original para esse recurso, retornando assim diversos plug-ins. Nós iremos utilizar o  Custom Post Type UI, que já foi baixado mais de 43 mil vezes.

O interessante desse plug-in que, além dos posts personalizados, também será possível adicionar novas taxonomias dentro do Painel de Administração do WordPress, totalmente em modo visual.

Não iremos tratar aqui sobre a instalação e ativação do plug-in, mas em caso de dificuldade, leia os dois artigos indicados abaixo e tire todas as suas dúvidas:

1.       Como Instalar Plugins No WordPress Parte4

2.       Guia WordPress 3 Parte 3 – Temas, Plugins E Ferramentas

O download do plug-in poderá ser feito diretamente do Diretório do WordPress. Em caso de dúvida ou dificuldades, visite o Fórum de Suporte. Para outras informações visite o Site Oficial.

Usado o Custom Post Type UI

Assim que ativado, o plug-in irá criar uma nova entrada de menu dentro do Painel do WordPress, com a seguintes opções:

  • Custom Post Types: área com informações e propaganda da empresa criadora do plug-in, a WebDevStudios.com. Ainda inclui um vídeo explicativo e um pequeno FAQ;
  • Add New: é a área onde você poderá adicionar tanto o post personalizado quanto uma nova taxonomia;
  • Manage Post Types: gerencia os posts personalizados já criados;
  • Manage Taxonomies: gerencia as taxonomias criadas;

Como prática de aprendizado, nós iremos criar o post personalizado apresentado no último artigo, o ‘Filmes’. O primeiro passo é ir até ‘Custom Post Type -> Add New’:

Essa área é dividida em duas partes. Na parte da esquerda, destacado em azul, são criados os posts personalizados. E a direita, destacado em vermelho, são criados as novas taxonomias. As duas áreas tem somente algumas opções semelhantes, porém todas serão detalhadas individualmente a partir de agora.

Todas as opções apresentadas serão as mesmas definidas no código-fonte e por isso mesmo que você não vá utilizar o plug-in, a leitura/estudo desse artigo valerá a pena para conhecê-las.

Para criar os posts personalizados ou novas taxonomias, basta preencher os campos e selecionar as opções necessárias e clicar em no botão ‘Create Custom […]’ apropriado.

Opções Para Posts Personalizados

As opções básicas são:

  • Post Type Name: o nome do post personalizado, sendo o único campo de preenchimento obrigatório;
  • Label: o nome que será apresentado no menu desse post personalizado. Escolha um nome no plural, de preferência;
  • Singular Label: aqui você escolhe o nome no singular, usado geralmente na tela de criação de conteúdo;
  • Description: adicione uma descrição para o seu post personalizado;

Se você apenas preencher com o nome do post personalizado e clicar no botão ‘Create Custom Post Type’, ele será criado com todas as opções padrão. Mas o interessante mesmo são justamente essas opções, acionadas ao clicar no link correspondente.

O primeiro grupo é acionado ao clicar em ‘Advanced Label Options’ e são as opções referentes ao rótulo dos itens, ou seja, como serão lidos dentro do Painel do WordPress. Caso os campos não sejam preenchidas será utilizado o conteúdo das opções básicas.

Mas sugiro que você preencha todos os itens, pois assim o seu post personalizado será “traduzido”. Vamos conhecer cada uma:

  • Menu Name: a forma plural do seu post personalizado;
  • Add New: o item no menu para adicionar um novo post personalizado;
  • Add New Item: o nome mostrado no cabeçalho da tela de criação;
  • Edit: o item do menu para edição;
  • Edit Item: nome mostrado no cabeçalho da tela de edição;
  • New Item: mostrado nos favoritos do Painel do WordPress;
  • View: usado no texto do link para visualizar o post personalizado dentro da tela de edição;
  • View Item: usado no texto do botão de visualizar o post personalizado na tela criação/edição, ao lado do link permanente (permalink);
  • Search Items: texto do botão de pesquisa da área de gerenciamento do post personalizado;
  • Not Found: texto mostrado quando não houver resultado na busca do post personalizado;
  • Not Found in Trash: texto mostrado quando não existir posts personalizados na lixeira;
  • Parent: rótulo usado para os “posts personalizados pai” dentro da área de edição dele. Somente útil quando existir hierarquia;

Já nas ‘Advanced Options’ você tem:

  • Public: é usado como argumento para outras opções. Escolhendo ‘True’ você deixa o post personalizado ser visualizado e escolhendo ‘False’ ele é “escondido” no seu WordPress, como numa pesquisa, por exemplo;
  • Show UI: define se o meu será visualizado dentro do Painel do WordPress. ‘True’ para mostrar e ‘False’ para ocultar;
  • Has Archive: define se o post personalizado será visualizado na página de arquivamento. ‘True’ mostra e ‘False’ oculta;
  • Capability Type: defina o tipo de regra para os usuários do WordPress. Essa opção será mais detalhada no próximo artigo;
  • Hierarchical: defina se existirá se poderá existir uma hierarquia com o post personalizado, assim como acontece com as páginas. ‘True’ para sim e ‘False’ para não;
  • Rewrite: defina se poderá ser utilizado o nome do post personalizado como link permanente, como em ‘http://meusite.com/lg_filmes/o-dia-depois-de-amanha’. ‘True’ para sim e ‘False’ para não;
  • Custom Rewrite Slug: defina um nome para o link permanente. Se for deixado em branco será utilizado o nome do post personalizado. Vamos supor que eu defina ‘filmes’, logo o link será mostrado como em ‘http://meusite.com/filmes/o-dia-depois-de-amanha’;
  • Query Var: defina se poderá ser feita uma consulta usando o post personalizado como parâmetro, como em ‘http://meusite.com/?lg_filmes=o-dia-depois-de-amanha’. ‘True’ para sim e ‘False’ para não;
  • Menu Position: defina a posição do menu dentro do Painel do WordPress. Mais informações sobre essa opção no próximo artigo;
  • Show in Menu: permite adicionar o post personalizado a outro menu do WordPress. Essa opção também será mais bem detalhada no próximo artigo;
  • Supports: escolha os blocos que serão exibidos na tela de criação/edição do post personalizado. Se nenhuma opção for selecionada, será exibido somente o título e editor;
  • Built-in Taxonomies: selecione o tipo de taxonomia que ao qual o post personalizado pertencerá. Na lista de opções estão ainda estão as categorias e tags do WordPress e as novas taxonomias criadas pelo plug-in;

Assim finalizamos esse artigo, mas como o assunto ainda continua no próximo artigo com mais opções para serem detalhadas.

Qualquer dúvida, sugestão, crítica ou elogio poderão ser feitos nos comentários.

Fiquem na paz e até lá!

Guia WordPress 3 Parte8 – Posts Personalizados e Novas Taxonomias

Olá caros leitores!

Em um mundo onde precisamos criar identidade própria, principalmente como fator de sucesso em algum site/blog, podemos realmente ter o WordPress 3 como aliado nessa construção.

O CMS evoluiu de um simples “sistema automatizado para blogs” para um completo “construtor de sistemas/sites/blogs” e muitas vezes isso assusta qualquer usuário, mas quero provar que o velho conceito de que “tudo é simples” ainda existe e está ainda mais evidente na versão 3, pois agora realmente é possível personalizar absolutamente tudo de modo bem simples.
strong
E isso inclui também o conteúdo. Por isso, a partir de agora você aprenderá enfim a usar os posts personalizados e as novas taxonomias.

A princípio, o maior problema que vejo ao utilizar esses novos recursos é a manipulação de código para adiciona-los. Mas como sempre pensamos em todos os leitores, também utilizaremos alguns plug-ins no processo.

Conteúdo do WordPress

Antes de tudo, precisamos de um pouco de teoria para entender exatamente esses recursos. Segundo a documentação do Codex, existem 5 tipos de conteúdo padrão que o WordPress utiliza:

  • Post: geralmente são exibidos em ordem cronológica e utilizados na publicação de feeds;
  • Página: não faz parte da estrutura cronológica dos posts, tendo suas próprias URLs. Podem possuir modelos especiais e uma estrutura hierárquica;
  • Anexo: post especial que contem informações sobre os arquivos enviados ao WordPress;
  • Revisões: é um rascunho dos posts e páginas existentes;
  • Menus de Navegação: informação sobre os itens do sistema de navegação do WordPreess;

Todos são armazenados no banco de dados, sendo identificados de acordo com o tipo de conteúdo e suas características.

Com o Post Personalizado é possível criar seu próprio tipo de conteúdo, podendo utilizar características daqueles já existentes, porém adicionando outros de acordo com a sua necessidade.

Dependendo do que for criado, esse novo tipo de conteúdo nada terá haver com aqueles já existentes. Na verdade o nome Post Personalizado deveria ser mudado para Conteúdo Personalizado.

Algumas ideias interessantes para o uso desse recurso incluem:

  • Base de dados para filmes ou livros, como no site Pop Critics;
  • Uma galeria de fotos como no site ThemeHybrid;
  • Fórum totalmente integrado ao WordPress;
  • Sistema de tickets para atendimento ao cliente ou helpdesk, semelhante ao WordPress Trac;
  • Portfólio Pessoal ou Empresarial;
  • Catálogo de produtos;
  • Calendário de eventos;

Veja que são inúmeras as possibilidades de aplicação do recurso.

Veja um exemplo bem interessante de conteúdo personalizado:

Na verdade esse é um site de demonstração do plug-in WP-Property, que apresenta informações específicas sobre venda de imóveis.

Repare na figura que existe uma galeria, um texto descritivo e detalhes específicos do imóvel, como o endereço, o preço e outros.

Agora imagina essas informações preenchidas para uma grande quantidade de imóveis. Como seria?

Utilizando os posts ou páginas do WordPress seria necessário perder um bom tempo, incluindo aí tags xHTML, para incluir todo o conteúdo.
strong
Mas utilizando os posts personalizados é possível criar um modelo específico de cadastro e então ajustar o tema para que toda a informação seja exibida.

O post personalizado pode ainda incluir outros recursos do WordPress. Ainda utilizando o exemplo, foram utilizados os campos personalizados para exibir os detalhes específicos do imóvel.

Esse recurso já foi detalhado em outro outro artigo, WordPress – Campos Personalizados, mas sua aplicação aqui foi bem mais abrangente. Em artigos futuros iremos tratar sobre como utilizar esses recursos no seu site ou sistema web de forma prática.

Novas Formas de Classificação

Também não podemos nos esquecer de que cada tipo de conteúdo permite novas taxonomias, ou seja, novas formas de classificação. No artigo WordPress – Criação E Organização Do Conteúdo foram apresentadas as formas de classificação já existentes.

Para ficar ainda mais claro, veja o exemplo de um novo tipo de conteúdo chamado “Filmes”:

  • Filmes: Post Personalizado;
  • Gênero: Taxonomia semelhante à Categoria;
  • Atores: Taxonomia semelhante à Tag;

A diferença entre gênero e atores é que no primeiro será possível adicionar subgêneros, ao contrário do segundo. Em termos técnicos dizemos que o primeiro permite uma hierarquia e o segundo não.

Adicionando o Novo Tipo de Conteúdo

Quando um Post Personalizado é definido no WordPress, a sua tela de criação poderá ser totalmente diferente do Post/Página. Por isso a mágica toda está justamente aí! 😀

Você poderá eliminar os blocos e campos desnecessários, poderá forçar a edição de alguns campos específicos, poderá utilizar o recurso de Campo Personalizado do WordPress e assim criar seus próprios:

Toda a informação cadastrada poderá ainda ser apresentada de forma personalizada no seu tema. Enfim, a imaginação é sua e o WordPress praticamente não impõe limites nessa caso. Aproveite! :d

Programação e Plug-ins

Todas as possibilidades apresentadas vão requerer modificações no código do WordPress, pois não estão disponíveis no Painel de Administração como aqueles apresentados até agora.

Nesse Guia do WordPress 3 nós iremos mostrar o básico e algumas implementações, porém será necessário muito cuidado ao manipular os códigos, pois poderão “acabar” com o seu WordPress.

Também serão apresentados alguns plug-ins que farão todo o trabalho de forma automática, como estamos acostumados a fazer. 😀

Mas em ambos os casos será realmente necessário conhecer os conceitos que envolvem esse recurso. Por isso, se você ainda não entendeu, releia esse artigo quantas vezes for necessário e caso ainda tenha dúvidas, utilize os comentários para podermos ajudar.

Continuamos o assunto no próximo artigo detalhando os plug-ins. Caso tenha alguma sugestão, crítica, elogio ou dúvida, utilize os comentários.

Fiquem na paz e até lá!

Como Criar Formulário no WordPress – Contact Form 7 Parte4

Olá Pessoal!

Todos nós detestamos receber spams em nossa caixa de entrada do e-mail. Isso é um fato! Ou tem alguém que gosta? Se por acaso alguém gostar então esse artigo não é para você, pois iremos tratar de algumas técnicas para evitar mensagens indesejadas no seu formulário.

Iremos utilizar um recurso chamado CAPTCHA, que segundo a Wikipédia é:

CAPTCHA é um acrônimo da expressão “Completely Automated Public Turing test to tell Computers and Humans Apart” (teste de Turing público completamente automatizado para diferenciação entre computadores e humanos): um teste de desafio cognitivo, utilizado como ferramenta anti-spam, desenvolvido pioneiramente na universidade de Carnegie-Mellon. Como o teste é administrado por um computador, em contraste ao teste de Turing padrão que é administrado por um ser humano, este teste é na realidade corretamente descrito como um teste de Turing reverso.

Link: http://pt.wikipedia.org/wiki/CAPTCHA

Provavelmente todos os que estão lendo já conheciam esse recurso, mas ainda não aplicou ao seu formulário por achar muito complicado. Em nosso blog já foram publicados alguns artigos que tratam sobre Spam e CAPTCHA. Veja alguns deles:

Em nosso caso, utilizado o Contact Form 7 tudo será feito de modo mais fácil e com o mesmo resultado utilizando a tag ‘CAPTCHA’.

Também serão mostradas algumas opções que você poderá utilizar junto com o plug-in Akismet e assim evitar ainda mais spams no seu formulário.

Tag CAPTCHA

Para utilizar esse recurso junto com o Contact Form 7 será necessário instalar outro plug-in, o Really Simple CAPTCHA, como está sendo informado nas opções da tag:

E mesmo que você faça a inserção da tag no dentro do formulário, o aviso também será emitido no site/blog:

Portanto primeiro passo será a instalação e ativação do Really Simple CAPTCHA para então prosseguir:

Na primeira parte dessa mini série você tem os passos necessários para a instalação de plug-in. É bem simples, mas em caso de dúvida ainda temos outros dois artigos que tratam do assunto com muito mais detalhes:

Você pode visitar o Site Oficial do Really Simple CAPTCHA para mais informações.

Agora sim, o plug-in adicional ativo, nós podemos analisar as opções da ‘tag CAPTCHA’:

Repare que será necessário adicionar duas tags no formulário, uma para a imagem e outra para o campo de digitação:

Portanto tome o devido cuidado para não inverter as tags ou ainda adiciona-las no lugar errado.

As ‘Configurações da imagem’ possui as seguintes opções exclusivas:

  • Cor do texto: defina uma cor para o texto da imagem utilizando o código hexadecimal;
  • Cor de fundo: a mesma coisa da cor do texto, mas aplicado ao fundo da imagem;
  • Tamanho da imagem: escolha o tamanho da imagem, com opções de ‘Pequena’, ‘Média’ e ‘Grande’;

Veja que será necessário conhecer o código hexadecimal das cores para que essa tag seja mais bem explorada. Um pequeno exemplo de códigos está na figura a seguir:

Por padrão, o texto é ‘Back’ e o fundo ‘White’, mas assim como está na figura, você pode “combinar” a cor do texto com a cor do fundo e criar um estilo próprio, como nos exemplos a seguir:

Repare que se o código hexadecimal do texto (fg:) ou do fundo (bg:) for omitido, o plug-in irá utilizar o padrão.

Aqui vale alertar que você precisa tomar cuidado para não atribuir a mesma cor para o texto e o fundo ou ainda utilizar “combinações estranhas” o que irá dificultar a leitura:

Faça ainda testes para cada tamanho da imagem para então escolher a melhor opção para o seu formulário.

Já as ‘Configurações do campo de digitação’ não possuem opções exclusivas. A dica aqui é atribuir 4 para o tamanho do campo (size) e a quantidade de caracteres (maxlength), pois assim não irá prejudicar seus usuários e o formulário ficará mais estilizado:

Em todos os exemplos anteriores foi utilizado o tamanho padrão do plug-in. E comparando com essa última figura dá para perceber a nítida diferença. Os usuários também perceberão essa diferença e não vão achar que você é um “relaxado” no design.

Alguns Problemas

Assim como qualquer plug-in, script ou sistema, o CAPTCHA do Contact Form 7 não está livre de problemas.

Para que o recurso possa funcionar é necessário que o servidor tenha as bibliotecas de Processamento de Imagem (GD) instaladas. Se você não tiver certeza disso, entre em contato com o suporte do servidor, apesar de que a maioria já vem com elas ativada.

Além disso, o plug-in cria uma pasta temporária dentro da pasta de upload do WordPress e armazena todas as imagens geradas, junto com outros arquivos. É mesma pasta já mencionada na última parte.

O nome da pasta gerada é ‘wpcf7_captcha’ e por padrão fica em ‘wp-contents/uploads/wpcf7_captcha’. É importante que a pasta de upload tenha permissões suficientes de escrita, pois caso contrário o CAPTCHA não será gerado.

Akismet

O Akismet é um plug-in que funciona com uma espécie de filtro para spams nos comentários do WordPress. Porém é possível também utiliza-lo junto com o Contact Form 7.

Nós já publicamos um artigo detalhando como instalar, ativar e configurar o Akismet. Por isso em caso de dúvidas leia o Akismet – O Plugin Do WordPress Anti-Spam Parte6.

No Contact Form 7 é possível encontrar as opções relacionadas ao Akismet em algumas tags. Na verdade são em apenas duas tags, mas talvez em atualizações futuras, sejam criadas ainda em mais tags.

Basta selecionar as opções para que a funcionalidade do Akismet sejam aplicadas, lembrando que é necessário que ele já esteja ativado e configurado corretamente dentro do WordPress.

As opções são:

  • Tag Campo de Texto: não utilize a duas opções abaixo no mesmo campo.

o   Este campo requer o nome do autor: faz com o que o Contact Form 7 aceite o nome de quem está enviando o formulário. É necessário que a tag seja adicionada no seguinte formato: [text* your-name akismet:author];

o Este campo requer a URL do autor: o formulário somente será enviado se a URL de quem está enviando for aceita. A tag deverá ser adicionada da seguinte formato: [text* your-url akismet:author_url];

  • Tag Campo de E-mail:

o Este campo requer o endereço de e-mail do autor: o formulário somente será enviado caso o e-mail de quem está enviando seja aceito. O formato da tag deverá ser da seguinte forma: [email* your-email akismet:author_email];

Quando essas opções são usadas, o Contact Form 7, antes de enviar o formulário para o seu e-mail, fará um espécie de “consulta” ao Akismet. Se a informação for aprovada, o formulário será enviado, caso contrário uma mensagem será exibida na tela. Essa mensagem poderá ser configurada no bloco ‘Mensagens’, que detalhamos na parte 1 dessa série:

Personalize a mensagem da forma que desejar.

E assim, seguindo as orientações desse artigo, você estará bem mais protegido contra todo o “lixo” que poderá chegar ao seu e-mail.

Muitos ainda utilizam as tags ‘Pergunta’ e ‘Aceitação’ como forma de prevenir os spams, o que não deixa de ser uma má opção. Mas geralmente essas mensagens indesejadas são enviadas por “robôs”, programas que conseguem detectar os campos de formulário e enviar mensagens.

Mas esses robôs são “ainda” muito falhos para detectar o CAPTCHA. Agora some a isso o filtro do Akismet. Vai ser bem difícil você receber mensagens “estranhas”, a não ser que seja enviado por um ser humano. Aí realmente não tem jeito! 😀

Espero que você possa se cuidar com todas as dicas aqui apresentadas. Em caso de dúvidas, sugestões, críticas ou elogios utilize os comentários. Mas sem spam, ok? 😀

Fiquem na paz e até a próxima.

Guia WordPress 3 Parte7 – Cabeçalho Personalizado

Olá caros leitores!

Parece que o WordPress 3 está realmente contando pontos a favor da personalização total do site/blog e tudo de maneira facilitada para quem entende pouco ou nada de programação.

No artigo de hoje você conhecerá como aplicar um cabeçalho personalizado ao seu blog com poucos cliques do mouse, juntamente com diversas dicas e os problemas envolvidos nessa questão.

Não vou falar muito da importância do cabeçalho, pois esse não é o objetivo aqui, mas lembre-se de que o topo do site/blog é a primeira parte que o usuário irá olhar. Por isso capriche com ele para arrancar somente elogio dos seus visitantes. 😀

Cabeçalho Personalizado

Com esse novo recurso fica muito mais fácil trocar o cabeçalho do seu site/blog. O processo é bem simples: basta escolher uma imagem, fazer o upload e salvar a alteração feita. Mas antes de entrarmos na parte prática, vamos analisar alguns problemas que podem ocorrer no processo.

Vale lembrar ainda que o recurso somente estará disponível se o tema aplicado possuir suporte para ele. Em nossa prática utilizaremos o tema padrão mesmo.

O primeiro problema que pode vir a acontecer é em relação ao tamanho da imagem, pois o cabeçalho tem um tamanho fixo e a imagem escolhida deverá ser do tamanho exato. Por isso a importância de prepara-la antes de ser aplicada.

No tema padrão a informação sobre o tamanho você encontra na área de gerenciamento, que iremos conhecer daqui a pouco. Mas em outros temas essa informação poderá estar em outro lugar. Consulte a documentação para descobrir o tamanho exato da imagem e assim fazer os ajustes necessários.

Se você adicionar uma imagem que não corresponda ao tamanho exato do cabeçalho, uma tela de recorte de imagem é aberta antes de aplicar imagem. Isso evita possíveis erros de alinhamento, mas podem trazer alguns outros.

Se uma imagem for muito pequena, por exemplo, ela será ampliada nas mesmas proporções do tamanho exato do cabeçalho, gerando assim uma imagem nada agradável, como você pode conferir na figura a seguir:

Repare que a imagem perdeu resolução e isso acaba aumentando todos os pontos de pixels dela, ficando assim toda quadriculada. Se você não quiser uma imagem no seu site/blog realmente faça os ajustes necessários antes do upload.

Outro problema que pode acontecer é quanto à permissão de escrita na pasta onde a imagem será salva, que é dentro da pasta ‘wp-content\uploads\ano\mês’, sendo que no ano e mês correspondem à data do upload. Garanta que a pasta ‘uploads’ tenha permissão suficiente de escrita para o usuário que estará fazendo o carregamento da imagem do cabeçalho.

E por fim existe o problema “da escolha errada”. Não caia nessa armadilha escolhendo uma imagem para o cabeçalho que não seja representante do seu site/blog. Lembre-se de manter tudo da forma mais agradável possível, sendo assim:

  • Nada de propagandas extravagantes;
  • Esqueça as imagens poluídas;
  • Se quiser, faça uma montagem adicionado o logotipo do site/blog;
  • Escolha uma imagem de acordo com o design, respeitando toda a legibilidade do site/blog;
  • Cuidado com os direitos autorais da imagem;

Uma dica é fazer diversos testes e assim ter uma visão daquilo que exatamente você irá adicionar ao seu site/blog com toda a segurança possível. Acredite serão apenas elogios! 😀

Praticando

Já ciente de todos os problemas, acesse ‘Aparência -> Cabeçalho’ para ter acesso à área de gerenciamento, que pode ser dividido em duas partes. Na primeira você tem:

  • Visualizar: você tem um preview da imagem aplicada atualmente ao cabeçalho;
  • Fazer upload de imagem: é aqui você tem as informações sobre o tamanho da imagem, pelo menos no tema padrão, que no nosso caso é de 940 x 198 pixels. Além disso, você poderá carregar uma imagem do seu computador clicando em ‘Selecionar arquivo…’, procurando e adicionando o arquivo e depois clicando em ‘Fazer Upload’ para finalizar o processo. Caso a imagem não tenha o tamanho exato do cabeçalho, você será levado à tela de recorte para fazer os ajustes necessários:

Reparem que existe uma área retangular pontilhada dentro da imagem, com alguns “pequenos quadrados” nas bordas. Utilize-os para definir o tamanho exato, pois o que estiver dentro dessa área será a imagem do cabeçalho quando você clicar em ‘Recortar e publicar’.  Por isso é necessário atenção redobrada para não escolher uma área muito pequena ou que tenha como resultado uma imagem sem sentido. Faça alguns testes e veja o que acontece. Veja alguns exemplos:

Veja que com apenas uma imagem você tem inúmeras possibilidades, sempre se lembrando dos problemas já mencionados anteriormente. Caso você tenha dúvidas sobre como manipular imagens no WordPress, leio o artigo WordPress – Adicionar Posts 8 Edição De Imagens e tire as suas dúvidas.

E na segunda parte da área de gerenciamento você encontra as seguintes opções:

  • Imagem padrão: você tem a sua disposição diversas imagens de cabeçalho do tema aplicado. Basta selecionar alguma imagem e salvar para que ela seja automaticamente aplicada como cabeçalho do site/blog;
  • Remover imagem: clicando no botão ‘Remover a imagem de cabeçalho’ você deixa seu blog sem imagem no cabeçalho:

Vale lembra que quando isso acontecer, essa opção some automaticamente;

  • Redefinir imagem: clicando no botão ‘Restaurar imagem de cabeçalho original’ você terá o efeito contrário da opção anterior, ou seja, irá adicionar a imagem de cabeçalho padrão do tema;
  • Salvar alterações: aplica todas as mudanças feitas;

E assim mais uma opção do novo WordPress foi completamente detalhada. Em caso de dúvidas você pode clicar no botão ‘Ajuda’ na parte superior da área de gerenciamento ou utilizar os comentários. Aproveite e mande suas críticas, elogios ou sugestões.

No próximo tem mais assunto novo. Fiquem na paz e até lá!

Como Criar Formulário no WordPress – Contact Form 7 Parte3

Olá Pessoal!

Nessa terceira parte iremos tratar sobre algumas opções de controle e segurança do formulário feito com o Contact Form 7 e assim aproveitar para detalhar as tags relacionadas.

Vale lembrar que algumas opções comuns a todas as tags do plug-in foram totalmente explicadas no último artigo, portanto não deixe de lê-lo antes de continuar.

Tag Aceitação

Esse tipo de recurso é muito comum, principalmente quando se tratar de cadastramento de usuários. Com essa tag você poderá inserir uma condição no formulário e com isso os dados preenchidos só poderão ser enviados se essa “condição” for aceita.

Dentre alguns exemplos de condições, podemos citar:

  • Aceito todos os termos;
  • Estou ciente de que meus dados estão sendo enviados para o Site XXX;
  • Tenho mais de 18 anos;
  • Aceito os termos do contrato;
  • Estou ciente de que não irei receber qualquer ônus ao enviar os dados cadastrados;
  • Declaro ter lido todos os termos desse cadastro;

Cuidado para não utilizar perguntas que “assustem” os usuários e muito menos os coagir:

  • Estou ciente de que o Site XXX poderá utilizar os dados desse cadastro;
  • Aceito ser cobrado;
  • Declaro que farei o pagamento de R$ 100,00 como parte desse cadastro;
  • Quero receber mensagens no meu celular ou no e-mail;

É claro que existem exceções, como se o cadastro for feito como parte de uma cobrança, mas deixe isso bem claro para quem estiver fazendo o cadastro, pois assim você evita diversos problemas.

Partindo agora para a prática, você tem as seguintes opções para a ‘tag Aceitação’:

  • Deixar esta opção marcada por padrão: a caixa de seleção já estará automaticamente marcada;
  • Fazer esta opção funcionar inversamente: o usuário terá que desmarcar para o botão de enviar ficar disponível;

O texto do marcador deverá ser feito em xHTML mesmo, pois caso contrário somente a caixa de marcação estará visível:

De certa forma isso vai ser até engraçado. Imagina o usuário preencher todo o formulário e não conseguir enviar porque deverá “adivinhar” o clique naquela caixa de marcação “solitária” perdida. 😀

Criando de maneira correta, o formulário ficará bem acessível:

Tag Upload de arquivo

Você também poderá deixar aos seus usuários e visitantes a possibilidade de anexar arquivos ao formulário, que poderão ser enviados diretamente ao seu e-mail. É possível definir o tamanho e o tipo do arquivo anexado.

A ‘tag Upload de Arquivo’ tem as seguintes opções exclusivas:

  • Limite do tamanho de arquivo (bytes): defina o tamanho máximo do arquivo, podendo ser bytes, kb ou mb. Exemplo: ‘1048576’, ‘1024kb’ ou ‘1mb’;
  • Tipos de arquivo aceitos: defina os tipos de arquivos que poderão ser anexados;

Por padrão, o Contact Form 7 já impõe algumas restrições e elas serão aplicadas quando essas opções estiverem vazias. São elas:

  • 1mb para tamanho de arquivo;
  • jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav e wmv para os tipos de arquivos.

Como dica vale dizer para sempre deixar o usuário informado sobre o tipo de arquivo e tamanho aceito:

Para receber os arquivos no seu e-mail, você deverá inserir a tag correta no campo ‘Arquivos anexos’ no bloco ‘E-mail’:

Caso nenhum erro ocorra, o arquivo será enviado sem problemas:

Veja que existe a possibilidade de adicionar mais campos desse tipo no mesmo formulário, assim como os outros. Utilize isso a seu favor! 😀

Antes de serem enviados para o seu e-mail, os arquivos são temporariamente armazenados dentro da pasta de upload definida em ‘Configurações -> Mídia’ na opção ‘Enviando arquivos’, que por padrão aponta para ‘wp-content/uploads’.

Dentro dessa pasta o Contact Form 7 irá criar outra chamada ‘wpcf7_uploads’ para ser utilizada no envio dos arquivos. Por isso, caso ocorra alguma mensagem de falha no envio é importante verificar se existem permissões de escrita suficientes na pasta de upload do WordPress.

Podem ainda ocorrer erros no PHP ao enviar os arquivos. Nesse caso consulte diretamente no site do PHP alguma solução.

Tag Pergunta

Eu particularmente adoro essa tag. Seu funcionamento é bem simples: você deve responder a uma pergunta para conseguir enviar o formulário, pois caso contrário uma mensagem de erro será emitida:

Esse recurso é usado geralmente para saber ser é mesmo um ser humano quem está enviando o formulário. Mas não vá adicionar perguntar difíceis ou impossíveis de serem respondidas, pois assim você nunca receberá os dados do formulário.

Outra possibilidade é criar uma pergunta que somente pessoas selecionadas conhecerão a resposta, ao estilo do “Abre-te Sésamo” do conto de Ali Babá. 😀

E assim existem muitas utilidades. A criatividade é sua!

A opção exclusiva para a ‘tag Pergunta’ é:

  • Perguntas: adicione as perguntas no formato ‘pergunta | resposta’. É possível adicionar quantas perguntas desejar, mas somente uma por linha. Elas serão visualizadas no formulário de modo aleatório. Vale ainda dizer que a resposta a ser preenchida pelo usuário deverá ser exatamente igual à resposta cadastrada, incluindo caracteres especiais, números, maiúsculos, minúsculos e acentos;

Ao adicionar a tag ao seu formulário, não será necessário acrescentar tags xHTML ou texto para informar sobre o campo:

Repare que do jeito que a pergunta é feita na opção ‘Perguntas’, ela é visualizada. Por isso é importante já fazer a formatação correta. Inclusive com o tamanho do campo:

Repare que o tamanho do campo ficou em ‘1’ assim como a quantidade de caracteres, já que a resposta exige apenas 1.

Nesse caso, cuidado para não cair numa armadilha, pois se você definir uma quantidade de caracteres menor do que a resposta precisar, o formulário jamais será enviado. E o cuidado deverá ser redobrado quando existir mais de uma pergunta:

Repare que somente uma da três perguntas poderá ser respondida com a quantidade de caracteres definida para 1. E como as perguntas serão aleatórias, se por acaso cair outra, como na figura abaixo?

O usuário só poderá inserir a letra ‘B’ e cuspir marimbondos logo em seguida. 😀

Como você pode perceber diversos cuidados são necessários ao utilizar as tags. No próximo artigo iremos tratar de outros assuntos relacionados ao plug-in, como o Spam, por exemplo.

Qualquer dúvida, sugestão, crítica ou elogio pode ser feito nos comentários.

Fiquem na paz e até lá!

Guia WordPress 3 Parte6 – Fundo Personalizado

Olá caros leitores!

O WordPress 3 quer facilitar de todas as formas a vida dos blogueiros e webmaster e para isso vai adicionando recursos que só era possível com plug-ins e modificações no código-fonte nas versões anteriores.

Um desses recursos bem interessantes é o Fundo Personalizado. Isso mesmo! Agora de modo prático, fácil e rápido é possível alterar o fundo do seu site/blog e assim deixa-lo do jeito que você bem entender e sem fazer modificações ou instalações extras, tudo na base do “clique do mouse”, assim como já estamos acostumados com o WordPress.

É claro que para essa funcionalidade estar disponível, é necessário que o tema aplicado ao WordPress tenha suporte para ele. Em nosso caso, para fins didáticos, iremos utilizar apenas o tema padrão mesmo.

Nesse artigo, além da prática, estaremos abordando todos os problemas relacionados ao recurso e analisando se é uma boa opção utiliza-lo ou não no seu site/blog.

Vamos lá?

Fundo Personalizado

Utilizado principalmente por blogs, o fundo deverá ser personalizado para dar mais destaque ao layout, dando assim “mais vida” e “enchendo os olhos” dos visitantes. Como um exemplo, podemos citar o site Game Trailers que utiliza o fundo para exibir os jogos em destaque:

Repare ainda que, dependendo da área do site, é exibido um fundo diferente. O WordPress 3 também permite modificações no código nesse sentido, mas como estamos tratando somente de gerenciamento, não iremos detalhar tais mudanças. Porém em outros artigos você encontra todo o passo a passo.

Analisando as duas imagens, podemos reparar que os fundos escolhidos não atrapalham a visualização das informações e nem “cansam” os olhos do visitante. É preciso ficar bastante atento a isso para não escolher imagens “poluídas” demais ou com muita propaganda.

Aliás, a propaganda no fundo deve ser a mínima possível, pois seu visitante pode acabar irritando-se e nunca mais visitar o seu blog. Por isso utilize esse recurso somente ser achar realmente necessário e útil ao seu site/blog.

Lembre-se de que o mais importante de um blog é o seu conteúdo e não a forma como ele é “enfeitado”.

Outro problema em relação ao fundo é o tamanho da resolução a tela, pois dependendo da imagem que você escolher, irá ficar cortada e com isso irreconhecível. Então em vez de ajudar no layout, os seus visitantes irão lançar comentários negativos sobre o seu blog. Além disso, em resoluções muito baixas o fundo simplesmente não aparece.

Praticamente é o mesmo problema encontrado no background do Twitter, no artigo Background Do Twitter Parte3 – Resolução De Tela. Como exemplo do que estou falando veja a figura a seguir:

Só para citar, repare que na resolução 1280 x 1024 a mão do boxeador simplesmente não aparece. O interessante é que o nome do jogo e algumas informações ainda estão presentes. Isso se deve ao fato da imagem ser preparada previamente para esse fim. Portanto não utilize qualquer imagem sem antes verificar todos os problemas mencionados até agora.

Para adicionar um fundo personalizado ao blog é realmente bem simples. O primeiro passo é ir em ‘Aparência -> Fundo’ para ter acesso à área de gerenciamento:

Para adicionar a imagem de fundo basta clicar em ‘Selecionar arquivo…’ e então escolher o arquivo do seu computador. Por fim basta clicar em ‘Fazer Upload’. Quando o carregamento da imagem estiver finalizado, novas opções irão surgir:

  • Remover imagem de fundo: clicando nesse botão a o fundo será removido junto com todas as suas configurações;
  • Posição: você escolhe onde a imagem estará posicionada;
  • Repetir: aqui é escolhido se a imagem irá repetir-se e como será feito;
  • Anexo: escolhendo ‘Rolar’ o fundo irá rolar junto com a página e ‘Fixo’ ela ficará parada, rolando somente o conteúdo do site/blog;
  • Cor: defina uma cor para o fundo em Hexadecimal. No caso de não conhecer, clique no hiperlink ‘Escolher uma cor’ para facilitar o trabalho, conforme mostra a figura:

  • Salvar Alterações: aplica todas as mudanças feitas;

Alguns detalhes devem ser levados em consideração na configuração do fundo, para evitar problemas com seu site/blog. Vamos citar apenas alguns:

1.       Dependendo do tamanho da imagem e seu posicionamento, o fundo não irá aparecer. Por exemplo: uma imagem pequena e com posição ‘Centro’ simplesmente não dá certo, exceto no caso de existir alguma repetição. Confira na figura algumas opções e seu resultado. A imagem escolhida tem tamanho 610 x 320 pixels:

Repare que com a mesma imagem foi possível criar um fundo de diversas formas. Mas por favor, não deixe o seu blog como nos exemplos, pois em minha opinião fica com um aspecto horrível, muito mal cuidado! 😀

2.       Faça testes! Escolha imagens de diversas resoluções e aplique as diversas opções disponíveis. Assim como ficará mais “por dentro” do que acontece com cada coisa.

3.       Nos testes que eu fiz, a melhor resolução de imagem foi de 1600 x 900, com posição ‘Centro’, ‘Sem Repetição’ e ‘Fixo’. Veja na figura:

Como o alinhamento da imagem parte do “centro” do blog, a montagem que eu fiz para o fundo ficou perfeitamente alinhada ao blog nas diversas resoluções possíveis. A cor verde aparece na parte de baixo porque a imagem não está repetindo-se. Porém essa cor só irá aparecer em resoluções realmente altas e como são poucas pessoas no mundo que a usam, não é preciso muita preocupação. Se for caso, selecione a opção ‘Repetir’ e problema resolvido! 😀

4.       Você pode selecionar apenas uma cor de fundo e nenhuma imagem ou ainda fazer uma “fusão” com os dois, ou seja, selecionado uma imagem que combine com a cor. Enfim, você tem em suas mãos diversas opções de personalização no caso de esse recurso. Faça testes, pesquise, “quebre a cabeça” no Photoshop e faça acontecer! O esforço valerá a pena quando alguém elogiar o seu site/blog. 😀

E assim terminamos mais um artigo detalhando mais um recurso que poderá ser útil ao seu site/blog. Qualquer dúvida, sugestão, crítica ou elogio pode ser feito nos comentários.

Fiquem na paz e até a próxima.

Como Criar Formulário no WordPress – Contact Form 7 Parte2

Olá Pessoal!

No último artigo você aprendeu sobre os princípios básicos de gerenciamento do Contact Form 7.

Como Criar Formulário no WordPress – Contact Form 7 Parte1

Por isso, a partir de agora iremos detalhar cada tag gerada pelo plug-in para construir o formulário de maneira bem prática.

Para não ficar perdido entre tantos conceitos e conteúdo técnico é importante que você conheça os tipos de campos de um formulário e um pouco de código xHTML e CSS para deixa-los bem estilizados e informativos.

As tags do plug-in servirão apenas para “construir” os campos do formulário e os códigos xHTML/CSS para organizar a informação que serão exibidas ao usuários. Analisando a figura abaixo, nós temos:

O que estiver entre colchetes [ ] são as tags do plug-in e o resto são tags xHTML adicionadas apenas para formatar a exibição do formulário e assim facilitar para o visitante, pois caso contrário o formulário ficaria assim:

O mesmo acontece com os e-mails enviados:

O formato da mensagem e de outros campos depende da composição de ambos os elementos, além do texto informativo.

O CSS já é aplicado de outra forma, utilizando as classes definidas dentro do arquivo ‘style.css’ do tema aplicado ao WordPress. Não se preocupe, pois até o final dessa pequena série de artigos, esses detalhes também serão explicados, além de outros assuntos. Por enquanto será detalhado cada tag do plug-in.

Manipulando as Tags do Contact Form 7

Quando você clica no botão ‘Gerar tag’ uma pequena caixa surgirá com diversas opções, dependendo dos tipos de campo que o formulário terá.

Mas antes de entrarmos em detalhes sobre cada tag, será necessário aprender a manipula-las. Veja:

De acordo com as opções usadas, a tag nas áreas em marrom e verde vão sendo formadas. E assim nós temos:

  • O que for gerado dentro da área marrom deverá ser adicionado ao ‘Formulário’, pois está vinculado a somente um campo;
  • Da mesma forma o que estiver sendo gerado dentro da área verde deverá ser adicionado ao e-mail que será enviado para o destinatário da mensagem;

E assim as tags, junto com o texto e o xHTML o formulário e o e-mail terão “vida” e suas informações serão visualizadas/enviadas de forma correta e sem problemas.

Aqui vale dizer que é necessária a máxima atenção na hora de criar o formulário e o e-mail de envio, tomando muito cuidado para não inserir uma tag ou informação no lugar errado. Imagina, por exemplo, o seguinte erro:

  • A tag [your-subject], que é assunto no lugar de [your-name] <[your-email]>, que é o nome e e-mail do remetente;
  • A tag [your-message], que é a mensagem no lugar da [your-subject], o assunto do e-mail;

O resultado desse erro você confere na figura abaixo:

O que acontecerá é que o destinatário receberá um e-mail com um assunto gigantesco e com o campo do remetente em branco (destacado de amarelo na figura), pois é aceito somente e-mail nesse campo. Você corre o risco da mensagem não chegar devido ao último erro, pois alguns servidores não aceitam isso.

Então a dica é tomar muito cuidado na hora de distribuir as tags, o texto, o código xHTML e o CSS.

Detalhando as Tags

Para começar, é necessário ter em mente que a maioria das opções são atributos dos campos do formulário e por isso quem já os conhece não encontrará grandes problemas.

Existem, porém, alguns detalhes específicos que serão totalmente explicados nos próximos artigos. Por hora vamos mostrar as tags comuns a diversos campos, tais como:

  • Campo obrigatório: deixe marcado para que o usuário seja obrigado a preencher o campo para conseguir enviar a mensagem;
  • Id: identificador único do campo, podendo ser usado pelo CSS, JavaScript e outros;
  • Class: classe do campo sendo muito utilizado para aplicar as folhas de estilo (CSS) ao campo ou formulário;
  • Size: tamanho do campo. São aceito somente valores inteiros;
  • Maxlength: quantidade de caracteres. São aceito somente valores inteiros;
  • Valor Padrão: o texto que será exibido no campo;
  • Use this text as watermark: quando essa opção não for selecionada, será necessário excluir o valor padrão do campo. Porém marcando essa opção, basta clicar “dentro” do campo com o mouse que ele automaticamente “sumirá”;

Aqui vale uma dica: cuidado ao definir o size e o maxlength, para que o preenchimento seja agradável por parte usuário. Explicando: Imagine, por exemplo, um campo de tamanho 50px, mas que aceite somente dois caracteres. É uma coisa meio “sem lógica”, não acha?

Existem ainda opções e tags específicas para tratar de SPAM e CAPTCHA, que serão tratados nos artigos seguintes, assim como as tags ‘Aceitação’, ‘Pergunta’ e ‘Upload de arquivo’.

As opções específicas das demais tags serão detalhadas agora:

  • Campo de Texto: não possui nenhuma opção extra. As opções relacionadas ao ‘Akismet’ serão tratados em SPAM;
  • Campo de e-mail: assim com o primeiro, só tem a opção não detalhada que será tratada em SPAM;
  • Área de Texto: as duas opções presentes servem para definir o tamanho da área de texto:

o   Cols: informe a quantidade de colunas para definir o tamanho da largura;

o   Rows: informe a quantidade de linhas para definir a altura;

  • Menu drop-down: cria um menu de seleção:

o   Opções: adicione os itens do menu, um por linha;

o   Permitir múltiplas seleções: permite escolher mais de um item com a ajuda da tecla Ctrl;

o   Inserir um item em branco como primeira opção: insere alguns pontos como primeira opção;

  • Caixas de seleção: cia uma caixa de seleção:

o   Opções: adicione os itens de seleção, um por linha;

o   Colocar o rótulo antes e a caixa de seleção depois: se marcada, a caixinha de seleção fica depois do rótulo;

o   Envolver cada item com a tag <label>: adiciona a tag <label> facilitando assim a estilização do formulário por meio do CSS. Veja por exemplo na figura, onde o destaque em amarelo não tem essa opção ativada;

o   Tornar as caixas de seleção exclusivas: se aplicada, será possível escolher somente um elemento, desmarcando as demais automaticamente;

  • Botões de rádio: possui as mesmas opções da tag ‘Caixas de seleção’ exceto pela ‘Tornar as caixas de seleção exclusivas’, já que nesse tipo de campo somente poderá ser selecionado um item mesmo;
  • Botão de envio: a única opção exclusiva é o ‘Rótulo’, texto que será exibido dentro do botão de envio;

E assim mais um parte desse fabuloso plug-in foi totalmente detalhado. No próximo artigo continuaremos a tratar do assunto.

Qualquer dúvida, sugestão, crítica ou elogio poderá ser feito nos comentários.

Fiquem na paz e até a próxima!

Como Criar Formulário no WordPress – Contact Form 7 Parte1

Olá Pessoal!

Quantas vezes você já pensou em colocar um formulário de contato dentro do seu blog/site, mas acabou desistindo, pois só encontrou códigos HTML/PHP ou plug-ins complicados?

Agora chegou a hora de mudar de ideia já que a partir de agora você irá aprender a trabalhar com formulários de forma rápida, prática, tranquila e funcionando sem problemas.

Estou falando do plug-in chamado Contact Form 7, disponível no diretório oficial do WordPress. Esse plug-in poderia ser facilmente classificado como premium e ser vendido, pois realmente possui recursos muito úteis, possuindo até um site exclusivo.

Entre suas características está o envio de e-mail para o administrador do WordPress, uso do Ajax, diversos tipos de campos, permite anexar arquivos, usar CAPTCHA , utiliza o Akismet para evitar spam e muito mais. Ele está disponível no idioma Português e faz a tradução automaticamente, com base no idioma instalado no WordPress

Para começar a usa-lo o primeiro passo é fazer o download do arquivo, descompactando-o dentro da pasta ‘\wp-content\plugins’. O próximo passo é ativa-lo em ‘Plugins -> Instalados’.

Também é possível fazer a instalação de forma automática, sendo apenas necessário acessar ‘Plugins -> Adicionar novo’ e no campo ‘Pesquisar’ digitar o nome completo dele, clicar em ‘Pesquisar plugins’ e depois em ‘Instalar’ na lista de resultado. Na janela que se abrir basta clicar em ‘Instalar agora’ e depois do download e instalação clicar na ação ‘Ativar o plugin’ para finalizar.

Gerenciamento Do Contact Form 7

O plug-in cria uma área exclusiva dentro do Painel de Administração, localizado em ‘Contato -> Editar’, que é dividida em diversas partes.

Para começar, no topo você tem a possibilidade de criar um novo formulário ou então editar os já existentes. De início, somente um formulário estará disponível, o ‘Formulário de contato 1’:

Mas é possível adicionar a quantidade que você quiser:

Repare que na figura existem quatro formulários (Contato, Pesquisa, Opinião e Orçamento), que clicados permitirão que sejam editados na parte de baixo dessa área.

Adicionando e Outras Ações

Para adicionar novos formulários, basta clicar no hiperlink ‘Adicionar novo’, escolher seu idioma e então clicar no botão ‘Adicionar novo’:

Agora clique em cima de ‘Sem nome’ para modificar o nome do formulário e depois em ‘Salvar’ para completar a inclusão:

Para adicionar o formulário ao post/página/widget do WordPress, copie o shortcode criado no bloco logo abaixo, dentro da faixa marron:

Analisando a figura, temos:

  • O shortcode é o

    Nome: (*)

    Email: (*)

    Assunto: (*)

    Mensagem:

    ;
  • É possível fazer uma copia do formulário clicando na ação ‘Copiar’ ou apaga-lo de vez do WordPress clicando em ‘Excluir’;
  • Para renomear o formulário basta clicar em cima de ‘Contato’, inserir o novo nome e depois no botão ‘Salvar’;

Editando…

Por padrão, todos os formulários inseridos vêm com os seguintes campos: nome, e-mail, assunto, mensagem e o botão enviar. Mas é possível montar um formulário da forma que você quiser adicionando os campos necessários.

Para isso você deve utilizar o segundo bloco, chamado de Formulário:

Na coluna à esquerda você tem o código do seu formulário, que é uma combinação de código xHTML e tags do plug-in. Essas tags são geradas na coluna à direita, clicando no botão  ‘Gerar tag’, que tem as seguintes opções:

Os detalhes de cada um você confere no próximo artigo. Por enquanto vamos continuar analisando os outros blocos, como o de E-mail:

Na verdade existem dois blocos desse tipo, sendo o que o segundo só é ativado quando marcado a opção ‘Usar e-mail (2)’. Nesses campos você informa para qual e-mail o formulário será enviado e como será o corpo da mensagem. Repare que você pode utilizar as tags do plug-in.

Outro bloco disponível nessa área é o de Mensagens. Suas opções apenas são estarão visíveis quando o hiperlink ‘Exibir’ do bloco for clicado:

O hiperlink ‘Exibir’ automaticamente mudará para ‘Ocultar’. No bloco Mensagens você pode definir com suas palavras todas as mensagens geradas pelo plug-in, incluindo os erros.

Ainda temos o bloco Configurações Adicionais que somente possui uma caixa de texto:

Assim como o bloco Mensagens, só aparece quando o hiperlink ‘Exibir’ do bloco for clicado. Aqui você poderá adicionar qualquer outra opção de configuração, geralmente em código JavaScript.

Assim chegamos ao fim do artigo, mas não do assunto. Continuaremos explicando como configurar cada tag do plug-in. Em caso de dúvidas, não hesite em utilizar os comentários. Aproveite ainda e deixe sua sugestão, elogio ou crítica.

Como Criar Formulário no WordPress – Contact Form 7 Parte2

Fiquem na paz e até a próxima!

Guia WordPress 3 Parte5 – Menus Avançados

Olá caros leitores!

No último artigo foi apresentando de maneira bem prática o novo sistema de menus do WordPress 3. Hoje iremos entrar em alguns detalhes mais avançados de configuração, muito útil para você personalizar ainda mais o seu site/blog.

Para começar acesse ‘Aparência -> Menus’ para que possamos explorar melhor cada item de menu:

Repare que cada item tem uma pequena seta do lado direito, algo bem característico da administração do WordPress. Quando clicamos nessa “setinha”, surgem algumas opções, dependendo do tipo de item.

Para o tipo ‘Personalizado’ temos:

  • URL: o hiperlink de destino do menu, podendo ser usado qualquer URL. No caso da figura foi criado um item personalizado que leva o usuário à página principal do site/blog;
  • Rótulo de navegação: o nome que será exibido no menu;
  • Atributo do título: usado para aplicar acessibilidade, pois irá exibir num pequeno balão a função do menu quando o mouse estiver em cima do item:

  • Remover: exclui o item do menu;
  • Cancelar: cancela qualquer tipo de alteração;

Talvez você esteja perguntando agora: cadê o botão de salvar de cada item? É uma boa pergunta!

Para salvar qualquer alteração nos itens de menu você deve clicar no botão ‘Salvar menu’, localizado acima de todos os itens (veja na primeira figura desse artigo). Por isso você deverá fazer a alteração em todos os itens que desejar e então salvar, pois caso contrário tudo o que você mudou não será aplicado.

Para os tipos ‘Página’ e ‘Categoria’ temos algumas mudanças:

Podemos apenas alterar o rótulo, adicionar o atributo, remover e cancelar. Além disso, é apresentado o nome da página/categoria original e assim você não fica “perdido” em caso de mudança do rótulo.

Novos Tipos de Menus e Mais Opções

Agora iremos complicar um pouco mais o gerenciamento de menus do WordPress 3. Nessa mesma área, na parte de cima, você tem as ‘Opções de tela’:

Clicando nesse botão você tem:

  • Mostrar na tela: permite mostrar na tela os locais dos temas e os tipos de itens de menus que podem ser adicionados. Veja que ainda temos ‘Posts’ e ‘Tags do post’;
  • Mostrar propriedades avançadas de menu: permite adicionas mais opções aos itens de menu;

Marcando todas as opções, a área de gerenciamento irá acrescentar mais dois itens de menu:

São opções bem interessantes, mas que precisam de um cuidado no que diz respeito à legibilidade do seu site e precisam de um planejamento maior, principalmente no caso dos Posts, devido ao tamanho dos títulos.

Imagina adicionar todo os posts como itens de menu? É uma atitude que causaria certa “confusão visual” no seu site/blog:

É claro que essa atitude depende de blog para blog e tudo vai depender muito de um planejamento prévio do layout e organização das informações.

Além dos novos itens de menu, mais opções para elas irão surgir ao se marcar todas as opções de tela:

  • Destino do link: é possível definir se o item de menu irá abrir na mesma janela/aba ou numa nova;
  • Classes de CSS: aqui você deve informar as classe de CSS voltadas exclusivamente para os itens de menu, lembrando de tomar cuidado, pois se cada item tiver uma classe diferente, os itens serão apresentados de forma diferente. Na maioria dos casos existe uma classe de CSS voltada exclusivamente para todo o menu do tema. Consulte outros artigos para tirar suas dúvidas;
  • Relação de Links (XFN): informe o relacionamento com o item em questão. Para saber mais sobre a especificação XFN consulte o artigo “WordPress – Widget Links Parte 2” ou visite o site oficial do  Xhtml Friends Network (XFN).
  • Descrição: adicione um pequeno texto descrevendo o item do menu. Essa descrição, assim como já está informado, poderá ser exibida no tema, caso haja suporte para essa opção.

É claro que você não precisa utilizar todas as opções citadas. Utilize apenas aquelas que realmente irão melhorar o seu site/blog em algum sentido, quer seja na acessibilidade, no layout, nas informações ou em qualquer outro ponto.

Itens de Menu Para Posts Personalizados e Novas Taxonomias

O WordPress 3 realmente veio de maneira arrasadora. Além de tudo do que citamos até agora, ainda é possível adicionar seus posts personalizados e novas taxonomias como itens de menu. Ou seja, você poderá adicionar um novo recurso dentro de um novo recurso do WordPress 3.

Ainda não detalhamos os Posts Personalizados e Novas Taxonomias nesse guia. Apenas mostramos onde estão localizados na parte 2. Pense neles como sendo posts/páginas e tags/categorias respectivamente. Sendo assim será possível adiciona-los, assim como já fizemos com os outros elementos nesse artigo.

Quando os posts personalizados e as novas taxonomias forem criados dentro no WordPress 3, irão estar disponíveis nas ‘Opções de tela’, assim como mostra a próxima figura:

Os itens destacados são:

  • Notícias é um post personalizado;
  • Info e Promoções são taxonomias;

Basta deixa-los selecionados para que estejam visíveis na área de gerenciamento:

Assim você poderá adiciona-los como itens do menu da mesma forma como foi feito com os posts, páginas, categorias e outros já mostrados anteriormente.

Se você ainda tiver qualquer dúvida sobre os menus e seu gerenciamento, existe o botão ‘Ajuda’ ao lado das ‘Opções de tela’ com muitas informações e links úteis para te ajudar.

Você ainda poderá consultar outros artigos em nosso blog ou ainda utilizar os comentários para tirar dúvidas, criticar, elogiar ou sugerir algo para todos nós.

No próximo artigo assunto novo. Fiquem na paz e até lá!