O usuário Angelo Lucas do nosso fórum postou a seguinte resposta:

1. Desenvolva o Front-End do tema (HTML, CSS e Javascript)
2. Instale o PHP, Mysql na sua máquina. Baixe o WordPress e instale-o, ele vem com alguns temas incluso
3. Duplique um tema do wordpress e começe a implementar seu HTML na programação já existente, não é difícil, não é chato.

Gostei bastante da resposta, mas o assunto é tão empolgante que merecia um conteúdo mais detalhado. E para melhorar o aprendizado e nos guiar, desenhei um layout bem simples. Não reparem, sou péssimo design.

Iniciando o desenvolvimento

Com o front-end concluído, duplique o tema padrão do WordPress e altere o nome da pasta duplicada para o nome do seu tema. Acho melhor duplicar, pois se perde um tempo criando os arquivos do zero. Se o seu WordPress for a partir da versão 3.2, terás dois temas padrões: o Twenty Ten e o Twenty Eleven. A diferença é que o Twenty Eleven vem programado nas tags do HTML5.

Depois disso, é importante entender a hierarquia de arquivos do WordPress e saber que sem os arquivos index.php e style.css o tema não funciona.

O arquivo style.css, além do estilo do tema, pode-se preencher informações do tema. Adicione no inicio do style.css esses comentários:

Personalize a partir das suas informações, mas não é necessário preencher todas elas, colocar o nome do tema e o nome do autor está ótimo.

Dois arquivos do tema possuem importância e servem para aumentar a nossa produtividade, que são: header.php e footer.php e essas páginas são incluidas nas páginas através das funções get_header() e get_footer(), respectivamente.

Vou mostrar um exemplo de meus arquivos header.php e footer.php para vocês terem noção.

header.php

Estudem essas funções: bloginfo(), wp_title(), wp_head() e wp_footer().

wp_nav_menu, WTF??? O que é isso, Paulo? Calma, é uma função para retornar menus, confira esse artigo de criação de menus no WordPress, que aí tenho certeza que vai entender tudo.

Personalize essas páginas através do seu front-end, tente explorar o máximo dessas páginas para não perder tempo nas páginas internas.

Finalizando esse inicio, o esqueleto do seu tema está pronto!

Trabalhando com a página inicial e páginas internas

Beleza, concluímos nosso “esqueleto”, e a partir daí vamos criar as páginas do tema. A página índex.php é a página inicial do tema, ela só não é a página inicial, quando adicionamos ao nosso tema a pagina home.php. Mas de inicio, vamos trabalhar com a página índex.php.

Já ouviram falar no Loop do WordPress? Confiram esse artigo pois vão entender para o que ela serve.

Vamos ao exemplo da página inicial:

Estude a função the_time() e a forma de customizar data e hora dessa função.

A função the_post_thumbnail serve para retornar os Posts Thumbnails, Caso não tenha interesse, pode remover a função, mas se tiver interesse, aprenda através desse artigo.

A função get_sidebar() serve para retornar o que está no arquivo sidebar.php, e esclareça suas dúvidas nesse artigo para criação de sidebars

Arquivo sidebar.php

Não se limite a esse artigo, aprofunde seu conhecimento através da documentação disponibilizada pelo WordPress. “Futuque” novas funções, pois é assim que se aprende, é quebrando a cara e arriscando. Basta somente ter interesse!

Esperem pelas próximas partes deste artigo, pois vou aprofundar mais esse assunto e pensar no WordPress como um poderoso CMS.

Quero deixar o espaço sempre aberto para quem tiver dúvidas, dar sugestões, criticas construtivas, ect. Podem comentar, enviar email e encher o fórum do Tableless, pois de lá nasceu a idéia para esse artigo e tenho certeza que nascerá os próximos também.

Posts Relacionados

• Google Chrome para Android
• Agora é a vez dos desenvolvedores
• ePub: Aprenda a criar um livro digital
• jQuery: métodos desconhecidos
• A melhor parte da viagem é o caminho

Hoje existe uma diversidade de plugins para tornar seu site em uma loja virtual. Mas de uma maneira pratica e objetiva, apresento o plugin: WP e-Commerce.

O WP e-Commerce é o plugin mais popular e prático para transformar o seu site em WordPress em uma loja virtual. Trabalhar com o WordPress já é fácil, trabalhar com o WP e-Commerce é mais fácil ainda.

5 Motivos para usar o WP e-Commerce

1. Plugin gratuito, fácil de instalar, altamente personalizável e funciona bem com qualquer tema compatível com o WordPress;
2. Disponível em várias línguas, inclusive em português;
3. Suporta múltiplas moedas, inclusive o real;
4. Além de ter várias formas para pagamento, até com o PagSeguro;
5. 100% amigável com SEO, e plugins de SEO para WordPress;

Tudo isso e muito mais! Confira a lista completa. Veja também a secção de vídeos explicando tudo sobre o WP-eCommerce.

Além do WP e-Commerce, o ShopperPress é uma alternativa para essa integração de lojas virtuais com WordPress.

Mais comentados

• Editores
• Quer testar o Google Analytics?
• O Chrome não quer dizer muita coisa
• Não “otimize” seu código
• Desenvolvedor analfabeto (sim, é sobre WYSIWYG)

No caso de CSS, os frameworks constituem bibliotecas que visam permitir a codificação do CSS de modo mais fácil e compatível com padrões de estilos, agregando uma série de opções já prontas para projetar uma página web, como se fosse um esqueleto, reduzindo o tempo gasto com o desenvolvimento.

Os frameworks CSS geralmente apresentam definições de formatação os elementos mais comuns de uma página: formulários, cabeçalhos, estilos de textos e imagens. Alguns apresentar opções para a estruturação do conteúdo baseado em grids.

A utilização de frameworks HTML e/ou CSS ainda é um assunto que divide a opinião dos desenvolvedores, pois muitos consideram o framework como uma solução pronta e acreditam que ele tira o trabalho das mãos do designer/desenvolvedor e faz com que ele não aprimore os seus conhecimentos.

Será que você, sem perceber, nunca criou o seu próprio framework? Pense em um arquivo CSS padrão (além do reset) que você criou para melhorar a produtividade de seus projetos.

É importante esclarecer que o uso de frameworks não substitui a necessidade do designer/ desenvolvedor de desenvolver o CSS do site. Ele apenas fornece uma base para a formatação de elementos comuns e otimiza o trabalho repetitivo.

Para quem os frameworks são recomendados

Utilizar um framework CSS não é uma prática recomendada para quem está começando, principalmente por privar a pessoa da prática e do conhecimento sobre o funcionamento do CSS. Além disso, se ela não compreender bem CSS, poderá ter problemas para resolver problemas de layout causados por incompatibilidade entre o framework e um código CSS específico que ela inseriu.

Portanto, é recomendável que frameworks sejam utilizados por quem possui um nível razoável de conhecimento e compreensão do código, mas tem a intenção de otimizar parte do trabalho com o uso de um framework. E isto serve não apenas para quem pretende utilizar um framework CSS, mas também qualquer tipo de framework.

Quando é interessante utilizar?

• Prototipação rápida em HTML
• Sites de larga escala e com estruturas similares (como portais, blog/sites no estilo magazine)
• Sites construídos através de plataformas de CMS
• Projetos que tenham prazos curtos
• Projetos realizados em equipe onde há diversas pessoas trabalhando no mesmo CSS, podendo ter um conjunto consistente de padrões de codificação

Vantagens

• Padronização de código entre a equipe de desenvolvimento;
• Arquivos modularizados;
• Flexibilidade de estilos, classes genéricas que podem ser combinadas de diversas formas nos elementos da página;
• Geralmente já possuem uma documentação, que pode ser consultada pela equipe em caso de dúvida ou necessidade de solucionar algum problema;
• Compatibilidade cross-browser (na maioria dos casos);
• Você pode melhorar suas habilidades estudando o framework;
• Redução de tempo: o desenvolvedor/designer pode se concentrar mais nos aspectos particulares do site desenvolvido, pois a base está assegurada e não precisa desenvolvê-la do zero;
• Reduz futuros esforços de manutenção caso seja necessário resposicionar elementos ou alterar características de renderização (fonte, margens, etc) em diversos elementos.

Desvantagens

• Quantidade excessiva de modificações que devem ser feitas para adaptar o framework;
• O framework pode conter códigos irrelevantes que nunca serão utilizados no projeto e serão carregados sem necessidade, podendo diminuir o desempenho da página;
• Nem sempre o código é bem organizado;
• Muitos frameworks apresentam classes pouco semânticas (ex.: span-5).

Algumas dicas para melhorar o uso do framework

Como as classes geralmente não apresentam muita semântica, procure colocar IDs significativos nos elementos da página, quando possível.

Você também pode optar por utilizar somente uma parte do framework. Em projetos em que utilizei o Blueprint CSS, muitas vezes utilizava apenas algumas folhas de estilos do framework que se adequavam ao que eu necessitava.

Dica: evite usar vários frameworks CSS em um mesmo projeto. Isto quebra a ideia de consistência, uma vez que cada framework tem o seu padrão de estruturação.

Como escolher o framework?

• Verificar se é realmente necessário o uso de um framework CSS no projeto;
• Avaliar se o código do framework escolhido tem uma estrutura e organização;
• Avaliar se há código excessivo que nunca será utilizado;
• Conferir se há uma boa documentação;
• Verificar se os recursos do framework são adequados ao que você necessita para o projeto. Não adianta utilizar um framework CSS focado em renderização quando seria mais útil um framework de grid.

Frameworks CSS, se bem utilizados, podem trazer muitos benefícios para seus projetos, basta saber como explorar o potencial que eles possuem

Referências

Why you should NOT use a web framework - http://checkedexception.blogspot.com/2010/04/why-you-should-not-use-web-framework.html

To use a framework, or not to: that is the question - http://www.phparch.com/2010/04/to-use-a-framework-or-not-to-that-is-the-question/

Please do not Use CSS Frameworks - http://mondaybynoon.com/2007/08/27/please-do-not-use-css-frameworks/

Which CSS Grid Framework Should You Use for Web Design? - http://net.tutsplus.com/tutorials/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/

When to use CSS framework? - http://www.vcarrer.com/2008/08/when-to-use-css-framework.html

WHAT’S NOT TO LOVE ABOUT CSS FRAMEWORKS? - http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks/

Frameworks for Designers - http://www.alistapart.com/articles/frameworksfordesigners

Posts Relacionados

• Biblioteca CSS ou Framework?
• Escalabilidade client-side
• Digest 04/09: CSS, HTML e Layout
• Criando um Menu Horizontal com CSS
• CSS Frameworks ou como desaprender CSS

A web cresceu, e com isso várias tecnologias e ferramentas foram criadas ou melhoradas para suprir necessidades requisitadas pelos usuários. Ao longo do tempo clientes e usuários vão pedindo sites mais bonitos e atraentes, e também exigindo rapidez. Para quem usa WordPress, existe aperfeiçoamento e acertos para deixar ele mais rápido. Já para quem não usa, lamento, mas é bom prestar atenção algumas dicas, pois podem servir.

Comprima HTML, CSS e JS

Comprimir arquivos é essencial para reduzir o seu tamanho e melhorar o carregamento, pois menor é o seu tamanho, melhor e mais rápido ele vai abrir.

Para isso, usa-se o WP-Minify, este plug-in auxilia na compressão destes arquivos. Baixe WP-Minify, instale e ative as opções de compressão de que desejar.

Atenção: Ativando a compressão de HTML, se o seu código não estiver todo identado, não se espante. Quer uma dica? Se fores assim como eu, ative apenas a compressão do CSS e JS.

Otimize suas imagens

Por uma necessidade de sites bonitos, na maioria das vezes há um uso excessivo de imagens que na maioria das vezes estão mal otimizadas com alta qualidade.

Tente reduzir o tamanho das imagens do seu site sem que se atinja tanto a sua qualidade. Seja um background ou uma imagem qualquer.

Para reduzir o tamanho de imagens enviadas via WordPress, utilize o plug-in WP Smush.it

Use um Plug-in de Cache

Sempre é bom ter um plug-in de cache ativado no WordPress, como já citei no artigo “Otimizando seu site em WordPress para SEO”, o plug-in de cache, também ajuda no carregamento das páginas.

Re-indico WP Super Cache, W3 Total Cache, Batcache ou Hyper Cache.

Dicas úteis

1. Estrutura dos códigos: A estrutura do código também interfere, seja ele HTML, CSS ou JS. Para HTML, faça um código semântico, sem muitas gambiarras. Confira esse artigo para melhorar organização do código CSS, que vai ajudar muito.
2. Boa hospedagem: Ter um servidor com melhor qualidade ajuda muito no carregamento. Escolhendo uma boa hospedagem, tente também conter quedas no servidor.
3. Desative plug-ins desnecessários: É relevante desativar plug-ins desnecessários ou sem muita utilidade, pois seus arquivos quando requisitados vão ser acionados, aumentando o carregamento final.
4. Evite muitas requisições: Evite requisições desnecessárias, seja ela de CSS, JS ou até mesmo de outras páginas.
5. Mantenha seu WordPress atualizado: As atualizações do WordPress não vem em vão, pois tem sua importância. Atualizando, você vai melhorar o desempenho, além de evitar vulnerabilidades, aumentando a segurança.

Vamos Refletir

Repare… Ter um site bonito, nem sempre é ter um site pesado. Se prestarmos atenção, melhora-se muita coisa no site. Fique atento, pois por alguns milésimos você perder um usuário e/ou ficar com uma posição indesejada nos mecanismos de busca.

Com o CSS3, muita coisa vai melhorar. Muita coisa será substituída com os novos elementos. Uma pena que não virou padrão ainda, nos deixa mais triste saber que vai demorar até virar padrão. (Mesmo assim), seja ousado e use alguns elementos.

Relação com SEO: Demonstrei certa preocupação com o SEO se tratando deste assunto, pois o carregamento da página vai interferir no seu posionamento em mecanismos de busca, em especial o Google.

Você pode analisar, através da ferramenta do Google – Page Speed, a velocidade no carregamento do site. Se você usa Google Analytics, segue uma dica para analisar o carregamento do site.

Posts Relacionados

• Otimizando seu site em WordPress para SEO
• ePub: Aprenda a criar um livro digital
• CSS1K
• Front-end concluído, como começar no WordPress? Parte I
• Introdução ao CSS 3D – Flip Card

• aside
• gallery
• link
• image
• quote
• status
• video
• audio
• chat

Esses formatos são padrões, até hoje não se tem maneiras para criar um novo tipo de formato.

Ativando o suporte aos Posts Formats

Para ativar o suporte, adicione este seguinte código no arquivo functions.php do seu tema:

Não é obrigatório usar todos os formatos, e sim os quais você achar necessário. Caso queria adicionar mais formatos, adicione dentro do array os formatos disponíveis na lista acima.

Com este código, só é adicionado o suporte para o conteúdo de Posts, caso queria adicionar em outros tipos de conteúdo, adicione o seguinte código:

Essa função habilita o suporte para outros tipos de conteúdo, no primeiro parâmetro defini-se o nome do conteúdo e no segundo, o tipo de suporte.

Após ativar o suporte, terás dentro da edição do seus posts, um espaço feito esse para edição dos Posts Formats.

Personalizando o retorno dos formatos

Para especificar o suporte, utilizamos formatos padrões. Mas como ele vai ser visualizado, como ele vai ser interpretado, é você quem vai definir.

Um exemplo simples de manipulação dos formatos (como isso é um post, este código deve ser adicionado no loop) :

A função has_post_format, é um tipo de tag condicional que verifica qual o tipo formato visualizado.

No exemplo acima, utilizei os dados enviados pelo content como um link para algum site ou link para leitura de imagem.

Dica: Se for usar este exemplo, antes de postar, utilize a aba de editor HTML para evitar qualquer tipo de formatação, e use get_the_content para retornar o que foi enviado pelo editor, para também evitar qualquer tipo de formatação e retornar somente a informação enviada.

Você pode personalizar este retorno das maneiras que quiser. Se for usar esta função, seja mais criativo possível, explorando o máximo que essa função tem para oferecer.

Caso tenha maiores dúvidas, consulte o codex de Posts Formats

Posts Relacionados

• Tags Condicionais do WordPress
• Custom Post Types no WordPress
• Otimizando seu site em WordPress para SEO
• Criando Menus no WordPress
• Criando Sidebar Dinâmica no WordPress

Como usar?

Tags que podem receber parâmetros dentro de sua função, ex:

A tabela abaixo que encontrei no livro WordPress 3, é basicamente um mini-guia das tags que precisam de parâmetros e das que não precisam.

Para melhorar o conteúdo e o aprendizado, criei um Guia de Referência das Tags Condicionais do WordPress.

Posts Relacionados

• Posts Formats do WordPress
• Custom Post Types no WordPress
• Otimizando seu site em WordPress para SEO
• Criando Menus no WordPress
• Criando Sidebar Dinâmica no WordPress

Criando Custom Post Types

Como o assunto é muito amplo, criarei com vocês um exemplo de Notícias.

Em functions.php, adicione:

Primeiro adicionamos a função add_action, que vai abrigar dois parâmetros, o gancho (aonde vai rodar a função) e a função callback (a função que vai ser chamada com as informações). É função type_post_noticias que vai armazenar as informações do post. A variável $labels, está indicando os valores para cada título.

A variável $args é onde vamos colocar as informações do post. Explico com mais detalhes abaixo.

• labels: Indica a variável que contém as informações do label
• public: determina se o conteúdo pode ser visto no painel de administração, por padrão é falso.
• publicly_queryable: determina se a consulta pode ser realizada usando o argumento post_type, por padrão ele herda o valor do public.
• show_ui: determina se telas de adicionar e editar o post devem ser adicionadas esse tipo de post, por padrão ele herda o valor do public.
• query_var: evita consultas ou valores de sequência, por padrão é falso.
• rewrite: reescrita do link, por padrão é verdadeiro.
• capability_type: define o tipo de conteúdo que o tipo de post personalizado vai seguir, por padrão é post.
• has_archive: permite os arquivos do tipo do post, por padrão é falso.
• hierarchial: determina que o tipo do post é hierárquico (igual o das páginas), por padrão o valor é falso
• menu_position: determina a ordem do menu, por padrão é null (ele ficará em baixo do menu dos comentários), mas pode receber esses seguintes valores
  • 5 – Em baixo do menu Post;
  • 10 – Em baixo do menu mídia;
  • 20 – Em baixo do menu páginas;
  • 60 – Em baixo do primeiro separador;
  • 100 – Em baixo do segundo separador.
• register_meta_box_cb: Retorna a função que chamará as caixas de meta para o formulário (irei explicar à frente).
  supports: determina os recursos aceitos para esse tipo de post, por padrão é vazio, por isso tem que definir, ele recebe esses valores:
  • author: o autor por uma área personalizada
  • title: inclui o título ao tipo do post
  • editor: inclui a área de conteúdo do post (VISUAL ou HTML) e uploader de mídia
  • excerpts: inclui o campo de resumo
  • thumbnail: determina se o tipo de post pode inlcuir miniatura de post (http://tableless.com.br/adicionando-post-thumbnail)
  • comments: inclui os comentários
  • trackbacks: inclui os trackbacks
  • custom-fields: inclui a baixa de Custom Fields e se os campos serão automaticamente salvos
  • revisions: inclui revisões (armazenadas ou exibidas)
  • page-attributes: inclui a caixa Page Attributes (são encontradas na inserção de páginas), contendo as opções de parent, template e menu order.

Para o registro do post, é necessário a função register_post_type, que abrigará dois parâmetros. No primeiro é definido o nome do post (de preferência coloque em letras minúsculas e sem espaço, uma slug) e o outro agregará as demais informações do post, neste caso, a variável $args.

Criando Taxonomias

A taxonomia é uma forma de criar um tipo de categoria para o tipo de conteúdo.

Adicione em functions.php:

Com a função register_taxonomy, registramos uma nova taxonomia. O primeiro valor aonde será definido o nome da taxonomia (de preferência de letras minúsculas e sem espaço), o segundo valor é definido o nome do tipo de conteúdo registrado, onde essa taxonomia se agregará. No array, é definido informações já explicadas acima.

Criando campos personalizados

Vamos trabalhar com a variável register_meta_box na criação de campos personalizados. Para essa variável, foi definido o valor noticias_meta_box, que será a nossa função callback, a função que vai ser chamada para a criação da meta.

Em functions.php adicione:

Retornamos a função definida para a criação de meta box, dentro dela definimos na função add_meta_box, os argumentos respectivamente, são:

• $id: o nome para o meta box, destinado para uso interno
• $title: o título da caixa
• $callback: a função que irá ser chamada para imprimir o conteúdo da caixa
• $page: o tipo de post que vão existir esse meta, para aparecer em mais de um, coloque dentro de um array, ex: array(‘noticias’, ‘post’)
• $context: em qual parte da página de edição ela vai está (normal, advanced ou side [lateral])
• $priority: em qual altura a caixa deve aparecer dentro da seção (high [alta], normal, low[baixa), a depender do valor, caixas com prioridade maior ficará encima

Depois que definimos a meta, vamos agora retornar a função que vai imprimir o conteúdo da caixa:

A função foi criada, dentro dela imprimi-se o que o Box vai conter. Para garantir que o campo retornado é necessário usar a função get_post_meta. Ela requer três argumentos: o ID do post, o nome do campo (se possível sem acentos e nem espaços) e um valor true/false determinando se a função deve retornar um valor individual ou não.

Por fim criaremos a função que vai salvar as alterações dos campos personalizados:

Inicialmente adicionamos a ação no gancho save_post com o retorno da função save_noticias_post. A função update_post_meta vai receber três argumentos, os dois primeiros serão iguais aos explicados na função get_post_meta, a única diferença que o ultimo argumento vai receber o valor alterado, caso seja alterado manualmente colocamos uma simples string com o outro valor. Neste caso a alteração será feita após o envio do formulário.

Criando um LOOP personalizado

Vamos criar o LOOP personalizado de acordo com o tipo de post, caso ainda não tenha visto o que seja um LOOP, veja

Aonde queria que aparecesse a repetição, adicione:

O único termo desconhecido no Loop é a função get_the_term_list, que vai retornar a taxonomia para o post. O primeiro argumento é o valor do ID do post, o segundo valor é o nome definido da taxonomia, o terceiro valor é o que vai retonar antes de retornar as taxonomias e o último o separador.

Não há dificuldade, o segredo está na variável $newsArgs, que é aonde você vai definir as opções da repetição, ele pode receber mais argumentos, que você pode ver em: http://codex.wordpress.org/Function_Reference/WP_Query

Para visualizar um post, editamos as informações no arquivo single.php do nosso tema, quando temos um Custom Post Type, por padrão ele lê com essa página, caso queria ter uma pagina só para o tipo de post, você pode uma nova página chamada single-{slug}.php, ou seja, essa slug seria trocada pelo nome do Custom Post Type, no nosso caso, single-noticias.php.

Feeds para tipos de post personalizado

Se seu site existe muitos leitores via feed e você quer mostrar o conteúdo personalizado, como fazer? Lendo um livro, WordPress 3 Básico (livro que indico para iniciantes ou desenvolvedores natos), achei essa solução, muito simples.

Em functions.php, adicione:

No código vamos adicionar o filtro para a consulta de conteúdo para o Feed, você pode adicionar inúmeros conteúdos personalizados.

Reduzindo o código

Existe mesmo a necessidade para registrar o Custom Post Type a quantidade de argumentos que foi mostrado? Não.

Neste artigo fez questão de mostrar a maioria das variáveis, mas você pode reduzir o código ainda mais em futuras alterações. Em vez de registrar o seu conteúdo com aquele código enorme, pode-se substituir por:

Ambas as formas estão corretas.

Posts Relacionados

• Adicionando Post Thumbnail
• Posts Formats do WordPress
• Tags Condicionais do WordPress
• Otimizando seu site em WordPress para SEO
• Criando Menus no WordPress

Elogiam muito o WordPress por ele ter uma facilidade para otimização de sites (SEO). Antes de começarem a ler as dicas que vou citar, faça a seguinte reflexão: O que é um site hoje, sem ser bem indexado pelos mecanismos de busca?

Melhore a tag title do seu site

Você acha mesmo que a tag de título do seu site não tem importância? Espero que não, pois é com ela que os mecanismos de busca reconhecem uma das primeiras informações do seu site.

Coloque o seu título da seguinte forma:

A função wp_title imprime vários resultados a depender da sua página.

Links permanentes (Permalinks)

Quem usa WordPress e não usa essa função básica, não sabe o que está perdendo. A URL também tem uma função importante para indexação de sites, pois também é reconhecido antes da página ser carregada. O seu site sairia na frente de diversas URL’s que usam aqueles parâmetros grandes e sem semântica.

Dentro de seu painel de administração, procure por Settings (Configurações) e depois Links Permanentes (Permalinks). Selecione a opção Custom Structure (Estrutura Personalizada) e altere sua estrutura para:

Otimizando as metas do seu site

Para otimizar as metas, utilize o plug-in All in One SEO Pack, com esse plug-in conseguimos facilmente manipular as metas e também títulos do site. Com ele, alteram-se as metas de descrição e keywords (palavras-chave) da página inicial e também dos posts, além dos títulos de cada página.

Baixe o plug-in, instale-o e ative.

Mecanismos de busca odeiam SPAM

Os mecanismos de busca odeiam SPAM, ou seja, odeiam conteúdo ruim e/ou desnecessário. Existe um plug-in que modera spam no seu site, chama-se Akismet. Geralmente ele já é incluído quando você instala o WordPress, mas caso não encontre depois que instalar, baixe-o e ative-o.

Para usar do plug-in é necessário resgatar um código gerado pelo site deles.

Use semântica no seu código

Do que adianta ter todos esses aperfeiçoamentos no seu site e seu site não estiver com um código semântico? Por isso trabalhe com um código de qualidade para que não haja dificuldade para seu código ser lido pelos mecanismos de busca.

Use alt e title para as imagens, não esqueçam, pois as imagens só podem ser lidas desta maneira. Trabalhe bem com as tags de título <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, e estabeleça uma hierarquia entre elas.

Utilize sempre um plug-in de cache

A partir da demanda do seu site e ele for crescendo em questão de conteúdo, é sempre bom ter um plug-in de cache para diminuir o carregamento da sua página, sendo assim os mecanismos de busca não terão dificuldades para carregar seu site.

Indico WP Super Cache, W3 Total Cache, Batcache ou Hyper Cache.

Tenho certeza que com um deles, seu site estará em boas mãos em relação ao cache.

Sitemaps (mapa do site)

Para os mecanismos de busca, um sitemap ajuda nas buscas de páginas, pois ele relaciona as URL existentes no seu site. Leia esse artigo e veja o porquê do uso de sitemaps.

O WordPress tem um plug-in que gera um sitemap já otimizado para mecanismos de busca.

Use o Google SiteMap Generator e não tenha possíveis problemas para este assunto.

Crie um bom Meta Robôs

É importante você ter um robots.txt na raiz do seu site, que é um arquivo funciona como filtro para os Crawlers e os robôs dos mecanismos de busca, permitindo ou não acesso a páginas do seu site.

Crie um arquivo em txt, chamado robots.txt com o seguinte código:

Envie para o servidor e ponha na raiz do seu site.

E no header.php do seu tema, adicione o código:

Faça um bom conteúdo

Não adianta ter um site todo otimizado para os mecanismos e eles não terem o que buscar de conteúdo no seu site. Fazer um bom conteúdo é essencial para qualquer indexação de artigo, página, textos ect.

Também não se esqueça de trabalhar com as redes sociais, pois maior quantidade de links gerados para o seu site, maior relevância ele terá.

Seja sempre objetivo e claro na suas publicações, tenho certeza que terá um bom resultado. Vale ressaltar que o Google está punindo quem copia conteúdo, muito cuidado.

Caso tenha futuras dúvidas, o WordPress oferece no seu codex um guia para otimização de SEO

Posts Relacionados

• Nem só de client-side vive um site
• Melhorando carregamento do WordPress
• Posts Formats do WordPress
• Tags Condicionais do WordPress
• Custom Post Types no WordPress

Com este pensamento, criei um PDF simples, onde cito os principais problemas se prever o desenvolvimento para browsers ou meios de acesso antigos. É um documento onde você poderá imprimir e dar para o seu chefe e integrantes da sua equipe. É uma ferramenta para que você tenha alguma munição para te ajudar a convencer aqueles que tentam insistir no erro de manter uma compatibilidade perfeita entre browsers atuais e browsers de 12 anos.

Baixar o PDF – Guerra contra o Terror

Update A Microsoft anunciou sue a partir de 2012 o IE terá atualização automática nos sistemas Windows XP, Windows Vista e Windows 7. Isso quer dizer que estamos mais perto da salvação.

Posts Relacionados

• Experiência deve ter começo, meio e fim
• Manipulando a metatag Viewport
• Novo parser HTML5 – FF4
• Convertidos do Tableless
• Quem precisa de versão mobile?

Habilitando e registrando o menu

Em functions.php do seu tema, adicione:

De início, verificamos a função register_nav_menu. Dentro da função, abrigamos dois parâmetros, que são: nome do menu (de preferência sem espaços e letras minusculas) e a descrição do menu. Ambos são obrigatórios nesta função.

Essa função já habilita o suporte para os menus.

Retornando o menu

Adicione o seguinte código onde queira que o retornasse o menu:

Como perceberam, a função wp_nav_menu recebe alguns parâmetros, para não haver dúvidas, explico melhor abaixo.

• menu: O nome do menu em que deseja retornar (valor determinado na função register_menu)
• theme_location: Onde vai está localizado o menu (valor determinado na função register_menu)
• container: Se alguma tag irá envolver a lista do menu
• container_class: Classes do container
• container_id: O ID do container
• menu_class: Classes da lista do menu
• menu_id: O ID da lista do menu
• echo: Usado para retorno do menu, em uma vez que seu valor seja falso, o menu não será retornado ou visível.
• before: Se algum elemento entrará antes do menu
• after: Se algum elemento entrará depois do menu
• link_before: Se algum elemento entrará antes do link
• link_after: Se alguém elementro entrará depois do menu
• depth: Quantos níveis de hierarquia devem ser incluídos
• walker: Objeto para personalização do menu

Habilitando descrição

Para terminar a explicação, os Menus do WordPress contém uma opção para descrição nos menus. É uma forma melhor de explorar o conteúdo e também explicar um pouco mais o parâmetro walker, que ficou um pouco difícil de se entender.

Primeiro, ative a opção de descrição desta forma: Abra a seção de menus no painel de administração e vá a Screen Options (Opções de tela) e ative a opção Description (Descrição)

Vamos personalizar o menu para receber as informações de descrição, adicione em functions.php:

No código, foi criado uma classe retorna todo o item do menu, ou seja, a <li>. Está comentado no código onde você vai encontrar os códigos da descrição. É necessário entender um pouco de PHP para alterar esse código e personalizar ainda mais o seu menu.

Para retornar essa classe, vamos usar o walker do menu, altere o valor, assim:

Você pode determinar o valor da descrição no mesmo lugar aonde você altere as informações do menu.

Fonte da descrição: http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

Posts Relacionados

• Criando Sidebar Dinâmica no WordPress
• Introdução ao CSS 3D – Flip Card
• Command & Conquer: Tiberium Alliances
• Convencimento e educação = liberdade
• Experiência deve ter começo, meio e fim