Admin: '. (Atenção para o espaço em branco após o texto para deixar um pouco de espaço antes do link.) Por fim, o terceiro parâmetro é o que vai após o link, que é apenas '

. Em outras palavras, edit_post_link() é capaz de lidar com três parâmetros, e eles são passados, neste sentido, para falar um pouco em PHP:

Lembre-se de que os parâmetros são passados entre aspas e separados por vírgulas e um espaço para torná-los mais legíveis. Não é tão complicado, não é mesmo? Você só precisa saber quais os parâmetros devem ser passados, e em que ordem eles devem ser passados. A ordem é importante: sem a ordem correta, você pode criar o link com o texto errado, o que com certeza arruinaria seu design, ou, na melhor das hipóteses, a validação do site. Vejamos agora algo um pouco mais complicado:

Essa template tag irá gerar uma nuvem de tags exibindo até 45 tags, com a menor em fonte 8 pt (pontos), e a maior em 22 pt. Elas são exibidas em uma lista e classificadas por nome, em ordem crescente. Sabemos disso porque esses são os valores padrão, e há uma porção deles, como você pode ver na Tabela 2-1. Na verdade, a template tag wp_tag_cloud() é capaz de passar 13 parâmetros.

33

PARTE I: INTRODUÇÃO AO WORDPRESS Tabela 2-1 Parâmetros padrão para nuvem de tags Parâmetro

Descrição

Valor padrão

smallest

Menor tamanho de tag

8

largest

Maior tamanho de tag

22

unit

Tamanho de fonte utilizado

pt

number

Máximo de tags exibidas

45

format

Como exibir as tags

flat separated with white space

separator

O que aparece entre as tags

white space

orderby

Como organizar as tags

name

order

Como classificar as tags

ascending

exclude

Quais tags excluir

none

include

Quais tags incluir

all

link

Links de edição ou de visualização

view

taxonomy

A base para a nuvem de tags

post_tag

echo

Exibir ou não a nuvem de tags

true

Se você comparar esses valores com a descrição da saída padrão de wp_tag_cloud(), você verá que eles são passados sem que você precise passar quaisquer parâmetros manualmente. Agora, tente alterar a tag mudando alguns parâmetros. No entanto, esteja ciente de que wp_tag_cloud() lê seus parâmetros no que chamamos de query style (ou estilo de consulta). Isso é bom, pois precisar digitar todos os 13 parâmetros possíveis quando você quer simplesmente mudar o tamanho da fonte de pt para px não seria muito amigável para com o usuário. Em vez disso, você pode simplesmente escrever em texto simples:

Eu não sabia que px era um parâmetro válido para a opção de unidade; descobri isso na descrição da template tag (http://codex.wordpress.org/Template_Tags/wp_ tag_cloud). Outros tamanhos possíveis de fontes são em, % e, naturalmente, pt, que é o valor padrão. Se você deseja passar mais parâmetros, basta adicionar um (&) entre eles, dentro do parâmetro, sem espaços. Alterar o ordenamento das tags para count ao invés de name :

Você pode adicionar ainda mais parâmetros à template tag, simplesmente separando-os com um &. Agora torne a ordenação aleatória, alterando a menor tag para 10 px (uma vez que o padrão de 8 é um tanto pequeno quando você usa pixels e não pontos) e maior para 24 px:

34

CAPÍTULO 2: SINTAXE DO WORDPRESS

O valor de ordenamento RAND, está em caixa alta. Isso é intencional; é assim que você passa os dados de ordenamento (as outras opções são ASC para crescente e DESC para decrescente). Além disso, você deve ter percebido que tanto smallest quanto largest foram colocadas antes da opção de unidade. Essa é uma boa forma de colocar os vários parâmetros na ordem em que são descritos, pois assim você será capaz de encontrá-los com maior facilidade sempre que precisar editar o código ou investigar algo.

MAIS SOBRE PARÂMETROS Uma vez que você estará fazendo muita coisa com as template tags, é crucial ter uma compreensão acerca dos parâmetros. Há três tipos de template tags, que já foram abordados. O primeiro tipo não aceita parâmetros, o segundo aceita um ou vários parâmetros entre aspas, e o terceiro tipo é o chamado query style, que separa as diversas opções com o caractere &. Naturalmente, a não passagem de um parâmetro significa que você acaba de posicionar a template tag no local em que precisa que ela esteja, e isso também vale para as outras template tags, uma vez que existe uma saída padrão. Os problemas surgem quando você precisa alterar essa saída padrão, e, portanto, os parâmetros. Nos exemplos anteriores, você já fez tudo isso. Lembre-se de que você passou apenas uma informação em um parâmetro para a template tag bloginfo():

Em seguida, você passou um parâmetro em estilo PHP, com a template tag edit_post_ link(). Aqui, você disse à template tag qual deveria ser o texto do link, e o que deveria vir antes e depois dele, separando cada instrução com uma vírgula e colocando os dados entre aspas: Admin: ', '

, mas a saída disso seria nada, de modo que, se você quiser usar isso com o seu próprio código PHP, esta é a maneira de proceder. Lembre-se de que strings consistem em texto entre aspas, integers são números inteiros, e que parâmetros Boolean podem ser true (verdadeiros) ou false (falsos), sem usar aspas. Tendo isso em mente, vai ser muito mais fácil entender as template tags que você usará para construir sites muito bacanas no WordPress mais adiante.

36

CAPÍTULO 2: SINTAXE DO WORDPRESS

CONDITIONAL TAGS As conditional tags (tags condicionais) são extremamente úteis. Você irá utilizá-las em arquivos de modelo do seu tema e, como o nome sugere, elas servem para configurar diversas condições. Em outras palavras, você pode usá-las para exibir coisas diferentes, dependendo da situação. Um bom exemplo é a conditional tag is_home(), que verifica se você está ou não na página inicial. Utilize essa tag para gerar uma saudação, já que essa é a coisa educada a fazer: Ei, você, seja bem-vindo ao site. Eu amo novos visitantes!

Alguma mensagem de erro ou algo do tipo.

" title="">

>

49

PARTE I: INTRODUÇÃO AO WORDPRESS

Figura 3-7: Texto introdutório em caixa alta adicionado

Figura 3-8: Uma postagem fixa

A adorável template tag post_class() irá adicionar um número de classes à postagem, dependendo dos detalhes da postagem. Isto é muito útil para um designer, por isso este livro aborda a template tag post_class() em maior profundidade no Capítulo 6.

50

CAPÍTULO 3: O LOOP Se a postagem estiver marcada como sticky (fixa), post_class() irá adicionar uma classe CSS .sticky. Assim, você pode alterar a postagem da maneira que quiser. Quem sabe você quer um fundo cinza claro, uma fonte maior, ou algo mais? Basta adicionar os estilos necessários à sua folha de estilo, aplicando os estilos à classe .sticky, como no exemplo a seguir: .sticky { padding: 15px; background: #eee; border: 1px solid #bbb; color: #444; font-size: 18px; }

Esse código CSS colocaria a postagem fixa dentro de uma caixa cinza claro com uma moldura um pouco mais escura, e tamanho de fonte padrão de 18 pixels. Eis uma ação, dentro de um loop básico:

>

" title="">

Alguma mensagem de erro ou algo do tipo.

Em HTML simples, você obteria o seguinte container div. Preste atenção às classes aplicadas por post_class(), especificamente.

Quer fazer mais com as postagens fixas? A conditional tag is_sticky() vai ajudá-lo a fazer algumas coisas bem divertidas. Talvez você realmente queira ressaltar a importância desta postagem acima de todas as outras? Então por que não dizer isso?

Um pouco exagerado, é verdade, mas pode haver realmente momentos em que é uma boa ideia exibir ou alterar as coisas se houver uma postagem fixa envolvida. Digamos que você venda e-books em seu blog; você poderia usar postagens fixas para promover o seu último livro:

Nem todos os temas possuem suporte a postagens fixas e a funcionalidade está um pouco escondida na interface de admin, então mantenha isso em mente na hora de construir coisas ao redor do recurso de postagens fixas.

51

PARTE I: INTRODUÇÃO AO WORDPRESS TRABALHANDO COM FORMATOS DE POSTAGEM Os formatos de postagem (post formats) foram introduzidos no WordPress 3.1 e, assim como as postagens fixas, são uma forma alternativa de obter um pouco mais de controle sobre o conteúdo. Há nove formatos de postagem diferentes: aside

para atualizações curtas, geralmente sem título audio para utilização com arquivos de áudio chat usado para publicar transcrições de bate-papo gallery para postagens de galeria image para exibir uma única imagem link para inserir um link que leva o leitor adiante quote usado para exibir aspas status para atualizações de status curtas video para exibir um único vídeo Obviamente, você pode usá-los para tudo o que quiser, mas há algumas funcionalidades integradas em relação à forma como eles funcionam. Para o formato de postagem “image”, por exemplo, a primeira imagem encontrada no conteúdo do post será considerada a única imagem, com a qual você pode, então, trabalhar. Assim como nas postagens fixas, você escolhe o formato na caixa encontrada no canto superior direito. A Figura 3-9 mostra a caixa para o tema Twenty Ten, que obviamente suporta apenas os formatos de postagem “aside” e “gallery”.

Figura 3-9: Escolha o formato da postagem

52

CAPÍTULO 3: O LOOP Uma postagem publicada de acordo com as opções selecionadas na Figura 3-9 aparecerá como uma postagem sem título, ao usar o Twenty Ten. Então, qual é o propósito de usar formatos de postagem? Bem, em primeiro lugar, eles adicionam novas classes CSS para você brincar. O formato de postagem “aside” irá adicionar a classe format-aside, por exemplo (ver Figura 3-10), que é uma alternativa ao uso de uma categoria dedicada somente aos apartes. Isso pode ser muito útil. Você também terá classes adicionadas a partir de body_class() que deve estar no corpo de sua tag, oferecendo maior controle.

Figura 3-10: Classes CSS adicionadas à postagem no formato "aside", com estilo aplicado usando a classe format-aside

O verdadeiro poder entra em jogo quando você usa conditional tags dentro do loop. Você pode verificar se um post está ou não em um determinado formato de postagem, e realizar uma ação a partir disso, da seguinte forma: if ( has_post_format( 'aside' ) ) { echo 'Esta postagem é um aparte, por isso será bem curta!'; }

Para adicionar essa funcionalidade ao seu tema, você precisa usar add_theme_support() em seu arquivo functions.php; isso diz ao WordPress quais formatos de postagem seu tema suporta passando um array. Se quisesse suporte aos formatos de postagem aside, gallery e video, por exemplo, você acrescentaria a seguinte linha ao functions.php: add_theme_support( 'post-formats', array( 'aside', 'gallery', 'video' ) );

Mais detalhes sobre os formatos de postagens estão disponíveis no Codex, em http:// codex.wordpress.org/Post_Formats. 53

PARTE I: INTRODUÇÃO AO WORDPRESS OBTENDO O MÁXIMO DE QUERY_POSTS() Todo hacker do loop do WordPress e designer de temas ambicioso precisa conhecer a fantástica ferramenta query_posts(). Em essência, query_posts() representa uma forma de obter a saída do loop do WordPress (normalmente, as últimas postagens) e fazer outra coisa com ela. Talvez você queira limitar o número de postagens, excluir um determinado número de categorias, ou alterar a ordem das coisas. Algumas palavras de advertência: a ideia é aplicar a template tag query_posts() no loop principal, e não usá-la para construir múltiplos loops. Isso é possível, mas as coisas podem ficar estranhas se você fizer isso, por isso é melhor não usá-la dessa maneira. Consulte a seção “Múltiplos Loops”, mais adiante neste capítulo, para descobrir como criar quantos loops você quiser. Para usar query_posts(), aplique-a antes do seu loop principal, da seguinte forma:

Alguma mensagem de erro ou algo do tipo.

Você pode editar um pouco esse código; não há necessidade de separar as tags PHP para query_posts() e para a parte have_posts(). Então, o que isso faz com o loop? Na verdade, nada, pois você ainda não passou qualquer parâmetro para query_posts(). Não há valores padrão, isso retornaria simplesmente o loop padrão de acordo com suas configurações do WordPress. O que query_posts() faz é alertar a consulta SQL a partir do loop para atender às suas necessidades. Agora que você está familiarizado com query_posts(), pode executar alguns exemplos para se acostumar à tag. Há uma infinidade de coisas que você pode fazer com essa template tag quando se trata de controlar o fluxo do conteúdo. Ela realmente tem muitas configurações, e combinando às conditional tags, torna-se uma rota para centenas de combinações possíveis. Comece removendo todas as postagens de uma categoria a partir das listagens; experimente fazer isso com a categoria Asides, na qual você publica suas postagens curtas e sem sentido. A primeira coisa que precisa fazer é descobrir a ID da categoria, o que pode ser feito facilmente, acessando a interface de admin do WordPress e navegando até a página Edit category. Lá você encontrará a ID, escondida no final da URL da página de edição: http://notesblog.com/wp-admin/categories.php?action=edit&cat_ID=130

Como você provavelmente deve ter percebido, cat_id=130 está lhe dizendo que a ID é 130. Lembre-se de que IDs de categoria (ou qualquer ID, na verdade) não se relacionam entre si de forma alguma senão o fato de que são valores numéricos. Postagens, categorias, tags, e tudo o mais está misturado, de modo que você pode ter uma categoria com a ID 3 e a próxima com a ID 749. Isso acontece porque elas são atribuídas pelo banco de dados quando você cria a postagem ou categoria.

54

CAPÍTULO 3: O LOOP Voltando ao exemplo: você não quer exibir postagens da categoria Asides, cuja ID é 130. A página de query_posts() no Codex (http://codex.wordpress.org/Template_ Tags/query_posts) diz que você pode usar uma série de maneiras para passar informações de categoria para query_posts(), mas para este exemplo, use o parâmetro cat, que requer as IDs:

Isso, na frente do loop mostrado anteriormente, irá excluir postagens pertencentes à categoria cuja ID é 130. Atenção para o sinal de menos na frente da ID: você realmente precisa dele. Se você esquecer disso, o resultado seria exatamente o oposto: exibir apenas as postagens da categoria cuja ID é 130. Em seguida, exibir as postagens marcadas com as tags azul, verde, ou amarelo aplicando o seguinte código antes do loop:

Aqui, você obviamente usa esse parâmetro específico da tag. Há uma porção de parâmetros também, assim como com as categorias. Com query_posts() você também pode buscar postagens a partir de um autor específico, fazer consultas baseadas em tempo e ordenar todos os dados que quiser da maneira que preferir. Você pode até mesmo obter dados dos campos personalizados e usá-los para classificação, por exemplo, ou seja, as postagens de repente podem ter ainda mais parâmetros para sua classificação. Você vai fazer uma porção dessas coisas mais tarde, quando estiver construindo sites bacanas com o WordPress. Um obstáculo que você pode encontrar ao trabalhar com query_posts() é o número de postagens que são retornadas. Isso ainda é controlado pelas configurações principais do WordPress relacionadas à quantidade de postagens de blog exibidas por página. Por sorte, você também pode controlar isso. Digamos que você queira que sua página inicial exiba apenas cinco postagens, mas todas as outras listagens devem exibir dez. Você pode resolver esse problema de duas maneiras. Pode criar um modelo home.php e executar nele a magia de query_post(), ou usar uma conditional tag para seu modelo index.php. Comece com a variante home.php, que é a mais limpa e fácil. Usando query_posts() e o parâmetro posts_per_page, você pode controlar essas coisas:

Se colocar isso antes do loop em seu modelo home.php, você exibirá cinco mensagens por página. Simples, não é mesmo? Agora, coloque aquelas conditional tags em ação e adicione essa funcionalidade à página index.php em vez disso, uma vez que você realmente não precisa de um arquivo home.php separado para isso. Tudo que precisa fazer é usar a conditional tag is_home() em uma cláusula if para verificar se você está ou não na página inicial. Caso não esteja, nada vai acontecer, mas se estiver, a declaração query_posts() será transmitida. Acrescentando isso antes do loop em index.php você faz a mesma coisa que fez com o modelo home.php:

55

PARTE I: INTRODUÇÃO AO WORDPRESS

Agora, uma vez que você pode limitar o número de posts, naturalmente, você também pode remover o limite. Basta definir o parâmetro posts_per_page para -1 e você irá exibir todos os posts que se enquadram nos critérios do loop. Cuidado para não usar isso em um blog com milhares de postagens, pois se você fazer isso na página inicial, ela irá exibir todas as suas postagens, e essa não é uma consulta SQL divertida de passar para o banco de dados. Dito isso, por que não exibir todas as postagens escritas pelo autor chamado TDH, publicadas em 2009?

Como você pode ver, query_posts() tem seus parâmetros em estilo string de consulta. Isso significa que você pode enfiar um monte de coisas nele sem muita complicação. A partir de agora, você vai usar muito query_posts() por isso comece a praticar.

ALTERNATIVAS AO LOOP Depois de descobrir como essas coisas funcionam, você pode ficar tentado a criar múltiplos loops ou consultas de loop avançadas nos arquivos de tema do seu modelo. No entanto, embora em alguns casos essa possa ser a solução para o que quer fazer, você também deve considerar métodos alternativos. Fazer uma porção de coisas mirabolantes com o loop, muitas vezes utilizando query_posts(), às vezes é completamente desnecessário. Eis o porquê. Primeiramente, pergunte a si mesmo se realmente precisa de outro loop. Muitas vezes, há marcas de modelo capazes de fazer o que você precisa, e essa é quase sempre uma solução melhor. A mágica do loop personalizado deve ser guardada para ações que realmente a merecem e precisam dela. Em outros momentos, uma conditional tag pode ser a solução para o problema, e essa é geralmente uma abordagem melhor que um novo loop. Em segundo lugar, existe algum plug-in que possa fazer o trabalho por você? A comunidade WordPress é cheia de soluções brilhantes para problemas comuns, e embora possa ser bem mais limpo resolver essas coisas de dentro do seu próprio tema, um plug-in pode realmente melhorar a funcionalidade e ser mais fácil de gerenciar. Uma porção de plug-ins que trabalham com listagens de postagens estão na verdade fazendo coisas com o loop que você poderia fazer sozinho, de dentro de seu tema. Normalmente, eu recomendaria esta última solução, mas o que acontece se você não é o único responsável pela manutenção do tema no longo prazo – algo comum para quem trabalha com design de temas e depois deixa o material para o cliente? Se o cliente estiver relutante em pagar mais pelas personalizações, ou achar que suas habilidades internas de HTML são suficientes, sua melhor opção é encontrar uma solução de plug-in do que uma solução que falhará caso aconteça algo com os arquivos de modelo. É bem verdade que os plug-ins têm seus próprios problemas, como ter seu desenvolvimento repentinamente interrompido, ou oferecerem funcionalidades de WordPress que não são exatamente o que você procura, mas ainda assim é algo a considerar como alternativa a loops adicionais.

56

CAPÍTULO 3: O LOOP O Capítulo 8 mergulha mais profundamente na questão de quando usar plug-ins para substituir funcionalidades integradas. Por fim, há o possível impacto sobre o servidor e banco de dados. Criar loops e mais loops significa muitas consultas PHP e SQL, o que torna o site mais lento. O mais simples nem sempre é o melhor, mas manter as coisas o mais simples possível, mantendo os resultados necessários, é sempre uma boa ideia. Tanto os serviços de hospedagem Web quanto o WordPress já evoluíram muito, mas isso não significa que você deva tornar as coisas mais pesadas ou complicadas do que elas precisam ser. O principal é sempre questionar a necessidade de um loop adicional. Isso pode poupar algumas dores de cabeça no futuro.

MÚLTIPLOS LOOPS Às vezes, você quer vários loops em uma mesma página. Talvez você tenha uma categoria para suas postagens extremamente importantes, e quer exibí-las sozinhas na página inicial, ou talvez você queira apenas os posts mais recentes na barra lateral. De toda forma, sempre que você precisar buscar as postagens pela segunda vez, vai precisar de outro loop. Muitas vezes, isso é essencial quando você quer romper com o molde do blog tradicional, por isso vale muito a pena aprender a fazer bem. Comece com a solução mais básica de múltiplos loops, que serve apenas para inserir outro loop na página. Para isso, use rewind_posts(), que simplesmente reinicia o contador do loop e permite que você o execute outra vez:

Naturalmente, isso simplesmente geraria exatamente a mesma coisa que seu primeiro loop, o que não parece vantajoso ou particularmente útil, então para realmente fazer algo com rewind_posts(), você precisa mudar algo. Digamos que você quer uma caixa na parte inferior da página para exibir os últimos cinco posts da categoria News; você pode fazer isso usando query_posts, abordado anteriormente: ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

Alguma mensagem de erro ou algo do tipo.

Vamos decompor esse código, começando pelo primeiro loop que começa na primeira linha, onde você carrega $featured_query com uma nova consulta ao loop do WP_Query. Essa consulta recebe parâmetros do tipo query_post(), assim, você está limitando a consulta à categoria Featured, e exibindo apenas uma postagem: $featured_query = new WP_Query('category_name=featured&showposts=1');

58

CAPÍTULO 3: O LOOP Em seguida, você passa para um loop while (que contém apenas uma resposta; afinal, você especificou apenas uma postagem) que se parece um pouco como o loop básico: while ($featured_query->have_posts()) : $featured_query->the_post();

Lembre-se de que have_posts() no loop básico era na verdade $wp_query->have_ posts(); este é o mesmo caso, mas ao invés do padrão $wp_query você está usando o novo em folha $featured_query. Isto significa que você está fazendo exatamente a mesma coisa que o loop básico, mas usando um novo objeto ao invés do padrão $wp_query, de modo a não afetar $wp_query de forma alguma. A terceira linha é simples. Você está carregando a ID da postagem dentro do objeto $do_ not_duplicate. A ideia aqui é garantir que uma postagem em destaque não acabe aparecendo tanto na seção de postagens em destaque quanto na listagem de postagens abaixo. Se você já viu um exemplo de múltiplos loops fazendo isso, vai reconhecer este trecho de código; ele é destaque também no Codex. Você vai usá-lo em seu loop principal, mas por enquanto a ID da postagem é classificada em $do_not_duplicate. É claro que isso só vai funcionar se você tiver apenas uma postagem em destaque. Se você tivesse várias, seria necessário armazená-las em um array. ?>

$do_not_duplicate = $post->ID;



Depois disso, você tem a seção típica de saída de postagens, geralmente um título h2 com link para a postagem, e, em seguida, o conteúdo ou um trecho do conteúdo. Talvez você queira fazer isso com imagens ou outras coisas. Mas, por enquanto, pode se contentar em saber que isso vai conter a saída de sua postagem em destaque. Continuando, você tem um loop básico típico, com uma adição. A linha oito é uma cláusula if para verificar se a ID da postagem é a mesma ID armazenada no objeto $do_not_ duplicate. Caso seja, você continua e atualiza o cache de postagens; caso contrário, terá a saída normal. Em outras palavras, quando você chegar à postagem de destaque em seu loop principal, vai ignorá-la e seguir em frente: ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

Depois disso, é apenas o loop básico até o fim, com saída de postagens e tudo o mais:

Alguma mensagem de erro ou algo do tipo.

Então, em outras palavras, primeiramente você gera a saída da postagem em um loop próprio. Em seguida, executa o loop normal, verificando a ID da postagem para ter certeza de que nossa postagem em destaque não vai aparecer mais de uma vez.

59

PARTE I: INTRODUÇÃO AO WORDPRESS TRÊS É DEMAIS, MAS QUATRO LOOPS SÃO O MÁXIMO Usando o conhecimento que adquiriu até aqui, nesta seção você colocará em prática o conceito de múltiplos loops. Neste exemplo, você terá três postagens em destaque em um loop, por isso imagine três colunas abaixo consistindo da última postagem de cada categoria. A ideia é imitar a página de um site convencional, que não é um blog. Em termos de arquivos de modelo, idealmente isso deveria estar no modelo home.php, ou seja, o código só seria carregado na página inicial. Considere o código a seguir: have_posts()) : $featured_query->the_post(); $do_not_duplicate[] = $post->ID ?> ID, $do_not_duplicate)) continue; update_post_caches($posts); ?> if (in_array($post->ID, $do_not_duplicate)) continue; update_post_caches($posts); ?> ID, $do_not_duplicate)) continue; update_post_caches($posts); ?>

O que acaba de acontecer? Comece com três postagens em destaque. Isso é bem semelhante ao exemplo anterior de postagem em destaque, mas já que você tem três postagens aqui e não quer que elas apareçam mais de uma vez, precisa armazenar suas IDs em um array. (Um array

60

CAPÍTULO 3: O LOOP é uma série de informações armazenadas; neste caso, três IDs de postagens.) Os leitores que entendem de PHP irão reconhecer os colchetes em $do_not_duplicate, indicando que trata-se de um array. Localize os colchetes em todos os loops seguintes. Seguindo adiante, cada um dos três loops de coluna, um por categoria, é o loop básico (principal) usando a template tag query_posts() para limitar a saída. Você deve reconhecer a classificação de categoria e do número de posts que eles exibirão a partir de exemplos anteriores. Uma vez que não quer exibir qualquer das postagens em destaque nos três loops de categoria, você precisa verificar o array $do_not_duplicate. Atenção para o fato de que a cláusula if para isso mudou um pouco, para refletir o fato de que trata-se de um array. Por fim, após o loop da primeira coluna, que é o loop principal, você precisa usar rewind_ posts() para poder usá-lo novamente, mas com diferentes classificações, graças a query_ posts(). Repita essa operação tantas vezes quanto necessário. Uma solução opcional para isso teria sido criar quatro loops diferentes do seu loop próprio, assim como você fez no exemplo da postagem em destaque, evitando assim a necessidade de usar $wp_query. Porém, isso realmente não é necessário nesse caso. A listagem a seguir é a saída de código de postagens, despojada de tudo o que apareceria no arquivo CSS, mas com as IDs e classes necessárias.

have_posts()) : $featured_query->the_post(); $do_not_duplicate[] = $post->ID ?>

>

" title="">

Últimas postagens de Apples

ID, $do_not_duplicate)) continue; update_post_caches($posts); ?>

• " title="">
  
  61
  
  PARTE I: INTRODUÇÃO AO WORDPRESS

Últimas postagens de Oranges

ID, $do_not_duplicate)) continue; update_post_caches($posts); ?>

• " title="">

Últimas postagens de Lemons

ID, $do_not_duplicate)) continue; update_post_caches($posts); ?>

• " title="">

Aí está: quatro loops começando com um para as postagens em destaque, e depois mais três para exibir a postagem mais recente a partir das três categorias diferentes. Esse código pode ser facilmente implementado em praticamente qualquer tema de WordPress, mas é preciso alterá-lo para que ele se ajuste à configuração de suas categorias, de modo que o código funcione corretamente.

62

CAPÍTULO 3: O LOOP

USANDO CAMPOS PERSONALIZADOS Campos personalizados (do inglês, “custom fields”) são campos de banco de dados cujo conteúdo é inteiramente definido pelo usuário, e esses campos sempre são usados dentro do loop. Você vai encontrar a caixa de campos personalizados em sua tela Add New Post, dentro da interface de admin do WordPress, porém você pode precisar ativar essa opção usando a função Screen Options, no canto superior direito, e em seguida marcar a caixa Custom Fields. A caixa Custom Fields permite que você adicione um ou vários campos personalizados, e atribua um valor para cada um (ver Figura 3-11).

Figura 3-11: A caixa Custom Fields pode ser encontrada na tela Add New Post, abaixo da caixa normal, para escrever as postagens – não esqueça de ativar essa opção, caso necessário!

Os campos personalizados sempre pertencem a postagens, e consistem em duas coisas: uma chave e um valor. Você pode adicionar novas chaves sempre que quiser, e depois que tiver usado uma chave pela primeira vez, ela passa a aparecer em uma caixa suspensa, o que é ótimo, pois garante que você não cometa erros de ortografia ou esqueça delas.

CONCEITOS BÁSICOS DE CAMPOS PERSONALIZADOS Começar a usar campos personalizados é fácil, basta escrever uma postagem e acrescentar algo ao campo de chave, em seguida algo no campo de valor, e clicar no botão Add Custom Field para salvar o campo. Agora, você já armazenou seu campo de dados personalizado, apesar de ele não aparecer em lugar algum a menos que você o chame de dentro do loop. A ideia é reutilizar a chave em diversas postagens, como uma espécie de categorização do tipo de dados que você está armazenando, e alterar apenas o valor.

63

PARTE I: INTRODUÇÃO AO WORDPRESS A template tag que você deve usar para fazer as coisas acontecerem com campos personalizados é the_meta(). Por padrão, ela gera uma lista ilimitada (ou uma tag ul com itens listados; ou, em jargão de HTML, li's) exibindo os campos personalizados da postagem. Isso funciona perfeitamente bem se você apenas armazena coisas como o quão feliz você está e o que você está lendo no momento, ou talvez uma nota para uma resenha ou algo do tipo. A ul terá a classe post-meta e há também uma li para cada campo personalizado e, dentro dessa li há um span com class="post-meta-key" envolvendo a chave para aquele campo personalizado em particular. Depois disso vem o valor em texto simples. Suponha que você tem um campo personalizado com uma chave chamada Actor com o valor Harrison Ford. E você tem um outro campo personalizado chamado Director com o valor Steven Spielberg. Por fim, você tem um campo personalizado chamado Movie Title com o valor Indiana Jones and the Raiders of the Lost Ark. Todos esses campos personalizados e seus valores pertencem a uma postagem específica, e se você colocar a template tag the_meta() em algum lugar dentro do loop, e essa postagem for exibida, isso irá gerar o seguinte código:

• Actor Harrison Ford
• Director Steven Spielberg
• Movie Indiana Jones and the Raiders of the Lost Ark

Enquanto você só quiser exibir coisas simples, isso é o suficiente e você pode aplicar estilos com CSS. Naturalmente, você vai querer fazer mais coisas, então vamos seguir em frente.

PUBLICANDO IMAGENS DE CABEÇALHO Uma das utilidades mais fáceis e mais populares para campos personalizados é anexar imagens adicionais a uma postagem. Primeiramente, você precisa decidir o nome de sua chave de campo personalizado. Vamos optar por post-image, que será fácil de lembrar. Quando você ver essa chave em seu código, vai entender imediatamente do que se trata, o que é uma coisa boa. Em seguida, você precisa de alguns dados para experimentar. Faça o upload de uma imagem em sua postagem usando a ferramenta de upload do WordPress, e em seguida, copie a URL da imagem. Será algo como: http://notesblog.com/wp-content/2009/05/splashimage.jpg

Agora, acrescente a isso a chave post-image usando a caixa Custom Fields na tela Write Post. Se você nunca usou a chave post-image antes, simplesmente digite algo no campo chave; caso contrário, você pode selecionar a chave a partir do menu suspenso. Então, cole a URL da imagem no campo de valor, e selecione a opção salvar. Agora, você anexou a URL com a chave post-image para esta postagem específica, assim, você pode usá-la. Encontre um local em seu tema onde você quer que essa imagem seja exibida; pode ser junto com suas postagens na página inicial. Tudo depende de como você forma a imagem: ela pode ser qualquer coisa, desde uma miniatura que fica à direita do título de sua postagem, até uma fotografia grande ao estilo de uma revista, que fica atrás da postagem. Esse exemplo mostra como gerar a saída do conteúdo no campo personalizado. 64

CAPÍTULO 3: O LOOP Eis um exemplo simples de como colocar a imagem de campos personalizados acima da title tag h2 (algo que muitos temas que emulam revistas gostam de fazer), usando apenas algumas adições à linha básica que a essa altura você já conhece bem:

> ID, 'post-image', $single = true); if($splashimg !== '') { ?>

" title="">

Alguma mensagem de erro ou algo do tipo.

A terceira linha é uma função PHP onde você armazena a variável $splashimg, que você criou para este exemplo, com os dados da função get_post_meta(). Isso é semelhante à template tag the_meta() de que falamos anteriormente, e você está obtendo três parâmetros a partir dessa linha. Primeiramente, há a ID do post, que é necessária para que o WordPress descubra de onde obter os dados do campo personalizado. Em segundo lugar, você precisa solicitar uma chave de campo personalizado e obter seu valor, que neste caso é post-image. Lembre-se de que você atribuiu exatamente esse nome à chave, por isso, agora, você irá obter o valor da chave post-image, especificamente, que, por sua vez, é a URL da imagem que você salvou. Por fim, o terceiro e último parâmetro que você está passando é configurar $single como true. Você está fazendo isso para dizer à template tag get_post_meta() para passar os dados como uma string. Se você configurasse esse parâmetro como false, obteria um array de dados sobre campos personalizados, o que também pode ser útil, mas não neste caso. Tudo isso fica armazenado em $splashimg. Chegando à quarta linha, você está verificando se há algo na função $splashimg, e se houver, você estará gerando a saída de uma imagem cuja origem é obtida a partir de $splashimg. Naturalmente, esses dados são obtidos a partir de get_post_meta(); em outras palavras, os dados do campo personalizado para post-image. Caso não haja nada em $splashimg, o que significaria que você não salvou qualquer dado de campo personalizado para a chave post-image, a função echo não executará nada. Talvez, em vez disso, você queira exibir uma imagem padrão, nesse caso, a função echo executará a imagem padrão. A partir daí é o mesmo loop padrão, gerando a saída do título da postagem com link, do conteúdo, etc.

65

PARTE I: INTRODUÇÃO AO WORDPRESS

HABITUANDO-SE A USAR O LOOP De início, trabalhar com o loop pode ser algo bastante complicado. O loop básico não é muito difícil de identificar, e ele é, na verdade, tudo o que você precisa para começar a usar o WordPress. Com um pouco de prática, você terá maior facilidade em compreender a mecânica do loop, e quando começar a construir seus próprios temas para aplicar em seu site de WordPress, em pouco tempo estará mexendo no loop. O fato de que uma porção de plug-ins e template tags que você vai querer usar estão localizados dentro do loop o torna muito importante, mas as personalizações, como o uso de múltiplos loops ou saídas de conteúdo específicas, é ainda mais importante quando você começa a testar os limites do WordPress. Se você estiver com dificuldades para compreender plenamente o loop depois de ler este capítulo, não se preocupe. Quanto mais exemplos você ler, e quanto mais brincar com ele, mais fácil será ajustar o loop às suas necessidades. E é exatamente isso que você vai fazer a seguir: começar realmente a construir coisas. Primeiro, serão temas, com os quais você vai trabalhar ao longo dos próximos capítulos. Isso significa que você vai encontrar o loop muitas vezes a partir de agora, mas também irá mergulhar ainda mais fundo nas template tags e outras ferramentas disponibilizadas pelo WordPress para controlar conteúdo.

66

II PARTE

II

DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS Capítulo 4: Fundamentos dos Temas de WordPress Capítulo 5: O Conceito de Tema Filho Capítulo 6: Uso Avançado dos Temas

4

4 CAPÍTULO

SMASHING WORDPRESS

FUNDAMENTOS DOS TEMAS DE WORDPRESS

SE VOCÊ QUISER fazer coisas mais avançadas usando WordPress, precisa entender os fundamentos dos temas. Você poderia começar simplesmente alterando o tema padrão, ou fazer o download de Notes Blog e começar por aí, mas certas coisas não vão ficar óbvias simplesmente usando o código e mexendo nele. Este capítulo ajuda você a mergulhar no conceito de tema de WordPress para se familiarizar com os temas e com a forma como eles funcionam. Você vai aprender como alterar os temas para que eles atendam às suas necessidades. Depois de

aprender o básico, você poderá colocar seu conhecimento em prática nos próximos capítulos. Neste capítulo, você vai examinar o tema Notes Blog para se familiarizar melhor com os arquivos de modelo, para que saiba como construir o seu próprio. Esses arquivos incluem a folha de estilo e o arquivo relativamente extenso functions.php, de modo que você vai aprender a trabalhar com todos os elementos que encontrou nos capítulos anteriores.

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS

FUNDAMENTOS DE UM TEMA Você pode já estar um pouco familiarizado com os temas de WordPress e a forma como eles funcionam. Em teoria, os temas são uma forma de separar o design do código, mas na realidade ainda há muito código nos temas mais avançados que encontramos por aí. Um tema é composto por uma pasta com arquivos de modelo e qualquer outro arquivo necessário. Os dois únicos arquivos de modelo que são absolutamente necessários são style.css e index.php. O primeiro contém o cabeçalho que identifica o seu tema (e, geralmente, algum código de estilo), enquanto o último é o layout básico. Na verdade, mesmo que você não inclua o arquivo de modelo sidebar.php, ou o modelo de comentários comments.php, você terá tanto a barra lateral quanto a funcionalidade de comentários, oferecidas automaticamente pelo WordPress. Se você está em busca de um desafio, tente criar um tema de WordPress apenas com os dois arquivos estritamente necessários, e veja o que consegue fazer com ele. É um exercício interessante, mas naturalmente não é uma boa ideia para sites mais avançados.

ELEMENTOS DO TEMA BÁSICO A Figura 4-1 é um layout de blog comum. No topo, e cobrindo toda a largura, está o cabeçalho do blog, que é na verdade o arquivo header.php. Abaixo dele está a área do blog de fato, com o conteúdo à esquerda (index.php) e a barra lateral à direita (sidebar.php). Por fim, há um rodapé para finalizar, usando o arquivo de modelo footer.php.

Figura 4-1: Um layout de blog básico

Essa configuração não é obrigatória, você pode mudá-la, excluir partes dela, ou expandi-la ainda mais. Essa configuração é, no entanto, bastante comum, e tanto o tema padrão do WordPress quanto o Notes Blog utilizam essa estrutura (ver comparação na Figura 4-2). Você pode encontrar uma porção de temas que usam arquivos de modelo dessa forma, mas essa não é, de forma alguma, a única maneira de fazer as coisas.

70

CAPÍTULO 4: FUNDAMENTOS DOS TEMAS DE WORDPRESS Embora você possa se virar apenas com style.css e index.php no seu tema, geralmente não é uma boa ideia ser tão minimalista assim. No mínimo, você deve ter também um header.php e um footer.php para seu tema. Esses arquivos são chamados de dentro do index.php, por meio das template tags get_header() e get_footer(). Também é uma boa ideia usar um comments.php para a funcionalidade de comentários, e para chamar esse arquivo você usa get_comments(), também de dentro do index.php. O mesmo vale para a barra lateral, você deve ter um arquivo de modelo para ela também, que será chamado usando get_sidebar().

Figura 4-2: O tema Notes Blog se parece bastante com o tema mostrado na Figura 4-1

O arquivo header.php inclui o cabeçalho de doctype e tudo o que diz respeito a ele. Você vai poder olhar para isso mais atentamente na seção de exemplos a seguir. O arquivo header.php geralmente também executa tarefas básicas, como obter o favicon certo, gerar as title tags (tags de título) adequadas e conter as palavras-chave necessárias para que os mecanismos de busca possam encontrar as páginas com maior facilidade. No entanto, algo que ele necessariamente deve conter é um link para a folha de estilo, e a tag wp_head() também é necessária para desencadear a coisa toda dentro da plataforma WordPress. Seguindo adiante, footer.php deve incluir wp_footer() para parar o WordPress e, é claro, todas as tags de fechamento necessárias. Certifique-se de fechar as tags body e html, e qualquer outra coisa você possa ter aberto em header.php. Por fim, o arquivo comments.php requer o código para a saída de comentários, além dos formulários necessários para que as pessoas realmente possam enviar novos comentários. Isso tudo é feito com template tags simples hoje em dia, de modo que os arquivos comments.php não são tão confusos de se trabalhar quanto já foram. O mais simples de todos os arquivos é o sidebar.php, que consiste apenas no conteúdo que você deseja exibir na barra lateral.

71

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS Como você deve ter percebido, tudo gira ao redor de index.php. No entanto, há outros arquivos de modelo que podem substituir index.php, dependendo da situação. Se você estiver na página inicial, por exemplo, o arquivo principal será home.php, e index.php só será utilizado na ausência de um arquivo home.php. O mesmo vale para a visualização de postagens individuais, em que single.php tem prioridade sobre index.php, e para páginas do WordPress page.php está acima de index.php. Na verdade, se você utilizar todos os arquivos de modelo possíveis, o arquivo index.php nunca será carregado. No entanto, o conceito é o mesmo, por isso deixe as coisas como estão por enquanto.

UM BREVE COMENTÁRIO SOBRE O CÓDIGO Há muito código pela frente. A maior parte dele é bastante simples, e farei o melhor para manter as coisas tão conceituais e diretas quanto possível. Dessa forma, o foco estará verdadeiramente na utilização das diversas template tags e funções, e não nas inúmeras possibilidades que não importam quando se trata de aprender os fundamentos do WordPress. Dito isso, você deve estar ciente de que os exemplos a seguir incluem localization tags (tags de localização), assim como template tags e conditional tags com as quais você pode não estar inteiramente familiarizado. A maioria das duas últimas categorias são autoexplicativas, mas as localization tags podem ser um pouco mais difíceis de entender. Entraremos em detalhes sobre as localization tags no Capítulo 6, mas por enquanto você só precisa saber que, ao localizar, pode incluir o texto/código dentro de _e() ou _ _(). Você vai usar _ _() dentro do código PHP, enquanto que _e() é usado praticamente em qualquer local. Acrescente um textdomain e você tem o básico, como mostra o exemplo a seguir:

Tanto _e() quanto _ _() partem da premissa que o texto ou código que você pode localizar será passado em primeiro lugar, e por isso você deve usar o textdomain. Nos exemplos do tema Notes Blog, o textdomain se chama 'notesblog', o que resultaria em:

Em seguida, graças aos arquivos de idioma, os usuários podem localizar inteiramente o tema. O objetivo do textdomain, a propósito, é identificar o local onde essa linha específica deve estar. No caso do Notes Blog, todas as linhas do tema precisam ter sido traduzidas, e um plug-in teria seu próprio textdomain. Você deve carregar o textdomain no arquivo functions.php (caso trate-se de um tema), ou no seu plug-in. Agora que já passamos pelo básico, é hora fazer o trabalho sujo!

UMA VISITA GUIADA PELO TEMA NOTES BLOG Este é um bom momento para incluir algumas palavras sobre o tema Notes Blog. É possível fazer o download do tema gratuitamente em http://notesblog.com e o design e manutenção do tema são assinados por este que vos fala. Na verdade, o tema pretende ser um hospedeiro para temas filhos, dos quais falaremos mais tarde, mas como qualquer bom tema, ele funciona perfeitamente bem sozinho.

72

CAPÍTULO 4: FUNDAMENTOS DOS TEMAS DE WORDPRESS Falaremos bastante do tema Notes Blog a partir de agora, por isso esta seção irá guiar você pelo o tema básico, decompondo cada uma de suas partes para ilustrar a forma como um tema de WordPress minimalista pode ser construído. Faça o download do tema completo em http://notesblog.com para que você possa compreender as partes dentro de um panorama. Lembre-se de que tudo o que diz respeito ao cabeçalho do documento está em header.php, o que diz respeito ao rodapé está em footer.php, e o conteúdo da barra lateral está em sidebar.php. A funcionalidade de comentários está em comments.php e, por fim, as informações do tema estão no arquivo style.css, juntamente com quaisquer estilos básicos que você possa ter. Isso tudo vai envolver bastante código, embora eu vá me ater às partes mais importantes.

FOLHA DE ESTILO: STYLE.CSS A primeira coisa que qualquer tema precisa é de uma folha de estilo. Além de conter o código com as informações do tema de fato, no topo, a folha de estilo também é o local onde a maior parte do design deve ser gerenciada. Se você quiser fazer alguma coisa com CSS, deve colocar tudo em style.css. A primeira coisa que aparece, no topo da folha de estilo, são as informações do tema: /* Theme Name: Notes Blog Theme URI: http://notesblog.com/ Description: The Notes Blog theme is a clean blog theme created for your enjoyment. Made by TDH and maintained at notesblog.com. Requires WordPress 3.1 or higher. Version: 0.2.8 Tags: light, two-columns, right-sidebar, fixed-width, threaded-comments, sticky-post, translation-ready, custom-background, custom-menus Author: Thord Daniel Hedengren Author URI: http://tdh.me/ License: GNU General Public License License URI: license.txt Get support and services for the Notes Blog theme: http://notesblog.com Created and managed by Thord Daniel Hedengren: http://tdh.me */

Nada de estranho ou mirabolante até aí. Os designers de temas vão gostar de saber que o campo de descrição suporta algum código HTML básico. Seguindo adiante, temos um segmento de reset. Em geral, sou contra a prática popular de aplicar um reset de margem e preenchimento em tudo, uma vez que muitos elementos não possuem essas configurações. Dito isso, alguns resets são úteis, como o exemplo a seguir, relativamente extenso:

73

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS /* ===== RESET */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; margin: 0; padding: 0; vertical-align: baseline; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; }

Atenção para o fato de que ao longo deste livro omiti a maior parte do estilo de fonte e links, que detalham as fontes e cores utilizadas, para economizar espaço. A maior parte do código de estilo é bem simples. Aconselho os leitores a mergulharem mais fundo no código, fazendo o download da versão completa em http://notesblog.com. Simplesmente abra o arquivo style.css para ter uma visão geral, e perceba as diferenças. A seção de layout é relativamente extensa, e controla todos os elementos principais, mas a aparência do conteúdo dentro dos elementos não está detalhada. A seção completa não é apresentada aqui devido à sua extensão, mas você deve dar uma olhada no código para se familiarizar com a estrutura geral. Você irá perceber algumas classes genéricas, em um primeiro momento, para alinhamento e larguras de coluna típicas, mas depois disso o código consiste essencialmente dos blocos essenciais que compõe o tema. Embora a maior parte desse arquivo seja autoexplicativa, olhe com mais atenção para a seção de comentários. ol.commentlist { margin: 20px 0 20px 20px; padding: 20px 20px 1px 20px; background: #e9e9e9; } li.comment {} div.comment-author {} div.comment-author img { float: left; margin-right: 10px; } div.comment-author cite { font-weight: bold; font-style: normal; } div.comment-meta { margin-bottom: 10px; } div.comment-body {} div.comment-body p { margin-left: 16px; padding: 5px 0 5px 20px; border-left: 1px dotted #fff; }

74

CAPÍTULO 4: FUNDAMENTOS DOS TEMAS DE WORDPRESS div.reply { margin-top: 0; padding-bottom: 10px; border-bottom: 1px dotted #fff; text-align: right; } li.comment ul.children { margin: 20px 0 0 20px; } li.depth-1 { margin-bottom: 20px; } li.byuser {} li.bypostauthor {} li.pingback { padding: 10px 10px 1px 10px; background:#efefef; } li.pingback p, li.pingback div.reply { display:none; }

Isso deve ser bastante autoexplicativo. Os comentários são gerados dentro do elemento ol.commentlist, e cada comentário é, em si, um item em uma lista. Depois disso, vem a área div#respond, com as formas necessárias para enviar um comentário. Há apenas duas outras coisas que quero ressaltar em style.css. A primeira delas está rotulada como Elements & Design, no arquivo. Trata-se basicamente de manipulação de imagens, alinhamentos de texto e outras coisas de que o WordPress necessita para a saída padrão. /* ================= ELEMENTOS & DESIGN */ p.right { text-align:right; } p.center { text-align:center; } p.admin { color: #aaa; font-size: 12px; } p.nocomments { padding: 0 20px; font-style: italic; color: #777; } div#content embed, .embedded { text-align:center; margin: 0 0 14px 0; padding-left:0; border:0; } /* para vídeos */ blockquote { margin: 0 0 16px 20px; padding: 0 20px; border: 1px solid #e9e9e9; border-width: 0 0 0 1px; } blockquote.pullquote { width: 220px; padding: 5px 0; border: 0; font-size: 18px; line-height: 150%; } blockquote.pullquote p { margin-bottom: 0; } ol.commentlist li blockquote { border: 0; padding:0; } /* Imagens e alinhamentos */ .alignleft, blockquote.alignleft { margin: 0 20px 20px 0; } .alignright, blockquote.alignright { margin: 0 0 20px 20px; } img.aligncenter, .aligncenter { margin: 0 auto 16px auto; text-align:center; } .frame { padding: 1px; border: 1px solid #e9e9e9; } .wp-caption { padding: 20px 18px; border: 1px solid #e9e9e9; color: #888; font-style: italic; text-align:center; } p.wp-caption-text { margin: 10px 0 0 0 !important; padding:0; font-size: 12px; line-height: 14px !important; } div.gallery { margin-bottom: 14px; } dl.gallery-item {} dt.gallery-icon {}

75

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS img.attachment-thumbnail { border:0; } dd.gallery-caption { margin-top: 8px; font-size: 12px; color: #777; ont-style: italic; } /* Ajustes rápidos de cor */ div.postmeta { color: #777; } span.alert { color: red; } div#content strong { color: #333; }

Entre os elementos que chamam atenção no código acima estão as classes de imagem (img.frame foi uma adição minha; incluo isso em quase todos os meus temas para acrescentar bordas elegantes às imagens) e as classes para legendas de imagem wp-caption. Outro elemento que merece destaque é o estilo que o Notes Blog possui para formatos de postagem (do inglês, “post formats”). Os formatos de postagem precisam ser ativados antes de sua utilização, mas são extremamente úteis. As tarefas que costumavam ser manipuladas com categorias ou campos personalizados podem agora ser gerenciadas pelos formatos de postagem, usando conditional tags para gerenciar o conteúdo de forma diferente ou aplicando estilos ao conteúdo, como é o caso no exemplo abaixo: /* ============ FORMATOS DE POSTAGEM */ .format-aside { margin-left: 25px; margin-right: 25px; padding: 0 10px 0 20px; border-left: 1px solid #efefef; } .format-aside h2.entry-title { margin-bottom: 6px; font-size: 16px; lineheight: 16px; } .format-aside div.entry-meta { display:none; } .format-aside div.entry-content {} .format-aside div.entry-content p { color: #666; font-size: 14px; marginbottom: 14px; }

Como você pode ver, trata-se de apenas um formato de postagem, chamado aside, nesse exemplo. A classe format-aside é automaticamente gerada por post_class(), que você verá mais adiante neste capítulo. Isso não foi tão complicado assim, não é mesmo? Lembre-se de que o Notes Blog pretende ser um tema simples para servir de base para você construir o seu, por isso grande parte dos elementos decorativos que você normalmente acrescentaria ficaram de fora, assim como as imagens.

CABEÇALHO DO TEMA: HEADER.PHP Quando o tema ativo é carregado, ele começa com o arquivo header.php. É aqui que você coloca todos os metadados, dispara o WordPress com wp_head() e normalmente coloca o cabeçalho da sua página: > <meta charset="" /> >

" title="">

77

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS

" title="">

A primeira coisa típica do WordPress que aparece aqui é a title tag (tag de título). Aqui, utilizo conditional tags para gerar um título levemente diferente dependendo de onde o visitante estiver, dentro do site. Se você estiver em uma página, obterá o título da página, um arquivo de tag fará a tag aparecer no título, e assim por diante. É possível escrever coisas bem elaboradas aqui, mas eu mantive a coisa simples para esta versão. Seguindo adiante, o trecho Comment javascript pode causar alguma confusão. O que quero fazer é carregar o JavaScript necessário para as respostas para discussões (threads) nos comentários, mas apenas em postagens simples e páginas (daí a conditional tag is_singular(), que verifica apenas isso). Eu utilizo wp_enqueue_script() para garantir que isso seja carregado corretamente com o WordPress, a partir da pasta wp-include/js/. Na mesma seção, você também encontrará notesblog_inside_head(), um gancho que permite aos desenvolvedores inserir o código onde ele está localizado — neste caso, dentro da seção head do site. Você aprenderá mais sobre isso mais adiante, mas por enquanto é o suficiente saber que a presença dessa pequena linha, juntamente com a declaração de sua existência em functions.php (do qual também falaremos mais adiante) torna possível inserir código ali a partir do exterior, por assim dizer. Mais além, em index.php você encontrará outros dois ganchos: notesblog_above_site() e notesblog_below_menu(). É uma boa ideia colocar wp_head() logo antes de fechar a tag head; é isso que inicializa o WordPress. Além disso, observe body_class() na tag body, que faz mais ou menos o que post_class() faz pelas postagens, ou seja, adiciona várias classes CSS dependendo do local em que o visitante se encontra, dentro do site. Isso é muito útil para os designers de temas. Você talvez perceba a ausência desta linha: <meta name="generator" content="WordPress " />

Isso se deve ao fato de que você não quer que as pessoas erradas descubram qual a versão do WordPress que você está rodando. Por que facilitar para os hackers mais do que o necessário, não é mesmo?

78

CAPÍTULO 4: FUNDAMENTOS DOS TEMAS DE WORDPRESS A linha dynamic_sidebar() é uma área de widget, situada ao lado do logotipo. A propósito, embora eu use bloginfo() para a saída do título do site, a URL apontando para a página inicial é um echo de home_url(), o que é uma prática recomendada hoje em dia. Você também vai perceber que, dependendo de se você está na página inicial (verificação com is_home() e is_front_page(), respectivamente), o título será envolvido por uma tag h1, caso contrário, ele aparece dentro de div#site-header, mas ambos terão a mesma aparência. (Consulte o arquivo style.css para confirmar essa informação!) A razão para isto é apenas para agradar aos mecanismos de busca. Na primeira página, o título do site é o cabeçalho mais alto, mas em uma postagem, por exemplo, o título do site não é tão importante quanto o título da postagem, então nesse caso vou incluir o título do site em uma div, e deixar que o título da postagem seja h1. Por fim, temos wp_nav_menu(), que é uma área de menu, assim como dynamic_ sidebar() é uma área de widget. Falaremos de todas essas coisas bacanas em maior profundidade à medida que formos adiante. Os widgets e menus são declarados e definidos em functions.php, e então populados no admin do WordPress usando a interface adequada. Os arquivos de tema usam as tags dynamic_sidebar() para widgets e wp_nav_menu() para menus, como marcadores (placeholders) onde será exibido o conteúdo que colocar nelas.

MODELO PRINCIPAL: INDEX.PHP Houve um tempo em que index.php continha todos os arquivos de fallback de que você precisasse, uma vez que esse é o modelo que será usado na ausência de um modelo mais adequado. No entanto, hoje você pode extrair o loop, que é o que faz funcionar o WordPress, dos arquivos de modelo para arquivos de loop. Por isso mesmo o index.php do tema Notes Blog é curto e grosso:

É bem simples, como você pode ver. Primeiramente, você carrega o modelo com header.php

get_ header(), e então começa a div de conteúdo. Nesse arquivo, você encontra uma tag get_template_part(), que inclui o loop, buscando primeiramente loop-index.php e, na

ausência dele, revertendo para loop.php. No Notes Blog, não há um arquivo loop-index.php, por isso o tema irá carregar loop.php (sobre o qual vai aprender muito em breve). O modelo index.php termina chamando primeiramente o modelo sidebar.php com get_ side-bar(), e, em seguida o modelo footer.php, com get_footer().

79

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS LOOP: LOOP.PHP Você aprendeu sobre o loop no capítulo anterior, mas vamos refrescar sua memória rapidamente por aqui. O loop de fallback em Notes Blog é, obviamente, loop.php, mas há alguns loops utilizados para a primeira página, assim como para postagens individuais, páginas e visualização de anexos. Dê uma olhada em loop.php, onde tudo isso está detalhado: max_num_pages > 1 ) : ?>

← Older posts', 'notesblog' ) ); ?>

→', 'notesblog' ) ); ?>

>

80

CAPÍTULO 4: FUNDAMENTOS DOS TEMAS DE WORDPRESS " title="" rel="bookmark">

'

' . _ _( 'Pages:', 'notesblog' ), 'after' => '

' ) ); ?>

// Sempre que possível, exibir a navegação na parte inferior if ( $wp_query->max_num_pages > 1 ) : ?>

← Older posts', 'notesblog' ) ); ?>

→', 'notesblog' ) ); ?>

Acho que o código já está bem documentado com comentários, mas mesmo assim, vou guiar você através dele. Se você se sentir um pouco perdido, volte ao Capítulo 3 e leia mais sobre o loop.

81

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS A primeira coisa é um bloco para exibição de navegação, caso você precise fazer isso. Isso contemplaria saltar para a página anterior e para a próxima página em um arquivo de categoria, por exemplo. max_num_pages > 1 ) : ?>

← Older posts', 'notesblog' ) ); ?>

→', 'notesblog' ) ); ?>

Você encontrará um bloco semelhante no final de loop.php, já que você quer que a navegação apareça tanto no topo da página quanto na parte inferior, quando ela é necessária. Seguindo adiante, você chega à manipulação de mensagem de erro 404 (página não encontrada). Isso é o que vai mostrar se o WordPress não consegue encontrar a postagem ou página que o usuário buscava, geralmente devido a defeitos em um link. Naturalmente, aqui um arquivo de modelo 404.php assumiria o comando, mas o tema Notes Blog não inclui esse arquivo.

Como você já deve ter percebido, Notes Blog é um tema totalmente localizado, ou seja, toda linha que o usuário possa querer traduzir para outro idioma aparece dentro de _ _() ou _e(). Esse último executa um echo automático do conteúdo da linha. Em seguida, passamos para o loop de conteúdo, de fato:

82

CAPÍTULO 4: FUNDAMENTOS DOS TEMAS DE WORDPRESS

>

" title="" rel="bookmark">

'

' . _ _( 'Pages:', 'notesblog' ), 'after' => '

' ) ); ?>

Você perceberá mais uma porção daqueles ganchos mencionados anteriormente na seção header.php. Eles são notesblog_above_post_title_listing() para incluir coisas acima do título, e notesblog_below_post_title_listing() para incluir coisas abaixo do título. Ambos são declarados em functions.php e abordados mais adiante.

83

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS Fora isso, trata-se de um loop bastante típico, com saída para o título (com link), etc. Se você estiver visualizando uma página de arquivo (um arquivo de categoria ou de data, por exemplo) ou um resultado de busca, você verá apenas trechos das postagens, utilizando the_excerpt(), caso contrário você verá o conteúdo na íntegra, usando the_content(). Isso é basicamente tudo sobre loop.php; é bem direto, mas dá conta do essencial, caso qualquer página reverta para ele. Uma vez que o Notes Blog possui arquivos de loop dedicados para páginas individuais (por exemplo), não há qualquer manipulação especial para essas páginas em loop.php. Caso contrário, isso poderia ter sido feito com uma conditional tag is_singular(), preferencialmente para gerenciar as postagens e páginas individuais. A essa altura, você já deve ter captado a essência da coisa. Se você quiser o panorama completo, sugiro dar uma olhada nos outros arquivos de loop do tema (loop-single.php, loop-attachment.php, etc.) para ver como eles lidam com suas respectivas tarefas.

BARRA LATERAL: SIDEBAR.PHP Seguindo adiante, chegamos ao arquivo sidebar.php, que é carregado à direita no tema Notes Blog, como você provavelmente já percebeu pelo arquivo style.css:

?>

// Página inicial if ( is_home() || is_front_page() ) { dynamic_sidebar('front-page-right-column'); } // Postagem individual elseif ( is_single() ) { dynamic_sidebar('posts-right-column'); } // Página elseif ( is_page() ) { dynamic_sidebar('pages-right-column'); } // Listagens de arquivos elseif ( is_archive() ) { dynamic_sidebar('archives-right-column'); } // Fallback da área para widgets else { dynamic_sidebar('fallback-right-column'); }

84

CAPÍTULO 4: FUNDAMENTOS DOS TEMAS DE WORDPRESS Isso é bem simples. A barra lateral está localizada em ul#sidebar (que por sua vez, está posicionada com div#sidebar-container), onde você tem uma porção de verificações condicionais para determinar qual área de widget deve ter sua saída gerada em que local. A área de widgets superior, dynamic_sidebar('global-right-column'), sempre é carregada, enquanto as outros só aparecem na página adequada. Observe que não há nenhum conteúdo padrão em qualquer das áreas de widget, por isso basta deixá-las vazias, caso não queira utilizá-las. Você poderia simplesmente usar a área de widgets global, se você preferir optar por uma alternativa simples. Falaremos mais sobre widgets quando chegarmos ao functions.php, onde você verá que todos os widgets são declarados.

COMENTÁRIOS: COMMENTS.PHP A funcionalidade de comentários é controlada por comments.php. Você não precisa, na verdade, incluir esse arquivo, pois se o WordPress não conseguir encontrar comments.php no seu tema, ele irá carregar o arquivo a partir de wp-includes, o que às vezes é uma boa ideia. O Notes Blog tem seu próprio arquivo comments.php, com base no arquivo mencionado, em wp-includes. O arquivo (totalmente localizado, naturalmente) está dividido nos segmentos a seguir. Normalmente, você não precisa mexer na parte superior; ela apenas impede que os comentários sejam exibidos, caso uma senha seja exigida:

Seguindo adiante, temos um loop de comentário que verifica se há quaisquer comentários, e, em seguida, gerencia os comentários. Graças a wp_list_comments(), o modelo comments.php não é mais tão difícil de trabalhar como já foi:

' . get_the_title() . '' ); ?>

85

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS

1 && get_option( 'page_comments' ) ) : ?>

← Older comments', 'notesblog' ) ); ?>

→', 'notesblog' ) ); ?>

1 && get_option( 'page_comments' ) ) : ?>

← Older Comments', 'notesblog' ) ); ?>

→', 'notesblog' ) ); ?>

Perceba que wp_list_comments() está solicitando algo chamado notesblog_comment. Isso está declarado em functions.php, e contém a saída dos comentário, de fato. Falaremos disso mais adiante. Mas e se não houver comentário algum?
86

CAPÍTULO 4: FUNDAMENTOS DOS TEMAS DE WORDPRESS if ( ! comments_open() ) : ?>

?>

// Encerrar (wrap) have_comments() endif;

O código simplesmente gera uma mensagem caso os comentários tenham sido fechados, e não diz coisa alguma caso não haja cometários. Por fim, chegamos à seção de resposta. Antigamente, havia um formulário inteiro aqui, mas atualmente você pode usar apenas comment_form() para manipular tudo: '

', 'comment_notes_after' => '', ) ); ?>

E isso é tudo, basta acrescentar uma div e você está pronto. Na maioria das vezes, esse modelo básico de comments.php será o suficiente. Porém, você pode querer algo a mais, como uma integração com Facebook Connect ou outros recursos do tipo. Às vezes, esses casos especiais são gerenciados por plug-ins, mas nem sempre, por isso é uma boa ideia se familiarizar com o arquivo comments.php.

RODAPÉ: FOOTER.PHP Finalmente, chegou a hora de fechar o conjunto com o arquivo de modelo footer.php. Esse arquivo encerra todas as tags de header.php e adiciona as informações de direitos autorais, etc. Mas ele inclui também quatro áreas de widget, sobre as quais falaremos logo a segur, e dois ganchos: notesblog_above_footer() e notesblog_below_site(), para inclusão de código.
?>

//Os widgets estão em sidebar-footer.php get_sidebar('footer');

87

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS

Copyright © ">

Notes Blog TDH
WordPress

↑ ↑

?>

Lembre-se de sempre colocar wp_footer() exatamente no final de seu arquivo footer.php, logo antes do fechamento da tag body. Esse é o encerramento do WordPress, e é tão importante quanto wp_head(). As quatro áreas de widget não estão realmente no arquivo footer.php (embora pudessem estar). Para manter a organização, estou usando get_sidebar('footer') para incluir sidebar-footer.php no local onde as áreas de widget realmente estão localizadas. Vamos dar uma olhada também em sidebar-footer.php:
88

CAPÍTULO 4: FUNDAMENTOS DOS TEMAS DE WORDPRESS

)

?>

&& ! is_active_sidebar('footer-column-c') && ! is_active_sidebar('footer-column-d')

return; // Se chegarmos até aqui, é porque há widgets. Aí então vamos adiante!

?>

?>

?>

?>

Se você já brincou com o tema Twenty Ten, vai reconhecer o código. Tratam-se, basicamente, de quatro áreas de widget que aparecem apenas quando há algo dentro delas. Nada de muito sofisticado.

O IMPORTANTÍSSIMO ARQUIVO FUNCTIONS.PHP O arquivo functions.php evoluiu muito ao longo dos anos. Você não só declara suas áreas de widget nele, mas também determina uma série de configurações importantes, cria seus ganchos, ativa menus e fundos personalizados, e assim por diante. O Notes Blog é capaz de fazer tudo isso, exceto adicionar o recurso de cabeçalho personalizado/custom header, que não faz parte da versão atual (esse assunto é abordado no Capítulo 6).

Configurações básicas em functions.php O arquivo functions.php pode ser um tanto intimidante, por isso vamos começar pelo início. // Suporte à localização, obtém arquivos de idioma a partir de /lang/ load_theme_textdomain( 'notesblog', TEMPLATEPATH . '/lang' ); //Largura padrão do conteúdo if ( ! isset( $content_width ) ) $content_width = 640; // O editor visual utiliza editor-style.css add_editor_style();

89

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS // Adicionar links de feed RSS padrão para postagens e comentários add_theme_support( 'automatic-feed-links' ); // Adicionar suporte a fundo personalizado add_custom_background(); // Acrescentar suporte a miniaturas (920x250px) add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 920, 250, true ); // Adicionar alguns formatos de postagem add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

Este código inclui as configurações básicas para alguns recursos padrão do WordPress. Primeiramente, você carrega o textdomain usado para localização e diz ao WordPress que o arquivo de idioma está localizado na pasta lang do tema: load_theme_textdomain( 'notesblog', TEMPLATEPATH . '/lang' );.

Em seguida, você configura a largura padrão do conteúdo para 640 pixels. Isso é usado para arquivos de mídia e incorporações. Em seguida, add_editor_style() irá carregar editor-style.css para modificar o editor visual no admin, dando a ele uma aparência mais semelhante à do site, e add_theme_ support( 'automatic-feed-links') acrescenta feeds de RSS padrão. Esse código também permite imagens de fundo/cores personalizadas que podem ser facilmente editadas a partir da interface de admin com add_custom_background(). Para obter uma imagem de destaque para postagens e páginas, basta configurar add_theme_ support ('post-thumbnails'); obviamente, você quer que essas imagens tenham a

mesma aparência, por isso configure um tamanho de imagem fixo de 920x250 pixels com set_post_thumbnail_size(920, 250, true). No Notes Blog, a image de destaque, caso haja, está localizada no topo da postagem ou página, e cobre toda a largura; por isso ela é tão grande.

Por fim, esse código adiciona suporte a alguns formatos de postagem, dos quais já falamos anteriormente. Você pode usar formatos de postagem para ter maior controle sobre a aparência e comportamento de suas postagens. O Capítulo 6 aborda em mais detalhes esse assunto. De toda forma, add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) ) adiciona suporte a três dos formatos de postagem : Aside, Gallery, e Quote. Isso significa que você pode selecionar qualquer um desses (ou o padrão Standard) na hora de escrever suas postagens.

Acrescentando Áreas de Menu em functions.php O código a seguir serve para declarar uma área de menu. Como você provavelmente já sabe, o WordPress possui uma interface de menu, e além de colocar os menus que você cria dentro de widgets e arrastá-los para lá, você também pode criar áreas de menu. O Notes Blog possui apenas uma área de menu, chamada Top Navigation, e como o nome sugere, trata-se da barra de navegação superior no tema. 90

CAPÍTULO 4: FUNDAMENTOS DOS TEMAS DE WORDPRESS // Acrescente o menu Top Navigation register_nav_menus( array( 'top-navigation' => _ _( 'Top Navigation', 'notesblog' ), ) );

O Capítulo 6 aborda os menus em profundidade.

Acrescentando widgets em functions.php Em seguida, dê uma olhada nos widgets. O Notes Blog tem uma porção de áreas para widgets, todas declaradas no código a seguir e então chamadas, quando necessário, nos outros arquivos de modelo. // ÁREAS PARA WIDGETS -> // Ao lado do logotipo register_sidebar( array( 'name' => _ _( 'Beside the logo', 'notesblog' ), 'id' => 'beside-the-logo', 'description' => _ _( 'Widget area in the header, right of the logo.', 'notesblog' ), 'before_widget' => '

', 'after_widget' => '

', 'before_title' => '

', 'after_title' => '

', ) ); // Coluna direita global register_sidebar( array( 'name' => _ _( 'Global right column', 'notesblog' ), 'id' => 'global-right-column', 'description' => _ _( 'The global right column sits on top of every right column, leave empty if unwanted.', 'notesblog' ), 'before_widget' => '

', 'after_widget' => '

', 'before_title' => '

', 'after_title' => '

', ) ); // Coluna direita na página inicial register_sidebar( array( 'name' => _ _( 'Front page right column', 'notesblog' ), 'id' => 'front-page-right-column', 'description' => _ _( 'Right column widget area used on the front page.', 'notesblog' ), 'before_widget' => '

', 'after_widget' => '

', 'before_title' => '

', 'after_title' => '

', ) ); // Coluna direita das postagens register_sidebar( array( 'name' => _ _( 'Posts right column', 'notesblog' ), 'id' => 'posts-right-column', 'description' => _ _( 'Right column widget area for single posts.', 'notesblog'

91

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS ),

'before_widget' => '

', 'after_widget' => '

', 'before_title' => '

', 'after_title' => '

', ) ); // Coluna direita das páginas register_sidebar( array( 'name' => _ _( 'Pages right column', 'notesblog' ), 'id' => 'pages-right-column', 'description' => _ _( 'Right column widget area for Pages.', 'notesblog' ), 'before_widget' => '

', 'after_widget' => '

', 'before_title' => '

', 'after_title' => '

', ) ); // Coluna direita dos arquivos register_sidebar( array( 'name' => _ _( 'Archives right column', 'notesblog' ), 'id' => 'archives-right-column', 'description' => _ _( 'Right column widget area for archive listings.', 'notesblog' ), 'before_widget' => '

', 'after_widget' => '

', 'before_title' => '

', 'after_title' => '

', ) ); // Fallback da coluna direita register_sidebar( array( 'name' => _ _( 'Right column fallback', 'notesblog' ), 'id' => 'fallback-right-column', 'description' => _ _( 'Right column fallback widget area for the rest.', 'notesblog' ), 'before_widget' => '

', 'after_widget' => '

', 'before_title' => '

', 'after_title' => '

', ) ); // Coluna A da página inicial register_sidebar( array( 'name' => _ _( 'Home column A', 'notesblog' ), 'id' => 'home-column-a', 'description' => _ _( 'The left column just below the menu on the front page.', 'notesblog' ), 'before_widget' => '

', 'after_widget' => '

', 'before_title' => '

', 'after_title' => '

', ) ); // Coluna B da página inicial register_sidebar( array( 'name' => _ _( 'Home column B', 'notesblog' ), 'id' => 'home-column-b', 'description' => _ _( 'The middle column just below the menu on the front page.',

92

CAPÍTULO 4: FUNDAMENTOS DOS TEMAS DE WORDPRESS 'notesblog' ), 'before_widget' => '

', 'after_widget' => '

', 'before_title' => '

', 'after_title' => '

', ) ); // Coluna C da página inicial register_sidebar( array( 'name' => _ _( 'Home column C', 'notesblog' ), 'id' => 'home-column-c', 'description' => _ _( 'The right column just below the menu on the front page.', 'notesblog' ), 'before_widget' => '

', 'after_widget' => '

', 'before_title' => '

', 'after_title' => '

', ) ); // Rodapé da coluna A register_sidebar( array( 'name' => _ _( 'Footer column A', 'notesblog' ), 'id' => 'footer-column-a', 'description' => _ _( 'The far left column in the footer.', 'notesblog' ), 'before_widget' => '

', 'after_widget' => '

', 'before_title' => '

', 'after_title' => '

', ) ); // Rodapé da coluna B register_sidebar( array( 'name' => _ _( 'Footer column B', 'notesblog' ), 'id' => 'footer-column-b', 'description' => _ _( 'The left middle column in the footer.', 'notesblog' ), 'before_widget' => '

', 'after_widget' => '

', 'before_title' => '

', 'after_title' => '

', ) ); // Rodapé da coluna C register_sidebar( array( 'name' => _ _( 'Footer column C', 'notesblog' ), 'id' => 'footer-column-c', 'description' => _ _( 'The right middle column in the footer.', 'notesblog' ), 'before_widget' => '

', 'after_widget' => '

', 'before_title' => '

', 'after_title' => '

', ) ); // Rodapé da coluna D register_sidebar( array( 'name' => _ _( 'Footer column D', 'notesblog' ), 'id' => 'footer-column-d', 'description' => _ _( 'The far right column in the footer.', 'notesblog' ), 'before_widget' => '

', 'after_widget' => '

',

93

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS 'before_title' => '

', 'after_title' => '

', ) );

As áreas de widget são registradas com register_sidebar() e, então, definidas com uma matriz de configurações. Você pode controlar coisas óbvias, como nome e ID para a sua área widget, assim como a descrição que aparecerá na interface de widgets, no admin do WordPress, ajudando, assim, os usuários a entender para que serve determinada área. Outras coisas que você pode alterar são o título do widget, caso haja um, se ele deve ser incluído dentro de uma tag, e o próprio widget, em si. Consulte o Codex em http://codex. wordpress.org/Function_Reference/register_sidebar para obter mais informações, como os valores padrão para register_sidebar().

Incluindo ganchos em functions.php Lembra de todos aqueles ganchos que você pode usar para inserir código no tema? Eles também são declarados em functions.php, criados por do_action(), e sua aparência é semelhante ao exemplo abaixo: // GANCHOS DO NOTES BLOG // Criar o gancho de encerramento interno do cabeçalho function notesblog_inside_head() { do_action('notesblog_inside_head'); } // Criar o gancho de encerramento acima function notesblog_above_site() { do_action('notesblog_above_site'); } // Criar o gancho de menu abaixo function notesblog_below_menu() { do_action('notesblog_below_menu'); } // Criar o gancho de postagem individual acima function notesblog_above_post() { do_action('notesblog_above_post'); } // Criar o gancho para acima do título da postagem em listagens function notesblog_above_post_title_listing() { do_action('notesblog_above_post_title_listing'); } // Criar o gancho para abaixo do título da postagem em listagens function notesblog_below_post_title_listing() { do_action('notesblog_below_post_title_listing'); } // Criar o título acima da postagem na visualização de postagens individuais function notesblog_above_post_title_single() { do_action('notesblog_above_post_title_single'); } // Criar o título abaixo da postagem na visualização de postagens individuais function notesblog_below_post_title_single() { do_action('notesblog_below_post_title_single');

94

CAPÍTULO 4: FUNDAMENTOS DOS TEMAS DE WORDPRESS } // Criar o título acima da página na visualização de páginas individuais function notesblog_above_page_title_single() { do_action('notesblog_above_page_title_single'); } // Criar o título abaixo da página na visualização de páginas individuais function notesblog_below_page_title_single() { do_action('notesblog_below_post_title_single'); } // Criar o gancho entre postagens e comentários function notesblog_below_post() { do_action('notesblog_below_post'); } // Criar o gancho acima do rodapé function notesblog_above_footer() { do_action('notesblog_above_footer'); } // Criar gancho abaixo do site function notesblog_below_site() { do_action('notesblog_below_site'); } // <- ENCERRA

Os ganchos são abordados no Capítulo 6, mas se você olhar para o código a seguir, vai ter uma boa ideia de como eles funcionam: // POSTMETA ABAIXO DO TÍTULO DA POSTAGEM function notesblog_add_postmeta_below_title() { ?>

• • ', ', ', ''); } ?>
• ', '' ); ?>

95

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS
A função notesblog_add_postmeta_below_title() contém os metadados da postagem (postmeta), que incluem o autor do post, a data de publicação, e assim por diante, de modo que você pode aplicar isso a dois ganchos usando add_action(). Poderíamos dizer que você está “infiltrando” todos os dados de postmeta que residem em notesblog_ add_postmeta_below_title() onde quiser, adicionando-os ganchos correspondentes. Novamente, você aprenderá mais sobre isso no Capítulo 6, por isso não se preocupe se tudo ainda soa estranho para você.

Controlando os comentários em functions.php O último trecho de código no arquivo functions.php controla a aparência dos comentários. Você lembra que wp_list_comments() continha uma retrochamada (callback) para notesblog_comment()? Na verdade, aquilo é uma função, e contém tudo o que é necessário para a saída dos comentários. // COMENTÁRIOS function notesblog_comment($comment, $args, $depth) { $GLOBALS['comment'] = $comment; ?>

id="li-comment-">

' ); ?> %s says:'), get_comment_author_link()) ?>

comment_approved == '0') : ?>

comment_ID ) ) ?>">

$depth,

96

CAPÍTULO 4: FUNDAMENTOS DOS TEMAS DE WORDPRESS 'max_depth' => $args['max_depth']))) ?>

Isso é um tanto confuso, mas, basicamente, trata-se de uma saída semelhante à de postagens, que será usada no loop de comentários, por assim dizer. A template tag comment_text() resulta no comentário em si (da mesma forma que the_content(), nas postagens), e comment_reply_link() só será usada se a opção de discussão nos comentários estiver ativada. Caso contrário, não faz muito sentido comentar sobre comentários individuais, não é mesmo? No entanto, graças ao enfileiramento (enqueing) do JavaScript de resposta a comentários no arquivo header.php, a aparência ficará ótima. Neste momento, você pode estar se sentindo um tanto assoberbado pelo arquivo functions.php do tema Notes Blog. Volte a ele de tempos em tempos e, à medida que você aprender mais, tudo vai se encaixar.

ENTENDENDO OS ARQUIVOS DE MODELO Um tema consiste em arquivos de modelo. Há alguma confusão sobre isso, pois as pessoas se referem ao tema como modelo (do inglês, “template”). Isso está errado; um tema, que é na verdade uma pasta (que precisa, por sua vez, estar localizada no diretório wp-content/themes para ser utilizada) que contém diversos arquivos. A folha de estilo style.css é um arquivo de modelo, assim como os arquivos header.php, footer.php, index.php, functions.php, etc., localizados na pasta do tema. Arquivos de modelo podem ser usados de várias formas. Sua utilidade exata depende do que você coloca dentro deles, naturalmente. Você pode fazê-los se comportar quase de qualquer forma que desejar, alterando o loop ou deixando o loop de fora, e usando template tags para gerar um comportamento específico. Da mesma foma, você pode tornar suas páginas bem mais dinâmicas usando conditional tags e, se quiser mesmo sacudir as coisas, sempre pode usar plug-ins para expandir o WordPress para além das funcionalidades integradas. Há certas coisas que você precisa saber sobre os arquivos de modelo. Primeiramente, deve saber quais são necessários para a funcionalidade básica. Em segundo lugar, deve descobrir qual arquivo de modelo é usado em que ocasiões. Em terceiro lugar, você deve descobrir que arquivos de modelo são necessários para o resultado que quer obter. Suponha que você quer que a página inicial seja igual às páginas de index.php, porém com uma imagem a mais ou um texto de boas vindas. É necessário usar um modelo home.php além do index.php? Seria muito mais conveniente adicionar uma conditional tag is_home() em index.php para gerar as adições apenas na página inicial. O mesmo vale para postagens individuais: caso não haja muita diferença entre a visualização de postagem individual e a página inicial, você pode usar is_single() para alterar as partes que precisam ser diferentes (como, por exemplo, não incluir um link no título da postagem).

97

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS QUANDO USAR QUAIS ARQUIVOS DE MODELO? A Tabela 4-1 enumera os diversos arquivos de modelo e descreve a utilidade de cada um. Tabela 4-1 Usos dos arquivos de modelo Modelo

Função

archive.php

Modelo para arquivos baseados em autor, categoria e data, substituído pelo respectivo modelo individual, e também pelo arquivo archive-[post type].php para o post type específico (ex. archive-persons.php para o post type Persons)

attachment.php

Modelo para qualquer anexo das postagens, em geral, esses anexos são imagens, mas qualquer tipo de arquivo MIME pode ser usado. Estilos personalizados são obtidos com [tipo mime].php; por exemplo image.php ou video.php

author.php

O modelo de autor

category.php

Modelo para a visualização de listagens de categoria; category-[id].php e category-[slug].php podem ser usados para aplicar o modelo à categorias específicas

comments.php

Modelo para a exibição e postagem de comentários; caso o arquivo não esteja disponível, o modelo de comentários padrão será carregado

comments-popup.php

Comentários em uma janela pop-up; raramente usado hoje em dia

date.php

Modelo para qualquer listagem baseada em data (por ano, por mês, e assim por diante)

404.php

Modelo para a mensagem de erro de página não encontrada 404

home.php front-page.php

Usados para a página inicial e para a primeira página, respectivamente, caso uma página estática seja configurada como página inicial

index.php

Modelo principal. Deve ser incluído como arquivo de fallback para todas as páginas, caso não possua um arquivo de modelo; provavelmente deve incluir o loop

page.php

Modelo para a visualização de páginas; modelos para páginas individuais também podem ser recriados, e page-[slug].php, bem como page-[id].php podem ser usados para aplicar o modelo à páginas específicas

search.php

Modelo de resultados de busca/mensagem de erro

single.php

Modelo de visualização de postagens individuais; single-[post type].php (ex. single-persons.php para um post type chamado “persons”), usado para post types específicos

style.css

Arquivo de folha de estilo, deve ser incluído com o header que contém as informações do tema, no topo. Coloque aqui tudo o que for CSS

tag.php

Exibição de lista para uma tag; tag-X.php será usado para a tag cujo slug é X

taxonomy.php

Para taxonomias personalizadas; taxonomy-[taxonomia]-[termo].php para um termo específico em uma taxonomia específica (ex. taxonomy-monstersgodzilla.php para Godzilla em Monsters), taxonomy-[taxonomia].php para taxonomias específicas (ex. taxonomy-monsters.php) e taxonomy.php para a visualização geral.

98

CAPÍTULO 4: FUNDAMENTOS DOS TEMAS DE WORDPRESS Lembre-se de que um tema não precisa incluir todos os arquivos de modelo possíveis. Na verdade, você não deve usar mais arquivos de modelo do que precisa, uma vez que isso significaria ter mais arquivos para manutenção caso o WordPress mude ou você queira alterar algo em seu design. Alguns desses modelos podem ser confusos. Dê uma olhada no modelo category.php, por exemplo. Por padrão, esse modelo exibe a listagem de postagens a partir de qualquer categoria. No entanto, caso haja um modelo category-X.php, onde X é a ID da categoria em questão, esse arquivo de modelo será usado em lugar do modelo category.php. O mesmo vale para tags: tag-X.php é exibido antes de tag.php. Também vale para os slugs de categoria e tag, por isso a categoria Monkeys com o slug monkeys e uma ID de 42 pode ser acessada em categorymonkeys.php bem como category-42.php. Em suma, o WordPress irá buscar um arquivo de modelo específico, e caso ele não esteja presente, reverterá para o próximo arquivo de modelo; na falta deste, reverterá novamente e assim por diante. Tenha em mente que page.php e os modelos de página são na verdade coisas diferentes. Você pode ter percebido que pode configurar um modelo na hora de criar páginas de WordPress. Esses são os modelos de Página, e eles não são controlados por page.php, e contém suas próprias informações no header, assim como style.css. Eles podem ser muito úteis, por isso vamos brincar um pouco.

HIERARQUIA DE MODELOS Agora que você já sabe de que arquivos de modelo precisa, é hora de descobrir quando cada um é carregado e o que acontece se não houver qualquer modelo. Como você sabe, index.php é o modelo de fallback para tudo, e você pode se contentar em usar apenas esse arquivo. A Figura 4-3 ilustra a hierarquia dos modelos.

Exibição de categoria category-[slug].php category-[id].php

index.php

principal modelo de fallback

Exibição de tag tag-[slug].php tag-[id].php Exibição de categoria personalizada taxonomy-[taxonomia]-[termo].php taxonomy-[taxonomia].php taxonomy.php Exibição de post type personalizado archive-[post type].php Exibição de autor author-[nicename].php author-[id].php author.php

Página inicial home.php ou front-page.php Visualização de post individual single-[post type].php single.php Exibição de página Selected page template page-[slug].php page-[id].php page.php Exibição de busca search.php

Exibição de data date.php

404 page not found 404.php

archive.php

modelo de fallback de arquivo

Exibição de anexos [mime type].php attachment.php single.php

Figura 4-3: A hierarquia dos arquivos de modelo

99

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS MODELOS DE PÁGINA As páginas de WordPress são projetadas para conteúdo estático, que é menos cronológico que a postagem de post comum (que provavelmente também é estática). As páginas podem ter subpáginas, que são tipicamente usadas para informações sobre o site, formulários de contato, etc. No entanto, você pode ir muito além disso, se quiser. Primeiramente, pode aplicar um estilo bacana ao template page.php, que se ajuste ao conteúdo que você quer exibir em suas páginas (em vez de simplesmente ter uma réplica do estilo em suas postagens do blog). Em segundo lugar, você pode criar page templates (modelos de página) que podem ser aplicados a páginas individuais a partir da seção Write no admin do WordPress. Esses modelos de páginas são essencialmente arquivos de modelo normais, exceto pelo fato de que precisam de um pequeno trecho de código no topo do arquivo para que o código em si seja inicializado, de modo que o WordPress consiga encontrá-los (da mesma forma que o style.css do seu tema). Simplesmente, insira as linhas a seguir no topo do arquivo de modelo, que você pode então nomear como desejar, desde que ele contenha o sufixo .php:

Esse, por exemplo, poderia ter o nome mypagetemplate.php. Pode ser uma boa ideia nomear os modelos de página como pagetemplate-[alguma coisa].php por razões semânticas, mas pode usar o nome que quiser. Apenas lembre-se de que você não deve usar nomes como page-[alguma coisa].php, uma vez que page-[slug].php é um arquivo de modelo que o WordPress pode buscar, e isso poderia gerar um conflito. Com aquele trechinho de código no topo, e então qualquer tipo de conteúdo que você desejar no arquivo de modelo, o modelo de página aparecerá na caixa Page template, na seção Write page da interface de admin do WordPress. Basta selecionar um modelo, salvar e pronto. Uma utilidade comum dos modelos de página é uma página de arquivo. Talvez você queira ter um link para os seus arquivos, exibindo todos os autores, categorias, tags e as 50 postagens mais recentes, usando template tags. Isso não funcionaria com uma página normal, porque você não pode inserir template tags dentro da postagem em si com o admin do WordPress (ao menos não sem usar plug-ins que abram o editor), por isso precisa de um modelo de página. A seguir, você pode ver uma amostra, pagetemplate-archives.php, retirada do Notes Blog, criada para ser usada com arquivos de blog simples.

100

CAPÍTULO 4: FUNDAMENTOS DOS TEMAS DE WORDPRESS ID ) ) { ?>

ID, 'post-thumbnail' ); ?>

>

', '

' ); ?>

Esta é uma Mensagem de Erro 404 Página Não Encontrada

'; _e("Tag", "notesblog"); echo ' '; single_tag_title(); echo '

'; _e("Your search result", "notesblog"); echo '

• um item de menu

• 
  
  href="/">Home
href="/category/music/">Music href="/category/books/">Books href="/category/games/">Games href="/about/">About

Nada demais, até agora, apenas um punhado de links simples. O primeiro link, Home, é obviamente, a raiz do site. Os links Music, Books e Games apontam para os arquivos das 157

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS categorias (respectivamente, Músicas, Livros e Jogos) e About aponta para a página de informações gerais do site. Você provavelmente já sabia disso simplesmente lendo os links. 3. Em seguida, adicione class="activemenu" ao item da lista quando o usuário estiver naquele lugar específico. Dessa forma, você pode aplicar estilos à classe em sua folha de estilo, para que ela se destaque. Talvez você possa fazer algo assim: li.activemenu { background: yellow; }

Isso daria ao item ativo da lista um fundo amarelo. Mas poderia ser uma imagem de fundo mostrando uma seta ou uma borda inferior, ou qualquer outra coisa, na verdade. 4. Em seguida, adicione as conditional tags. O conceito é bastante simples, basta verificar se você está no lugar em questão: se estiver, gere a classe, caso contrário, não. Em primeiro lugar, comece verificando se você está na página inicial, utilizando a conditional tag is_front_page(). Você poderia também ter usado is_home(), mas há alguns casos em isso retornaria de forma diferente, por isso, nesse caso, vamos ficar com a opção “front page” (do inglês, algo como “página inicial”):
• >Home


Caso se trate da página inicial, o PHP executará echo na classe. Caso contrário, não – simples assim. 5. Por fim, complete o menu:
• > Home
• > Music
• > Books
• > Games
• > About


A maioria dessas conditional tags aceitam vários tipos de parâmetros, desde a ID até o slug (usado nesse exemplo) ou o nome real da Página e categoria. E sempre que “o chapéu servir”, por assim dizer, o código PHP irá aplicar class ="activemenu" ao item da lista. É muito simples! Verificar se o visitante está em uma página específica ou em uma categoria particular pode ser muito útil, pois você pode retornar o que for mais adequado para seu site. No exemplo anterior, você está simplesmente executando echo em uma classe de CSS para marcar um item 158

CAPÍTULO 6: USO AVANÇADO DOS TEMAS de menu específico de forma diferente, usando a classe activemenu, mas poderia gerar qualquer coisa que quisesse. Talvez você queira ter uma categoria com conteúdo para iniciantes, que geraria informações sobre como assinar o feed RSS, enquanto que os iniciados teriam apenas um tradicional ícone de feed RSS e um breve link de texto.

TRABALHANDO COM FEEDS RSS Os feeds RSS são uma ótima forma de entregar e assinar conteúdo. O WordPress suporta a velha versão 0.91, a versão 1.0 e a (mais atualizada) versão 2.0. Há também suporte para Atom, mas lembre-se de que você precisa ativar o Atom a partir da página de configurações, se quiser usar essa opção. A maioria dos temas têm links de feed integrados e, embora o navegador informe discretamente aos visitantes que há um feed disponível, talvez você queira ser um pouco mais incisivo. Olhe para qualquer blogueiro profissional bem-sucedido e você verá bons gráficos de RSS, muitas vezes incorporando o ícone do feed e colocando os serviços de feed em posições privilegiadas. Você deve fazer o mesmo se quiser conquistar assinantes. Essa é a primeira lição sobre RSS: ele deve estar bem posicionado dentro do seu site, caso contrário as pessoas não irão enxergar ou usar essa opção. A lição dois é pensar seriamente sobre feeds completos. Você pode escolher se deseja enviar um feed completo ou apenas um feed com trechos. Feeds que contém apenas trechos terão menos assinantes, pois as pessoas preferem usar o RSS para receber os artigos completos. Você verá que um grande número desses leitores vai clicar nos links e visitar o seu site assim mesmo, mas eles podem simplesmente deixar de assinar, se você não estiver publicando feeds completos. No entanto, se você realmente, verdadeiramente, definitivamente precisa levar as pessoas ao seu site, e o fato de alguém ler seu conteúdo em um leitor de feeds é uma tragédia, vá em frente. Apenas certifique-se de que você sabe o que está fazendo, e por que motivo, se optar por disponibilizar um feed incompleto. A terceira e última lição é oferecer métodos alternativos para assinar o feed. A alternativa mais popular é a assinatura por e-mail, geralmente enviada através do Feedburner (http:// feedburner.com), que pertence ao Google. Esse serviço compila um resumo diário a partir do seu feed RSS, que é enviado para os assinantes via e-mail. Isso é bom porque os feeds RSS ainda são usados principalmente pelo público técnico, de modo que é uma boa ideia oferecer outras alternativas de assinatura.

OS FEEDS DE WORDPRESS O WordPress gera diversos feeds por padrão. Você pode obtê-los com facilidade, usando a tag de modelo bloginfo() :
bloginfo('rdf_url'); ?> bloginfo('rss_url'); ?> bloginfo('rss2_url'); ?> bloginfo('atom_url'); ?>

Essas linhas se aplicam às versões de feed RSS 0.91, 1.0 e 2.0, e ao feed Atom, respectivamente.

159

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS Você pode também obter um feed para seus comentários, assim como para comentários de uma postagem individual. Naturalmente, você usaria as tags a seguir em seu tema:

A segunda se destina ao feed específico de uma postagem. No entanto, pessoalmente, prefiro usar o mínimo possível de chamadas PHP. Todos esses feeds podem ser encontrados inserindo diretamente a URL. Uma vez que você compreende as necessidades dos links permanentes (e se não compreende, ao fim deste capítulo terá compreendido), seu blog está configurado para usá-los. Isso significa que as seguintes URLs funcionarão para você: http://mydomain.com/feed/ http://mydomain.com/feed/rss/ http://mydomain.com/feed/rss2/ http://mydomain.com/feed/rdf/ http://mydomain.com/feed/atom/ A primeira é o padrão, você pode até encontrá-la em alguns temas, embora mantê-la seja uma má ideia, uma vez que sua configuração exige links permanentes (permalinks), algo que nem todos os serviços de hospedagem suportam. A seguinte, no entanto, irá funcionar em qualquer caso, embora sua aparência não seja tão agradável: http://mydomain.com/?feed=rss

http://mydomain.com/?feed=rss2 http://mydomain.com/?feed=rdf

http://mydomain.com/?feed=atom

E não é só isso! Essas URLs se referem apenas aos feeds principais, mas na verdade há feeds para quase tudo no WordPress. Feeds de autor, de categoria e de tag são muito úteis em alguns casos. Há até mesmo um feed para comentários sobre uma postagem específica. Presumindo que você tenha configurado seus links permanentes, eles serão construídos da seguinte forma: http://mydomain.com/author/USERNAME/feed/ http://mydomain.com/category/SLUG/feed/ http://mydomain.com/tag/SLUG/feed/

http://mydomain.com/PERMALINK-DA-POSTAGEM/comments/feed/

Portanto, se meu nome de usuário (do inglês, “username”) é “tdh” em notesblog.com, e eu quiser obter todas as minhas postagens via RSS, a seguinte URL funcionaria: http:// notesblog.com/author/tdh/feed/.

CONSTRUINDO UMA URL PERSONALIZADA PARA UM FEED Às vezes, você pode querer que o seu feed exclua uma determinada categoria, ou talvez que seja constituído apenas por certas tags. Você pode fazer isso modificando a URL do feed, o que 160

CAPÍTULO 6: USO AVANÇADO DOS TEMAS na verdade requer alguns parâmetros. Então, se quiser, você pode executar esse feed por meio de um serviço como o Feedburner, uma vez que as URLs tendem a ser muito longas e feias. Por exemplo, digamos que você queira excluir do seu feed personalizado a categoria de ID 47. Nesse caso, a URL ficaria assim: http://mydomain.com/feed/?cat=-47

Isso geraria um feed RSS completo, sem incluir a categoria de ID 47. Observe o sinal de menos na frente da ID, que funciona aqui, assim como na maioria dos casos. Que tal ter um feed para uma consulta de busca? Isso é igualmente simples: http://mydomain.com/feed/?s=keyword1+keyword2

Ou talvez você queira apenas executar a categoria 39, e exibir a tag cujo slug é ninja? Isso pode ser feito da seguinte forma: http://mydomain.com/feed/?cat=39&tag=ninja

Basicamente, você adiciona parâmetros à URL e trabalha a partir disso. Os parâmetros aceitos são mostrados na Tabela 6-1. Tabela 6-1 Parâmetros aceitos Parâmetro

Descrição

author

ID de autor

cat

ID Numérica

tag

Slug de tag

keyword

Busca por palavras-chave

year

Ano (por exemplo, 2009)

day

Data (por exemplo, 15)

monthnum

Mês pelo número (por exemplo, 3 para Março)

hour

Hora (por exemplo, 19)

minute

Minuto (por exemplo, 45)

second

Segundo (por exemplo, 13)

p

ID da postagem

paged

Página específica relacionada à listagem de postagens na página inicial

IMPLEMENTAÇÕES BÁSICAS DE SEO Tirar o melhor dos mecanismos de busca já seria, por si só, tema para um livro inteiro. A verdade nua e crua é que a melhor otimização de mecanismos de busca (SEO, do inglês “Search Engine Optimization”) não é gerada automaticamente, e sim editada manualmente, postagem por postagem, página por página. No entanto, há certas coisas que você pode fazer no seu tema, desde o início, para obter melhores resultados de SEO. 161

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS Aqui estão algumas dicas a considerar na hora de configurar seu tema: Validar! Código válido é sempre melhor. Você pode verificar seu código aqui: http://

validator.w3.org.

Links permanentes, obviamente. Os links permanentes, ou permalinks, alteram aquelas

URLs feias baseadas na ID para URLs mais amigáveis, tanto para o usuário quanto para os mecanismos de busca. As primeiras palavras-chave dos seus links permanentes são detectadas antes, por isso você deve realmente ter o nome do slug da postagem e da página ali (e não a ID), e, possivelmente, a categoria também. Há quem diga que ter dados organizados por data nos links permanentes também ajuda os mecanismos de busca, e isso pode muito bem ser verdade, se o site for atualizado com frequência. O grande obstáculo, no entanto, virá quando você alternar para os links permanentes, por isso, lembre-se de fazer isso em todas as configurações. Tags e palavras-chave. Marcar suas postagens com tags não só ajuda a descrever o conteúdo para seus leitores, como também é uma oportunidade para dar aos mecanismos de busca mais informações sobre seu site. Você pode usar um plug-in para preencher o campo meta de palavras-chave com suas tags (sem links, naturalmente), ou algo do tipo. Gere um mapa do site. A solução mais incensada para esse recurso é o plug-in Google XML Sitemap Generator: http://www.arnebrachhold.de/projects/ wordpress-plug-ins/google-xml-sitemaps-generator/. Title Tag. Sua title tag (tag de título) deve incluir tanto o nome da postagem (primeiro) e o nome do site (por último). Um separador entre os dois ajuda a diferenciar um do outro. Títulos. Em sua página inicial, o nome do seu blog deve estar dentro de um bloco h1. Na hora de visualizar postagens ou páginas individuais, o título da postagem ou da página deve estar em um bloco h1. Em listagens de arquivo (busca, categorias, tags, e assim por diante), costumo definir o título da lista como h1 e fazer os títulos de postagens retornarem como h2. Pense novamente sobre os links. Os links precisam ser relevantes para funcionar, por isso manter um blogroll gigantesco na barra lateral o tempo todo pode não ser uma boa ideia. Isso pode ser uma questão controversa, no entanto, por isso pense com cuidado sobre ela. Links relevantes são sempre bons. Postagens relacionadas são links relevantes. Há inúmeros plug-ins de postagens relacionadas por aí, e eles são ótimos, desde que retornem links relevantes para suas postagens. Breadcrumbs. Breadcrumbs (do inglês, “migalhas de pão”) são links, geralmente no topo da página, que mostram onde a página está localizada, por exemplo, Página inicial → Resenhas → Smashing WordPress. Eles são úteis não apenas para o usuário: também ajudam os mecanismos de busca a ler sua página. Você precisa usar um plug-in para essa funcionalidade. Este plug-in, por exemplo, é muito popular e relativamente fácil de implementar: http://yoast.com/wordpress/breadcrumbs/. Tempo de carregamento. Os usuários não são os únicos que apreciam um site com carregamento rápido; os mecanismos de busca também preferem sites que carregam rapidamente, por isso limpe seu código. Você pode até considerar um plug-in de cache, embora alguns desses plug-ins possam acabar criando conteúdo duplicado, por isso certifique-se de ler a respeito antes de fazer qualquer coisa. Além disso, não deixe de consultar as listas de plug-ins, mais adiante neste livro, para obter links

162

CAPÍTULO 6: USO AVANÇADO DOS TEMAS e dicas sobre bons plug-ins de SEO que tornam o seu site WordPress ainda mais atraente para os mecanismos de busca. Naturalmente, você quer que seu tema seja o mais amigável possível para os mecanismos de busca, já que recebe uma grande quantidade de tráfego através deles.

ENXUGANDO O WORDPRESS NO LADO DO TEMA Todos os sites devem ter o carregamento mais rápido possível. Você pode fazer muita coisa no lado do tema, mas a questão aqui é saber o quanto você realmente quer fazer. Se você levar isso ao extremo, vai acabar com arquivos de uma única linha, que serão completamente impossíveis de editar, ou seja, que você precisa de um arquivo de trabalho não otimizado para otimizar mais tarde. Isso geralmente se aplica às folhas de estilo, que podem ser significativamente compactadas, de modo que você vai economizar alguns bytes, mas isso significa também que você não será capaz de encontrá-las com facilidade quando estiver buscando alguma coisa. Com isso em mente, o que você pode fazer para acelerar seu tema? Experimente estas dicas: Limpe o código desnecessário. A maioria dos temas pode precisar de uma ou duas

revisões depois de estar aparentemente pronta. Minimize o uso de PHP. Aponte os links para imagens no diretório do seu tema, geralmente chamados com bloginfo('template_directory'), e você economizará várias chamadas de PHP. Há muitas dessas chamadas na maioria dos temas, por conta da saída automática do nome do site e coisas do tipo. Se você espera grandes quantidades de tráfego, “chumbe” essas chamadas em seu tema usando hardcode. Cuidado com o excesso de plug-ins. Os plug-ins são ótimos, mas às vezes seu design deixa a desejar. No mínimo, eles representam uma ou mais consultas PHP e, possivelmente, processamento de banco de dados. Pense com cuidado em cada um deles, antes de implementá-los no seu site. Serviços externos. Isso não está restrito ao seu tema, mas serviços externos como widgets de bate-papo ou selos do Twitter aumentam o tempo de carregamento, o que afeta o desempenho do site aos olhos dos seus visitantes. Use aceleração e cache de PHP. Talvez a solução de hospedagem ofereça aceleradores e cache de PHP para funcionalidades que são chamadas com frequência. Converse com o seu provedor de serviços de hospedagem sobre as opções e certifique-se de que elas sejam compatíveis com WordPress, uma vez que nem todas são. Cache de WordPress. Há plug-ins de cache para WordPress que armazenam os arquivos estáticos em vez de servir os dados sempre a partir do banco de dados. Isso pode realmente acelerar seu site, por isso pode ser uma boa ideia pensar sobre o assunto. Comprima os arquivos. Pelo Google, você pode encontrar compressores de HTML e CSS, que comprimem seus arquivos, mas tornam sua leitura muito mais difícil. Não esqueça de verificar a saída para garantir que os scripts dos compressores não adicionaram algum tipo de código malicioso. O seguro morreu de velho. No fim das contas, comprimir um tema de WordPress é mais ou menos como comprimir qualquer site. Um código eficiente e comprimido, preferencialmente válido, será carregado mais rapidamente que um código desleixado e enorme, por isso faça a coisa certa desde o início.

163

PARTE II: DESIGN E DESENVOLVIMENTO DE TEMAS DE WORDPRESS E se você estiver fazendo tudo certo, mas seu site WordPress continuar lento, talvez esteja grande demais para o seu serviço de hospedagem. Afinal, quando todas as chamadas de PHP estão minimizadas, o código está comprimido e válido e você está usando aceleradores cache, não há muito mais que você possa fazer senão aumentar a voltagem para dar mais poder ao seu monstrinho.

TEMAS VERSUS PLUG-INS Hoje, os temas não são responsáveis apenas pela aparência e pelo clima de um site, eles também são plug-ins simples. Use os temas para que tudo seja exibido onde você quer e para romper o fluxo normal de postagens que o loop oferece. Você pode ir muito longe usando template tags e conditional tags. Mas, colocando funcionalidades adicionais em functions.php, com ganchos de ação (e explorando as possibilidades, de modo artesanal), é possível construir praticamente qualquer coisa. Como mencionei neste capítulo, nem sempre é uma boa ideia encher functions.php de recursos. Muitas das coisas que você faz nesse arquivo podem ser feitas por um plug-in e, embora isso possa ser desnecessário, em alguns casos essa é realmente a melhor opção. Afinal, toda a ideia por trás dos diversos conceitos de skins nos sistemas de publicação é separar o design do código, tanto quanto possível. Em se tratando de temas de WordPress, isso significa que você precisará desobedecer um pouco essa regra se quiser fazer tudo manualmente. Muitas dessas coisas podem ser resolvidas com plug-ins em vez de inserir mais código nos temas, o que se encaixa melhor com o conceito de separação entre design e código. Você vai aprender muito mais sobre os plug-ins nos próximos capítulos.

164

III PARTE

III

USANDO PLUG-INS COM WORDPRESS Chapter 7: Anatomia de um Plug-in de WordPress Chapter 8: Plug-ins ou functions.php? Chapter 9: Plug-ins de WordPress Essenciais

7

7 CAPÍTULO

SMASHING WORDPRESS

ANATOMIA DE UM PLUG-IN DE WORDPRESS

NÃO É PRECISO dizer que os plug-ins são diferentes dos temas, mas ambos têm muito em comum. Poderíamos dizer que, quando você está adicionando funcionalidades ao seu tema acrescentando código ao arquivo de modelo functions.php, o que está fazendo, na verdade, é escrevendo um plug-in. Mas há uma grande diferença. Os temas estão ali para exibir o site de WordPress usando as ferramentas disponíveis. Os plug-ins, por outro lado, são usados quando você precisa expandir a funcionalidade do WordPress com recursos adicionais. Lembre-se muito bem disso, porque encher o arquivo functions.php do seu tema com

recursos nem sempre é a melhor forma de fazer as coisas. Neste capítulo, você vai examinar os plug-ins a partir de uma perspectiva levemente diferente da que usamos nos capítulos sobre temas. O motivo para isso é muito simples: seu plug-in pode fazer qualquer coisa. Ele é basicamente uma forma para você adicionar a funcionalidade que quiser; compare isso com as modificações que pode fazer usando um punhado de template tags e você vai perceber a diferença. Com plug-ins, a questão não é o que você pode fazer, mas sim por que você faria aquilo. Sendo assim, vamos começar por aí.

PARTE III: USANDO PLUG-INS COM WORDPRESS

FUNDAMENTOS BÁSICOS DE UM PLUG-IN Os fundamentos básicos de um plug-in são os mesmos de um tema: O arquivo principal do plug-in deve ser um arquivo PHP de nome único, ou estar em uma

pasta de nome único caso seu plug-in consista em diversos arquivos dentro de uma pasta. O arquivo PHP precisa de um header para identificação, assim como o arquivo style.css de um tema, para que o WordPress possa reconhecê-lo como sendo um plug-in. Aí, então, você pode expandir acrescentando ainda mais funcionalidades fora do arquivo PHP principal do plug-in, se preferir, assim como pode acrescentar arquivos de modelo ao style.css de um tema filho. Antes de seguirmos adiante com os fundamentos básicos dos plug-ins, você precisa saber que escrever um plug-in é em geral bem mais complicado do que trabalhar com temas de WordPress. Você precisa entender bastante de PHP, de modo que se você deixa a desejar nessa área, sugiro estudar um pouco antes de embarcar em qualquer aventura para escrever um plug-in. Atribuir um nome de arquivo ou nome de pasta único ao seu plug-in é muito importante, uma vez que os plug-ins residem em wp-content/plug-ins e você não quer que haja conflitos. Atribua um nome adequado, de modo que não haja dúvidas acerca de qual é o plug-in, caso alguém precise encontrá-lo usando o FTP mas sabendo apenas o nome do plug-in da forma como ele é exibido dentro da interface de admin do WordPress. O bloco de identificação do plug-in terá uma aparência familiar. O exemplo a seguir é uma simulação.

Na verdade, apenas a linha que contém o nome do plug-in, que aparece dentro das notações de comentário, é obrigatória. No entanto, é uma boa ideia usar o restante, para que o usuário possa saber para que serve o plug-in, onde obter atualizações, o número da versão, quem o desenvolveu, etc. Você deve também incluir informações de licenciamento. A seguir apresento as informações de licenciamento GPL do texto recomendado pelo Codex do WordPress.
168

CAPÍTULO 7: ANATOMIA DE UM PLUG-IN DE WORDPRESS Este programa é software livre; você pode redistribuí-lo e/ou modificá-lo sob os termos da Licença Pública Geral GNU, conforme publicada pela Free Software Foundation; tanto a versão 2 da Licença quanto (ao seu critério) qualquer versão mais recente. Este programa é distribuído na esperança de que seja útil, mas SEM QUALQUER GARANTIA; sem mesmo a garantia implícita de COMERCIABILIDADE ou ADEQUAÇÃO A QUALQUER PROPÓSITO ESPECÍFICO. Consulte a Licença Pública Geral GNU para obter mais detalhes.

*/ ?>

Você deve ter recebido uma cópia da Licença Pública Geral GNU junto com este programa. Caso contrário, escreva para a Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA

Naturalmente, você deve alterar ANO, NOME_DO_AUTOR_DO_PLUG-IN, e E-MAIL_DO_ AUTOR_DO_PLUG-IN para as informações corretas. Você também pode incluir a licença

completa, como arquivo de texto, usando o nome de arquivo license.txt, é claro. Para obter o texto completo da licença, visite www.gnu.org/copyleft/gpl.html.

E isso é basicamente tudo. Isso é tudo o que você precisa para que o WordPress encontre o plug-in: um arquivo único com um header de identificação. Aí, então, basta colocá-lo em wp-content/plug-ins, e ele será listado na seção de plug-ins do WordPress. Ative seu plug-in a partir da página Plug-ins em admin, e ele será disponibilizado no seu tema, e a partir das próprias ações do WordPress. É aqui que a diversão começa porque agora você precisa decidir o que quer fazer e como fazê-lo. Não importando se você estiver planejando escrever o plug-in que vai mudar a forma como você usa o WordPress ou se simplesmente precisa de uma funcionalidade adicional em seu projeto mais recente, você deve passar pela checklist de plug-in a seguir antes de começar. Isso pode economizar tempo e muitas dores de cabeça. Já

existe um plug-in para isso? Caso haja, considere a possibilidade de utilizá-lo ou adaptá-lo caso ele faça quase a mesma coisa que você quer fazer. Certifique-se de usar um nome único para seu plug-in. Não verifique isso apenas no diretório de plug-ins de wordpress.org; faça uma pesquisa no Google para ter certeza. Uma forma de garantir que o nome seja único é acrescentar as iniciais de sua empresa na frente do nome do plug-in, como por exemplo acme_nomedoplug-in. Escolha um prefixo único para todas as suas funções, e utilize-o consistentemente. Assim, você está fazendo sua parte para eliminar conflitos desnecessários causados por estruturas de nome de arquivo semelhantes. Você quer internacionalizar seu plug-in? Pense seriamente no assunto; isso funciona da mesma forma que com os temas e, no fim das contas, é bem fácil. Este plug-in deve ter suporte a widgets? Caso deva, que tipos de configurações ele deve ter? Você precisa de uma página de configurações dentro da interface de admin? Que licença o plug-in deve ter? Lembre-se de que a licença precisa ser compatível com GPL para que o plug-in seja hospedado no diretório do wordpress.org.

169

PARTE III: USANDO PLUG-INS COM WORDPRESS Não

esqueça da verificação final. O header está atualizado? O número da versão está correto? Todos os links funcionam? Todos os arquivos necessários estão no pacote? E, por último, embora não menos importante, você realizou uma correção ortográfica em seu plug-in?

MÉTODOS PARA INCORPORAR SEUS PLUG-INS Escrever plug-ins é mais próximo de programar em PHP do que de programar temas de WordPress. Embora você possa usar tanto template tags quanto conditional tags, há uma boa chance de que você acabe escrevendo muita coisa também, sem depender tanto dos recursos integrados que as tags de WordPress oferecem. É claro que tudo depende do que seu plug-in vai fazer, mas o desenvolvimento de plug-ins, de modo geral, depende mais de você do que do WordPress. A forma usual de se fazer um plug-in de WordPress requer que você crie funções e, em seguida, aplique-as a ganchos e filtros. Ao inserir sua função onde você precisa que ela esteja, que pode ser, por exemplo, quando wp_head for carregado ou quando os comentários estiverem sendo carregados, você pode disparar o código do seu plug-in no momento certo. As seguintes seções descrevem três formas para escrever e trabalhar com plug-ins, começando com os importantíssimos ganchos.

USANDO GANCHOS Lembra dos ganchos de ação do capítulo anterior? Os ganchos de ação são disparados por eventos específicos quando um site de WordPress está sendo executado, como por exemplo publicar uma postagem, que seria o gancho publish_post(). Um segundo tipo de ganchos são os ganchos de filtro, que, por sua vez, são funções através das quais o WordPress faz a passagem de dados, por isso você usaria esses ganchos para fazer algo com os dados. Entre os ganchos de filtro mais úteis estão the_excerpt(), the_title() e outros. Você provavelmente irá reconhecê-los das template tags. Os ganchos são úteis também para plug-ins, não apenas para temas. Graças aos ganchos, você pode adicionar funcionalidades bacanas de plug-in às partes apropriadas do WordPress, como wp_head() ou wp_footer(). O exemplo de estatísticas da Web, no capítulo anterior, onde você adicionou uma função ao arquivo de modelo functions.php do tema e então adicionou-a ao gancho wp_footer() usando add_action(), ilustra bem a forma como um plug-in funciona. Muitas vezes, você vai acabar escrevendo uma função dentro do seu plug-in e, então, adicioná-la a um dos ganchos. É assim que add_action() funciona: add_action ('hook-name', 'function-name', X, Y );

O 'hook-name' corresponde, obviamente, ao nome do gancho ao qual você quer adicionar a ação. O que acontece é que, o WordPress, quando encontrar aquele gancho durante a execução do código, vai verificar para determinar se há alguma função adicionada, registrada para esse gancho. Caso haja, a função será executada; caso contrário não. E a função é, naturalmente, a que você definiu em 'function-name'. 170

CAPÍTULO 7: ANATOMIA DE UM PLUG-IN DE WORDPRESS Como exemplo, o seguinte trecho de código faria a função 'smashing-shortcode' ser executada quando wp_head() fosse executado: add_action ('wp_head', 'smashing-shortcode');

X e Y são números inteiros opcionais. O primeiro, X, é o argumento de prioridade (cujo valor

padrão é 10), usado para classificar ações quando houver diversas ações adicionadas a um gancho de ação específico. Quanto mais baixo for o número, mais cedo a função será executada, por isso se você precisar certificar-se de que algo aconteça antes ou depois de outra coisa, essa é a forma de controlar isso. O Y, por outro lado, é o número de argumentos que sua função pode aceitar (o valor padrão é 1). Se você precisa que a função lide com mais de um argumento, pode configurar isso adicionando outro número aqui. Na maior parte do tempo, você não vai ver a prioridade ou o número dos argumentos nos plug-ins, mas eles são muito úteis quando se precisa deles. Uma vez que esses números são opcionais, você pode deixá-los de fora se não precisar deles. Em outros momentos, você realmente precisa de prioridade, uma vez que, caso contrário, pode enfrentar um conflito com outros plug-ins. Caso esse seja o caso, é uma boa ideia ajustar a prioridade para garantir que seu plug-in seja carregado antes, ou depois.

Os filtros funcionam mais ou menos da mesma forma, mas você usa add_filter() e não add_action(). Os parâmetros são os mesmos, e a passagem funciona da mesma forma também. A única diferença é que você não pode usar ganchos de ação com add_filter();

em vez disso, você usa os ganchos de filtro. Fora isso, ambos se comportam da mesma forma.

Adicionar funções a um gancho, seja ele de ação ou de filtro, é muito fácil, mas como remover uma funcionalidade? Às vezes, você não quer que um gancho de ação ou de filtro seja executado, e isso significa certificar-se de que ele seja removido. Isso é feito com remove_ action() e remove_filter() para ganchos de ação e de filtro, respectivamente. A sintaxe é simples: remove_action('action-hook', 'the-function')

E o mesmo vale para remove_filter(): remove_filter('filter-hook', 'the-function')

Isso serve não apenas para remover funcionalidades que você adicionou, mas também para remover funcionalidades básicas de dentro do WordPress. Qualquer função de ação ou de filtro pode ser removida dessa forma, desde ping até a exclusão de anexos, por isso alguns plug-ins podem ser criados, na verdade, para limitar a funcionalidade do WordPress em vez de expandi-la, dependendo de qual for seu objetivo.

CRIANDO SUAS PRÓPRIAS TEMPLATE TAGS Outra forma de acessar sua funcionalidade de plug-in é criar suas próprias template tags, muito semelhantes a bloginfo(), the_title(), etc. Isso não é nada difícil; na verdade, simplesmente criando uma função em seu plug-in (ou em functions.php), você pode acessar essa função através de um simples trecho de código PHP:

171

PARTE III: USANDO PLUG-INS COM WORDPRESS Nada muito complicado, não é mesmo? Realmente não é, mas isso não significa que essa seja a melhor forma de incluir conteúdo de um plug-in, embora seja, de longe, o método mais fácil. Com esse método, você não precisa adicionar gancho algum, e a função será executada quando a template tag do plug-in for carregada, assim, você deve colocá-la onde quiser, dentro dos arquivos do seu tema. Algo que você deve ter em mente antes de adotar essa rota é a usabilidade. Nem todo mundo se sente à vontade para editar os arquivos do tema, e se sua intenção é lançar seu plug-in, ou entregá-lo a um cliente, pode não ser uma ideia muito boa forçar a modificação do arquivo de modelo para que ele funcione. Se você mesmo vai ser responsável pela implementação, não faz diferença. Mas se o usuário final for obrigado a mexer na posição do plug-in, ou talvez passar parâmetros para ele, provavelmente é uma ideia melhor adotar uma solução alternativa. Em outros casos, só adicionar funcionalidades usando template tags não é o suficiente, e você precisa sobrescrever partes da funcionalidade do núcleo do WordPress. É aí que você vai recorrer às funções pluggable (do inglês, algo como “plugáveis”).

FUNÇÕES PLUGGABLE Às vezes, você pode precisar sobrescrever partes da funcionalidade do núcleo do WordPress, talvez para substituí-la por sua própria, ou talvez simplesmente porque você está usando o WordPress para um propósito diferente do originalmente concebido. Talvez você não queira que as localizações funcionem no admin do WordPress, por exemplo, e, nesse caso, você precisaria eliminar load_textdomain; ou talvez queira substituir o rodapé de admin pelo seu próprio. Nesse caso, remover o gancho não vai adiantar. É aí que você vai recorrer ao arquivo pluggable. php, localizado em wp-includes. Naturalmente, você não vai modificar esse arquivo, porque isso seria muito tedioso de gerenciar, com as atualizações. Em vez disso, você vai programar um plug-in que faça a substituição. Essa é uma operação perigosa. Primeiramente, você só pode fazer uma substituição (override) uma única vez, por isso se dois plug-ins fizerem substituições diferentes em uma mesma função do arquivo pluggable, o site irá se comportar mal (na melhor das hipóteses) ou parar de funcionar (na pior das hipóteses). Isso significa que dois plug-ins que dependam de substituir uma mesma função do arquivo pluggable não podem ser instalados ao mesmo tempo, o que é uma limitação séria. Portanto, você deve, provavelmente, reservar as alterações de funções pluggable para sites controlados inteiramente por você mesmo. Além disso, para evitar erros desnecessários, talvez você queira realizar uma verificação em qualquer código relacionado a um plug-in que dependa dessas substituições para verificar se a função existe:

Naturalmente, há momentos em que as funções pluggable podem ser úteis. Consulte a lista mais atualizada de quais as funções que você pode obter dessa forma no Codex: http:// codex.wordpress.org/Pluggable_Functions. E use esse recurso com cautela, obviamente. Não é suficiente apenas programar o plug-in da forma certa (assunto que abordaremos a seguir) se você estiver anulando partes do núcleo do WordPress. Não se surpreenda quando as coisas pararem de funcionar ou quando conflitos surgirem do nada quando você mergulhar nesses recursos. Afinal de contas, a funcionalidade do WordPress que você está eliminando foi colocada ali por um motivo. 172

CAPÍTULO 7: ANATOMIA DE UM PLUG-IN DE WORDPRESS

FUNCIONALIDADES OBRIGATÓRIAS PARA PLUG-INS Falando estritamente, a única coisa que seu plug-in realmente precisa possuir é um arquivo PHP principal contendo o header de identificação e o código necessário para realizar a tarefa. No entanto, na realidade, você deve provavelmente levar isso alguns passos adiante. Afinal, alguém além de você pode precisar trabalhar com seu plug-in, portanto ele deve ser o mais simples e acessível possível. Isso significa que você deve fazer todos os esforços para que o plug-in se adapte bem à interface de admin do WordPress. O mesmo vale para quaisquer partes do plug-in que sejam exibidas ao usuário final. Alguns plug-ins adicionam funcionalidade visual, e ela deve funcionar com o máximo de temas possível caso você tenha planos de disponibilizar o plug-in. Naturalmente, se você desenvolveu um plug-in para ser usado apenas em um projeto específico, isso não será um problema. O mesmo vale para o suporte a localização; não há necessidade de incluir esse recurso se não haverá suporte a outras línguas que não a língua padrão, não é mesmo? Por fim, acredito que todos os plug-ins deveriam acompanhar uma licença e algum tipo de instrução acerca de como o plug-in deve ser utilizado. Os arquivos readme.txt são ótimos, mas é melhor ainda integrar as instruções ao próprio plug-in, uma vez que muitos usuários são relutantes (ou simplesmente impacientes demais) para ler os arquivos anexados.

CONFIGURAÇÕES DE PLUG-IN Às vezes, você quer salvar algo no banco de dados. Você tem a liberdade de qualquer script em PHP aqui, na verdade, ou seja, você pode adicionar tabelas inteiras e assim por diante ao banco de dados, caso queira fazê-lo. No entanto, não vou ensinar você a fazer isso. O que eu vou fazer é ensinar você a usar o banco de dados de opções do WordPress e armazenar pequenos trechos de dados nele. Isso acontece na tabela wp_options, no banco de dados. Lembre-se de não armazenar dados demais aqui. Se seu plug-in inclui um monte de conteúdo, você deve definitivamente considerar outras soluções. Algumas coisas válidas de serem armazenadas incluem configurações de plug-in sobre as quais você pode fazer consultas, pequenos trechos de código que seu plug-in irá gerar, etc. O mesmo vale para as páginas de opções do tema, aliás; wp_options é o local certo para armazenar quantidades menores de dados. Para demonstrar a utilização disso, vamos recorrer a um plug-in bastante simples chamado Footer Notes. O que ele faz é acrescentar uma página de admin na qual o usuário pode salvar algum código HTML que é acrescentado ao fim das postagens (usando uma tag de modelo específica desse plug-in). Ele também tem suporte para acrescentar código HTML ao fim dos itens de postagem no feed RSS, caso o usuário deseje. Isso se traduz em uma simples página de opções na interface de admin, com duas caixas de texto onde o código HTML é colado, e um botão para salvar suas alterações. E isso é tudo.
173

PARTE III: USANDO PLUG-INS COM WORDPRESS Author: Thord Daniel Hedengren Author URL: http://tdh.me */ // adicionar menu ao admin -if (is_admin()){ add_action('admin_menu', 'nb_footernotes_menu'); add_action('admin_init', 'nb_footernotes_register'); } // opções de whitelist -function nb_footernotes_register() { register_setting('nb_footernotes_optiongroup', 'nbfn_post'); register_setting('nb_footernotes_optiongroup', 'nbfn_feed'); } // detalhes da página no menu de admin -function nb_footernotes_menu() { add_options_page('Footer Notes Settings', 'Footer Notes', 8, 'nb_footernotes', 'nb_footernotes_options'); } // adicionar uma página de menu, de fato -function nb_footernotes_options() { ?>



Footer Notes

Esta é a página de configurações do plug-in Footer Notes. Este plug-in adiciona código HTML no final de suas postagens e itens de feed. Simplesmente acrescente o código HTML desejado para os dois locais possíveis.

Deixa qualquer dos dois campos completamente vazios se não quiser retornar nada!

Código a ser acrescentado depois das postagens O código abaixo será adicionado no local onde você colocar a tag de modelo nb_footernotes(), dentro do seu tema, para cada postagem, individualmente. A tag precisa estar dentro do loop. 174 CAPÍTULO 7: ANATOMIA DE UM PLUG-IN DE WORDPRESS
<?php echo get_option('nbfn_post'); ?>
Código a ser acrescentado depois de itens de feed O código abaixo será adicionado no final de cada item em seus feeds.
?php echo get_option('nbfn_feed'); ?>



175

PARTE III: USANDO PLUG-INS COM WORDPRESS O plug-in inclui também um arquivo license.txt, um readme.txt e um uninstall.php para limpar o banco de dados. Por hora, no entanto, vamos nos concentrar no plug-in, em si. Bem no topo do plug-in está o cabeçalho do arquivo, que é a descrição do plug-in, de fato. Em seguida há uma verificação para ver se você possui um papel de admin, e adicionar a função nb_footernotes_menu(), definida mais abaixo. Você deve lembrar que essa é a forma de criar uma página de opções no admin do WordPress; caso você não lembre mais como fazer isso, consulte o Capítulo 6 para uma descrição mais aprofundada. O primeiro trecho de código que realmente interessa é este: // opções de whitelist -function nb_footernotes_register() { register_setting('nb_footernotes_optiongroup', 'nbfn_post'); register_setting('nb_footernotes_optiongroup', 'nbfn_feed'); }

Este código registra 'nbfn_post' e 'nbfn_feed', que são dois dados de opções nos quais você vai salvar informações (dentro do banco de dados, obviamente), usando nb_footernotes_optiongroup. Ele está dentro do formulário, mais abaixo na página:

Isso economiza um bocado de tempo, na verdade, e elimina uma porção de campos ocultos de entrada que você precisava usar em versões anteriores do WordPress. Tudo o que você precisa fazer é registrar tudo usando register_settings e adicionar isso a um grupo de opção e, em seguida, você usa settings_ fields() dentro do formulário para que a coisa funcione. A página de opções é relativamente direta. Lembre-se de que a tag de formulário deve conter action="options.php" e se quiser que a tabela funcione à maneira típica do WordPress , basta adicionar class="form-table". O botão de envio no fim é uma submissão simples, e isso é o suficiente para realizar a tarefa. Naturalmente, você pode aplicar o estilo que quiser ao botão. Nesse caso, você possui duas áreas de texto (textarea) nas quais a ideia é que o usuário insira algum código HTML. A área destinada a 'nbfn_post' tem a seguinte aparência: <?php echo get_option('nbfn_post'); ?>

A parte que interessa é get_option('nbfn_post'), que significa que o código será tanto coletado (gerando uma saída, graças a echo) quanto salvo em 'nbfn_post' dentro do banco de dados. O código em um campo de entrada típico incluiria a parte get_option() como o valor, e não entre as tags de abertura e fechamento. Assim:

176

CAPÍTULO 7: ANATOMIA DE UM PLUG-IN DE WORDPRESS Agora é hora de gerar uma saída para as coisas que você salvou. Primeiramente, você precisa do código HTML que deve acompanhar o conteúdo da postagem. Para dar mais liberdade ao usuário, optei por criar uma tag de modelo específica para este plug-in e adicioná-la ao tema, ao invés de simplesmente incluí-la em the_content(). Esta é a tag de modelo personalizada:

E isto é o que cria essa tag (a primeira parte) e a carrega junto com o conteúdo de 'nbfn_ post'. É aqui que o HTML da postagem fica armazenado, lembra? Executando echo para get_option('nbfn_post'), você retorna o conteúdo salvo: // gancho personalizado para as postagens -function nb_footernotes() { do_action('nb_footernotes'); } // e agora a saída de postagem -add_action('nb_footernotes', 'nb_footernotes_post_output'); function nb_footernotes_post_output() { echo get_option('nbfn_post'); }

Você quer que o código HTML seja adicionado ao final de cada postagem no feed RSS, por isso use um filtro para fazer isso. Mas, primeiramente, você precisa armazenar o conteúdo de 'nbfn_feed' na função nb_footernotes_rss() para poder adicioná-lo: // saída de feed -function nb_footernotes_rss() { echo get_option('nbfn_feed'); } // filtros de feed -add_filter('the_excerpt_rss', 'nb_footernotes_rss'); add_filter('the_content_rss', 'nb_footernotes_rss');

CONTEÚDO DO BANCO DE DADOS E DESINSTALAÇÃO Na hora de criar um plug-in que armazena dados no banco de dados, você precisa levar em consideração o que acontece quando alguém não quer mais usar seu plug-in. Você precisa de uma funcionalidade de desinstalação para fazer uma faxina e acabar com a bagunça que o plug-in fez? Em geral, a resposta é sim se você salvou uma porção de coisas no banco de dados, que não deve ficar guardando um monte de dados inúteis. Há diversas formas de remover funcionalidades indesejadas. Um método possível é incluir um arquivo uninstall.php junto com seu plug-in. Este arquivo contém o código de desinstalação para excluir o conteúdo que você adicionou ao banco de dados. delete_option('my-data');

Isso excluiria o campo my-data na tabela option do banco de dados. Uma vez que muitos plug-ins armazenam algum tipo de dado de opções nessa tabela, ela pode acabar sobrecarregada e isso nunca é bom. Naturalmente, você acrescentaria o que quer que precisasse ser removido ao arquivo uninstall.php. Isso se aplica também a desinstalações feitas a partir da interface de admin do WordPress. 177

PARTE III: USANDO PLUG-INS COM WORDPRESS Dê uma olhada no arquivo uninstall.php do plug-in Footer Notes, mencionado na seção anterior. Ele contém o seguinte código:

A primeira parte é uma verificação para determinar se há um recurso de desinstalação presente. Esse recurso não era usado em versões mais antigas do WordPress, por isso se você não estiver usando WordPress 3.0 ou mais recente (algo que você evidentemente deveria estar usando!), o script sai de cena e não executa ação alguma. Assim, esse arquivo possui compatibilidade reversa. O código restante exclui os dados de opções armazenados no banco de dados: 'nbfn_post' e 'nbfn_feed'. Isso é feito na hora de excluir o plug-in de dentro da interface de admin do WordPress, e portanto o usuário obtém um banco de dados limpo. Naturalmente, você pode fazer o mesmo sem um arquivo uninstall.php, mas, nesse caso, você vai precisar de um pouco mais de código. O register_uninstall_hook() pode ser usado para fazer a mesma coisa; simplesmente realize a verificação, como faria normalmente. Se você estiver considerando a possibilidade de usar a abordagem do gancho, há boas chances de que sua própria desinstalação esteja acontecendo na página do plug-in, dentro da interface de admin do WordPress. Ou talvez você simplesmente não queira que seu plug-in possua um arquivo uninstall.php e prefira integrar o processo de desinstalação ao próprio plug-in, para manter tudo limpo e leve. O que importa é que você lembre de acrescentar uma funcionalidade de desinstalação, caso tenha armazenado algo no banco de dados. No entanto, talvez você queira tornar a exclusão dos dados opcional, uma vez que eles podem ser úteis mais tarde. Além disso, é provavelmente uma boa ideia remover os dados no momento da desativação, já que isso é recomendado para todos os plug-ins durante as atualizações manuais do WordPress.

DEPOIS DA DESINSTALAÇÃO É fácil esquecer que, quando um plug-in é instalado, ele pode deixar algumas coisas espalhadas. Já falamos sobre os dados no banco de dados, e espera-se que a desinstalação tenha no mínimo oferecido ao usuário a chance de limpar os dados criados pelo plug-in, mas há algo ainda mais grave: shortcodes. O que acontece quando um plug-in que depende de shortcodes é desinstalado? Shortcodes (algo como “códigos curtos”, em português) são trechos de código que geram uma saída dentro do conteúdo da postagem. O shortcode mais comum usado pelo WordPress é [gallery], que você vê quando inclui uma galeria em uma postagem e alterna para o modo de visualização HTML na tela Add New Post.

178

CAPÍTULO 7: ANATOMIA DE UM PLUG-IN DE WORDPRESS Então, o que acontece com os shortcodes usados por um plug-in depois que ele é desinstalado? O shortcode não passará por parsing, uma vez que sua saída é gerada como texto normal. Seu shortcode [myshortcode] terminará sendo impresso assim mesmo, no meio de sua postagem. E isso é feio. Por isso, embora o plug-in possa já não estar ativo, ou mesmo presente, você ainda precisa manter algum tipo de compatibilidade reversa com ele. Isso significa que você deve oferecer algum tipo de solução para que o usuário certifique-se de que as postagens não serão poluídas por shortcode sem parsing. Uma forma de fazer isso seria executar uma consulta SQL e simplesmente remover automaticamente todo o shortcode, mas isso pode ser um tanto drástico, e o que acontece se houver algum erro durante o processo? Isso poderia destruir o banco de dados. Ou, mais provavelmente, como você pode saber que não há algum tipo de erro humano dentro da postagem que, por algum motivo, faz a consulta de shortcodes cortar coisas demais? A forma como você opta por lidar com shortcodes redundantes depende do tipo de utilização que você introduziu em seu plug-in. Uma forma não muito bonita de consertar isso seria incluir um plug-in que altera o shortcode, fazendo, em vez de gerar a saída que gerava inicialmente, não gerar saída alguma. Obviamente, nem todos os tipos de plug-ins precisam desse tratamento. Por exemplo, plug-ins que utilizam widgets simplesmente deixarão de exibir o widget, quando removidos.

ADICIONANDO SUPORTE A WIDGETS PARA PLUG-INS Com widgets, é fácil personalizar o conteúdo de um blog ou site. Você pode colocá-los na(s) área(s) para widgets, arrastando e soltando seus widgets a partir da interface de admin do WordPress. O WordPress inclui alguns widgets já de saída, como, por exemplo, um para gerar RSS, um para exibir as últimas postagens, listagens de páginas, categorias, etc. Esses widgets, no entanto, podem não ser o suficiente, e quando você cria um plug-in, pode ser uma boa ideia dar ao usuário a chance de executá-lo a partir de uma área para widgets. Isso é bem mais amigável para o usuário do que precisar inserir a tag de modelo PHP dentro dos arquivos de modelo do tema, por isso pode ser uma boa ideia tornar seu plug-in compatível com widgets, caso ele deva ser exibido em uma área para widgets. Graças à API de widgets, a criação de widgets para seus plug-ins não é tão complicada assim. Basta expandir a classe de widgets integrada, chamada WP_Widget, fornecer algumas instruções e então registrá-la para que ela apareça, como mostra o código a seguir: class SmashingWidget extends WP_Widget { function SmashingWidget() { // O código do widget, em si, vai aqui } function widget($args, $instance) { // Saída do conteúdo do widget } function update($new_instance, $old_instance) { // Processe e salve as opções de widget }

179

PARTE III: USANDO PLUG-INS COM WORDPRESS function form($instance) { //Saída do formulário de opções em admin }

} register_widget('SmashingWidget');

Nesse exemplo, você expandiu a classe WP_Widget com seu widget SmashingWidget. A primeira função, que é simplesmente function SmashingWidget(), é o widget, em si, com a funcionalidade que você quer, então é ali que está a ação. As funções widget(), update() e form() são necessárias para fazer o widget se comportar da forma que você deseja. Obviamente, você encerra isso registrando o widget com register_widget(). Tanto o link de cancelamento quanto o botão de envio são integrados à API de widgets, por isso você não precisa se preocupar com eles quando chegar a hora de salvar quaisquer alterações que você permitir que seus usuários façam.

CRIANDO UM WIDGET Esta seção vai guiar você pela criação de um widget simples. Este widget vai gerar um texto para saudar o visitante, e você também poderá renomear o título a partir da interface de admin. 1. Lembre-se de que todo este código está dentro de um arquivo de plug-in, que é um arquivo PHP contendo um cabeçalho de identificação do plug-in. A não ser que tenha um plug-in ao qual queira adicionar essa funcionalidade, você deve criar um plug-in novo com um nome adequado. Comece com a classe de widgets: class SmashingHello extends WP_Widget {

O widget se chama SmashingHello, de modo que você pode ter uma ideia do que vem pela frente. 2. Em seguida, você tem a função do widget: function SmashingHello() { parent::WP_Widget(false, $name = 'Smashing Hello'); }

3. Lembre-se de que você precisa de widget(), update() e form() para fazer a mágica acontecer. Este é o próximo passo, começando por widget(): function widget($args, $instance) { extract( $args ); ?> Oi! Que coisa mais Smashing, não acha?
Pegue widget() e extraia os argumentos. Preste atenção a $before_widget, $after_ widget, $before_title e $after_title settings. Isso não deve ser alterado, a 180

CAPÍTULO 7: ANATOMIA DE UM PLUG-IN DE WORDPRESS não ser que seja necessário. Esses elementos são controlados pela API de widgets e pelo tema padrão, por isso fazem as coisas terem uma aparência agradável. E então, o que acontece? Você inclui um echo de $before_widget e em seguida de $before_title, sem dizer a esses elementos para realizarem nada de sofisticado, para que eles simplesmente assumam o código padrão. Aí, então, há o título $instance, que é o título que você vai usar como campo de entrada na interface de widgets dentro do admin, para que as pessoas possam escrever o que quiserem ali. Agora, você já resolveu o problema do título, e então temos $after_title, e em seguida o texto adorável que seu widget vai exibir: “Oi! Que coisa mais Smashing, não acha?” Não chega a ser uma prosa sofisticada, naturalmente, e você pode incluir qualquer coisa aqui, como uma consulta de loop ou o que for. Por fim, o widget está concluído e você tem $after_widget. Mais uma vez, esses trechos com before e after servem para fazer o widget se comportar da forma como o tema quiser. Isso é algo que o designer do tema pode controlar, por isso se você quiser manter a compatibilidade cruzada de seu widget, pode manter os valores padrão e se preocupar com a aparência disso dentro do design. 4. Seguindo em frente, você deve certificar-se de que o widget seja salvo adequadamente quando atualizado: function update($new_instance, $old_instance) { return $new_instance; }

Isso é fácil, uma vez que update() só precisa de $new_instance e $old_instance. Naturalmente, você quer retornar $new_instance, que corresponde às suas alterações, quaisquer que sejam elas. Talvez você queira extrair algumas tags com strip_tags() aqui, caso o tipo de widget que está criando corra o risco de esbarrar em algum HTML complicado. Isso é fácil, basta fazer algo como isto para um campo de entrada chamado 'music': $instance['music'] = strip_tags( $new_instance['music'] );

Está vendo como strip_tags() funciona ali? Esse recurso garante que nenhum código HTML isolado seja transmitido. Isso é muito útil. 5. Agora, adicione mais uma configuração para alterar o título do widget: function form($instance) { $title = esc_attr($instance['title']); ?>

Title:


Aqui, as chaves são get_field_name() e get_field_id(). Elas controlam que campo fará o quê. Aí, então, quando você terminou de construir seu adorável formulário de configurações de widget, basta salvá-lo (com o botão de salvar, automaticamente criado pela API de widgets) e pronto. 181

PARTE III: USANDO PLUG-INS COM WORDPRESS 6. Por fim, você precisa fechar as chaves da classe e registrar o widget: } add_action('widgets_init', create_function('', 'return register_widget(“SmashingHello");'));

A Figura 7-1 mostra o widget. Pronto; agora você tem um widget que pode ter seu título alterado e gerar uma saída de texto. Isso pode ser feito, com a mesma facilidade, para outra coisa, graças ao fato de que a saída de widget é apenas algo gerado pelo PHP. Outra coisa que você deve manter em mente é o fato de que nem todos os widgets precisam aceitar opções. Se você quiser simplesmente largar um elemento em uma área para widgets, com toda a facilidade que isso Figura 7-1: O widget que você acaba de criar, solto na área proporciona, simplesmente crie o widget para widgets da barra lateral. e esqueça das configurações. Tudo depende do que você precisa, em termos de funcionalidade.

WIDGETS DO PAINEL DE CONTROLE Você pode criar não apenas widgets normais, como também widgets para o painel de controle (Dashboard). Isso significa que você pode acrescentar widgets à área de admin do WordPress, também conhecida como painel de controle, ou Dashboard. Todas aquelas caixas que você vê na página inicial do seu painel de controle são, na realidade, widgets, e você pode adicionar os seus próprios. Para criar um widget em seu painel de controle, você precisa criar um plug-in e, portanto, um arquivo onde o código será colocado. Este consiste simplesmente em um lembrete aos usuários de um blog coletivo, para que eles visitem as páginas internas e, portanto, gera apenas uma saída de texto e alguns links. Primeiramente, você precisa criar a funcionalidade que faz isso: function dashboard_reminder() { echo ' Ei, você! Não esqueça que há muita coisa importante nas páginas internas:
← Forum
← Documentation
← Staff
OK VLW ABS! '; }

Trata-se de uma função simples chamada dashboard_reminder() que executa o echo de um pouco de HTML. Isso é o que você quer que o widget exiba. O próximo passo é adicionar o widget em si ao painel de controle.

182

CAPÍTULO 7: ANATOMIA DE UM PLUG-IN DE WORDPRESS function dashboard_reminder_setup() { wp_add_dashboard_widget('dashboard_reminder_widget', 'Staff Reminder', 'dashboard_reminder'); }

A chave aqui é wp_add_dashboard_widget(), para a qual você passa primeiramente uma ID de identificação do widget (que é 'dashboard_reminder_widget', neste caso), e então o rótulo de texto para descrever o widget, e por fim o nome da função que contém o conteúdo do widget do painel de controle (a função dashboard_reminder()). É válido saber que a ID do widget do painel de controle, que é o primeiro parâmetro passado para wp_add_dashboard_widget(), é também a classe que será atribuída ao widget caso você queira aplicar algum tipo de estilo CSS mais sofisticado. Vamos parar um instante para olhar para a função wp_add_dashboard_widget(). O primeiro parâmetro é a ID do widget, o segundo é o nome do widget que você quer exibir e, em seguida, temos a retrochamada da função contendo o conteúdo do widget em si. Há também um quarto parâmetro, chamado $control_callback, que passa um valor nulo por padrão e é opcional. Você pode usar esse parâmetro para dar configurações ao seu widget, passando uma função que contenha as configurações que você quer permitir que o usuário altere. Este exemplo não inclui nenhuma configuração, mas pode ser uma boa ideia manter em mente o fato de que você pode passar um quarto parâmetro para obter mais funcionalidade em seu widget de painel de controle. Voltando ao exemplo, você precisa adicionar a ação do widget ao gancho wp_dashboard_

setup, usando add_action():

add_action('wp_dashboard_setup', 'dashboard_reminder_setup');

Aí está, um widget no seu painel de controle! (Ver Figura 7-2.) Até o momento, ainda não existe uma API de ordenamento para widgets no painel de controle, portanto seu widget vai acabar na parte inferior do painel de controle. O usuário pode reorganizar manualmente os widgets, naturalmente, mas talvez você queira forçar as coisas a aparecerem no topo. Há algumas formas de modificar isso, como o método descrito no Codex do WordPress (http://codex.wordpress.org/Dashboard_Widgets_API), caso você precise fazer isso.

Figura 7-2: O widget de painel de controle, em toda sua glória

Agora que você já colocou as mãos à obra e brincou um pouco com plug-ins e widgets, é hora de falar do uso do banco de dados. É muito fácil armazenar dados nas tabelas de opcões, mas às vezes essa não é uma boa prática.

183

PARTE III: USANDO PLUG-INS COM WORDPRESS

CONSIDERAÇÕES SOBRE PLUG-INS QUE USAM O BANCO DE DADOS Armazenar dados no banco de dados é, às vezes, necessário para fazer seus plug-ins funcionarem da forma desejada. Desde o armazenamento de algumas opções simples até o acréscimo de tabelas inteiras com mais dados para que os usuários possam utilizá-los, o banco de dados é verdadeiramente uma ferramenta que pode ser muito bem utilizada. Colocar dados no banco de dados significa que você pode facilmente fazer consultas, e isso é muito conveniente. No entanto, tudo tem seu preço. Um banco de dados sobrecarregado é difícil de gerenciar, e você deve certificar-se de que o usuário possa desinstalar os dados armazenados pelo plug-in. E se isso não for o suficiente, você precisa decidir onde salvar esses dados. Você pode usar a tabela options criada pelo WordPress, que é uma boa solução para configurações menores, ou criar sua própria tabela dentro do banco de dados, para uso exclusivo do plug-in. A segunda solução é provavelmente a melhor se você precisa armazenar uma grande quantidade de dados, mas ela expande o banco de dados de tal forma que pode criar problemas com outros plug-ins que realizam tarefas no banco de dados, caso você queira se integrar a eles de alguma forma. Isso significa também que há uma parte do plug-in fora do WordPress, e que precisa de uma cópia de segurança, e se você quiser mover a instalação, o método de Exportar/Importar não vai cobrir os dados Então, qual a melhor opção? Dados nas opções ou em uma tabela própria? Isso fica totalmente a seu critério, dependendo do que você precisa armazenar. Minha regra pessoal é que as configurações devem ir nas opções e, se houver algum tipo de conteúdo, de fato, ou volumes maiores de dados, passo a considerar a possibilidade de uma tabela externa. Apenas certifique-se de informar isso ao usuário, e garanta que seja possível limpar as coisas depois da desinstalação, caso necessário, e você não terá problemas.

COMPATIBILIDADE REVERSA PARA PLUG-INS Outro aspecto a considerar na hora de desenvolver plug-ins é se você precisa ou não de compatibilidade reversa. Novas funções e ganchos são adicionados ao WordPress o tempo todo, e se você depende de algum dos novos, as versões anteriores que não contêm esses recursos naturalmente não poderão executar o plug-in. É por isso que você deve tomar cuidado na hora de usar novos recursos, uma vez que eles podem simplesmente não funcionar em versões anteriores do WordPress. No entanto, não é apenas a funcionalidade do WordPress que muda; os requisitos do sistema também sofreram algumas reformas. No momento da escrita deste livro, ainda há suporte a PHP 4 (mas em breve ele será encerrado), embora a maioria dos desenvolvedores em PHP concordem que PHP 5 é bem superior. A premissa básica deve ser oferecer suporte ao hardware em que o WordPress é executado, mas às vezes isso não é o suficiente. Você talvez precise de PHP 5, ou simplesmente sua vontade de usar essa versão seja o suficiente para fazê-lo aceitar que serviços de hospedagem que rodam PHP 4 farão seu plug-in não funcionar, embora o WordPress possa ser executado perfeitamente. Se você adotar essa rota, certifique-se de gerar um erro, caso alguém tente executar seu plug-in abaixo de PHP 4, quando na verdade ele requer PHP 5. Tecnicamente, o mesmo problema pode se aplicar a MySQL. 184

CAPÍTULO 7: ANATOMIA DE UM PLUG-IN DE WORDPRESS Você é quem decide o limite a partir do qual seus usuários precisarão de uma atualização para poderem usar seu plug-in. Desde o advento das atualizações automáticas, podemos esperar que a frequência de atualização dos usuários finais seja mais alta do que costumava ser antes, mas uma quantidade surpreendentemente grande de blogs ainda rodam em versões anteriores de WordPress, o que é uma má notícia para desenvolvedores e proprietários de sites. Afinal de contas, versões mais antigas podem levar a problemas de segurança e problemas de compatibilidade.

PLUG-INS E MULTISITES DE WORDPRESS Desde o WordPress 3.0, a versão do WordPress para múltiplos usuários, anteriormente chamada de WordPress MU, faz parte da versão normal. Atualmente chamado de WordPress Multisites, esse recurso é usado para rodar múltiplos blogs ao mesmo tempo. A maioria dos plug-ins (e temas) funcionam com o recurso Multisites. A única ocasião em que você pode encontrar problemas é se acrescentar tabelas ao banco de dados, ou possivelmente se alterar as tabelas do núcleo. Você pode ativar esse recurso acrescentando algumas linhas de código ao seu arquivo wp-config.php. Para começar, acrescente a linha a seguir acima da linha “That is all, stop editing!” no arquivo wp-config.php de sua instalação. define('WP_ALLOW_MULTISITE', true);

Isso ativará o link Network Admin em sua interface de admin do WordPress (ver Figura 7-3). Em seguida, o WordPress irá guiá-lo pelas etapas necessárias para colocar seu recurso Multisite em funcionamento. Você pode ler mais sobre isso no Codex em http://codex. wordpress.org/Create_A_Network.

Figura 7-3: A tela Network Admin se parece com isso

185

PARTE III: USANDO PLUG-INS COM WORDPRESS Os Multisites podem ser descritos, de forma simples, como uma espécie de estrutura genérica que permite que superusuários admin gerenciem outros blogs criados dentro dessa estrutura. Em wordpress.com qualquer um pode criar um blog, mas essa não é necessariamente a forma como uma instalação de WordPress Multisite funciona. Você pode usar esse recurso para rodar múltiplos blogs (como uma rede de blogs, por exemplo) sem permitir que os usuários se inscrevam e/ou criem seus próprios blogs.

DESENVOLVENDO PLUG-INS PARA MULTISITES O processo de desenvolver plug-ins para WordPress usando Multisites não é muito diferente do processo para plug-ins tradicionais de WordPress. As únicas diferenças estão no banco de dados e, em um grau menor, na estrutura de diretórios. Em termos da estrutura de diretórios, quase tudo é igual à versão padrão do WordPress. A única diferença real é o diretório blogs.dir, na pasta wp-content, que contém todos os dados dos blog criados, como imagens, uploads, etc. Você não usará muito essa pasta, uma vez que o lugar dos temas e plug-ins é na pasta principal wp-content, que você já conhece bem. Seus plug-ins podem ficar armazenados em wp-content/plug-ins/, que você deve reconhecer, ou em wp-plug-in/mu-plug-ins/. Essa última, que é uma pasta que você mesmo cria, é uma espécie de execução automática para plug-ins; se você soltar um plug-in ali, ele não precisa ser exibido na página Plug-ins da interface de admin do WordPress, e será considerado como ativado o tempo todo. A única forma de desativar um plug-in em mu-plug-ins é excluí-lo da pasta. Esses plug-ins são conhecidos como site-wide plug-ins e são abordados na seção seguinte. Você pode também ativar plug-ins site-wide (como um superusuário admin), evitando, assim, a execução automática na pasta mu-plug-ins. O desenvolvimento de plug-ins, em si, é exatamente igual ao processo para o WordPress tradicional. No entanto, você deve tomar todo o cuidado na hora de criar novas tabelas no banco de dados ou usar conteúdo das tabelas no núcleo. Na maior parte do tempo, você não terá problemas, mas há algumas diferenças no banco de dados quando você estiver rodando vários sites em uma única instalação de WordPress, por isso tome cuidado. Outra coisa a ser considerada na hora de criar plug-ins para Multisites é como eles serão usados. Uma vez que é possível rodar uma instalação Multisites de tantas formas diferentes, aberta ou fechada, com plug-ins ativados para blogueiros, apenas para o admin, etc., talvez você precise repensar a forma como o plug-in funciona.

PLUG-INS “SITE-WIDE” NO WORDPRESS Os plug-ins colocados em wp-content/mu-plug-ins/ são chamados de “site-wide” e sempre estão ativados por padrão. Para desinstalar ou desativá-los, é necessário removê-los, o que os torna especiais. Afinal, a impossibilidade de desativar um recurso pode mudar a forma como as coisas funcionam. Você pode também ativar plug-ins “site-wide” a partir da interface de admin. Isso significa que você pode ativar plug-ins localizados em wp-content/plug-ins/ para que eles sejam ativos em todo o site, assim como os mu-plug-ins. Naturalmente, isso é bem mais amigável para o usuário, então é uma excelente ideia considerar a possibilidade de gerenciar os recursos 186

CAPÍTULO 7: ANATOMIA DE UM PLUG-IN DE WORDPRESS “site-wide” controlados por plug-ins dessa forma, ao invés de usar mu-plug-ins. Afinal, uma vez que o WordPress possui suporte a atualizações automáticas, quanto mais você puder fazer a partir da interface de admin usando apenas um clique, melhor. Então é isso, você está programando um plug-in. Agora, pode compartilhar seu plug-in com o mundo, disponibilizando-o no diretório oficial do WordPress.

HOSPEDANDO SEUS PLUG-INS EM WORDPRESS.ORG Assim como para temas, há um diretório oficial de plug-ins em wordpress.org, onde você pode hospedar seus plug-ins. É claro que você não é obrigado a publicar seus plug-ins nesse site, mas fazer isso permite que os usuários obtenham atualizações automáticas, para que possam se manter atualizados com as últimas versões. No entanto, há alguns termos a que seus plug-ins precisam atender para serem hospedados em wordpress.org: Os plug-ins precisam ter uma licença compatível com GPL. Os plug-ins não podem fazer nada ilegal ou ser “moralmente ofensivo”. Os plug-ins devem ser hospedados no repositório de subversões de wordpress.org. Os plug-ins devem possuir um arquivo readme.txt válido.

Para obter acesso, você precisa ser usuário do wordpress.org. Então, envie seu plug-in (http://wordpress.org/extend/plug-ins/add/) e aguarde a aprovação. Esse processo pode levar algum tempo, dependendo da carga de trabalho dos responsáveis. Quando seu plug-in for aprovado, você terá acesso ao diretório de subversões, para o qual deve enviar um arquivo .zip contendo o plug-in, além do arquivo readme.txt válido. Um validador de readme (http://wordpress.org/extend/plug-ins/about/ validator/) garante que todos os dados necessários para que o diretório wordpress.org liste as informações do plug-in estejam presentes. Você deve ler as perguntas frequentes dos desenvolvedores no diretório de plug-ins antes de enviar um plug-in, para garantir que você possui as informações mais atualizadas sobre o assunto. Isso certamente acelerará seu processo de aprovação. Esse material pode ser encontrado em http://wordpress.org/extend/plug-ins/about/faq/. Os benefícios de estar hospedado no repositório de wordpress.org incluem não apenas as atualizações automáticas a partir da interface de admin dos usuários, mas também as estatísticas. Você poderá ver quantas pessoas fizeram o download do seu plug-in e visualizar a classificação e comentários sobre ele. Além disso, wordpress.org é o ponto central do WordPress, ou seja, há boas chances de que as pessoas encontrem seu plug-in, em comparação a simplesmente hospedá-lo em seu próprio site e esperar que as pessoas o encontrem. Adicione a interface de busca de plug-ins a partir da interface de admin do WordPress e seu plug-in poderá ser encontrado dentro de qualquer sistema WordPress atualizado no mundo e instalado com alguns cliques apenas. Isso, é claro, se você estiver no repositório de wordpress.org. Por isso, não perca tempo e envie seu plug-in! 187

PARTE III: USANDO PLUG-INS COM WORDPRESS

UM ALERTA FINAL SOBRE A CRIAÇÃO DE PLUG-INS Desenvolver plug-ins de WordPress é muito diferente de criar temas de WordPress. É claro que há uma série de semelhanças, mas, no fim das contas, você está, na verdade, programando scripts em PHP usando a funcionalidade do WordPress. Isso significa que, embora qualquer um com algum conhecimento sobre scripts possa ajustar temas de WordPress ao seu bel-prazer, esse princípio não se aplica aos plug-ins. Você vai precisar de um bom conhecimento de PHP, e deve tomar cuidado na hora de trabalhar com plug-ins, uma vez que é possível causar muito estrago com eles, especialmente se você estiver mexendo com o banco de dados. Dito isso, se você entende um pouco de PHP, o desenvolvimento de plug-ins pode ser a solução para construir o site que você quer, então divirta-se. O capítulo seguinte discute os casos em que é melhor usar um plug-in, e aqueles em que a melhor alternativa e simplesmente usar o arquivo functions.php de seu tema.

188

8

8 CAPÍTULO

SMASHING WORDPRESS

PLUG-INS OU FUNCTIONS.PHP?

OS TEMAS E PLUG-INS DE WORDPRESS costumam funcionar separadamente, trabalhando juntos apenas na hora de implementar recursos. Essa cooperação é normalmente gerenciada disponibilizando-se as áreas para widgets corretas, nos arquivos de modelo do tema, de modo que o usuário possa arrastar o widget do plug-in para o local onde ele deve estar, ou colocar trechos de código PHP dentro do tema. E, eventualmente, os plug-ins irão gerar ou ativar a funcionalidade usando ganchos de WordPress, o que, em essência, significa que o tema só precisa ser compatível com WordPress para que os plug-ins sejam disparados. É algo relativamente simples.

No entanto, há casos em que temas e plug-ins entram em conflito, e é aí que entra em cena o arquivo functions.php. Esse arquivo de tema pode fazer mais ou menos tudo o que um plug-in faz, ou seja, ele pode ser uma solução alternativa para um usuário que normalmente precisaria de um plug-in. Isso significa também que functions.php pode entrar em conflito com plug-ins se usado sem cautela. Este capítulo explica quando usar um plug-in e quando usar o arquivo functions.php.

PARTE III: USANDO PLUG-INS COM WORDPRESS

QUANDO USAR UM PLUG-IN Na hora de optar pela solução de plug-in em vez de functions.php, ou de comparar o uso de um plug-in com uma alteração personalizada no tema, você deve considerar as seguintes questões: O plug-in é realmente necessário? O plug-in expande a funcionalidade do WordPress de maneira excessivamente

complicada ou tão autônoma que realmente não existe a opção de tentar fazer a mesma coisa dentro dos arquivos do tema? O plug-in precisa funcionar fora do tema selecionado? Uma resposta positiva para qualquer dessas perguntas significa que você deve seguir em frente com seu plug-in.

EXPANDINDO A FUNCIONALIDADE COM PLUG-INS Em resumo, ainda há uma boa regra básica acerca de quando usar um plug-in: tudo que expande a funcionalidade do WordPress deve ser feito por um plug-in. Isso significa que, se você acrescentar algo ao WordPress que não poderia ser acrescentado de outra forma, isso deve ser acrescentado, de fato, usando um plug-in. Exemplos dessa funcionalidade vão desde gerenciamento de dados adicional até integração com aplicativos de terceiros. No entanto, há uma grande área intermediária aqui. Muitos plug-ins estão na verdade imitando o WordPress e seu loop, como é o caso das recentes soluções de listagens de postagens e similares, que existem para que o usuário não precise criar muitos loops personalizados dentro do tema. Os plug-ins podem resolver isso para você, e fazem isso de forma mais amigável, com páginas de opções que configuram o loop personalizado para você e widgets que podem ser arrastados para a posição que você quiser. Compare isso a precisar programar o código do loop, de fato, e colocar esse código no arquivo do seu tema para ser gerado no local em que você deseja. Isso pode não parecer grande coisa se você é especialista em PHP, mas para a maioria dos usuários de WordPress, é um grande inconveniente. Nesses casos, os plug-ins não estão realmente expandindo a funcionalidade, mas sim permitindo que usuários que, de outra forma, não teriam acesso àquela funcionalidade se beneficiem dela. Os campos personalizados são outro exemplo de funcionalidade integrada que pode ser melhor gerenciada com um plug-in. Os campos personalizados são excelentes para muitas coisas, mas, por outro lado, não são exatamente fáceis de usar, e sua interface é um tanto intimidante. Um plug-in pode fazer o mesmo e, na verdade, pode usar os campos personalizados, mas com uma interface mais simples. Isso tem o potencial de facilitar as atualizações do seu site.

CUIDADO: OS PLUG-INS PODEM TORNAR SEU SITE MAIS LENTO Ninguém gosta de sites que demoram para carregar, não importando o quão bonitos eles sejam. A velocidade de que seu site precisa depende do público-alvo e do tipo de conteúdo oferecido. Afinal, páginas com introdução em flash ainda são relativamente comuns, e se não houvesse um público para eles, esses sites já teriam deixado de existir. 190

CAPÍTULO 8: PLUG-INS OU FUNCTIONS.PHP? Nenhum site deve ser mais lento do que precisa, e uma forma garantida de inchar seu site em WordPress é enchê-lo até a borda com funcionalidades ativadas por plug-ins. Pense bem: a maioria dos plug-ins precisa ser inicializada para funcionar quando o visitante encontra sua funcionalidade no site, e isso, por sua vez, pode significar qualquer coisa, desde executar uma função PHP (no mínimo) até um loop completo com consultas ao banco de dados. Digamos que você tenha 10 plug-ins em uma página, e cada um deles inicialize um loop e gere conteúdos relevantes a partir do banco de dados. Isso não apenas consome tempo, mas também sobrecarrega desnecessariamente o servidor, possivelmente tornando-o mais lento. Como mencionado anteriormente, muitos plug-ins são, na verdade, um loop disfarçado. Se você estiver exibindo postagens, comentários, tags ou qualquer derivado disso, você está na verdade fazendo consultas ao banco de dados. É como colocar todos aqueles loops personalizados em seu tema e assistir enquanto eles dão voltas. Um servidor decente não terá problemas com a carga adicional, mas se você tiver muitos visitantes ao mesmo tempo, ele pode não resistir. Consultas ao banco de dados são pesadas, por isso tenha cuidado para não ter muitas dessas em uma mesma página sem o hardware adequado para absorver essa carga. O mesmo se aplica a outros tipos de funcionalidades, desde simples funções PHP até a inclusão de conteúdo de terceiros. É verdade que o maior problema com essas coisas surge quando você busca algo fora do seu servidor, assim, você estará dependendo não apenas do hardware de seu próprio serviço de hospedagem, mas também da velocidade em que o conteúdo pode ser atingido (em outras palavras, a velocidade da Internet) e da velocidade com que o servidor-alvo pode entregar o conteúdo. É por isso que ter uma porção de widgets buscando dados a partir de vários serviços on-line faz qualquer site ficar lento. A lição é não usar muitos plug-ins que exijam demais do servidor. Assim, você garante um tempo de carregamento mínimo para seu site.

QUANDO USAR FUNCTIONS.PHP Quando é realmente uma boa ideia usar functions.php? Tenho uma regra para isso também: use functions.php apenas quando a funcionalidade adicionada for exclusiva para seu tema. O raciocínio por trás disso é simples: o arquivo functions.php está atrelado a um tema específico, assim, se você trocar de tema, sua funcionalidade adicionada não estará disponível, o que obriga você a recriar a funcionalidade no novo tema ou abrir mão dela totalmente. Isso desqualifica functions.php de qualquer tipo de uso que controle a saída de conteúdo, uma vez que isso significaria que, quando você trocasse de tema, o conteúdo não seria gerado ou, pior ainda, o site passaria a apresentar falhas e erros. Muito do que você pode fazer para expandir seus sites são pequenos ajustes e, sinceramente, é provavelmente mais inteligente fazer essas alterações nos arquivos de modelo, mantendo sua contagem de plug-ins o mais baixa possível. No entanto, alguns recursos são tão importantes para a funcionalidade do site que precisam ser adicionados, porque você provavelmente vai precisar deles a longo prazo. E embora possa estar achando que acaba de criar o tema perfeito, mais cedo ou mais tarde você vai acabar trocando seu tema pelo próximo tema perfeito, e isso significa lidar com a perda de tudo o que você acrescentou a functions.php. É verdade que você pode simplesmente mover o código do arquivo functions.php do seu tema antigo para o novo, mas por que se dar ao trabalho de fazer isso? 191

PARTE III: USANDO PLUG-INS COM WORDPRESS A regra de colocar em functions.php apenas funcionalidades que sejam específicas para seu tema é útil, penso eu. Exemplos dessa funcionalidade incluem configurações de layout (obsoletas em um tema diferente) e páginas de opções do tema que mudariam levemente dependendo de como algo é adicionado e/ou exibido no tema. Uma vez que colocar essa funcionalidade em um plug-in tornaria o plug-in obsoleto quando você trocar de tema, functions.php é a melhor opção. Assim, os plug-ins servem para expandir a funcionalidade do WordPress, e functions.php serve para coisas que são específicas para seu tema atual. E isso basicamente encerra a questão.

SOLUÇÕES COM TEMAS FILHOS Outra forma de solucionar o problema de recursos é usar temas filhos. Partindo do pressuposto de que você criou ou encontrou o tema perfeito para construir seu site, você pode criar temas filhos para as várias iterações de seu site. Como sempre, quando se trata de temas filhos, mantenha seus recursos principais – que incluiriam qualquer recurso bacana de functions.php que você vem usando – no tema pai e use o tema filho que você está usando para as questões de design e ajustes mínimos. Isso significa que, sempre que precisar modernizar seu site, você pode simplesmente criar um novo tema filho sem perder em funcionalidade. Não é necessário copiar/colar o código de functions.php, uma vez que tudo isso vai estar no functions.php do tema pai. Você pode ler mais sobre temas filhos no Capítulo 5.

PLANEJAMENTO PARA FUNCIONALIDADE EXPANDIDA EM SEU SITE DE WORDPRESS Sempre que sentir a necessidade de expandir a funcionalidade do WordPress em um projeto, você precisará decidir se pode alterar o tema para realizar suas ideias ou se precisará desenvolver um plug-in. Na maioria dos casos, fugir do fluxo de conteúdo típico envolve uma mistura de ambos, e não há problemas nisso. O importante é que haja ideias sólidas por trás das escolhas feitas. As perguntas óbvias são: Preciso mesmo de um plug-in para o recurso X? É possível expandir o recurso X sem substituí-lo totalmente pela nova funcionalidade? O recurso X funcionará se/quando o projeto adotar um novo tema? O recurso X causará problemas quando o WordPress for atualizado? Como o recurso X se integrará ao tema e aos demais plug-ins/recursos?

O objetivo aqui é definir um planejamento acerca de como construir seu site em WordPress. Isso se aplica não importando se você quer apenas turbinar seu blog, publicar um jornal on-line ou fazer algo completamente diferente com a plataforma. Naturalmente, quanto mais coisas extremas você fizer para levar o WordPress para além do blog, mais você vai precisar pensar sobre o projeto. Para obter exemplos de coisas que você pode fazer, consulte as soluções na próxima parte deste livro. 192

9

9 CAPÍTULO

SMASHING WORDPRESS

PLUG-INS DE WORDPRESS ESSENCIAIS

O NÚMERO DE plug-ins disponíveis para a plataforma WordPress é imenso; é impossível testar todos eles, ou mesmo manter-se atualizado com todas as mudanças que ocorrem. Este capítulo é dedicado a apenas um universo limitado dos maravilhosos plug-ins que estão disponíveis para WordPress. Cada um dos plug-ins abordados aqui atingiu os usuários, foi amplamente testado e claramente atende a uma necessidade. Ainda assim, eles representam

apenas uma gota no oceano se comparado às opções disponíveis. Mantenha em mente que os plug-ins estão sempre mudando, assim como o WordPress. Quer dizer, o que funciona perfeitamente hoje pode não ser tão útil no futuro. Além de usar as informações neste capítulo, você deve continuar pesquisando e se informar sobre as atualizações para garantir que encontrará o plug-in certo para atender às suas necessidades.

PARTE III: USANDO PLUG-INS COM WORDPRESS Esteja avisado de que às vezes você vai encontrar alertas, ao experimentar um plug-in, dizendo que o plug-in só foi testado até esta ou aquela versão do WordPress e talvez não na versão que você está rodando. Isso não significa, necessariamente, que ele não funcionará para você; apenas que o plug-in não foi testado em sua versão específica e/ou que o autor do plug-in não atualizou os arquivos do plug-in. Por isso não se deixe assustar apenas porque um plug-in não foi testado em sua versão ainda; crie um blog de teste e experimente por si próprio. A maioria dos plug-ins, no fim das contas, funciona em outras versões.

PLUG-INS COM FOCO NO CONTEÚDO O conteúdo é o que realmente importa; você quer que as pessoas encontrem o que procuram, se envolvam e passem a tarde inteira se deliciando com seu site. A Wikipedia faz isso com links, e você também pode. É tudo uma questão de fazê-los ser suficientemente interessantes, e facilitar a navegação pelos confins dos arquivos. Estes plug-ins ajudarão os visitantes a se “amarrarem” no seu conteúdo. WP Greet Box (wordpress.org/extend/plug-ins/wp-greet-box/): sempre

que você recebe um novo visitante a partir de um site de social bookmarking, é uma boa ideia se apresentar – ou melhor, apresentar seu site – para essa pessoa. É isso que o WP Greet Box faz: ele verifica a URL de referência e gera uma mensagem para o visitante. Pode ser algo como, “Olá, seja bem-vindo, e assine o nosso feed!” ou algo mais específico, como, “Seja bem-vindo, visitante do Digg. Você sabia que eu escrevi um livro sobre o Digg? Você pode comprar meu livro aqui!” Muito útil. Yet Another Related Posts Plug-in (wordpress.org/extend/plug-ins/yetanother-related-posts-plug-in/): a ironia no nome desse plug-in (algo como “Ainda mais um plug-in de postagens relacionadas”) não é apenas uma provocação aos amantes do código. O número de plug-ins de postagens relacionadas que há por aí é impressionante, e isso dificulta muito na hora de separar o joio do trigo. Em minha opinião, esse é um forte concorrente ao trono dos plug-ins de postagens relacionadas, porque oferece muitas opções e apresenta links relevantes também. Por exemplo, você pode configurar os limites de relevância, de modo que um site que tem muito conteúdo pode ser mais rígido quanto ao que é considerado conteúdo relacionado. Outros recursos incluem postagens relacionadas nos feeds RSS, suporte a Páginas, cache e um sistema de modelos que poderia ser mais fácil de usar, mas ainda assim oferece boas opções de personalização caso você queira levar as coisas um pouco mais longe. Popularity Contest (wordpress.org/extend/plug-ins/popularitycontest/): você sabe o que é popular em seu site? Caso não saiba, ou mesmo se souber, esse plug-in é uma ótima maneira de promover as coisas que os visitantes obviamente adoram, gerando listas de postagens populares usando o widget do plug-in. Configurações sobre como ponderar diferentes fatores podem fazer o plug-in trabalhar ainda melhor pelos seus objetivos. Exibir o conteúdo mais popular de um site, especialmente se o fator tempo for ponderado (para que postagens antigas não surjam repentinamente) é uma excelente forma de guiar os visitantes pelo seu site. WP-PostRatings (wordpress.org/extend/plug-ins/wp-postratings/): WP-PostRatings é um excelente plug-in para avaliar postagens. Há diversas imagens de pontuação incluídas, e você pode escolher qual delas quer exibir, usando o shortcode [ratings] ou adicionando as template tags do plug-in ao seu tema. O WP-PostRatings também permite que você veja as postagens de melhor e pior avaliação, classificando-as por tempo ou por pontuação geral, assim como as categorias e assim por diante. 194

CAPÍTULO 9: PLUG-INS DE WORDPRESS ESSENCIAIS GD Star Rating (wordpress.org/extend/plug-ins/gd-star-rating/): outro

plug-in de avaliação é o GD Star Rating, que se destaca por seu suporte a vários tipos de avaliação por postagem (estrelas e polegar para cima/baixo, por exemplo), além de avaliações para comentários. Ele oferece também uma das páginas de configurações mais atraente que já vi e uma porção de configurações avançadas. Vale a pena dar uma olhada se você precisa da funcionalidade de avaliação. PollDaddy (wordpress.org/extend/plug-ins/polldaddy/): não é surpresa alguma que o plug-in PollDaddy integra plenamente as enquetes e gerenciador de serviços ao WordPress, com a opção de criar enquetes sem precisar sair da interface de admin. O PollDaddy pertence à Automattic, por isso é tão bem integrado, e essa é pelo menos uma das razões para considerar esse serviço, uma vez que ele possui a infraestrutura de apoio necessária. No entanto, se você quiser se livrar dos links do PollDaddy em suas enquetes, precisará comprar uma conta pro, por isso, se isso é um problema para você, pode ser uma boa ideia considerar um dos plug-ins de enquete nativos. WP-Polls (wordpress.org/extend/plug-ins/wp-polls/): WP-Polls é um plug-in de enquete flexível, com suporte a arquivos. Você pode adicioná-lo aos modelos do seu tema, ou usar o widget para colocar a enquete onde quiser. Pode ser um pouco demorado configurar o plug-in para adaptar-se ao seu design, mas ele é uma boa alternativa à solução PollDaddy, que está hospedada em outro servidor.

PLUG-INS DE MÍDIA Em sites de WordPress, quando falamos em mídia, em geral estamos falando de imagens, e esse é o caso também no que diz respeito aos plug-ins. Não é tão estranho, quando você pensa a respeito. Afinal, se você quiser disseminar um vídeo, coloca ele no YouTube, certo? Assim ele ganha exposição e você não precisa se preocupar com os custos de banda de sua obra-prima em HD.  NextGEN Gallery (wordpress.org/extend/plug-ins/nextgen-gallery/):

NextGEN Gallery é um plug-in de galeria que também oferece suporte a uma porção de outras coisas. Você pode ter álbuns classificáveis, aplicar uma marca d'água ao seus uploads, alterar a aparência com CSS, exibir uma apresentação de slides na barra lateral e localizar o plug-in. Ele oferece suporte a uploads de arquivos zip, sem falar que permite que seus visitantes naveguem pelas galerias de forma amigável e simples. A interface de admin é bem simples, e você pode facilmente obter o shortcode necessário para exibir a galeria, assim como faria com o shortcode normal, [gallery]. Trata-se de um plug-in bastante completo. A única ressalva é que esse plug-in não expande à funcionalidade de upload de imagens normal, simplesmente trabalha sozinho. As imagens são armazenadas em pastas de galerias em wp-content/gallery/, e embora não haja problema algum nisso, significa que o WordPress não vai conseguir encontrá-las na biblioteca de mídia (Media Library). Além disso, quando você desativa o NextGEN Gallery, acaba com uma porção de shortcodes que não passam por parsing, e portanto deixam de exibir as imagens. Uma vez que você não pode acessar as imagens a partir do WordPress, isso pode ser um problema caso o plug-in saia de linha. Ainda assim, é um plug-in muito bacana e bem feito. Lightbox Gallery (wordpress.org/extend/plug-ins/lightbox-gallery/): o Lightbox Gallery adiciona o popular efeito de lightbox às suas galerias de imagens, além de possibilitar a abertura de qualquer imagem acrescentando a tag rel=”lightbox” ao link. Você pode fazer o mesmo implementando qualquer um dos scripts disponíveis por 195

PARTE III: USANDO PLUG-INS COM WORDPRESS aí, mas esse plug-in faz o trabalho por você. Esteja avisado, no entanto, que há alguns links em hardcoded no plug-in, atualmente, por isso, se você moveu sua instalação de WordPress para uma subpasta, mas executa o site, em si, na pasta raiz, pode acabar encontrando algumas imagens de navegação corrompidas. Esperamos que isso seja remediado no futuro; caso contrário, talvez você prefira usar outra alternativa. Shutter Reloaded (wordpress.org/extend/plug-ins/shutter-reloaded/): se você quiser manter seus efeitos de sobreposição de lightbox mais leves, confira o Shutter Reloaded. Ele verifica qualquer link que leva a um arquivo de imagem e aplica o tratamento de lightbox. Embora não seja tão atraente quanto outras opções disponíveis, ainda é bem bacana.  Podcasting (wordpress.org/extend/plug-ins/podcasting/): houve um tempo em que publicar podcasts com WordPress era sinônimo de usar o plug-in PodPress. Infelizmente, ele parou de oferecer manutenção, o que torna ainda melhor o fato de que o plug-in Podcasting oferece uma ferramenta de migração para usuários do PodPress. Esse plug-in oferece suporte a iTunes e você pode usá-lo tanto para podcasts de áudio quanto de vídeo. Alguns ótimos plug-ins de mídia para conferir: ThickboxAnnouncement (wordpress.org/extend/plug-ins/fsthickbox

announcement/) usa a variação de efeito lightbox sobreposta Thickbox para sobrepor anúncios. jQuery Lightbox (wordpress.org/extend/plug-ins/jquery-lightboxbalupton-edition/) permite que você acrescente um efeito semelhante ao de lightbox usando jQuery e rel=”lightbox” nos links de imagem. PhotoQ Photoblog Plug-in (wordpress.org/extend/plug-ins/photoqphotoblog-plug-in/) é outro plug-in de imagens que mantém as imagens dentro de sua própria estrutura, assim como o NextGEN Gallery. AutoThumb (maff.ailoo.net/2008/07/wordpress-plug-in-autothumbphpthumb/) usa phpThumb para oferecer maior controle sobre as imagens, concentrando-se apenas nos tamanhos e filtros que você adiciona à origem da imagem. Featured Content Gallery (wordpress.org/extend/plug-ins/featuredcontent-gallery/) adiciona um carrossel de imagens concebido para promover conteúdo em destaque na página inicial.

PLUG-INS ADMINISTRATIVOS De longe, a maior seção nesta compilação de plug-ins é esta, dedicada aos plug-ins administrativos. Isso provavelmente se deve ao fato de que inclui soluções variadas, que lidam com cópias de segurança, ferramentas de estatística, e correções para o admin do WordPress, além de funcionalidade semelhante à de CMS. No Self-Pings (wordpress.org/extend/plug-ins/no-self-ping/): se você

está cansado de ver seus próprios pings em suas próprias postagens simplesmente porque está criando links internamente, você precisa deste plug-in. Em minha opinião, ele deveria estar em toda instalação de WordPress. Se você quiser criar links cruzados internamente, e não através do link, de fato, em sua postagem ou Página, use um plug-in de postagens relacionadas. 196

CAPÍTULO 9: PLUG-INS DE WORDPRESS ESSENCIAIS WP No Category Base (wordpress.org/extend/plug-ins/wp-no-category-

base/): WP Category Base elimina o “category” padrão nos links permanentes. Você

pode personalizar esse texto para dizer outras coisas, nas configurações de links permanentes, como por exemplo “tópicos” ou “produtos”, mas não é possível eliminar totalmente esse elemento. Este plug-in resolve esse problema, transformando domain. com/category/my-category em domain.com/my-category . WP-DB-Backup (wordpress.org/extend/plug-ins/wp-db-backup/): soluções de backup nunca são demais. Essa usa o pseudo-cron integrado do WordPress para enviar por e-mail cópias de segurança do banco de dados, ou armazena essas cópias no servidor para você, caso algo dê errado. Não importando que outras soluções de backup você possa já utilizar, recomendo que use essa também. Lembre-se, o plug-in cria apenas uma cópia de segurança do banco de dados e apenas das tabelas padrão e quaisquer outras que você solicite. Seus arquivos de upload, plug-ins e temas vão precisar de outra solução de backup. Esperamos que esse plug-in seja incluído no WordPress no futuro, pois tenho certeza de que isso ajudaria muita gente. Maintenance Mode (wordpress.org/extend/plug-ins/maintenance-

mode/): esse é um plug-in simples que tranca o seu blog, exibindo uma mensagem que

diz que o site está passando por manutenção para todos os visitantes, exceto os administradores que tiverem feito login. Lembre-se de que o WordPress colocará seu site em um modo de manutenção próprio durante as atualizações, por isso use esse plug-in para outros casos. Shockingly Big IE6 Warning (wordpress.org/extend/plug-ins/shockingly-

big-ie6-warning/): o Microsoft Internet Explorer 6 é um flagelo, e a única razão para

rodar esse navegador é se seu sistema operacional obriga você a fazê-lo. Entre os que fazem isso está o Windows 2000, uma vez que esse sistema não roda versões mais recentes do Internet Explorer. No entanto, nada impede que os usuários desses sistemas instalem qualquer outro navegador da Web disponível; apenas as versões mais recentes do Internet Explorer não funcionarão. Com esse plug-in, você pode educar seus visitantes acerca desse fato, e fazer da Web um lugar melhor. Além disso, trocar de navegador certamente criará uma experiência melhor para o usuário, em seu site. Branded Admin (kerrywebster.com/design/branded-admin-for-

wordpress-27-released): o Branded Admin permite que você personalize o cabeçalho e o rodapé da interface de admin do WordPress para se adequar melhor à sua marca. Você pode também querer usar o plug-in Branded Login (kerrywebster.com/ design/branded-login-screen-for-wordpress-27/) para ter uma personalização ainda maior. Sidebar Login (wordpress.org/extend/plug-ins/sidebar-login/): se você

quiser um formulário de login na barra lateral (ou em qualquer outra área para widgets), mas não quer modificar o tema, Sidebar Login é o plug-in certo para você. Ele é simples e não possui configurações específicas ou qualquer outra coisa para programar. Theme My Login (wordpress.org/extend/plug-ins/theme-my-login/): o

plug-in Theme My Login substitui a tradicional página de login (wp-login.php) por uma página do seu tema. Em outras palavras, você obtém uma página de login integrada, à qual pode aplicar estilos, o que pode ser uma boa ideia se você quiser dar um login aos seus usuários. Você também pode controlar para onde eles serão levados depois do login, e adicionar um formulário de login a qualquer área para widgets. Isso é bastante útil. Fast Secure Contact Form (wordpress.org/extend/plug-ins/si-contact-

form/): há diversos plug-ins de formulário de contato por aí. Infelizmente, muitos deles

197

PARTE III: USANDO PLUG-INS COM WORDPRESS tendem a ser assolados por spambots, por isso você deve escolher um plug-in que resolva esse problema. Fast Secure Contact Form possui uma boa reputação e é relativamente fácil de usar, mas há uma infinidade de outras opções disponíveis para esse recurso. TDO Mini Forms (wordpress.org/extend/plug-ins/tdo-mini-forms/): esse

é um plug-in muito legal que permite a você criar seus próprios formulários para o envio de conteúdo, que acabam no banco de dados do WordPress. Você pode usá-lo para obter resenhas de usuários ou para qualquer outra coisa, na verdade, e pode optar por confiar em alguns usuários para postagem direta, enquanto outros podem precisar de aprovação (ou seja, as postagens enviadas por esses usuários seriam salvas com status de rascunho por padrão). Os formulários são altamente personalizáveis, e você pode até mesmo permitir que os usuários enviem seus valores de campos personalizados, ou arquivos. Além disso, há perguntas simples e CAPTCHA, além de banimento de IP para ajudar a lutar contra os vilões do spam, que enchem seu site de bobagens. Esse plug-in é abordado no Capítulo 15, no qual olhamos para sites que não têm aparência de blog e que dependem do conteúdo enviado pelos usuários. Uma alternativa premium mais avançada ao TDO Mini Forms é o Gravity Forms (www. gravityforms.com/), que faz tudo isso e ainda mais. Se você precisa de formulários avançados e acha que o TDO Mini Forms deixa a desejar, o Gravity Forms é uma boa alternativa, embora não seja gratuita. Google Analyticator (wordpress.org/extend/plug-ins/googleanalyticator/): o Google Analyticator facilita o processo de colocar Google Analytics (google.com/analytics/) em execução no seu blog sem precisar modificar os arquivos de modelo do tema. Ele oferece até mesmo algumas estatísticas na interface de admin, o que é ótimo para quem não é viciado em verificar a página de Analytics 10 vezes por dia. Google Analytics for WordPress (wordpress.org/extend/plug-ins/googleanalytics-for-wordpress/): outro plug-in para adicionar Google Analytics ao seu site de WordPress sem precisar editar os arquivos do tema. Relativamente simples, ele possui exclusões para tornar suas estatísticas mais precisas. WordPress.com Stats (wordpress.org/extend/plug-ins/stats/): se você está acostumado às estatísticas oferecidas dentro da interface de admin do WordPress em wordpress.com, vai adorar o WordPress.com Stats. Ele faz a mesma coisa, mas para sua instalação autônoma de WordPress. Trata-se de um plug-in eficiente e simples, mas não oferece tantas informações quanto o Google Analytics ou qualquer das outras alternativas “reais” de estatísticas da Web que estão disponíveis por aí. Para funcoinar, ele requer uma chave de API (gratuita) do wordpress.com. Broken Link Checker (wordpress.org/extend/plug-ins/broken-linkchecker/): essa ótima ferramenta controla seus links. Quando instalada, ela navega por sua lista de blogs , Páginas e postagens, buscando links corrompidos. Aí, então, o plug-in permite que você faça algo a respeito. Muito útil, mas não estou certo de se é necessário mantê-lo permamentemente em execução. Por padrão, ele refaz a verificação a cada 72 horas, mas você pode configurá-lo para verificações manuais também.  WP e-Commerce (wordpress.org/extend/plug-ins/wp-e-commerce/): se você quer transformar seu site de WordPress em uma loja na Web, ou simplesmente vender algumas mercadorias, sua primeira parada provavelmente deve ser o WP e-Commerce. A curva de aprendizado é um tanto íngreme, mas com um pouco de prática, tanto em termos de design quanto de configurações, você pode fazê-lo funcionar da forma que quiser. Há muitas funcionalidades avançadas aqui, como promoções cruzadas, produtos categorizados

198

CAPÍTULO 9: PLUG-INS DE WORDPRESS ESSENCIAIS e muito mais. E se você precisar de ainda mais funcionalidade, pode pagar pelas expansões, embora o plug-in se sustente muito bem sozinho. WordPress Simple PayPal Shopping Cart (tipsandtricks-hq.com/wordpresssimple-paypal-shopping-cart-plug-in-768): uma solução menos avançada para vender produtos usando um site de WordPress é o WordPress Simple PayPal Shopping Cart. Ele se conecta ao PayPal (apenas) e oferece um carrinho de compras amigável ao usuário. Você pode adicionar um link de Adicionar ao Carrinho (ou qualquer outro texto ou imagem que quiser) em qualquer local desejado, com uma descrição dos detalhes de cada produto ao estilo shortcode. Isso significa que tudo o que diz respeito ao produto, como descrições e imagens, deverá ser gerenciado manualmente. O carrinho de compras, em si, pode ser adicionado em um widget de texto ou em qualquer local desejado, o que faz desse um plug-in realmente flexível e fácil de colocar em ação em essencialmente qualquer site que rode em WordPress. Infelizmente, ele só funciona com PayPal, mas se você não tem problemas com isso, deveria conferir esse plug-in. Existe também uma versão pro, caso você precise de mais recursos. Redirection (wordpress.org/extend/plug-ins/redirection/): o Redirection permite que você configure o redirecionamento do seu blog, de modo que domain.com/smashing-company/ seja redirigido através de um “301 moved” para smashing-company.com, ou o que mais você precisar. Pretty Link (wordpress.org/extend/plug-ins/pretty-link/): se você quiser encurtar suas URLs para usá-las no Twitter, ou simplesmente ocultar seus links afiliados (seu danadinho!), vale a pena conferir o Pretty Link. Sobretudo se você pretende enviar coisas para o Twitter e ter um nome de domínio curto, porque ele oferece até mesmo a opção de anexar uma “Pretty Bar”, semelhante ao que o Digg e outros sites estão fazendo. O Pretty Link é basicamente um compactador de URLs com opções. Existe também uma versão pro, que é paga. Pods (wordpress.org/extend/plug-ins/pods/): Pods é um plug-in que pretende transformar ainda mais o WordPress em um CMS. Os desenvolvedores o chamam de estrutura de CMS, e isso não está muito longe da verdade. Você pode criar tipos de conteúdo, estruturas de dados, configurar relacionamentos, etc. Construir um site usando Pods lhe dará muita liberdade. O único problema é que ele pode ser um pouco intimidante na hora de começar, especialmente se você estiver acostumado à simplicidade do próprio WordPress. Vale a pena conferir esse plug-in se você quer que o WordPress seja mais semelhante a um CMS. WordPress Download Monitor (wordpress.org/extend/plug-ins/downloadmonitor/): se você estiver interessado em quantas vezes um determinado arquivo foi baixado, digamos que um tema de WordPress que você disponibilizou ou um e-book que você está distribuindo gratuitamente, pode monitorar isso usando o plug-in WordPress Download Monitor. Ele oferece upload de arquivos (mas você não precisa usar esse recurso, pode simplesmente inserir a URL do arquivo), localização, categorias e fácil adição de downloads a postagens e páginas. Além das estatísticas, é claro.  More Fields (wordpress.org/extend/plug-ins/more-fields/): More Fields é um excelente plug-in que não apenas simplifica o uso dos campos personalizados para você, enquanto desenvolvedor, mas também para a equipe editorial que trabalha no site. Você pode criar campos personalizados com funcoinalidade de WYSIWYG, botões ou caixas de seleção, etc. Ele é especialmente útil quando você está construindo algo para um cliente. É assim que os campos personalizados deveriam funcionar no WordPress autônomo.

199

PARTE III: USANDO PLUG-INS COM WORDPRESS Você talvez queira conferir também os outros plug-ins do mesmo desenvolvedor. More Taxonomies (wordpress.org/extend/plug-ins/more-taxonomies/) permite que você adicoine novas taxonomias ao WordPress de forma facílima, e More Types (wordpress.org/extend/plug-ins/more-types/) permite que você adicione novos post types. Todos são excelentes. Outra opção para obter campos personalizados mais amigáveis é o WP-Custom (wordpress.org/extend/plug-ins/wp-custom/), embora o More Fields seja uma opção melhor, em minha opinião. Advertising Manager (wordpress.org/extend/plug-ins/advertisingmanager/): o Advertising Manager ajuda você a gerenciar seus anúncios publicitários, além de incluí-los em suas postagens. O sistema reconhece e oferece suporte a diversas redes de anúncios, incluindo suas limitações (como o máximo de 3 anúncios por página, do Adsense). Ele também possui widgets, de modo que você possa colocar seus anúncios em uma área para widgets, o que deve ser o suficiente para atrair muitos usuários para esse plug-in. Em um primeiro momento, ele é um tanto desajeitado, mas honestamente, quando comparado aos gerenciadores de anúncios mais completos que existem no mercado, é muito fácil de usar. Uma ótima alternativa ao Advertising Manager é o WP-Bannerize (wordpress.org/extend/plug-ins/wp-bannerize/), que é mais do que o suficiente para a maioria dos sites menores . FeedWordPress (wordpress.org/extend/plug-ins/feedwordpress/): o FeedWordPress permite que você tenha feeds sindicados em seu banco de dados do WordPress, que são publicados como postagens. Isso é como um sonho para os ladrões de RSS, mas também pode servir a outros propósitos. Entre outras coisas, esse plug-in pode servir para criar um site "planet", cujo propósito é reunir conteúdos relevantes e disponibilizá-lo aos visitantes. O plug-in pode ser usado para vários propósitos. Teoricamente, você pode transformar sua instalação de WordPress em um monstro de lifestreaming, classificando postagens nas categorias adequadas, etc. E, só para deixar claro, roubar conteúdo de outras pessoas é uma coisa feia e pode ser ilegal. Não faça isso; escreva seu próprio conteúdo ou obtenha permissão. Members Only (wordpress.org/extend/plug-ins/members-only/): o

Members Only restringe a visualização apenas a usuários inscritos; todos os outros visitantes precisarão fazer login. Depois do login, você pode redirecionar o usuário para onde quiser, por isso esse plug-in funciona perfeitamente com o tema P2 (wordpress. org/extend/themes/p2), caso você precise de colaboração interna dentro do WordPress. Há até mesmo uma configuração para feeds RSS privados. Um balaio de plug-ins administrativos: Woopra Analytics Plug-in (wordpress.org/extend/plug-ins/woopra/) é

perfeito para usuários de Woopra, assim como os plug-ins de Google Analytics são perfeitos para usuários de Analytics. Random Redirect (wordpress.org/extend/plug-ins/random-redirect/) cria um link que manda o usuário para uma postagem aleatória em seu site. Post Editor Buttons (wordpress.org/extend/plug-ins/post-editorbuttons/) é um plug-in bacana que permite que você adicione seus próprios botões à parte de HTML do editor de postagens. 200

CAPÍTULO 9: PLUG-INS DE WORDPRESS ESSENCIAIS TinyMCE Advanced (wordpress.org/extend/plug-ins/tinymce-

advanced/) adiciona mais recursos ao editor visual do WordPress. Viper’s Video Quicktags (wordpress.org/extend/plug-ins/vipers-video-

quicktags/) permite que você adicione vídeos de diversos sites com facilidade, além de

fazer upload dos seus próprios. Custom Post Type UI (wordpress.org/extend/plug-ins/custom-posttype-ui/) permite que você crie post types personalizados e suas próprias taxonomias no admin sem precisar escrever código algum. Revision Control (wordpress.org/extend/plug-ins/revision-control/) limita o número de revisões de uma postagem que o WordPress é capaz de salvar no banco de dados. Widget Context (wordpress.org/extend/plug-ins/widget-context/) permite que você configure regras para onde cada widget deve ser exibido (quem sabe essa pode ser uma alternativa a ter uma porção de barras laterais?). WP-Mail SMTP (wordpress.org/extend/plug-ins/wp-mail-smtp/) é a solução caso você não queira usar os servidores de e-mail do seu serviço de hospedagem para suas necessidades de e-mail relacionadas ao WordPress. Ele funciona muito bem com Google Apps, também. Editorial Calendar (wordpress.org/extend/plug-ins/editorialcalendar/) facilita o gerenciamento do conteúdo, com uma interface de arrastar/soltar. Members (wordpress.org/extend/plug-ins/members/) oferece maior controle sobre quais usuários podem fazer o quê, que conteúdo deve ser exibido para quem, etc. É uma ferramenta bem legal, que vale a pena conferir.

PLUG-INS PARA GERENCIAMENTO DE SPAM E COMENTÁRIOS É muito importante combater o spam, assim como gerenciar os comentários, em si. Os plug-ins a seguir, espero, vão ajudá-lo você a fazer isso. Akismet (wordpress.org/extend/plug-ins/akismet/): o Akismet é irmão

siamês do WordPress, e um daqueles plug-ins que resolve o onipresente problema de spam nos comentários. Para usá-lo, você vai precisar de uma chave de API de wordpress.com, ou seja, que você precisará ser um usuário do site. Há também algumas licenças comerciais disponíveis; visite akismet.com para saber mais. Você talvez queira, também, complementar esse plug-in com outros plug-ins de anti-spam, ou ao menos experimentar outras soluções, caso achar que ainda há muito spam chegando ao seu site.  WP-SpamFree Anti-Spam (wordpress.org/extend/plug-ins/wp-spamfree/): o

WP-SpamFree Anti-Spam se diferencia tanto do Akismet quanto do TypePad AntiSpam porque não depende de um serviço central; ao invés disso, ele luta contra os robôs do spam usando uma mistura de JavaScript e cookies. Isso pode soar como uma solução trivial para o problema, mas muitos sites são fiéis a ele, e ele parece realmente filtrar grande parte do spam, especialmente os do tipo trackback, que outros plug-ins deixam passar. Há também um formulário de contato incluído no plug-in, como bônus, e naturalmente ele vem com proteção contra spam. 201

PARTE III: USANDO PLUG-INS COM WORDPRESS Se você está gastando muito tempo para lidar com spam, talvez seja uma boa ideia experimentar esse plug-in. Ele funciona perfeitamente bem com o Akismet, por exemplo, por isso não há motivos para não testá-lo se você precisa de ajuda para combater os spambots. TypePad AntiSpam (antispam.typepad.com):

o TypePad AntiSpam é a resposta da Six Apart para o plug-in Akismet, e funciona de forma semelhante. Assim como o Akismet, ele trabalha a partir de um servidor que registra e analisa todo o spam, incluindo comentários que você marca como spam manualmente, e assim vai "aprendendo" com o tempo. Tanto o plug-in quanto a chave de API necessária para seu perfil de TypePad são gratuitos, por isso experimente essa solução se o Akismet não funcionar bem para você. Really Simple CAPTCHA (wordpress.org/extend/plug-ins/reallysimple-captcha/): CAPTCHA é uma daquelas coisas irritantes que dizem “copie o que está escrito na caixa para provar que você é humano”, e embora isso possa não ser lá muito amigável, às vezes é preciso adotar medidas desesperadas para deter os vilões do spam e outros oportunistas. Esse plug-in, na verdade, faz mais do que simplesmente colocar um CAPTCHA em seus comentários; ele foi concebido para ser utilizado em casos em que você precisa de uma verificação CAPTCHA realmente simples. Na maioria dos casos, ele funciona relativamente bem. Get Recent Comments (wordpress.org/extend/plug-ins/get-recentcomments/): o widget de comentários recentes que acompanha o WordPress não é exatamente empolgante, e além disso, tem a tendência de acabar cheio de trackbacks. O plug-in Get Recent Comments é uma excelente alternativa para substituí-lo, possui layout ajustado, suporte a Gravatar, saída em cache, opções de ordenamento, eliminação de pingbacks internos e muito mais. Se você quiser exibir os comentários mais recentes, essa é uma excelente solução. Disqus Comment System (wordpress.org/extend/plug-ins/disquscomment-system/): o serviço de comentários hospedado líder é o Disqus (disqus.com) e é relativamente fácil colocá-lo para funcionar em seu site de WordPress usando um plug-in. Se você estiver rodando o Disqus, talvez se interesse também pelo (não oficial) plug-in Disqus Widget (wordpress.org/extend/plug-ins/disquswidget/), que exibe estatísticas para seus comentários do Disqus.  IntenseDebate Comments (wordpress.org/extend/plug-ins/intensedebate/): duas soluções de comentários hospedados estão competindo pelas opiniões dos seus leitores, e IntenseDebate (www.intensedebate.com) é a solução da Automattic. Se você quiser usar o IntenseDebate para seus comentários hospedados, essa é sua ferramenta. CommentLuv (wordpress.org/extend/plug-ins/commentluv/): CommentLuv é um plug-in que verifica a URL aplicada a um feed RSS e exibe a atualização mais recente com o comentário do usuário. Ele também se conecta ao site do ComLuv (comluv.com) para mais recursos, como rastreamento de links. Por sorte, a ferramenta é bastante personalizável, já que a solução padrão não é particularmente bonita, incluindo botões de erro e coisas do tipo. BackType Connect (wordpress.org/extend/plug-ins/backtype-connect/): o plug-in BackType Connect verifica a Web social para localizar conversas relacionadas às postagens do seu blog e publica essas conversas como comentários em sua postagem. Assim, se o seu artigo gerou bastante discussão no twitter, isso também aparecerá em sua postagem. Embora seja muito legal, também pode gerar confusão quando comentários tradicionais se misturam a comentários dos sistemas de microblogs, por conta do limite 202

CAPÍTULO 9: PLUG-INS DE WORDPRESS ESSENCIAIS de 140 caracteres. Use com cautela e certifique-se de que seus leitores são espertos o suficiente para entender o que está acontecendo. E mais alguns plug-ins, simples e excelentes: Cookie for Comments (wordpress.org/extend/plug-ins/cookies-for-

comments/) é uma opção viável quando você recebe muito spam nos comentários e usa cookies para dificultar o acesso aos malditos spambots. WP-Hashcash (wordpress.org/extend/plug-ins/wp-hashcash/) é outro

plug-in de combate ao spam que você deve experimentar caso seu site esteja sendo assolado por essa praga. ReplyMe (wordpress.org/extend/plug-ins/replyme/) envia um e-mail ao

autor do comentário quando alguém responde diretamente ao comentário feito por ele. Isso só funciona se você ativar a opção de discussão nos comentários, obviamente.

PLUG-INS DE REDES SOCIAIS A Web social é um conceito, e você tem uma infinidade de perfil por todos os lados. Cada uma das ferramentas de social bookmarking possui seu próprio link de envio, e você pode acrescentar todos eles ao seu tema (falaremos disso no Capítulo 11) ou simplesmente usar um plug-in para fazer isso. Afinal, hoje em dia tudo está conectado. Então por que não adicionar um pouquinho da Web social ao seu site? Exiba seu Twitter e permita que os visitantes submetam seu conteúdo para o Digg. Você pode fazer a maioria dessas coisas diretamente a partir do seu tema, usando código personalizado (geralmente disponibilizado na página de ferramentas da maioria dos sites de social networking), mas se quiser tomar um atalho ou acrescentar um certo requinte social, esses plug-ins podem ajudar. Lifestream (wordpress.org/extend/plug-ins/lifestream/): o plug-in

Lifestream facilmente acrescenta funções de lifestream ao seu site de WordPress. Simplesmente instale o plug-in e informe a ele de que contas on-line e feeds RSS ele deve extrair dados, e então você pode incluir o conteúdo, usando shortcode, em uma página, por exemplo. Você pode também personalizar cada elemento, graças à adição de classes CSS, e a ferramenta oferece suporte integrado a várias das maiores propriedades de mídia social, embora qualquer coisa que gere um feed RSS funcione. Naturalmente, o plug-in está pronto para localização e recebe atualizações constantes, o que faz dele uma opção interessante para quem quer ter um lifestream a partir do WordPress.  Twitter Tools (wordpress.org/extend/plug-ins/twitter-tools/): Twitter

Tools conecta seu blog de WordPress ao Twitter e permite que você envie tweets do blog para sua conta. Uma página de configurações simples facilita ao máximo essa configuração, e você pode até mesmo controlar a forma como os tweets que envia devem ser marcados com tags ou gerenciados, a partir do seu próprio site. Isso significa que você pode ter uma categoria de apartes e enviar tudo o que é publicado para o Twitter, ou o contrário. ShareThis (wordpress.org/extend/plug-ins/share-this/): o envio de

postagens para sites de social bookmarking é popular, e essa ferramenta adiciona essa funcionalidade a todas as postagens de um site. O ShareThis é mais que um simples plug-in; trata-se de um serviço que hospeda seu formulário de envio, assim, você pode obter estatísticas e tudo o mais, bastando para isso criar uma conta. 203

PARTE III: USANDO PLUG-INS COM WORDPRESS A única coisa que deve ser lembrada aqui é que usar um elemento de terceiros significa depender da capacidade desse terceiro de fornecer os dados. Em outras palavras, se o servidor do ShareThis estiver lento ou até mesmo indisponível, parte de sua funcionalidade de compartilhamento também estará. Add to Any: Share/Bookmark/E-mail Button (wordpress.org/extend/ plugins/add-to-any/): esse plug-in integra o botão de compartilhamento hospedado AddToAny.com. Talvez você queira também dar uma olhada no botão Assinar se gostar desse serviço: wordpress.org/extend/plug-ins/add-to-any-subscribe/. Mais plug-ins sociais: Wickett Twitter Widget (wordpress.org/extend/plug-ins/wickett-

twitter-widget/) é um widget simples que mostra seus tweets. Twitter for WordPress (wordpress.org/extend/plug-ins/twitter-for-

wordpress/) é outro widget usado para exibir seus tweets. Sociable (wordpress.org/extend/plug-ins/sociable/) é um plug-in de social

bookmarking bastante popular que acrescenta links ao seu site. Tweet Old Post (wordpress.org/extend/plug-ins/tweet-old-post/) tuíta

postagens antigas aleatoriamente em intervalos configurados por você. Essa pode ser uma excelente maneira de atrair mais atenção para o conteúdo dos seus arquivos caso tenha seguidores fiéis no Twitter. Simple Social Bookmarks (wordpress.org/extend/plug-ins/simplesocial-bookmarks/) é outra opção de social bookmarking que conta com mais de 200 redes. SexyBookmarks (wordpress.org/extend/plug-ins/sexybookmarks/) é um plug-in muito popular para exibir ícones de compartilhamento social de uma forma visualmente atraente.

PLUG-INS DE ASSINATURA E DISPOSITIVOS MÓVEIS A maioria dos smartphones já possui suporte a RSS por algum tempo, e alguns modelos de telefone “comuns” mais sofisticados também contam com esse recurso. O resultado disso, naturalmente, é que agora consumimos mais e mais conteúdo através de dispositivos móveis, com versões do seu site personalizadas para o último telefone da Apple, do Google, ou qualquer que seja a última mania.  Align RSS Images (wordpress.org/extend/plug-ins/align-rss-images/):

imagens flutuantes à direita ou à esquerda podem ficar bonitas no seu site, mas para os assinantes de RSS, essa mesma imagem ficará no meio de tudo. Você poderia simplesmente abrir mão das imagens flutuantes, mas isso seria uma pena. É melhor usar o Align RSS Images para executar o parsing do código de alinhamento padrão do WordPress (que é alignleft e alignright) e substituí-lo pelos equivalentes em HTML para obter uma aparência. Não são necessárias quaisquer configurações, simplesmente instale e esqueça do assunto. RSS Footer (wordpress.org/extend/plug-ins/rss-footer/): o RSS Footer adiciona uma linha no início ou no fim de cada item do seu feed RSS. Isso significa que você pode inserir um aviso de copyright e dificultar as coisas para os ladrões de conteúdo, ou promover seu site ou outros produtos para leitores que preferem o feed ao site original. Em resumo, um plug-in muito prático e facilmente personalizável. 204

CAPÍTULO 9: PLUG-INS DE WORDPRESS ESSENCIAIS Disable RSS (wordpress.org/extend/plug-ins/disable-rss/): esse plug-in

faz exatamente o que diz fazer: desativa os feeds RSS de uma instalação de WordPress. Isso pode ser muito útil em sites estáticos onde o RSS não tem qualquer propósito. Subscribe2 (wordpress.org/extend/plug-ins/subscribe2/): o Subscribe2 é um plug-in realmente poderoso. Ele permite que seus usuários assinem suas atualizações e, portanto, recebam notificações via e-mail e de acordo com suas configurações. Talvez você queira enviar um resumo a cada postagem, diariamente ou semanalmente. Você pode também enviar um e-mail para os usuários inscritos, muito semelhante a um boletim de notícias tradicional. As configurações são relativamente fáceis de gerenciar, assim como os modelos de e-mail, para que você possa começar rapidamente. Como sempre, no momento de enviar e-mails, nem todos os serviços de hospedagem são cooperativos, por isso preste atenção e realize alguns testes para garantir que tudo esteja sendo enviado da forma que você planejou. Além disso, há sempre o risco de que sua correspondência seja taxada como spam pelos provedores de acesso à internet, por isso use esse recurso com cautela. MobilePress (wordpress.org/extend/plug-ins/mobilepress/): o MobilePress é um plug-in bacana que oferece um tema móvel no lugar do seu tema normal quando o usuário está visitando o site a partir de um dispositivo móvel. Você pode dizer ao plug-in em que casos exibir ou não o tema móvel e há até mesmo uma interface de temas semelhante à interface padrão do WordPress, para que você possa criar um tema móvel que se adapte à sua marca. Mais plug-ins móveis: WordPress Mobile Edition (wordpress.org/extend/plug-ins/wordpress-

mobile-edition/) é outro plug-in que oferece ao seu site uma interface móvel quando

o visitante usa um dispositivo móvel. WordPress Mobile Pack (wordpress.org/extend/plug-ins/wordpressmobile-pack/) é outra solução para visitantes móveis. WPtouch (wordpress.org/extend/plug-ins/wptouch/) adapta seu site a dispositivos móveis com tela de toque, como os telefones iPhone ou Android. Existe uma versão pro, caso você precise de mais do que apenas a funcionalidade básica.

PLUG-INS DE SEO E BUSCA A sigla SEO significa Otimização para Mecanismo de Busca (do inglês, “search engine optimization”), e a ideia aqui é fazer as pessoas encontrarem seu conteúdo. Por sorte, você não precisa contratar um especialista em SEO para sair na frente, pois existem plug-ins para ajudá-lo a começar.  All in One SEO Pack (wordpress.org/extend/plug-ins/all-in-one-seo-

pack/): esse plug-in acrescenta mais configurações às suas postagens, de modo a otimizá-las para mecanismos de busca. A ferramenta possui um séquito de usuários fiéis, e não há dúvidas de que ajuda, mesmo que você deixe que ela faça tudo automaticamente. No entanto, para realmente obter o máximo, você precisa fazer ajustes em cada postagem, sempre.  Google XML Sitemaps (wordpress.org/extend/plug-ins/google-sitemapgenerator/): o Google XML Sitemaps cria um mapa do site em XML para sua instalação

205

PARTE III: USANDO PLUG-INS COM WORDPRESS de WordPress e, em seguida, atualiza esse mapa sempre que você publica algo novo ou edita algo antigo. Isso ajuda os mecanismos de busca a rastrearem seu conteúdo, o que é uma coisa boa. O plug-in até mesmo tenta avisar a eles que o mapa do seu site foi atualizado. Better Search (wordpress.org/extend/plug-ins/better-search/): a funcionalidade de busca integrada ao WordPress deixa a desejar, para dizer o mínimo, e por isso muitos usuários recorrem a plug-ins ou ao Google Custom Search Engine (google.com/cse/). O Better Search tenta mudar isso com ajustes na busca, além de adicionar buscas populares e heatmaps. Uma vez que ele substitui automaticamente a busca integrada, é fácil experimentar esse plug-in. Search Unleashed (wordpress.org/extend/plug-ins/search-unleashed/): o Search Unleashed adiciona uma porção de configurações e opções à funcionalidade de busca do WordPress, como destaque de palavras-chave e mecanismos de busca expansíveis. Além disso, ele destaca buscas feitas a partir de sites como o Google, de modo que se alguém faz uma busca por "Maçãs" no Google e visita seu site a partir disso, o Search Unleashed irá destacar a palavra "Maçãs". O plug-in é localizado, e você pode até mesmo dar prioridade a diversas partes de postagens e páginas, além de obter todos aqueles shortcodes caso você precise deles. E o melhor de tudo: a ferramenta não altera o banco de dados! Vale a pena conferir, pois esse é um dos melhores plug-ins de busca disponíveis. HeadSpace2 SEO (wordpress.org/extend/plug-ins/headspace2/): um dos plug-ins de SEO mais amigáveis para o usuário se chama HeadSpace2 SEO. Ele possui páginas de configuração excelentes, e faz mais do que simplesmente ajustar os metadados e descrições. Você pode, por exemplo, fazê-lo gerenciar suas configurações de Google Analytics, o que é ótimo. Decidir se ele é melhor do que as outras opções de SEO disponíveis vai depender do que você precisa fazer, e como planeja fazê-lo, mas essa é certamente a solução mais amigável para o usuário. Robots Meta (wordpress.org/extend/plug-ins/robots-meta/): é uma boa ideia possuir um arquivo robots.txt que os mecanismos de busca possam rastrear, e o Robots Meta ajuda você a configurar um, oferecendo configurações simples de categorias e outros tipos de arquivos. Esse é um plug-in muito útil para quem entende de SEO, definitivamente.  Global Translator (wordpress.org/extend/plug-ins/global-translator/): o Global Translator adiciona marcadores ao seu site usando um widget, que permitem aos usuários traduzirem o conteúdo do site para sua língua. Isto é, se você tiver ativado o plug-in, e o mecanismo de tradução utilizado (Google Translate, Babelfish, etc.) oferecer suporte a esse plug-in. Outros recursos incluem cache e links permanentes ajustados para SEO. Mais algumas soluções: Search Everything (wordpress.org/extend/plug-ins/search-everything/)

é outro plug-in de busca com destaque de palavras-chave e parâmetros de busca altamente expansíveis. GD Press Tools (wordpress.org/extend/plug-ins/gd-press-tools/) não é para os fracos. O plug-in adiciona um bocado de personalização a tudo, desde as tags meta até campos personalizados e cron, por isso use-o com moderação. Breadcrumb Trail (wordpress.org/extend/plug-ins/breadcrumb-trail/) é um script de breadcrumb que permite a você inserir um link de breadcrumb adicionando a tag de modelo do plug-in. Ele é semelhante ao Yoast Breadcrumbs (wordpress.org/ extend/plug-ins/breadcrumbs/). 206

CAPÍTULO 9: PLUG-INS DE WORDPRESS ESSENCIAIS

PLUG-INS DE CÓDIGO E SAÍDA Existem literalmente milhares de plug-ins nessa categoria, e embora muitos deles se sobreponham, e diversos sejam relativamente inúteis, há alguns que não se enquadram em nenhuma das categorias anteriores, mas ainda assim são dignos de nota. A maioria desses diz respeito a código personalizado, ou a pequenos detalhes que podem apimentar um site, gerando uma saída de conteúdo diferente. Em outras palavras, trata-se de uma verdadeira “salada mista”. SyntaxHighlighter Evolved (wordpress.org/extend/plug-ins/syntax

highlighter/): se você às vezes precisa publicar blocos de código de programação em suas postagens ou páginas, desde HTML simples até grandes blocos de PHP, sabe que o parsing integrado causa problemas. É claro que existem pastebins e coisas do tipo, mas por que não resolver esses problemas adicionando o plug-in SyntaxHighlighter Evolved, que não apenas cuida do seu precioso código, mas também dá a ele o destaque necessário? Além disso, ele permite aplicar estilos, para que você possa fazer as caixas de código se ajustarem ao seu conteúdo. Excelente. Há diversos outros plug-ins que realizam tarefas semelhantes, mas esse sempre cumpre com o que promete. Blog Time (coffee2code.com/wp-plug-ins/blog-time/): o Blog Time gera

uma saída de horário do servidor em modo timestamp, seja através de um widget ou através da tag de modelo personalizada blog_time(). Não se trata de um relógio, e sim de um timestamp, o que pode ser muito útil às vezes. WP-Cumulus (wordpress.org/extend/plug-ins/wp-cumulus/): cansada da

sua nuvem de tags em 2D? Obtenha uma nuvem em 3D com WP-Cumulus e sua versão rotativa, em Flash, da nuvem de tags. Atraente e divertido, sem dúvida, mas eu não recomendaria o uso dessa ferramenta como navegação principal. wp-Typography (wordpress.org/extend/plug-ins/wp-typography/): o

plug-in wp-Typography melhora sua tipografia, ou seja, ele conserta coisas como valores de unidade sem quebra de linha, oferece blocos de citação mais atraentes, travessões e coisas do tipo. Widget Logic (wordpress.org/extend/plug-ins/widget-logic/): esse

plug-in é tão simples quanto brilhante. Ele adiciona um pequeno campo a cada widget, e esse campo aceita conditional tags. Isso significa que você pode adicionar verificações como is_single() a qualquer widget, o que realmente simplifica a criação de um site dinâmico. WP Super Cache (wordpress.org/extend/plug-ins/wp-super-cache/): esse

é um plug-in obrigatório para qualquer site de WordPress que recebe bastante tráfego, mas não quer investir em hardware. Ele permite que você crie um cache de seu site, o que significa que ele oferecerá arquivos estáticos ao invés de enviar consultas ao banco de dados o tempo inteiro. Se você planeja chegar à página inicial do Digg com seu blog de tecnologia, mas seu serviço de hospedagem é limitado, WP Super Cache vai manter você on-line. É um plug-in obrigatório, e oferece melhor manutenção que seu predecessor, WP-Cache. A única ressalva quanto ao WP Super Cache é o fato de que ele cria um cache também para saída dinâmica, ou seja, seus comentários mais recentes podem já não ser os mais recentes. Você pode controlar isso determinando o que deve ou não ser armazenado no cache. Outra excelente alternativa ao WP Super Cache é o W3 Total Cache (wordpress.org/ extend/plug-ins/w3-total-cache/). Experimente os dois para ver qual funciona melhor para sua instalação. 207

PARTE III: USANDO PLUG-INS COM WORDPRESS  Query Posts (wordpress.org/extend/plug-ins/query-posts/): Query Posts é

um widget muito bacana que permite a você construir seu próprio loop de WordPress na barra lateral, sem precisar entender de PHP! Isso pode ser um jeito muito útil de obter uma saída personalizada na barra lateral ou em qualquer outra área para widgets. Ele se integra muito bem ao plug-in Get the Image (wordpress.org/extend/plug-ins/getthe-image/), que permite que você obtenha uma imagem a partir do conteúdo da postagem, um campo personalizado ou até mesmo um anexo. Mais plug-ins simples e adoráveis: WP-DBManager (wordpress.org/extend/plug-ins/wp-dbmanager/) ajuda

você a manter seu banco de dados na velocidade máxima, com reparos e solução de backup. Exec-PHP (wordpress.org/extend/plug-ins/exec-php/) permite que você execute código PHP em postagens, Páginas e widgets de texto. Certifique-se de não deixar essa ferramenta na mão de alguém que não sabe o que está fazendo, sem supervisão. WP-PageNavi (wordpress.org/extend/plug-ins/wp-pagenavi/) aprimora o recurso de navegação em páginas. Ele inclui diversas configurações de estilo, mas você precisa adicionar a tag de modelo do plug-in aos arquivos do tema para que ele funcione.

UMA ÚLTIMA RESSALVA: VOCÊ REALMENTE PRECISA DAQUELE PLUG-IN? É fácil se empolgar com os plug-ins e funcionalidades adicionais em geral quando se trabalha com WordPress. Há tantas opções disponíveis para serem adicionadas, tantas possibilidades, e, agora que a instalação do plug-in está a um clique de distância e que você pode fazer isso a partir da interface de admin, é ainda mais difícil resistir. Mas você precisa resistir. A cada recurso e plug-in que adiciona, sua instalação fica um pouco mais inchada. Os plug-ins realmente podem tornar seu site mais lento. Não são apenas os arquivos inofensivos na pasta de plug-ins; o problema é o que eles fazem com seu banco de dados e o número de solicitações de acesso e consultas adicionais que é gerado quando estão sendo executados. Não me entenda mal, os plug-ins são ótimos. Alguns dos sites de WordPress mais bacanas não existiriam se não fosse pelos plug-ins, e a natureza expansiva da plataforma é uma das razões que a torna tão poderosa e amplamente utilizada. O fato é que há um capítulo inteiro falando sobre os plug-ins que você deve conferir, e é fácil se deixar levar pelas promessas sedutoras do que eles são capazes de fazer. Só peço a você que não exagere. Use os plug-ins quando precisar deles, mas mantenha seu site o mais simples e limpo possível.

208

IV PARTE

IV

RECURSOS E FUNCIONALIDADES ADICIONAIS Chapter 10: WordPress como CMS Chapter 11: Integrando a Web Social Chapter 12: Truques de Design Chapter 13: Diversão com Imagens Chapter 14: Funcionalidades Adicionais Chapter 15: Utilizações Incomuns do WordPress

10

WORDPRESS COMO CMS

CMS É A ABREVIATURA de content management system (sistema de gerenciamento de conteúdo) – ou seja, trata-se de uma forma de gerenciar conteúdo. Você usa um CMS para escrever, editar e gerenciar seu trabalho on-line, geralmente armazenando o conteúdo em um banco de dados ou em arquivos. Isso é bem mais conveniente do que editar arquivos ou atualizar diretamente o banco de dados, que é a forma como a Web costumava ser gerenciada.

Embora o WordPress tenha começado sua vida como uma plataforma para publicação de blogs, ao longo do tempo acabou se tornando um CMS poderoso e versátil. Este capítulo fala sobre os desafios que você enfrenta e sobre as decisões que precisa tomar quando quer usar o WordPress como um CMS mais tradicional, usando o sistema para gerenciar outros tipos de sites, que não blogs. Não apenas é possível usar o WordPress dessa forma, mas trata-se também de uma solução excelente, que economiza tempo e dinheiro.

CAPÍTULO 10

SMASHING WORDPRESS

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

O WORDPRESS É SUA MELHOR OPÇÃO DE CMS? A esta altura, você já entendeu que o WordPress é útil para muito mais do que simplesmente publicar blogs (caso não tenha entendido, aguarde o Capítulo 15). Basicamente, você pode fazer qualquer coisa que envolva o gerenciamento de conteúdo de texto escrito, além de outras mídias, como imagens, áudio e vídeo. Muitas vezes, digo a editores de jornais e revistas que não existe um site de jornal ou revista que eu não seria capaz de reconstruir em WordPress. Esses sites são geralmente criados com sistemas licenciados caríssimos e, embora há alguns anos era improvável que alguém dissesse algo do tipo, hoje, essa premissa é levada a sério. Organizações editoriais de grande porte já estão usando o WordPress com sucesso em seus blogs editoriais coletivos, e outras estão usando o sistema para criar seções de opinião. É importante escolher o CMS certo, uma vez que seu sistema deve ser o melhor no que você quer fazer. O WordPress é a melhor opção se você quer um CMS com as seguintes características: Código aberto e gratuito Rápido e fácil de usar Facilmente expansível Conveniente para design e desenvolvimento de plug-ins Excelente para textos Amigável para os mecanismos de busca Relativamente bom para imagens

Basicamente, se você possui um site editorial cujo conteúdo é essencialmente de texto, o WordPress é uma escolha segura. (Embora, como a celebridade do WordPress Matt Mullenweg mostrou em http://ma.tt, o WordPress também seja capaz de lidar com sites baseados em imagens.) Então, quando você deveria considerar uma alternativa ao WordPress? Os argumentos em favor das potenciais vantagens de outros CMSs incluem: Recursos da comunidade: anteriormente, outros sistemas ofereciam um acesso melhor a

recursos da comunidade, como fóruns, mas com o lançamento do BuddyPress (http://

buddypress.org) e a fácil integração com software de fórum como bbPress (http://bbpress.org), essa deficiência já foi superada. Estrutura modular: alguns

dos CMSs mais pesados (como o Drupal) têm estrutura mais modular, ou seja, você pode criar essencialmente qualquer coisa que quiser, quando quiser. Isso geralmente compromete a usabilidade, por isso você precisa comparar os recursos e o fluxo de trabalho antes de decidir que caminho seguir. Suporte ao produto: outra crítica comum contra as alterativas de CMS de código aberto, como o WordPress, é o fato de que os produtos comerciais oferecem suporte incluído, de modo que vale a pena pagar pelo CMS. O contra-argumento a isso é o fato de que os recursos investidos no licenciamento poderiam ser gastos em um consultor e/ou desenvolvedor quando necessário, e não simplesmente representar um rombo nos cofres. Você pode usar o dinheiro das licenças para construir suas adaptações, caso não encontre uma solução já disponível. E, afinal de contas, tudo isso é gratuito.

212

CAPÍTULO 10: WORDPRESS COMO CMS O WordPress é uma excelente solução de CMS, especialmente se você estiver construindo um site editorial. Não importa se você acredita ou não que ele é adequado para o seu projeto, é sempre uma boa ideia começar pensando no que você realmente precisa. A partir disso, encontre o CMS ideal e pense em como você pode usá-lo para esse projeto específico.

CHECKLIST DE WORDPRESS COMO CMS Então você está pensando em usar o WordPress como CMS para um projeto? Nessas horas, a checklist a seguir pode ser muito útil. Você precisa pensar sobre essas questões antes, para evitar surpresas desagradáveis durante o projeto. Primeiras perguntas Você realmente precisa de um CMS para esse projeto? Às vezes, a melhor alternativa é mesmo alterar o HTML. O WordPress é o CMS certo para o seu projeto? Embora ele seja ótimo, podem haver soluções mais adequadas às suas necessidades. Interface de admin do WordPress De que funcionalidades adicionais você precisa na interface de admin? Você deve usar plug-ins para reduzir a funcionalidade? A interface de admin pode ser um pouco demais para usuários menos experientes. Se você pretende disponibilizar arquivos de usuário, pense com calma nos nomes de usuário que dará a todos os envolvidos. Você precisa de recursos para o menu de edição e de fundos e cabeçalhos personalizados?  Há algum problema no fato de a marca WordPress aparecer na interface de admin? Caso sim, você vai precisar aplicar algum estilo novo à interface, e não esqueça do formulário de login. Categorias e tags Qual é a sua estratégia para categorias e tags? Você precisa de taxonomias adicionais, como grupos de tags separados ou categorias hierárquicas, para fazer o site funcionar? Que categorias você deve incluir? Você precisa de código personalizado para as categorias e/ou modelos? Como as tags devem ser usadas, e como você educará os usuários na prática escolhida? Páginas e postagens Você precisa de campos personalizados? Você precisa criar modelos de página para gerenciar as tarefas em seu site? Caso sim, certifique-se de criar essas páginas desde o início. Como as páginas devem se relacionar entre si? Quais páginas devem ser de primeiro nível, e quais devem ser subpáginas? Certifique-se de que você conhece bem a hierarquia e a forma de apresentação das diversas seções. Como você vai apresentar as postagens? Elas precisam de algum tratamento especial para se ajustarem? Você vai usar os novos Formatos de Postagem para obter formatação personalizada para as postagens?

213

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS Você precisa de tipos de conteúdo adicionais, separados das postagens e páginas? Nesse

caso, certifique-se de ter um planejamento para seus post types personalizados. estática, as últimas atualizações de notícias ou algo diferente?

O que aparecerá na página inicial? Uma página

Considerações adicionais Decida logo de início qual será sua estrutura de links permanentes e seja consistente. Você talvez precise de plug-ins para ajustar a estrutura da forma desejada. Você precisa de shortcode específico para acelerar a publicação e evitar código HTML desnecessário nas postagens (ver seção “Shortcodes Personalizados” mais adiante, neste capítulo, para obter mais informações)? Você precisa de qualquer recurso que não esteja incluído no WordPress? Você pode usar plug-ins para obter a funcionalidade necessária? Esses plug-ins causarão problemas durante futuras atualizações? Caso seu projeto exija localização, os recursos de idioma necessários estão disponíveis? Há muitos arquivos de idiomas para WordPress, mas e quanto aos temas e plug-ins? Você precisará de mais trabalho nesse quesito?

ENXUGANDO O WORDPRESS AO MÁXIMO Quando você trabalha para clientes ou outras pessoas dentro de sua organização, precisa pensar de forma um pouco diferente do que pensaria se o usuário principal fosse você mesmo. Lembre-se de que você é um usuário avançado, mas nem todo mundo pode dizer o mesmo. Por isso é que você precisa enxugar ao máximo o WordPress, garantindo que não haja opções demais, que acabarão confundindo o usuário. A primeira e mais importante “enxugada” que você pode fazer é limitar os privilégios de usuário. Conforme mencionado na discussão sobre segurança do Capítulo 1, nem todos os usuários precisam de contas com plenos direitos de admin. Na maior parte do tempo, uma conta de Editor é o suficiente e, às vezes, pode ser uma boa ideia usar algo abaixo disso. Para cada degrau abaixo na escala de nível de usuário, haverá menos opções exibidas para o usuário, o que é uma coisa boa. Não é preciso dizer que você deve certificar-se de que não haja plug-ins desnecessários ativados, uma vez que, além de potencialmente tornarem o site mais lento, eles ainda poluem a interface de admin com páginas de opções e elementos relacionados. Por isso, prime pela limpeza.

AJUSTANDO A INTERFACE DE ADMIN Você pode alinhar a aparência da interface de admin de acordo com suas necessidades usando um dos plug-ins de CMS disponíveis. Há diversos deles, mas uma boa opção é o WP-CMS Post Control (http://wordpress.org/extend/plugins/wp-cms-postcontrol/). Com esse plug-in, você pode ocultar os elementos denecessários para os usuários, desativar a função de salvamento automático (que pode ser um inconveniente), controlar qual o uploader de imagens a ser utilizado e diversas outras coisas. Isso pode realmente tornar a interface do usuário mais fácil e menos intimidante para novos usuários. 214

CAPÍTULO 10: WORDPRESS COMO CMS Eu gosto especialmente da opção de caixa de mensagem, que pode conter informações para o usuário, com explicações sobre como proceder e links para ajuda. Há também diversos plug-ins que permitem ocultar partes da interface de admin. Eles podem ser uma boa opção se você ficar responsável por alimentar um site em sua empresa, ou para um cliente, a longo prazo. Mas tome cuidado, caso se trate de um projeto de curta duração. Como você sabe, há novas versões de WordPress surgindo a todo instante e isso significa que os plug-ins podem parar de funcionar, ou precisar de atualizações. Embora isso seja relativamente fácil de fazer, no WordPress, isso significa também que você precisa educar o cliente sobre como fazê-lo caso não esteja fornecendo suporte permanente. Ainda assim, usar o WordPress como CMS faz bem mais sentido se você ocultar as coisas de que não precisa. A concorrência pode não estar fazendo isso, mas se você estiver usando o WordPress para rodar um site corporativo semiestático, é definitivamente uma boa ideia remover tudo aquilo que os usuários não precisam ver. Apenas certifique-se de pensar em uma solução para as atualizações quando elas surgirem.

SEU PRÓPRIO TEMA DE ADMIN Você sabia que pode criar seu próprio tema de admin para o WordPress? Infelizmente, ele não chega aos pés dos temas tradicionais, mas ainda assim você pode mudar a aparência e atmosfera geral da interface, e isso pode ser importante. Você pode modificar o arquivo wp-admin.css, na pasta wp-admin, que abriga todo o estilo de admin, mas uma solução mais limpa e à prova de atualizações é criar seu próprio tema de admin para o WordPress, como plug-in. Na verdade, isso é bem simples de fazer. Você usa o gancho de ação admin_head() para anexar sua própria folha de estilo e, então, simplesmente substitui as coisas que você não quer em wp-admin.css. Você vai reconher este trecho: '; } add_action('admin_head', 'smashing_admin'); ?>

215

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS A primeira parte é obviamente o cabeçalho (header) de plug-in que você já conhece bem, e avisa ao WordPress que trata-se de um plug-in, que portanto deve ser exibido na página de plug-ins. Estou chamando este tema de admin de Smashing Admin Theme, por isso faz sentido que a função tenha o nome smashing_admin(). Você colocará o plug-in em sua própria pasta, que os usuários irão colar em wp-content/plug-ins/, assim, primeiramente você carrega a variável $url com o valor de siteurl, usando get_ settings(). Em seguida, você atualiza a variável usando o valor de siteurl e o caminho de sua própria folha de estilo wp-admin.css, dentro da pasta do plug-in smashing-admin (precisamente, /wp-content/plug-ins/smashing-admin/wp-admin.css). Por fim, você executa echo. Para obter o link da folha de estilo com echo dentro do admin, basta usar add_action() para anexar a função smashing_admin() ao gancho de ação admin_head. Pronto, agora você tem uma folha de estilo carregada no admin. Agora só falta decompor o wp-admin.css original, alterando o que você quiser. Simplesmente, edite sua folha de estilo wp-admin.css na pasta do plug-in. Você também pode adicionar conteúdo à parte superior ou inferior do admin do WordPress. Para isso, simplesmente use add_action() e anexe-o a admin_head ou admin_footer, e você terá todo o controle de que precisa. E quanto à tela de login? Você também pode modificar esse tema, mas a solução mais fácil é usar um dos inúmeros plug-ins disponíveis. Consulte a lista de plug-ins de admin no Capítulo 9 para ter acesso a mais possibilidades.

“DESBLOGANDO” O WORDPRESS Grande parte da funcionalidade integrada ao WordPress pode ser excessiva se você estiver utilizando a plataforma como CMS para rodar sites simples. Um site corporativo, construído sobre páginas estáticas que contêm informações sobre produtos, pode não precisar de comentários ou trackbacks, e o único tipo de conteúdo fluido talvez seja uma seção de notícias ou clipagem. Faz muito sentido se livrar desse excesso; algumas funcionalidades simplesmente não são necessárias, assim como o jargão dos blogs. Por isso, quando estiver construindo o tipo de site que simplesmente não precisa de toda aquela pompa e funcionalidade, você não deve incluir tudo isso em seu tema. As seções seguintes descrevem algumas das mudanças que você deve fazer quando usa o WordPress como CMS para um site que não é um blog.

Arquivos de modelo Você pode optar por usar um único arquivo de modelo, index.php, para todas as suas necessidades de listagem e busca, mas, se quiser, pode decompor esse arquivo em diversos modelos. Se você não precisa da funcionalidade de comentários, comments.php é completamente desnecessário. Modelos de página, por outro lado, são muito úteis, e sem usar pelo menos um desses, você provavelmente vai acabar com uma página inicial estática. Além disso, lembre-se de remover todas as chamadas get_comments() dos arquivos de modelo. E, sim, você poderia simplesmente declarar que não vai aceitar comentários no admin, mas isso significaria mudar a saída “Comments are closed” em comments.php, e isso teria uma aparência péssima. Por isso, é melhor simplesmente remover get_comments() de qualquer template tags onde essa chamada não seja necessária. 216

CAPÍTULO 10: WORDPRESS COMO CMS Jargão Há um volume considerável de jargão integrado, por padrão, ao WordPress; os termos para “categorias” e “tags”, por exemplo, aparecem nos links permanentes. Você pode mudar isso no nível da URL, alterando as configurações de link permanente. Talvez você prefira usar uma palavra como “notícias” ou “atualizações” ou quem sabe “visualizar” ou “tópico”, em vez do padrão “tag”. Na verdade, uma boa forma de criar um site corporativo estático é usar Páginas para todo o tipo de conteúdo sério, como informações sobre a empresa e descrições de produtos, e usar uma única categoria, de nome Notícias e slug noticias, para novas postagens. Assim, você pode configurar seus links permanentes de modo que /noticias/ apareça nas listagens de categoria, ou, nesse caso, na seção Notícias, e então você permite que todas as postagens (que obviamente são itens de notícias) obtenham o link permanente /noticias/ slug-da-postagem/, aplicando a estrutura de link permanente /%category%/%postname%/ nas configurações. Isso é bastante útil, e não requer que você construa uma seção de notícias ou qualquer coisa do tipo. No entanto, caso o conteúdo consista em mais que uma única seção de notícias, você vai precisar de mais controle e, nesse caso, uma boa solução é usar modelos de página com listagens das últimas postagens da categoria em questão, em vez de simplesmente incluir links para os arquivos da categoria. Para fazer isso, você criaria uma página por seção e teria um modelo de página para cada uma dessas seções. Cada modelo de página conteria um loop personalizado que retorna as postagens necessárias. No fim das contas, o que importa é o que você precisa e o quão flexível quer que o site seja. Isso inevitavelmente leva ao que você pode fazer com Páginas estáticas e como algo que costumava ser uma postagem de blog pode satisfazer as necessidades de um site mais tradicional.

A COMBINAÇÃO PERFEITA PARA UM SITE ESTÁTICO SIMPLES O uso de páginas estáticas e categorias como modelo de notícias é uma excelente ferramenta sempre que você precisa criar rapidamente um site tipicamente da “velha-guarda”. Pode ser uma apresentação de produto, um site corporativo, ou algo totalmente diferente, que simplesmente não funciona dentro do formato de blog. Nesses casos, essa combinação é muito útil. As Páginas (WordPress Pages) foram originalmente criadas para serem usadas com conteúdo estático. O fato de você poder criar um modelo de página (lembre-se de que os arquivos de modelo para páginas são individuais) para cada página se quiser significa que elas podem ter qualquer aparência. Você pode romper completamente com o design, uma vez que não precisa sequer usar o mesmo arquivo de cabeçalho ou rodapé, e pode ter marcações diferentes, além de excluir qualquer coisa relacionada ao WordPress e exibir algo totalmente diferente no lugar disso se quiser. Essa é uma ferramenta poderosa que pode, com a mesma facilidade, conter múltiplos loops ou conteúdo RSS sindicado de outros sites. Cada modelo de página é uma “página em branco”, e essa é sua principal arma na hora de usar o WordPress como CMS; é assim que você pode distanciar o site da tradição de blogs que é característica do sistema. E nem me fale na página inicial! Uma vez que você pode configurar o WordPress para exibir uma página estática como página inicial (em Settings, na interface de admin) e escolher qualquer outra página (lembre-se de manter essa página vazia) para suas listagens de

217

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS postagens, caso precise delas, tudo é possível. Você pode até mesmo incluir uma daquelas animações de pré-carregamento em Flash, com reprodução automática de áudio (mas eu não faria isso, se fosse você). A questão toda é que o modelo de página, assim como a configuração de página inicial, é uma “página em branco”, tanto quanto um novo arquivo PHP ou HTML seria fora do WordPress, mas com todos os benefícios do sistema! Do outro lado, temos as postagens de blog tradicionais. Essas postagens precisam ser atribuídas a uma categoria, e todas elas devem se parecer, visualmente. É claro que, se quiser, você pode brincar com as postagens também, mas é mais recomendável fazer isso em Páginas semiestáticas. Naturalmente, tudo isso muda se você for gerenciar um grande volume de conteúdo, mas, em geral, esse não é o caso, em se falando de “WordPress como CMS”. Páginas para conteúdo estático, postagens para conteúdo do tipo notícia. Esse é um ótimo modelo para a maioria dos sites corporativos que usam o WordPress como CMS, com Páginas para todas as descrições de produtos e postagens para notícias, anúncios e clipagens de imprensa. Partindo do princípio de que o design já está solucionado, eu adoto o seguinte processo: 1. Decido o que vai ser uma Página e o que não vai. Geralmente, tudo, exceto notícias e anúncios, acaba sendo uma Página. Crio as Páginas e garanto que elas obtenham o slug certo. Isso envolve garantir que a estrutura básica de links permanentes esteja lá, ou seja, vou garantir uma boa aparência para as URLs de categorias e postagens. Há boas chances de que eu vá usar um plug-in para obter maior controle sobre isso, mas tudo depende das necessidades do site. 2. Começo criando os modelos de Páginas. Há boas chances de que a página de perfil da empresa tenha necessidades de design diferentes das páginas de produtos, de modo que posso querer enfatizar diferentes elementos e desenvolver qualquer submenu e caixa de informação de forma que sejam compatíveis com o estilo. 3. Em seguida, crio as categorias necessárias, uma para cada seção de conteúdo do tipo notícia. Em geral, isso consiste em apenas uma categoria, que pode se chamar Notícias ou Anúncios, mas às vezes preciso das duas, ou ainda mais. Em alguns casos, realmente quero apenas uma única categoria – Anúncios, por exemplo – e então opto por classificá-la internamente usando tags, uma para Notícias, outra para Releases de Imprensa, outra para Produtos e outra para Anúncios, etc. Naturalmente, preciso garantir que as listagens de categoria, assim como a visualização de postagens individuais, tenham uma boa aparência. 4. Para juntar tudo isso, crio um menu (usando o recurso de menu para oferecer maior flexibilidade ao cliente, mas tendo a populá-lo, eu mesmo, para dar uma ajudinha a eles), e as categorias envolvidas. É isso, esses são os elementos de um site estático simples, usando o WordPress como CMS. Você pode levar esse conceito até onde quiser, na verdade, uma vez que estamos usando o WordPress, uma plataforma que permite que você desenvolva o que quiser sobre ela.

218

CAPÍTULO 10: WORDPRESS COMO CMS

FAZENDO MAIS QUE O BÁSICO Às vezes, você precisa mais do que o site estático que acabo de descrever. Por exemplo, você talvez precise adicionar post types extras, ou quem sabe precise de uma listagem de produtos, e precisa criar um post type personalizado, com suas próprias taxonomias e tudo o mais. Alguns sites evidentemente precisam de mais atenção: quanto mais avançado o site, maior o número de ajustes e adaptações que você precisará fazer. Às vezes, isso significa que você precisará programar loops personalizados ou usar modelos de página, e em outros casos pode significar que você vai querer mais flexibilidade sem precisar mexer no código para qualquer atualização. É aí que os widgets entram em ação, não apenas porque muitos recursos bacanas são plug-ins prontos para receber widgets, mas também porque os widgets oferecem uma funcionalidade de arrastar/soltar que os usuários não especializados vão adorar. As seções a seguir discutem como você pode adicionar esse tipo de funcionalidade a uma instalação de WordPress como CMS, sem ter muito trabalho.

UTILIDADES PARA POST TYPES PERSONALIZADOS E TAXONOMIAS EM UM CMS DE WORDPRESS Os post types personalizados são a melhor coisa a acontecer no WordPress desde a invenção das tags. Já falei dessa técnica no Capítulo 6, por isso esta seção se dedica principalmente às formas de usar esse recurso para obter o melhor resultado possível usando o WordPress como CMS. Muitas vezes, há grandes benefícios em poder brincar com mais do que simples postagens e páginas. Graças aos post types personalizados, você pode criar o tipo de conteúdo que quiser, em termos de postagens e páginas, sem precisar misturá-lo a suas postagens e páginas. Alguns exemplos dessa utilidade: Produtos. Crie um post type chamado Produtos e faça as postagens desse tipo serem

produtos, com suas descrições, tags e tudo o mais. Pessoas. Por que não criar um diretório de pessoas, com uma postagem para cada pessoa,

nesse post type? Portfólio. Talvez você tenha uma seção de portfólio em seu site, dentro de uma categoria. Isso não é mais necessário; se você quiser separar esse conteúdo do fluxo de conteúdo restante, basta criar um post type! Manual. Precisa criar um manual estático? Não é mais preciso misturá-lo às suas Páginas; simplesmente crie um novo post type para manter o manual separado. A lista de utilidades para esse recurso é imensa. A melhor coisa é que seus post types personalizados ganham seu próprio menu dedicado, à esquerda da interface de admin do WordPress, assim como as postagens ou Páginas. Isso facilita muito para que o usuário final encontre e use o recurso, em comparação a outras soluções que oferecem campos personalizados ou métodos semelhantes. A mesma vantagem se aplica às taxonomias personalizadas, das quais também já falamos. Com elas, você pode ter um grupo de tags separado para classificar adequadamente seus produtos, por exemplo. Essa é uma excelente forma de ter mais controle sobre a forma como 219

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS as coisas são classificadas e encontradas em seu site. O WordPress oferece um ótimo mix de ferramentas padrão, como postagens e Páginas, além das categorias e tags, pra não falar de tudo que você mesmo pode criar, como post types personalizados e taxonomias adicionais. Com tantas possibilidades, é preciso pensar um pouco para encontrar o conjunto de ferramentas certo, mas o investimento vale a pena.

USANDO O MELHOR DOS WIDGETS EM UM CMS Os widgets e as áreas para widgets são aliados quando se usa o WordPress como CMS. Eles podem não ser tão importantes para os pequenos sites estáticos de que falamos até aqui, mas podem ser muito úteis em sites maiores. Se você procurar um pouco na Web, vai encontrar inúmeros sites que oferecem funcionalidade mista, sobretudo na página inicial, e exibem imagens de teaser quando adequado. Você pode fazer muitas dessas coisas usando widgets.

Usando áreas básicas para widgets A utilidade mais direta é “entupir” seu site de áreas para widget nos locais onde quiser, de repente, exibir alguma coisa; apenas certifique-se de que a área não exiba nada por padrão, de modo que permaneça invisível (sem conteúdo algum) sempre que não houver sido populada por algum widget. No entanto, uma prática melhor é planejar bem suas áreas para widgets, e posicioná-las onde você sabe que vai precisar delas, e não onde você acha que pode precisar daqui a dois anos. Afinal, até lá seu site já vai ter um novo design. Então, digamos que você já planejou suas áreas para widgets. E agora, como usá-las? Além da resposta óbvia, que é arrastar e soltar os widgets na página Appearance → Themes da interface de admin do WordPress, você pode adicionar widgets para fazer tudo o que precisa. Os widgets incluídos no WordPress são simples e relativamente primitivos; o widget Pages (que lista suas Páginas) sequer permite que você exiba somente as páginas – ele força você a usar um título h2, o que talvez você não queira. O que você quer é ter controle sobre a forma como o conteúdo é exibido, por isso, se optar por essa rota, não deixe de dar uma olhada nos inúmeros plug-ins disponíveis que oferecem suporte a widgets; diversos deles listam somente as páginas, sem adicionar aquele título h2, por exemplo. O widget mais útil é, sem dúvida, o de texto. Ele aceita código HTML, ou seja, é facílimo incluir texto e imagens. Isso é bom, sobretudo porque se você quiser destacar aquela promoção especial (ou turbinar sua página no Facebook) logo abaixo do menu, no cabeçalho, pode simplesmente colocar o código HTML necessário em um widget de texto e soltá-lo ali pela duração da campanha, e depois basta removê-lo para que a área desapareça até que você adicione algum conteúdo novo. Há outros excelentes plug-ins no Capítulo 9 que podem ajudar você.

Deixando os widgets um pouco mais dinâmicos Por que não simplesmente inserir áreas para widgets vazias nos locais onde os diversos elementos do site poderiam ser posicionados? Isso certamente resolve o problema, mas você vai precisar amontoá-las onde quer que caibam, e levar em conta o restante do design e do conteúdo. De qualquer forma, você vai precisar fazer isso, mas há uma alternativa: substituir partes do conteúdo por uma área para widgets.

220

CAPÍTULO 10: WORDPRESS COMO CMS Se você estiver rodando um site ao estilo revista, pode ter uma oportunidade de usar uma das assim chamadas barreiras (do inglês, “roadblocks”), anúncios que ocupam um lugar maior no site do que os banners e painéis comuns. As barreiras, em geral, são veiculadas por um período de tempo menor e pagam muito mais do que os anúncios comuns. Ou então adote outra abordagem: digamos que você seja um blogueiro escrevendo sobre a Apple e queira cobrir a Apple WWDC ou o MacWorld em tempo real, para garantir que seus leitores não percam nada. Como fazer isso? É só encher o site de gráficos promocionais! Ambos os exemplos tipicamente funcionarão mal se você simplesmente adicionar conteúdo às áreas para widgets posicionadas ao redor dos elementos normais do site. No entanto, eles funcionam perfeitamente se você substituir partes do conteúdo do site (qualquer elemento) por uma área para widgets. Esse é um efeito bem fácil de obter, graças ao fato de que as áreas para widgets podem ser pré-carregadas com conteúdo. O código a seguir se refere a uma área para widgets chamada Teaser, e deve ser pré-carregado com o conteúdo que você quer exibir naquele local específico diariamente. [Aqui iria o conteúdo normal. Links, manchetes, o que for. . . ]

Simplesmente coloque algo ali; pode ser qualquer coisa. Uma seção de manchetes, uma enquete, listas de leituras obrigatórias, loops, links, imagens – você é quem manda. Qualquer coisa. Porém, quando você soltar um widget na área para widgets Teaser dentro da interface de admin do WordPress o conteúdo padrão não será exibido; ele será substituído pelo widget que você soltou ali, graças à verificação is_active_sidebar(). Por isso, se você soltar ali um widget de texto com sua enorme imagem sobre o evento da Apple, ou seu novo e-book, ou o que for, o conteúdo original será substituído. Quando você remover a imagem da área para widgets Teaser, o conteúdo padrão irá voltar, por padrão. Não é ótimo? E, além disso, a manutenção desse método também é bastante simples. Se algo der errado, você pode simplesmente remover o widget que colocou ali e reverter para o padrão. Outra grande utilidade dos widgets são os menus de navegação que garantem que os usuários possam adicionar itens de menu sozinhos, sem precisar de suporte do designer do tema.

GERENCIANDO MENUS Os menus devem ter boa aparência e fácil manutenção, e isso se aplica a virtualmente qualquer site. Quando você está usando WordPress como CMS, isso é ainda mais importante. Graças ao excelente recurso de menu do WordPress, discutido no Capítulo 6, é fácil criar os tipos de menu que você precisa. Dada sua importância, é uma boa ideia planejar com cuidado seus menus. Essencialmente, há duas formas de criar menus. A primeira é com a área de menu, que usa wp_nav_menu() para exibir uma área de menu predeterminada. Usar wp_nav_menu() limita você a menus, em comparação à segunda solução, que são as áreas para widgets, mas, por outro lado, permite que você nomeie adequadamente a área de menu. Isso torna mais fácil trabalhar com o menu, sob a perspectiva do usuário final. 221

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS A segunda forma de adicionar menus é usando áreas para widgets. Você pode usar o widget de menu para inserir qualquer menu criado onde quer que você solte o widget. Isso pode ser bastante útil, às vezes, mas oferece menos controle do que a solução alternativa. De qualquer forma, o mais importante é que você utilize o recurso menu, uma vez que isso facilita muito para o administrador do site alterar o(s) menu(s) do site. Se o recurso de menus estiver ativado em seu tema, você pode acessá-lo em Appearance → Menu, como mostra a Figura 10-1.

Figura 10-1: Interface de Menu

SHORTCODES PERSONALIZADOS Um shortcode é um código de tag que você pode inserir em suas postagens para gerar uma saída específica. A tag [gallery] é um shortcode. Você pode criar seu próprio shortcode, o que pode ser útil quando se usa WordPress, especialmente se você estiver fazendo algo que não um blog.

ADICIONANDO SHORTCODE COM FUNCTIONS.PHP Você pode adicionar funcionalidade com shortcode por meio de um plug-in ou usando functions.php. O exemplo a seguir usa o functions.php para adicionar shortcode. 1. Comece criando uma tag de shortcode simples que gere um texto simples; mais tarde você vai fazer coisas mais interessantes. 2. Em seguida, você precisa de uma função para fazer o que você quer, que naturalmente deve ser escrita dentro das tags PHP em functions.php. 222

CAPÍTULO 10: WORDPRESS COMO CMS Function text_example() { return 'Olha só, este texto acaba de ser gerado usando a tag de shortcode que você criou! Muito legal.'; }

3. Agora você precisa atribuir text_example() a um shortcode. Para fazer isso, use a função add_shortcode(): add_shortcode('textftw', 'text_example');

Isso cria o shortcode [textftw] e carrega-o junto com o conteúdo da função text_ example(). Assim, [textftw] no seu blog vai gerar, dentro de sua postagem, “Olha

só, este texto acaba de ser gerado usando a tag de shortcode que você acaba de criar! Muito legal.” Nada de muito complicado. Agora, vamos usar isso para fazer algo útil, como criar um shortcode para promover seu feed RSS.

4. Começando pela função, agora você vai usá-la para gerar também um pouco de HTML, o que lhe dá controle sobre a forma como a promoção aparece. function rss_promotion() { return '
Fique por dentro de tudo - assine o feed RSS!
'; }

5. Em seguida, você precisa criar o shortcode, e adicionar o conteúdo da função rss_ promotion() a ele: add_shortcode('rsspromo', 'rss_promotion');

6. Agora, você tem o shortcode [rsspromo] que gera o container div a partir da função rss_promotion(). Tudo o que você precisa fazer para encerrar isso é acrescentar alguns estilos à folha de estilo style.css. Pode ser algo como: div.rsspromo { background: #eee; Border: 1px solid #bbb; color: #444; font-size: 16px; font-style: italic; } div.rsspromo a { font-weight:bold; font-style:normal; }

Você pode usar o estilo que se adaptar melhor ao seu design. Agora, você pode adicionar uma caixa de promoção de RSS em qualquer lugar que quiser, usando o shortcode [rsspromo]. Outra ideia que usa a mesma abordagem seria a de adicionar formulários de inscrição por e-mail. E por que não carregar uma função com seu código de anúncio padrão? Assim, você pode facilmente alterá-lo, caso você consiga um negócio/volume de cliques melhor em outro lugar.

223

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS DESTACANDO TEXTO COM CITAÇÕES O próximo exemplo destaca a funcionalidade de citação. Ela adiciona o shortcode [pull], que aceita um atributo: float. Eis o código em functions.php: function pullquote( $atts, $content = null ) { extract(shortcode_atts(array( 'float' => '$align', ), $atts)); return '

' . $content . ''; } add_shortcode('pull', 'pullquote');

Isso é semelhante ao exemplo anterior, exceto pelo fato de que você está extraindo o array shortcode_atts() e a parte $content = null, que informa que você precisa fechar esse shortcode. Você também vai chamar isso em sua declaração de retorno para inserir as coisas entre as tags de abertura e fechamento do shortcode. Em outras palavras, trata-se de [shortcode]$content[/shortcode], e o que mais você colocar ali dentro. É aí que entram em cena os atributos, neste caso apenas float. A ideia é que, usando o shortcode [pull], o usuário configura float para alignleft ou alignright, da seguinte forma: [pull float="alignright"]Meu texto[/pull]

Designers de tema experientes sabem que tanto alignleft quanto alignright são classes padrão para posicionamento, usadas dentro do WordPress, por isso seu tema já deve contê-los. Você vai utilizá-los para posicionar a citação. Em outras palavras, você retorna o código, uma citação em bloco com a classe pull quote, e qualquer que seja o valor atribuído pelo usuário ao atributo float, e gera a saída. O uso de [pull float="alignright"]Meu texto[/pull] irá gerar o seguinte código:

Meu texto



Isso é útil para quem não quer alterar o código HTML. É claro que, se você quiser mais atributos, pode simplesmente adicioná-los ao array, e então incluí-lo na posição que quiser.

TRECHOS DE SHORTCODE Você talvez esteja se perguntando se o aninhamento de shortcode funciona. Funciona sim, e você pode colocar uma tag de shortcode dentro de outra, desde que abra e feche todas as tags adequadamente, como em HTML. O exemplo a seguir é válido: [shortcode-1] [shortcode-2] [/shortcode-2] [/shortcode-1]

Mas este provavelmente causaria um erro e resultados estranhos: 224

CAPÍTULO 10: WORDPRESS COMO CMS [shortcode-1] [shortcode-2] [/shortcode-1] [/shortcode-2]

No entanto, para que o primeiro trecho funcione, você precisa permitir shortcode dentro do seu shortcode, usando do_shortcode(). Por isso, se você quisesse permitir shortcode dentro da tag [pull], a partir do exemplo anterior, precisaria colocar $content dentro de do_shortcode(), da seguinte forma: function pullquote( $atts, $content = null ) { extract(shortcode_atts(array( 'float' => '$align', ), $atts)); return '

' . do_ shortcode($content) . '

'; } add_shortcode('pull', 'pullquote');

Caso contrário, qualquer shortcode posicionado entre [pull] e [/pull] não passaria pelo parsing adequado. Lembre-se de que o shortcode funciona apenas dentro do conteúdo, e não em cabeçalhos ou até mesmo trechos. Esse recurso está associado à template tag the_content(). No entanto, você pode fazê-lo funcionar usando a função do_shortcode() e adicionando um filtro. Pode ser uma boa ideia adicionar suporte a shortcode pelo menos às áreas para widgets se você pretende fazer coisas impressionantes com eles. Afinal, aquele widget de texto pode ser muito útil. O código a seguir em seu arquivo functions.php irá adicionar suporte a shortcode ao widget de texto padrão: add_filter('widget_text', 'do_shortcode');

Ele aplica a função do_shortcode() à função widget_text() como um filtro (com add_filter() obviamente). É simples, bem do jeito que eu gosto! A API e shortcode é na verdade bastante completa. Você pode ler a respeito no Codex do WordPress http://codex.wordpress.org/Shortcode_API se quiser mais informações. Usar shortcodes é uma excelente forma de permitir que os usuários adicionem recursos e funcionalidade ao seu conteúdo. No entanto, às vezes você precisa ir além dos elementos de design óbvios (sejam eles widgets ou alterações no loop) e o conteúdo em si, especialmente se o site em questão precisar promover outros serviços. A integração do conteúdo externo ao WordPress é abordada na seção seguinte.

INTEGRANDO CONTEÚDO EXTERNO AO WORDPRESS Às vezes, você precisa colocar conteúdo externo ao WordPress no seu site de WordPress. Isso pode ser complicado, porque nem todas as plataformas de publicação são amistosas. Na melhor das hipóteses, o conteúdo que você precisa expor dentro de seu site de WordPress 225

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS pode ser exportado de forma semelhante a um widget (não do tipo para plug-in, e sim do tipo JavaScript), incluído no todo com PHP, ou talvez até mesmo exibido em um iframe, se nada mais der certo. Hoje, um feed de RSS pode ser a salvação, principalmente se você estiver buscando conteúdo de texto, mas também para vídeos e imagens. Se o conteúdo externo estiver no serviço de imagens Flickr, por exemplo, você pode obter o feed RSS com um plug-in separado (há plug-ins de Flickr e variantes de RSS), ou com a funcionalidade integrada do WordPress para exibir feeds. A seguir está o código básico fetch_RSS, que pode ser usado com o WordPress. Neste caso, você está chamando http://notesblog.com/feed/ e exibindo as últimas cinco postagens a partir de uma lista ilimitada. Você colocaria este código em um arquivo de modelo no seu tema, possivelmente em uma barra lateral, ou talvez em um modelo de página.

Novidades do Notes Blog

?php // Get RSS Feed(s) include_once(ABSPATH . WPINC . '/rss.php'); $rss = fetch_rss('http://notesblog.com/feed/'); $maxitems = 5; $items = array_slice($rss->items, 0, $maxitems); ?>

Ops, nada aqui!'; else foreach ( $items as $item ) : ?>
• ' title=''>



Assim, você pode usar isso sempre que precisar exibir conteúdo que está disponível em um feed de RSS (ou em qualquer dos outros plug-ins disponíveis, naturalmente). De qualquer forma, depois de decidir como exibir o conteúdo que você quer dentro de seu site de WordPress, há boas chances de que você crie uma página com seu próprio modelo, contendo o código acima. Minha recomendação é inserir o código nos arquivos de modelo. Essa é a forma mais fácil, e a técnica que recomendo antes de recorrer ao ExecPHP ou a plug-ins semelhantes que permitem que você insira código PHP dentro de postagens e páginas, uma vez que eles podem fazer um grande estrago. Em outros casos, a solução pode envolver criar um plug-in que opere como intermediário. Uma vez eu fiz isso, quando rodava meu próprio CMS e queria migrar para WordPress, mas tinha um banco de dados imenso de jogos e muitos dados. Foi relativamente fácil importar os textos e imagens para os bancos de dados do WordPress, mas as taxonomias flexíveis e o suporte a tags nativo ainda não existiam naquela época, por isso precisei ser criativo com o banco de dados de jogos. A solução foi criar um plug-in que lesse aquela parte e a exibisse usando shortcodes. Isso dava muito mais trabalho do que simplesmente exibir algo a partir de um feed RSS, mas às vezes é impossível integrar o conteúdo ao WordPress sem expandi-lo um pouco.

226

CAPÍTULO 10: WORDPRESS COMO CMS Por fim, se todo o resto falhar, finja. Faça a página se parecer com seu tema de WordPress, mas armazene-a fora do tema, em si. Eu sei que isso não é tão divertido, mas às vezes os sistemas simplesmente entram em conflito e, embora normalmente seja possível resolver isso, o investimento de tempo pode não compensar.

NÃO ESQUEÇA DE INCLUIR UM MANUAL Para quem tem experiência com sistemas baseados na Web, o WordPress pode parecer facílimo de usar. O problema é que nem todo mundo concorda. Na verdade, para quem não tem experiência com sistemas baseados na Web, o WordPress pode parecer intimidante, mesmo que o usuário esteja perfeitamente familiarizado com processadores de texto e outros programas comuns. Existem manuais orientados para o usuário integrados ao WordPress, mas será que são o suficiente? Embora o site wordpress.org e o festival de tutoriais em vídeo wordpress.tv possam ser referências úteis para seus usuários, sua melhor opção é provavelmente criar um pequeno guia de instruções sobre como o WordPress funciona. Isso é especialmente importante se você estiver usando o WordPress como CMS para um site estático e não para um blog; se você indicar um site como o Codex para seus usuários, eles simplesmente ficarão confusos. Se você é um desenvolvedor e/ou designer e faz muitos sites de WordPress, aconselho a compilar um kit para iniciantes descrevendo as tarefas mais comuns do uso diário. Esse kit, que pode ser qualquer coisa, desde um simples documento até um livreto para impressão, deve ser atualizado regularmente à medida que novas versões de WordPress são disponibilizadas. Ele também deve ser construído de forma a permitir que você acrescente qualquer funcionalidade personalizada que seja usada para os sites de clientes. Talvez você tenha uma categoria para vídeos que se comporte de forma diferente das outras, ou talvez haja o eterno problema dos campos personalizados e sua usabilidade. Acrescente a utilização de plug-ins, widgets e possíveis configurações que você criou para seu cliente, e você vai economizar muitas perguntas, simplesmente entregando um manual de introdução junto com seu design.

UMA ÚLTIMA CONSIDERAÇÃO SOBRE O USO DO WORDPRESS COMO CMS A ideia de que o WordPress não é uma boa opção de solução CMS para diversos projetos é um equívoco comum. Obviamente, nem sempre ele é a opção perfeita – nenhuma plataforma de publicação jamais será –, mas a facilidade com a qual você pode criar um site com WordPress é um forte fator a seu favor. Somando a interface de usuário simples à grande possibilidade de expansão graças aos plug-ins e temas, o que temos é uma excelente alternativa. Uma das vantagens de usar o WordPress como CMS é o fato de que ele é muito bem equipado para lidar com mecanismos de busca. Com um bom código, e talvez um ou dois plug-ins (você pode encontrar algumas sugestões no Capítulo 9), você não terá problemas para ser bem classificado nos mecanismos de busca, desde que tenha o conteúdo para tanto. Em combinação com a Web social, é dessa forma que você pode obter grande parte do seu tráfego, hoje em dia. Por isso, o próximo capítulo mostra a você como integrar a Web social aos seus sites de WordPress.

227

11

INTEGRANDO A WEB SOCIAL

NÃO RESTAM DÚVIDAS da importância da Web social nos dias de hoje, e os dois exemplos mais proeminentes disso são o Facebook e o Twitter. Quando usados corretamente, esses serviços podem ser excelentes plataformas para promover conteúdo, coletar histórias ou incentivar a comunicação. Por isso, é natural que hoje a maioria dos sites tenha algum tipo de integração com os serviços mais populares da Web social, ainda que isso se resuma a um simples botão ou link para “compartilhar no Facebook” ou “enviar para o Twitter”. Antes de entrarmos nas diversas técnicas usadas para exibir e se conectar à Web social, é importante não esquecer da ferramenta de integração mais óbvia que está disponível: os feeds RSS. A solução mais simples é usar o widget de RSS que está incluído no WordPress, e que permite exibir facilmente conteúdo a partir de um

feed RSS. E, hoje, qualquer serviço, aplicativo, comunidade, etc. na Web social possui um feed RSS com o qual você pode brincar –, ou seja, grande parte da integração que você pode obter com esses serviços pode ser feita usando RSS. Seja para exibir seu último “tweet” ou para criar um lifestream completo, quase sempre o RSS está no centro de tudo. Por isso, quando você quiser que seu último livro concluído em www.anobii.com seja exibido, considere a possibilidade de usar o feed RSS (no widget do serviço ) antes de sair por aí em busca de plug-ins ou de modificar suas próprias soluções. Há boas chances de que o serviço a partir do qual você quer exibir suas últimas ações/itens salvos/etc. já transmita esses dados com RSS. Mas chega disso, é hora de colocar a mão na massa!

CAPÍTULO 11

SMASHING WORDPRESS

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

INTEGRANDO O FACEBOOK AO SEU SITE Vamos começar pelo Facebook, já que ele é não apenas a maior rede social que existe no momento da escrita deste livro, mas também porque oferece a maior facilidade de integração a um site, ao menos no nível mais básico. O Facebook possui excelentes ferramentas que ajudam a integrar as funções dele ao seu site; basta dar uma olhada na página de Plug-ins Sociais em http://developers.facebook.com/docs/reference/plugins/ para conhecer uma porção de alternativas (ver Figura 11-1).

Figura 11-1: O Facebook possui excelentes ferramentas para adicionar recursos relacionados ao seu site

Na maioria dos casos, você pode promover duas coisas em seu site, em termos de Facebook: seu conteúdo, para que as pessoas “curtam” ele, e sua página (fan page) no Facebook.

BOTÃO CURTIR O botão Curtir do Facebook é incrivelmente fácil de integrar. Basta visitar esta página para construir o seu próprio: http://developers.facebook.com/docs/reference/ plugins/like. Não se preocupe com o campo “URL to Like”, uma vez que vou mostrar a você como trocar isso pela template tag the_permalink(). Clicando em Get Code, você terá dois trechos de código; um se destina a usuários de XFBML e o outro é um simples iframe. Vamos começar com o segundo, já que essencialmente trata-se apenas de copiar e colar: <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2F google.com&layout=standard&show_faces=true&width=450&action= like& colorscheme=light&height=80" scrolling="no" frameborder="0"

230

CAPÍTULO 11: INTEGRANDO A WEB SOCIAL style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true">

Está vendo aquela parte do href= ? É ali que você quer inserir the_permalink() em vez de reescrever http://google.com (que foi o que eu fiz). Assim: <iframe src="http://www.facebook.com/plugins/like.php?href= &layout=standard&show_faces=true&width=450&action=like& colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true">

Basta inserir esse trecho de código nos seus diversos modelos de tema (como single.php), nos locais onde você quer permitir que as pessoas “curtam” o conteúdo, e pronto. Mas e aquele código para XFBML? O código é menor e bem mais versátil, mas requer algo a mais, especificamente o JavaScript SDK do Facebook. Se você só precisa do botão Curtir, eu diria que carregar esse código é um pouco de exagero, mas se você estiver fazendo outras coisas com Facebook em seu site, vale a pena conferir essa opção. De qualquer forma, todos os detalhes acerca de como carregar o JavaScript SDK para que você possa usar o código XFBML estão disponíveis aqui: http://developers.facebook.com/docs/reference/ javascript/. Obviamente, você vai precisar mudar o código aqui também. A seguir, apresento o mesmo código do trecho de iframe acima, mas para XFBML: <script src="http://connect.facebook.net/en_US/all.js#xfbml=1">

Basta substituir http://google.com por the_permalink() e pronto: <script src="http://connect.facebook.net/en_US/all.js#xfbml=1">

WIDGETS DE PERFIL Se você quiser promover sua página no Facebook, ou talvez sua página pessoal, existem widgets muito simples para isso. Há os selos simples, disponíveis em http://www. facebook.com/badges/, mas há uma boa chance de que você esteja querendo algo mais bacana. Talvez você queira exibir a atividade do seu feed, ou simplesmente permitir que as pessoas se tornem fãs de sua página sem sair do seu site. Nesse caso, dê uma olhada nos widgets sociais que o Facebook oferece em http://developers.facebook. com/plugins. Digamos que você queira colocar uma caixa para que o usuário possa Curtir sua página de Facebook dentro do seu site. O Facebook é consistente, porque a página de construção da caixa Curtir funciona da mesma foma que a do botão Curtir, acima, mas sem a necessidade de inserir qualquer código adicional, como the_permalink(). Basta aplicar o estilo que quiser, copiar o código e colá-lo em um widget de texto ou onde quiser, dentro de seus arquivos de tema.

231

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

INTEGRANDO O TWITTER Não restam dúvidas de que a ascenção do Twitter mudou muita coisa. Hoje, o mundo inteiro está tuitando, especificamente o pessoal interessado em tecnologia, e não há sinais de desaceleração nessa tendência. Assim, embora 140 caracteres sejam uma limitação e tanto para alguém que está acostumado a digitar postagens de blog com 3 mil caracteres, o Twitter ainda é uma ótima ferramenta para quem publica na internet. Se você ou sua marca estão no Twitter, há boas chances de que você queira promover sua conta de Twitter em seu site. Isso pode ser feito facilmente com imagens gráficas, naturalmente, mas você pode levar a ideia ainda mais longe. Isso funciona também ao contrário: promovendo seu conteúdo com tweets, você pode atingir um público que talvez só conheça você do Twitter E isso ainda é apenas a ponta do iceberg; há uma infinidade de serviços bacanas construídos ao redor do Twitter, além da própria API, que você talvez queira usar ou imitar. Vamos começar pelo começo: este livro não trata de construir um novo aplicativo de Twitter. No entanto, é provavelmente uma boa ideia levar a promoção do Twitter para além de uma simples imagem com os dizeres “Siga-me no Twitter”, não é mesmo?

ADICIONANDO BOTÕES E WIDGETS DO TWITTER Hoje, é fácil exibir seus “tweets”, graças ao widget do Twitter, e promover um artigo no Twitter usando o botão oficial Tweet. Você pode obter os “tweets” mais recentes, permitir que os usuários marquem seus “tweets” como favoritos, e assim por diante, tudo isso usando um widget simples que você pode construir (aplicando estilos) no site do Twitter: http:// twitter.com/about/resources/widgets. Depois de aplicar os estilos desejados ao widget, você terá algo semelhante a isto: <script src="http://widgets.twimg.com/j/2/widget.js"> <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 6000, width: 250, height: 300, theme: { shell: { background: '#333333', color: '#ffffff' }, tweets: { background: '#000000', color: '#ffffff', links: '#4aed05' } },

232

CAPÍTULO 11: INTEGRANDO A WEB SOCIAL features: { scrollbar: false, loop: false, live: false, hashtags: true, timestamp: true, avatars: false, behavior: 'all' } }).render().setUser('tdhedengren').start();

Cole isso nos seus arquivos de tema, ou, ainda melhor, em um widget de texto, e você está pronto. Se quiser mudar algo, a forma mais fácil de fazer isso é simplesmente voltar ao Twitter e refazer o processo inteiro, embora um usuário mais avançado possa analisar o código e fazer as mudanças diretamente dentro dele. Obter um botão Tweet é igualmente simples. Basta visitar http://twitter.com/about/ resources/tweetbutton e escolher a aparência do seu botão e, então, adicionar qualquer conta de Twitter que você queira mencionar (ver Figura 11-2). Mais uma vez, você terá um simples trecho de código que pode inserir no modelo single.php de seu tema, para que os usuários possam facilmente “tuitar” suas postagens: Tweet <script type="text/javascript" src="http://platform.twitter.com/widgets.js">

Figura 11-2: É fácil obter o código para seu próprio botão Tweet

233

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS Se você quiser ainda mais controle, confira a API do botão Tweet em http://dev. twitter.com/pages/tweet_button.

USANDO O MÉTODO DA API PARA EXIBIR SEUS “TWEETS” Uma das melhores formas de exibir suas atualizações de Twitter em grande estilo é exibir o “tweet” mais recente. Tenho certeza de que uma infinidade de plug-ins é capaz de fazer isso, mas a forma mais direta de fazê-lo é usar a API do Twitter (ver referência em http://dev. twitter.com) e um pouco de JavaScript. O exemplo abaixo sou eu, retornando o “tweet” mais recente de minha conta (http:// twitter.com/tdhedengren, caso você esteja curioso), usando dois JavaScripts fornecidos pelo Twitter:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/tdhedengren.json? count=1&callback=twitterCallback2">



Primeiramente, o div#mytweet não é obrigatório, mas uma vez que você pode querer algum controle adicional, é uma boa ideia adicioná-lo. Por outro lado, o div#twitter_update_ list, sem nada dentro (à primeira vista), é necessário. É dentro disso que o blogger.js e o script JSON vão retornar as atualizações solicitadas (neste caso, as minhas). Nesta linha, você encontra meu nome de usuário, tdhedengren, adicionado como se fosse um arquivo, de fato, no servidor twitter.com: <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/tdhedengren.json? count=1&callback=twitterCallback2">

Isso avisa ao Twitter que as atualizações devem ser obtidas a partir do meu nome de usuário. Naturalmente, count=1 significa que apenas um “tweet” deve ser exibido, e você pode alterar isso para, digamos, cinco, caso queira exibir cinco “tweets”. Por fim, temos callback=twitterCallback2, que é necessário, uma vez que você está usando JSON aqui, da forma como o Twitter quer. O que você terá é uma lista com marcadores dentro de div#twitter_update_list, por isso aplique os estilos de forma adequada. A Figura 11-3 mostra a aparência que isso poderia ter com um pouco de CSS adicionado.

Figura 11-3: Uma caixa simples exibindo o “tweet” mais recente pode aumentar seu número de seguidores no Twitter

Em vez disso, você poderia obter o feed RSS, mas ele contém muita bobagem, sem falar do nome de usuário que aparece antes de tudo, desde o título do “tweet” até o conteúdo de fato. Naturalmente, você pode reduzir isso com um pouco de PHP, mas nesse caso você estaria modificando em um nível tal que talvez fosse uma ideia melhor usar um dos plug-ins disponíveis.

234

CAPÍTULO 11: INTEGRANDO A WEB SOCIAL A documentação completa sobre esse método (além de informações sobre outras configurações e métodos que talvez sejam mais adequados para você) está disponível na documentação da API de busca do Twitter, em http://dev.twitter.com/doc/get/ search.

EXPANSÕES DO TWITTER PARA SITES Há inúmeros widgets, plug-ins, serviços e aplicativos ao redor do Twitter. O ecossistema relativamente aberto que cerca o serviço de microblog pode ser facilmente usado para desenvolver outras coisas, e o falatório cada vez maior ao redor da marca não está desacelerando as coisas. É por isso que você tem o TweetMeme (http://tweetmeme.com) rastreando os artigos mais quentes no Twitter, assim como o Twitterfeed (http:// twitterfeed.com) que permite que você publique links automáticos em sua conta de Twitter usando um feed RSS. As seções a seguir oferecem alguns links úteis para serviços e encurtadores de URL que podem ser úteis. Mas você não vai encontrar plug-in de Twitter algum aqui: estão todos no Capítulo 9.

Potenciadores de site Alguns serviços relacionados ao Twitter têm mais destaque que outros. Estes três adicionam funcionalidade ao seu site usando o Twitter. TweetMeme (http://tweetmeme.com) rastreia o que há de mais quente no Twitter e

se inspira intensamente no Digg. Tweetboard (http://tweetboard.com) adiciona uma conversa de Twitter ao seu site com respostas em discussão e tudo o mais. Twitterfeed (http://twitterfeed.com) publica links a partir de qualquer feed RSS à sua conta de Twitter, sem que você precise fazer coisa alguma. Há serviços concorrentes que também fazem isso, mas esse é o original, com o login de OpenID e tudo o mais.

Encurtadores de URL O limite de 140 caracteres significa que URLs longas não caberão em seus “tweets”. É aí que entram em cena os encurtadores de URL, um mal necessário segundo alguns, e uma excelente ferramenta para outros. Você pode, naturalmente, resolver isso sozinho (consulte o Capítulo 9 para indicações de bons plug-ins), mas, se você não conseguir ou não quiser fazê-lo, esses “encurtadores” são excelentes opções. Lembre-se de que talvez você queira escolher um deles e continuar com ele para que as pessoas se acostumem. Também pode ser uma boa ideia manter em mente que o Twitter usa o encurtador de URL t.co por padrão. Além disso, o WordPress pode encurtar as URLs por você. Quando você faz login e visualiza uma postagem ou página individual, pode encontrar o Shortlink na barra de admin, como mostra a Figura 11-4 (partindo do pressuposto de que você não tenha desativado a barra de admin e esteja rodando a versão 3.1 ou uma versão mais recente).

235

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

Figura 11-4: O link para o Shortlink na barra de admin só pode ser visualizado em postagens ou páginas individuais quando o usuário fez login

E aqui estão os “encurtadores” de URL t.co (http://t.co) é o encurtador de URL oficial do Twitter, que você pode usar

através dos botões e aplicativos oficiais do Twitter , listados aqui apenas para referência. TinyURL (http://tinyurl.com) é o encurtador de URL original, usado pelo Twitter

antes do surgimento do t.co, mas ele não oferece muita coisa, em comparação à concorrência. Bit.ly (http://bit.ly) não apenas encurta sua URL, mas também oferece estatísticas. goo.gl (http://goo.gl) é o encurtador de URL do Google. É claro que, às vezes, você precisa fazer mais do que simplesmente exibir seus “tweets”. Talvez você queira exibir tudo o que faz on-line dentro do seu site. Isso se chama lifestreaming, e vamos falar disso na próxima seção.

LIFESTREAMING COM WORDPRESS Lifestreaming é um termo geralmente usado para descrever a compilação de tudo o que você faz quando está on-line. (Talvez seja um tanto presunçoso presumir que sua vida está on-line, mas fazer o quê?) Geralmente, seu lifestream envolve links para suas postagens de blog, atualizações de status no Facebook, “tweets” no Twitter, fotos do Flickr, livros que você lê em LibraryThing, vídeos do YouTube, e assim por diante. Basicamente, quanto mais atividade melhor, e tudo é compilado em uma espécie de lista cronológica. A compilação de sua vida on-line é geralmente feita com RSS, por isso, teoricamente, você pode usar o WordPress para lifestreaming. Para fazer isso, você pode criar seu tema de forma a usar o parser de RSS integrado SimplePie para compilar os dados e então gerar uma saída de tudo, ou usar um dos plug-ins de RSS scraping para alimentar seu banco de dados de WordPress com o conteúdo, na forma de postagens.

CONFIGURANDO UM LIFESTREAM Embora você possa simplesmente reunir todos aqueles feeds RSS usando SimplePie e o recurso de múltiplos feeds mencionado no Capítulo 14, lifestreaming é uma daquelas situações em que, parece-me, os plug-ins são a melhor solução. Embora seja possível criar um lifestream totalmente funcional usando a funcionalidade do SimplePie, pode ser complicado fazer o carregamento desse conteúdo acontecer de maneira rápida. 236

CAPÍTULO 11: INTEGRANDO A WEB SOCIAL Em minha opinião, há três configurações possíveis – discutidas nas seções seguintes – para alguém que quer usar o WordPress para criar um lifestream.

Usar o Parser de RSS Integrado Se você trouxer todo o seu conteúdo a partir dos diversos feeds RSS gerados por suas contas em toda a Web, vai ser difícil gerenciar os feeds. Você pode combinar tudo e, talvez, armazenar o conteúdo em cache em arquivos (que o SimplePie suporta) ou no banco de dados (que não é oficialmente suportado, mas ainda assim é possível), e então exibir o conteúdo em seu tema. Esse é um projeto complicado de colocar em prática, mas definitivamente é possível. Você pode ler mais sobre isso no Capítulo 14. Uma solução levemente menos complexa que utiliza o parser de RSS integrado é ter um conjunto de caixas contendo diferentes tipos de conteúdo, agrupado por relevância ou qualquer outro critério. Pode não ser uma típica listagem cronológica de atualizações, mas vai ser o suficiente na maioria dos casos.

Usar um Plug-in de Lifestreaming Há alguns plug-ins de lifestreaming disponíveis, e o mais incensado deles é o WP-Lifestream (http://wordpress.org/extend/plugins/lifestream/). Ele funciona bem (a Figura 11-5 mostra o plug-in em ação no site tdh.me/stream/) e permite que você configure as fontes das quais quer exibir feeds, incluindo o lifestream em sua barra lateral ou em uma página, por exemplo. Essa é, definitivamente, a forma mais fácil de começar a usar lifestreaming com WordPress, mas pode não oferecer o grau de personalização que você está buscando. Além disso, há outras questões relacionadas ao tempo de carregamento, das quais falarei em breve.

Figura 11-5: WP-Lifestream com estilo minimalista

237

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS O plug-in WP-Lifestream salva o conteúdo obtido no banco de dados. Nem todos os plug-ins de lifestreaming fazem isso, mas acho que é uma boa ideia fazê-lo. Afinal, sem salvar o conteúdo (mantendo assim um arquivo de suas atividades on-line), você poderia simplesmente exibir o conteúdo em tempo real, não é mesmo? Certifique-se de que o plug-in de lifestreaming que você escolheu possui os recursos de que você precisa, principalmente o de armazenamento no banco de dados.

Alimentar o Banco de Dados do WordPress A terceira solução é alimentar o banco de dados do WordPress com o conteúdo dos feeds RSS usando plug-ins de scraping. A ideia aqui é criar uma postagem de WordPress, de fato, preferivelmente classificada dentro da categoria adequada e talvez até mesmo marcada com tags (embora isso provavelmente vá ser difícil) e então exibir o conteúdo em seu tema usando os métodos normais. Isso, teoricamente, significaria que você pode ter uma categoria Flickr contendo tudo que vem do Flickr, uma categoria Twitter que salva todos os seus “tweets”, e assim por diante. O fato é que tudo fica armazenado como postagens normais, facilitando o gerenciamento, e isso é ótimo. O plug-in FeedWordPress (http://wordpress.org/extend/plugins/ feedwordpress/) é um dos muitos plug-ins de scraping que são capazes de obter feeds de RSS e salvar seu conteúdo em sua instalação de WordPress. Usar uma solução desse tipo pode parecer um tanto extremado, mas é possível, e trabalhando um pouco sobre seu tema você pode obter um site com um blog e seções de lifestreaming, além de um excelente banco de dados para busca e categorização.

SOBRE TAREFAS AGENDADAS O problema de obter feeds RSS (e qualquer coisa que venha de um servidor externo, na verdade) é que isso requer tempo. O PHP precisa solicitar o feed ao servidor de destino, e então o servidor precisa enviar o conteúdo; em seguida o seu servidor precisa recebê-lo, e o PHP precisa finalizar o processo fazendo algo com o conteúdo obtido. Compare isso a fazer uma consulta ao banco de dados e gerar a saída de dados e você vai entender qual é o problema. Agora, imagine que você tem 10 identidades on-line e quer incluí-las em seu lifestream. Quando um visitante chega para ver o que você tem feito on-line, o PHP precisa gerar uma consulta para cada identidade, receber todo o conteúdo e gerar a saída. Isso, é claro, se não houver retardatários que causem uma falha no script (o que seria uma má programação) ou que demorem muito até que uma resposta (mesmo que negativa) seja recebida. Assim, você pode compreender que uma página de lifestream pode demorar muito a carregar. É por isso que você armazena o conteúdo em cache, e qualquer solução que se preze deve oferecer suporte a cache. Porém, a obtenção e o armazenamento em cache precisam ser iniciados por alguém. Em sua forma mais pura, isso significa que mesmo que o conteúdo esteja armazenado em cache, um pobre visitante a cada 30 minutos (ou qualquer que seja o limite de tempo configurado) precisará esperar até que tudo seja baixado, armazenado em cache e então exibido, para que a página funcione. Você pode fazer isso com SimplePie, e a maioria dos plug-ins de lifestreaming possuem alguma forma de solução de cache. É possível usar tanto soluções de arquivos (basicamente arquivos de texto) quanto de banco de dados.

238

CAPÍTULO 11: INTEGRANDO A WEB SOCIAL Mas há soluções melhores. Uma delas é o recurso integrado WP-Cron, que é uma espécie de pseudotarefa agendada chamada por alguns plug-ins. Outra solução mais recomendável é uma tarefa agendada (cronjob). Uma tarefa agendada consiste, basicamente, em instâncias cronometradas executadas independentemente pelo servidor, assim, nenhum visitante precisará esperar sentado até que todos aqueles feeds de RSS sejam carregados. A única coisa exibida será o conteúdo salvo (em cache), e essa é a única coisa atualizada, também. A forma como você configura sua tarefa agendada depende do seu serviço de hospedagem. Provavelmente, você deve ter um painel de controle onde pode fazer alterações no seu site. Procure pelas configurações de tarefas agendadas (ou cronjobs) ali. Os fãs de Linux obviamente usarão o terminal, mas isso está bem longe do escopo deste livro. O resto de nós vai usar as soluções integradas ao painel de controle do serviço de hospedagem, e isso é o suficiente. Se você está planejando executar uma porção de feeds RSS, o que é inevitável em se tratando de lifestreaming, deve investigar a possibilidade de usar cache, que deve ser suportado por sua solução desde o princípio, e de como executar os scripts que obtém o conteúdo sem tornar o site mais lento. Mais uma vez, a maioria dos plug-ins que se prezam oferecem suporte a esse recurso, inclusive o SimplePie, caso você queira utilizá-lo. A melhor solução é usar uma tarefa agendada (cronjob), por isso converse com seu serviço de hospedagem Web sobre o assunto e certifique-se de qualquer plug-in ou serviço que você queira usar tenha suporte a esse recurso.

DISSEMINANDO SEU CONTEÚDO COM BOTÕES DE ENVIO NA WEB SOCIAL A Web social é certamente um fator importante a considerar para quem trabalha com conteúdo editorial hoje em dia. Embora os mecanismos de busca possam trazer visitantes em doses homeopáticas ao longo do tempo, ser destaque na página inicial do Digg vai causar uma explosão demográfica em suas estatísticas em curto prazo. Se o seu conteúdo é direcionado a um público técnico, a Web social oferece uma série de serviços para os quais você pode enviar seu artigo para que possa divulgar o material para o público certo, mas não importando o tipo de conteúdo, você deve buscar, dentro do seu nicho, algum site social que seja uma boa parceria. Afinal de contas, todos querem ter mais acessos, não é mesmo? Muita coisa pode ser dita sobre o tipo de conteúdo que funciona na Web social, e, invariavelmente, o que importa é produzir conteúdo de qualidade, que seja interessante e facilmente acessível, e enviar esse conteúdo para o site certo. Aí, então, fica a cargo dos usuários votar no conteúdo, aumentando sua audiência, ou negligenciá-lo por completo, o que pode depender, na verdade, de quantos amigos (que sejam capazes de dar à matéria o destaque desejado) você tem. Por isso, sim, trata-se de um concurso de popularidade, e, sim, você pode facilmente participar se expandir seu site para essas plataformas.

USANDO PLUG-INS A forma mais fácil de preparar seu site para a Web social é usar um dos inúmeros plug-ins disponíveis (consulte o Capítulo 9 para obter sugestões). Esses plug-ins tipicamente adicionam links ao fim de cada postagem, onde o visitante pode votar na matéria em questão ou enviá-la para um serviço (caso ainda não tenha sido enviada). 239

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS Adicionar um plug-in que gerencie essas coisas por você é fácil e certamente tentador, mas há alguns fatores que você deve levar em consideração antes de embarcar nessa abordagem. Quais serviços da Web social podem ser gerenciados pelo plug-in? Certifique-se de que

os serviços certos para o seu nicho específico estejam incluídos e de não encher seu site com serviços que nunca vão funcionar para você. Em outras palavras, não peça para as pessoas enviarem seu site para o Digg se você está escrevendo em norueguês sobre jardinagem; não vai adiantar. O plug-in tem uma boa aparência, que combina com seu design, ou é possível personalizá-lo para que se adapte ao design? Caso contrário, você provavelmente deve procurar outra alternativa. O plug-in tem sempre a mesma aparência? Caso sim, há boas chances de que os visitantes estejam tão acostumados a vê-lo que eles simplesmente não prestem mais atenção. A coisa toda não passa de um bloco de ícones entre a postagem e os comentários, que aparece em quase todos os blogs que se vê por aí, e isso não é uma grande vantagem se você quer que seus visitantes interajam. O plug-in está, na verdade, hospedado em outro lugar? Há plug-ins de terceiros que carregam tudo a partir de um servidor externo. Isso tornará seu site mais lento, por isso certifique-se de que você não tenha problemas com isso antes de usar um desses plug-ins. A maioria dos plug-ins, infelizmente, cria uma poluição em forma de botões ou links que não funcionam para todos os sites. Alguns são limitados a um número predeterminado de serviços, e outros podem fazer você cair na tentação de acrescentar serviços demais. Não perca a classe: não exagere no número de serviços de social bookmarking; isso não vai tornar o conteúdo mais atraente ou conquistar mais votos. Na verdade, apenas um ou dois botões de “Por favor, vote na minha matéria” talvez funcionem melhor para você do que encher uma tela inteira deles.

MODIFICANDO SEUS PRÓPRIOS LINKS DE ENVIO Você não precisa depender dos plug-ins para adicionar botões de envio para serviços de social bookmarking. A maioria dos sites oferece seus próprios botões, que você pode incorporar, mas isso deve ser feito manualmente. Pessoalmente, gosto de adicionar links de envio simples à visualização de postagem individual, de preferência de uma forma que não seja excessivamente invasiva para o usuário e que não polua o design. É melhor promover matérias que parecem se sustentar por si próprias, com imagens ou texto adicionais pedindo ajuda. No entanto, na maioria dos casos, um punhado de links estáticos não faz mal a ninguém, desde que seja relevante. As linhas a seguir mostram o código usado para adicionar links estáticos para os sites mais usados. Você envia o link permanente da postagem em questão para o serviço, de modo que, quando alguém clicar sobre o link, esse usuário será direcionado para a página de envio. &title="> Salvar no Del.icio.us ">

240

CAPÍTULO 11: INTEGRANDO A WEB SOCIAL Publicar no Digg &title="> Compartilhar no FriendFeed Publicar no Mixx &title="> Publicar no Reddit &title="> Publicar no Stumbleupon

Visite cada site, individualmente, para obter o código atualizado, além de gráficos, logotipos, ícones, etc. É fácil adicionar links semelhantes para novos sites; a maioria deles possui links de compartilhamento semelhantes que podem ser construídos ao redor de the_permalink() e the_title(). Você deve ter percebido que o Facebook e o Twitter não entraram na lista. Isso se deve ao fato de que eles possuem seus próprios botões para isso: o botão Tweet do Twitter e o botão Curtir do Facebook dos quais já falamos. Você deve usar esses botões em vez de incluir todos os serviços no mesmo plug-in. A Figura 11-6 mostra um conjunto de links de envio em blogherald.com.

Figura 11-6: Links de envio para serviços de social bookmarking, além de outros elementos, retirados de blogherald.com

E lembre-se de usar esses links para cada postagem! Caso contrário, você vai enviar apenas sua categoria ou página inicial para o Digg. Na verdade, um bom local para posicionar esses links seria entre o conteúdo e os comentários. Faz sentido enviar um link para seu excelente conteúdo depois da leitura, antes de seguir para os comentários. Você pode aprender mais sobre como turbinar seus comentários na seção a seguir.

241

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

USANDO UMA SOLUÇÃO DE COMENTÁRIOS HOSPEDADA Com o advento da discussão nos comentários, no núcleo do WordPress, e com as excelentes opções de estilo com CSS disponíveis atualmente, além do onipresente suporte a Gravatar (http://gravatar.com), talvez você esteja se perguntando como é possível melhorar os comentários. A resposta é simples: enchendo-os de funcionalidade adicional, com a ajuda de plug-ins, ou retirando-os totalmente do WordPress. A primeira solução pode significar qualquer coisa, de permitir que os usuários avaliem os comentários até incluir a discussão que está acontecendo no Twitter, ao passo que a segunda significa que você dependeria de um serviço de terceiros para gerenciar seus comentários. Consulte o Capítulo 9 para conhecer uma porção de plug-ins que podem melhorar seus comentários internos, e algumas que ajudam você a gerenciar logins e coisas do tipo. Esta seção trata da alternativa aos plug-ins. Usar soluções de comentários hospedadas significa deixar a solução de comentários inteiramente a cargo de um serviço de terceiros, sem depender da funcionalidade de comentários do WordPress. Há dois grandes players nessa arena, Disqus (http://disqus.com) e IntenseDebate (http://www.intensedebate.com). O primeiro é mais antigo, mas o segundo é de propriedade da Automattic, o que faz dele uma escolha tentadora para os amantes de WordPress. Ambos os sistemas possuem seus prós e contras, em termos de funcionalidade, mas ambos estão sendo ativamente desenvolvidos, embora a maioria das pessoas diria que o Disqus leva vantagem na disputa. Para começar a usar Disqus ou IntenseDebate, você só precisa fazer o download de um plug-in para WordPress e fazer a instalação. É muito fácil começar a usar tanto o Disqus quanto o IntenseDebate, embora a localização seja um problema para alguns usuários, assim como a personalização do estilo. Você pode também adicionar esses serviços a sites estáticos, para dar uma funcionalidade de comentários a qualquer site. Trata-se de uma ótima solução. Há muitas vantagens em usar uma solução de comentários hospedada. Em primeiro lugar, o problema do spam é solucionado em maior escala. Ambos os sistemas de comentários oferecem também diversos métodos de login, entre eles o uso de credenciais de Twitter e Facebook, resposta por e-mail e feeds RSS, além de integração com a Web social e notificações por e-mail. Para obter o escopo dos recursos integrados ao Disqus ou ao IntenseDebate, você precisaria sobrecarregar os comentários do WordPress com plug-ins. Por fim, fala-se muito sobre o fato de que usar esses sistemas resulta em mais comentários, e parece que isso não é só conversa de RP das próprias empresas. No entanto, meu principal problema com o conceito de comentários hospedados é o fato de que você está basicamente entregando o conteúdo para que outra pessoa faça a manutenção. Isso significa que, se o serviço de comentários que você escolheu entrar em pane ou sair do mercado, seus comentários vão deixar de funcionar (na pior das hipóteses) ou retornar ao padrão do WordPress. O fato de que os comentários retornam (com alguma graciosidade) para o padrão do WordPress quando há uma pane na solução de comentários hospedados é obviamente uma vantagem, mas isso pode confundir seus leitores. Outros problemas possíveis incluem períodos de manutenção e poluição visual, uma vez que provavelmente a solução de comentários não se

242

CAPÍTULO 11: INTEGRANDO A WEB SOCIAL adaptará perfeitamente ao seu design fabuloso. Além disso, qualquer problema que o sistema de hospedagem do sistema de comentários enfrentar vai afetar o seu site também. Isso é nada bom. Tendo em mente essas limitações, se você tiver que usar um serviço assim, qual deles deve escolher? Eu já usei o Disqus em mais projetos do que o IntenseDebate (inclusive em meu próprio blog http://tdh.me, como você pode ver na Figura 11-7) e acho que ele funciona bem, mas a melhor alternativa é testar ambos e decidir por si próprio.

Figura 11-7: Alguns botões de compartilhamento social em ação, juntamente com o formulário de comentário do Disqus, encontrados em http://tdh.me

USANDO LOGINS UNIFICADOS A ideia de um sistema de login unificado é excelente. Pense bem: não seria ótimo ter apenas um login para tudo? Você não precisa de uma infinidade de senhas para gerenciar, e não há risco daquele problema de segurança causado por “uma mesma senha para muitos sites”. (A não ser, é claro, pelo fato de que você pode realmente acessar todos aqueles sites com uma única senha.) No entanto, a ideia é a de que os poucos provedores dessas Contas Mestras (do inglês, “Master Accounts”) seriam tão seguros que o único risco de comprometer os usuários seria erro humano, e o que você fizer no seu lado das coisas. Comparada ao risco de que um site pequeno seja “hackeado”, divulgando ao mundo sua “senha única”, a ideia parece boa. É por isso que o OpenID (http://www.openid.net) é interessante, e atraiu a atenção de gigantes como Yahoo!, Google e Microsoft. Pela mesma razão, o Facebook desenvolveu o Facebook Connect (http://developers.facebook.com/docs/guides/web), um login unificado que usa sua conta de Facebook. A solução Sign in with Twitter (http:// dev.twitter.com/pages/sign_in_with_twitter) é relativamente similar, e a lista não para por aí. Você talvez esteja se perguntando por que deveria considerar usar seu próprio procedimento de login quando é possível usar as soluções desses gigantes. A maioria dos sites de WordPress 243

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS não possui um procedimento de registro próprio para outros usuários além dos autores e administradores, ao menos não para comentários. Em geral, isso é o suficiente para deixar um nome e um endereço de e-mail. No entanto, se você quer que os usuários se registrem, vale a pena considerar uma das soluções unificadas. Eu gostaria de indicar o OpenID, mas a verdade é que o Facebook Connect é bem mais amigável para o usuário (neste momento), e o Facebook também é membro do OpenID. Em breve, você vai poder usar suas contas de Google e Live.com para se registrar em toda a Web, além do Facebook e Twitter, e talvez tudo isso esteja conectado pela Fundação OpenID. Ou não. De qualquer forma, o que importa é que se você precisa de uma funcionalidade de login para seus usuários, deve considerar adotar um login unificado para seu site. Há plug-ins que resolvem esse problema para você (pode encontrá-los no Capítulo 9), mas não deixe que isso o impeça de buscar outras opções. Leia a respeito dos serviços e tome sua decisão, tendo em vista qualquer registro de usuário que possa ocorrer no futuro.

A IMPORTÂNCIA DA WEB SOCIAL Hoje, a Web social e todo o conteúdo que publicamos em serviços como Twitter e Facebook são parte integrante da vida on-line de muita gente. Nós interagimos uns com os outros, escolhemos quem seguir ou adicionar como amigo, e essencialmente assinamos conteúdo “curtindo” páginas no Facebook e seguindo certas contas ou listas no Twitter. É natural que a Web social faça parte também de nossos sites, e que tenhamos o desejo de promover o conteúdo que publicamos para nossos seguidores nos diversos serviços da Web social que usamos, e também para os serviços que nossos visitantes podem estar utilizando. Na verdade, isso é bastante simples. Na Web social, você escolhe quem seguir, e há boas chances de que você confie mais nas pessoas que você segue do que em uma pessoa qualquer. Por isso, quando um amigo no Facebook compartilha um link, você fica mais inclinado a clicar sobre ele do que ficaria no caso de um link aleatório que apareça em sua frente. Pense bem: você tem mais chances de assistir a um filme recomendado por um amigo do que um filme que simplesmente foi anunciado. Isso faz os elementos da Web social, como botões do Twitter e de diversas opções de social bookmarking, se tornarem uma realidade em nossos designs. Quando essa integração é bem feita, sua aparência é ótima, mas quando a incorporação é precária, acaba gerando poluição visual e prejudicando o desempenho do site. Mantenha isso em mente, pois o próximo capítulo vai ajudar você a brincar com alguns elementos de design para garantir que seus sites tenham a melhor aparência possível.

244

12

TRUQUES DE DESIGN

ESTE CAPÍTULO É dedicado a tornar seu tema de WordPress mais interessante, dando a ele aquela funcionalidade adicional capaz de fazê-lo se destacar. Algumas das técnicas abordadas aqui estão diretamente ligadas ao WordPress e ao tipo de dados que você pode obter a partir da plataforma, enquanto outras são adaptações de técnicas e soluções que podem ser úteis em seus projetos. Este capítulo vai mostrar

uma variedade de truques bacanas: como utilizar design baseado em tags, fazer o menu obedecer aos seus comandos, incluir tanto folhas de estilo quanto bibliotecas de JavaScript da forma adequada, fazer seu 404 ajudar um visitante perdido e trabalhar com anúncios dentro do loop. Em outras palavras, prepare-se para aprender muitos truques de design no WordPress.

CAPÍTULO 12

SMASHING WORDPRESS

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

MAIS CONTROLE SOBRE SUAS POSTAGENS O WordPress oferece diversos métodos para ganhar mais controle sobre suas postagens. Esta seção aborda três desses métodos: design baseado em tags, campos personalizados e criação de suas próprias taxonomias.

DESIGN BASEADO EM TAGS A configuração mais comum para um site de WordPress envolve categorias e Páginas. As categorias oferecem controle individual para as listagens de postagens e podem ser consultadas com conditional tags, como in_category(), ou seja, você pode fazer cada categoria se comportar de forma diferente. Isso, por sua vez, significa que um arquivo de categoria pode facilmente tornar-se uma seção do site, de forma bastante natural, e as postagens daquela categoria podem receber o estilo adequado, caso você deseje. No mínimo, esse estilo pode ser um conjunto de cores para a categoria, ou quem sabe um ícone ou outro tipo de gráfico, mas, se você levar essa ideia mais longe, pode usar um estilo totalmente diferente para a apresentação do conteúdo. As tags, por outro lado, são menos fixas e geralmente funcionam melhor para descrever apenas postagens individuais. Isso significa que elas podem parecer redundantes para sites mais estáticos (ou sites que tenham menos a ver com blogs da Web 2.0). No entanto, você ainda pode obter o melhor delas, se quiser. As tags oferecem três formas primárias de obter interações especiais. A primeira é a mais óbvia: a capacidade de controlar as páginas de arquivo de tags. Talvez você ainda se lembre de que o arquivo tag.php do seu tema é capaz de controlar a exibição de tags, mas você também pode usar tag-X.php, onde X é o slug de uma tag específica. Isso é um pouco diferente do que acontece com category-Y.php, onde Y é a ID da categoria, e não o slug. Isso significa que você pode ter listagens de postagens com estilos diferentes para cada tag, assim como com as categorias. Em tese, isso significa que seus arquivos de tags podem se tornar seções no seu site, da mesma forma que as categorias. A segunda forma de controlar o conteúdo com base nas tags é a conditional tag is_tag(). Ela funciona mais ou menos da mesma forma que is_category(), e você simplesmente passa o slug da tag para identificar uma tag específica, da seguinte forma:

Naturalmente, você precisa também de algumas condições. Esse tipo de utilização em geral é o suficiente quando se trata de categorias, mas uma vez que a maioria dos designs de tema para WordPress bem planejados é construída ao redor do mínimo possível de categorias. As tags, no entanto, são diferentes, por isso talvez você queira verificar várias tags ao mesmo tempo, usando um array:

Isso vai retornar true sempre que as tags piratas, ninjas, ou cogumelos forem usadas. A última forma de usar tags em seu benefício é valer-se do fato de que post_class() retorna todas as tags como uma classe para o div da postagem. Isso significa que você pode ter muitas classes em potencial, para aplicar estilos em maior profundidade.

246

CAPÍTULO 12: TRUQUES DE DESIGN Esta, por exemplo, é uma postagem com a ID 129, o que você pode perceber em id="post-129", além do fato de que ela tem mesmo a classe post-129:



Você terá uma porção de tags automáticas e, por fim, terá uma classe por categoria e uma classe por tag. Nesse caso, a categoria usada possui o slug news, assim post_class() adiciona a classe category-news. O mesmo vale para as tags: você tem as tags piratas, ninjas e cogumelos na postagem, e elas são adicionadas com o prefixo tag- para que você possa ver ao que se referem. Assim, você tem tag-piratas, tag-ninjas e tag-cogumelos. A genialidade disso é oferecer um controle ainda mais preciso sobre seu conteúdo. Se você quiser dar mais ênfase a algumas postagens do que a outras, mas não quer associá-las a uma categoria específica, uma tag apropriada é uma excelente solução. Uma utilidade comum dessa técnica seria dar mais destaque a postagens ou patrocinadores. Digamos que você queira dar destaque a uma mensagem de “Obrigado a nossos patrocinadores” no meio do conteúdo, mas não quer que os leitores confundam essa mensagem com uma postagem, de fato. Nesse caso, você simplesmente marcaria a mensagem com uma tag adequada, como patrocinador, e adicionaria algum CSS à sua folha de estilo, fazendo todas as postagens na classe tag-patrocinador terem uma aparência diferente em termos de fonte, cor, fundo, borda ou imagem para mostrar que não se trata do conteúdo comum. Assim como com as categorias, você pode construir seu site ao redor de tags. Minha filosofia é que você deve tomar muito, mas muito cuidado na hora de criar categorias; deixe-as para as seções principais. Aí, então, você pode fazer as coisas acontecerem para cada postagem, usando tags e estilos de CSS específicos.

USANDO CAMPOS PERSONALIZADOS Digamos que você não queira usar um design baseado em tags. Talvez você queira dar um destaque maior aos anúncios dentro do seu conteúdo, apresentando-os como postagens patrocinadas, com um estilo diferente para não correr o risco de enganar os leitores, mas não queira que a tag exclusiva para anúncios apareça nas nuvens de tags. Você pode simplesmente excluir essa tag específica da nuvem de tags, da seguinte forma (a tag excluída, neste caso, será patrocinador):

No entanto, talvez essa solução específica não resolva o seu problema, e você não queira usar tags dessa forma especificamente por já usá-las de outras formas, mas você deseja o mesmo tipo de resultado. Criar uma categoria também não é uma opção, porque você quer controlar em que seção do site as postagens aparecem. É aí que entram em cena os campos personalizados. O exemplo a seguir cria um campo personalizado chamado Poststyle; basta adicioná-lo uma vez e salvar um valor para ele. Este exemplo usa a tag ad (do inglês, anúncio) para manter as coisas separadas. (Se você não se lembra como os campos personalizados funcionam, consulte o Capítulo 4 para recapitular.)

247

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS Insira a classe desejada no valor para a chave Poststyle. Você pode fazer isso facilmente com uma verificação da chave Poststyle para cada postagem, executando echo. Lembre-se de que o último parâmetro true serve para garantir que o echo seja executado para apenas um valor, caso mais valores venham a ser adicionados. Nesse caso, isso não vai funcionar; você quer somente o valor que vai usar como estilo para uma postagem específica. Isso, por sua vez, significa que, quando você atribui a Poststyle o valor ad, o que você quer é que isso seja adicionado como classe, para que você possa aplicar o estilo adequado. (Isso significa também que você pode fazer ainda mais acrescentando outras classes, o que já é uma outra história.) O código que você deve usar para o echo é o seguinte: ID, 'Poststyle', true); echo $specialstyle; ?>

Como adicionar isso à lista de classes gerada por post_class()? Este é o código para gerar as IDs e classes para o div da postagem:

>

Você pode simplesmente acrescentar isso à ID da seguinte forma:

>

Isso adicionaria #ad à postagem, caso você atribua a Poststyle o valor ad, mas, no fim das contas, não fica muito bonito fazer isso com a ID, por isso vamos entrar na template tag post_class()em vez disso. A vantagem é que post_class() aceita parâmetros, assim, se você quiser adicionar uma classe – tartarugas, por exemplo – pode fazer isso da seguinte forma:

Isso faria que post_class() adicionasse tartarugas às classes de CSS geradas, que é o que você quer fazer, mas em vez disso você quer colocar seu valor de campo personalizado para Poststyle ali. Isso significa que você precisa passar o código PHP anterior para post_class(), o que por sorte é bem simples de fazer. No entanto, você não pode usar o código diretamente, por isso vai precisar alterá-lo um pouco. Este é o código que você deve usar: ID, 'Poststyle', true); ?>

A parte do echo foi removida, uma vez que post_class() vai retornar o que você passar para ela. E adicionar essa parte é tão fácil quanto simplesmente remover as declarações em PHP do código e colocá-la dentro de post_class():

ID, 'Poststyle', true) ); ?>>

Isso adicionará o valor do campo personalizado Poststyle como uma classe ao div da postagem, assim como o parâmetro tartarugas fez.

248

CAPÍTULO 12: TRUQUES DE DESIGN ADICIONANDO SUA PRÓPRIA TAXONOMIA Outra forma de obter mais controle sobre suas postagens é adicionar uma taxonomia personalizada. Com esse método, você pode fazer verificações condicionais usando taxonomy_exists(), que, por sua vez, retorna true caso a taxonomia em questão esteja disponível. (Lembre-se de que você precisa criar sua taxonomia personalizada primeiro, conforme descrito no Capítulo 6.) Assim como qualquer outra conditional tag, esse método permite que você realize uma verificação condicional para determinar se uma certa taxonomia está presente; caso esteja, você faz alguma coisa e, caso não esteja, você faz outra. Infelizmente, suas taxonomias personalizadas não podem ser anexadas a post_class() com estilos personalizados, por isso você mesmo terá de fazer isso se quiser. Você poderia optar por executar echo em suas taxonomias personalizadas com os divs de suas postagens, ou usá-los de forma similar caso prefira aplicar estilos à sua postagem dessa forma, simulando a forma como as tags são adicionadas com post_class(), conforme descrito anteriormente. Leia mais sobre taxonomy_exists() no Codex em http://codex.wordpress.org/ Function_Reference/taxonomy_exists. Controlar a aparência de suas postagens usando tags, campos personalizados ou taxonomias é uma ótima forma de melhorar o apelo visual de seu site e dar destaque ao conteúdo de maior importância. Fazer os diversos elementos do design se destacarem sozinhos é importante, desde que eles se encaixem no final. A próxima seção aborda outra parte importante de qualquer design: o menu.

MELHORANDO O MENU O menu é uma das partes mais importantes de um design. Ele precisa incluir conteúdo suficiente para ajudar o visitante a mergulhar fundo em um site, mas sem exagerar a ponto de se tornar poluído e difícil de usar. É crucial caprichar no menu, uma vez que ele está em evidência para o usuário. É por isso que há tantas abordagens visuais usadas para tornar os menus mais interessantes, às vezes para pior, uma vez que muitas delas tendem a ignorar a utilidade em favor de um design mais “cool”. Dito isso, um menu útil e interativo (ver Figura 12-1) também pode ser atraente, e experimentar com diferentes abordagens de uso do menu é sempre uma boa ideia. Só não esqueça de que o objetivo principal é uma navegação fácil. Figura 12-1: Menu simples O tipo de menu que você escolhe quando usa WordPress depende muito do tipo de site no qual está trabalhando. Alguns sites de WordPress são construídos ao redor de Páginas (especialmente sites estáticos), enquanto outros são mais fluidos e realmente podem se resolver muito bem com uma nuvem de tags e um campo de busca. Entre os dois extremos, há a utilização mais comum, com categorias (que obviamente consistem em postagens) para as

249

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS seções e Páginas para informações estáticas (aquela chatice do “About”), e as tags são apenas uma forma de descrever melhor o conteúdo da postagem. De qualquer forma, você definitivamente deve construir o menu usando o recurso de menu (tenho certeza de que lembra dele, dos capítulos anteriores). Dessa forma, não vai ser problema popular o menu, e as atualizações serão relativamente fáceis. Fazer tudo se encaixar não resolve coisa alguma, mas permite que você misture categorias com páginas, postagens, links, etc. Como se isso não fosse o suficiente, você ainda precisa decidir a aparência do menu, sua orientação, e se ele precisa de algum elemento decorativo para se tornar interessante. Uma técnica popular é a de sliding doors. A seção a seguir explica como implementar esse método em um menu de WordPress.

SLIDING DOORS A técnica de menu deslizante em CSS, chamado sliding doors, é um modo simples, mas eficaz de usar elementos gráficos como fundo em um menu horizontal sem precisar configurar uma largura fixa. A ideia é adicionar elementos gráficos como fundo aos seus itens de menu, fazendo-os ser suficientemente flexíveis para comportar qualquer comprimento de texto. O código a seguir é a base do seu menu.

• Primeiro Item
• Segundo Item
• Terceiro Item
• Quarto Item
• Quinto Item



Basicamente, é a saída típica da maioria das template tags de WordPress que listam categorias e Páginas, uma lista não ordenada que é a solução ideal para os menus sempre que possível, ainda que remotamente. Afinal, o que é um menu senão uma lista? Digamos que você queira usar um botão com cantos arredondados, como mostra a Figura 12-2, para seus itens de menu; isso é bonito e moderno, não é mesmo? O problema é que simplesmente aplicar esse botão ao fundo de cada item de menu exigiria que o item de menu, em si, tivesse largura fixa, e uma vez que você não quer criar um gráfico para cada item, e sim fazer o texto do item de menu ser exibido pelo navegador com toda a liberdade Figura 12-2: Imagem de fundo de um botão com cantos que isso oferece, você vai precisar ser criativo. arredondados

A solução é cortar a imagem em três partes. Primeiro, você tem o lado esquerdo, com cantos arredondados nesse lado. Em segundo lugar, você tem o que está no centro, que será o fundo do seu link de menu. E a parte final são os cantos arredondados do lado direito. Ver Figura 12-3.

250

CAPÍTULO 12: TRUQUES DE DESIGN O que você quer é colocar a parte central como fundo do link, e já que sou preguiçoso e não vou me estender muito nesse assuto, vamos usar um centro de uma só cor. Em seguida, você deve colocar os cantos arredondados da esquerda à esquerda do link, e os cantos arredondados da direita à direita, deixando que a cor de fundo preencha o espaço entre os dois.

Figura 12-3: Como cortar um botão

Como você faria isso em HTML? É fácil, basta adicionar um span dentro de cada link da seguinte forma:

• Primeiro Item
• Segundo Item
• Terceiro Item
• Quarto Item
• Quinto Item



Aí, então, você simplesmente adiciona as imagens da forma adequada, usando CSS. O link ficaria com os cantos arredondados da esquerda à esquerda, e seria preenchido com a cor de sua escolha, e então você aplicaria os cantos do lado direito ao span, porém fixos à direita. O efeito que você vai obter é um botão que pode ter a largura que quiser, uma vez que o fundo do link, em si, é um preenchimento depois que os cantos da esquerda são exibidos. Para simplificar ainda mais, aqui está um CSS simulado que você vai precisar alterar antes de usar, mas que ainda assim explica como isso funciona. ul#navigation li { float:left; padding: 5px; list-style:none; } ul#navigation a:link, ul#navigation a:visited { display:block; } ul#navigation a:hover, ul#navigation a:active { background: #888 url(corners-left.gif) no-repeat left; float:left; } ul#navigation a span { float:left; display:block; } ul#navigation a:hover span { float:left; display:block; background: url(corners-right.jpg) no-repeat right; }

251

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS Como você faria isso funcionar com wp_nav_menu(), a template tag responsável pela saída adequada dos menus? É fácil, basta adicionar a tag HTML span com a ajuda dos parâmetros before e after, assim: &after='); ?>

Isso acrescentaria a tag span necessária a cada link no menu, ativando assim a utilização do sliding door. Você poderia aplicar esse método também a outras template tags simples, como wp_list_ categories() para sites em que você precisa listar as categorias dessa forma. É um pouco mais complicado, mas se você executar inteiramente wp_list_categories() pelo PHP, usando preg_replace (referência no manual de PHP: http://se2.php.net/preg_ replace), pode alterar a saída de wp_list_categories(). Esse código é um pouco mais técnico; ele busca algumas expressões (nesse caso as tags li e a) e então adiciona tags span de abertura e fechamento ao redor de cada link. No lado do WordPress, é importante passar um false (isto é, zero) para o parâmetro echo, de modo a garantir que a tag wp_list_ categories() não gere uma saída para o conteúdo (é isso que você faz com echo antes de preg_replace(), afinal), e é provavelmente uma boa ideia não passar coisa alguma para o parâmetro title_li, de modo a não obter um título para a listagem de categorias. Outra boa ideia é passar 1 para depth, a fim de garantir que você tenha apenas categorias de primeiro nível. O código é o seguinte: 248 ]*)>\]*)>(.*?)\<\/a>@i', '$3', wp_list_categories('title_li=&echo=0&depth=1')); ?>

Mas e o que dizer de wp_list_bookmarks()? Aqui está ela em ação, exibindo apenas a categoria de links Importante, cuja ID é 15. Naturalmente, você também precisaria adicionar o código de span necessário e remover o título: &link_after= '); ?>

PENSANDO SOBRE O EFEITO HOVER NOS MENUS Quanto mais conteúdo você tiver, mais itens vai querer incluir no menu. Afinal, o propósito do menu é justamente ajudar os visitantes a navegarem em seu site, por isso é fácil cair na tentação de adicionar tudo e mais um pouco ao menu. Os menus horizontais são populares, mas a largura é uma limitação quando chega a hora de expandi-los. A solução muitas vezes é o efeito “hover”, que faz um submenu se abrir ao passar o mouse sobre um item, como mostra a Figura 12-4, para que os visitantes tenham fácil acesso às seções dentro de cada item de menu. Com o advento de dispositivos com tela de toque, como smartphones e tablets, no entanto, você deve tomar cuidado na hora de usar designs que usam esse efeito. Uma vez que os menus são parte integrante de um site, eu recomendo que você evite construí-los usando o efeito “hover”. Afinal, não é possível passar o mouse sobre um link em uma tela de toque, já que as únicas opções são “pressionar” (no sentido de que você está tocando a tela, de forma

252

CAPÍTULO 12: TRUQUES DE DESIGN comparável a um clique, em uma interface que usa um mouse) ou não. Não é possível “passar o mouse sobre” algo em uma tela de toque, por isso um menu que depende desse efeito não vai funcionar em tablets. Já há milhões de tablets no mercado, e todos esperam que esse mercado exploda. Será que isso significa que você nunca mais vai criar um menu com o efeito “hover”? Embora eu recomende cautela, acho que ainda há espaço para eles. Se você tem alternativas decentes, como por exemplo fazer o primeiro item do menu ser clicável e garantir a facilidade para alcançar itens mais baixos a partir da página-alvo, não há problema algum. Não vai ser tão rápido e fácil navegar no seu menu sem um ponteiro de mouse, mas pelo menos tudo vai funcionar. Mantenha isso em mente na hora de decidir que tipo de menu você vai usar em seus projetos futuros.

Figura 12-4: O menu do tema Twenty Ten, que abre submenus quando o usuário passa o mouse sobre cada item, nem um pouco amigável para iPad

Agora, vamos dar uma guinada da exibição de postagens e menus para a adição de anúncios dentro do loop.

POSICIONANDO ANÚNCIOS DENTRO DO LOOP Uma pergunta que muitas pessoas me fazem é como inserir anúncios – especificamente anúncios de Google AdSense – dentro do loop. Normalmente, os blogueiros querem veicular um anúncio depois da primeira, segunda ou terceira postagem e, então, continuar com o loop como se nada tivesse acontecido. Uma forma de fazer isso é dividir o loop em dois, primeiramente com uma consulta para as duas primeiras postagens, por exemplo, e então exibindo o anúncio. Depois disso, há um segundo loop com uma compensação de postagens que corresponde ao número de postagens consultadas no primeiro loop; assim tudo forma uma grande unidade. Uma forma melhor de fazer isso é simplesmente contar o número de postagens e exibir o anúncio quando um certo número for atingido. Você pode fazer isso com PHP ou adicionando uma variável sempre que o loop é executado, o que acontece para cada postagem que deve ser exibida. Mais uma forma comum de exibir um anúncio depois da primeira postagem, sem todo o código de saída da postagem.

253

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

O código acima é um loop básico, com um pouco de contagem. Sem dúvida, você reconhece a primeira linha if (have_posts(), mas a linha abaixo dessa é nova. Você atribui a $postcount o valor 0, e então adiciona +1 ao valor sempre que o loop for executado. Isso é feito na linha while (have_posts()) : the_post(), assim, a primeira coisa que você vai fazer depois disso é adicionar +1 ao valor de $postcount, e para isso você usa ++, que significa exatamente isso, adicionar +1. Depois disso, a coisa é bem simples. Se o valor de $postcount for inferior a 2, o código irá gerar a postagem e o código do anúncio; caso contrário, o código passa para a saída de postagem expressa por else, que corresponde à sua postagem padrão. Mas e se você quiser inserir o anúncio após cada uma das primeiras duas postagens? Nesse caso, basta alterar a consulta if configurando o valor de $postcount de 2 para 3, o que significaria que o anúncio seria exibido nas postagens de números um e dois dentro do loop:

Cuidados com as regras de anúncios Inserir anúncios entre as postagens pode soar como uma grande ideia. Afinal, é uma prática relativamente não invasiva e, portanto, não excessivamente irritante. É claro que, ainda assim, ela irrita alguns, mas é bem melhor do que colocar anúncios no conteúdo em si, o que você também pode fazer, com alguns truques bacanas de “hacking”. No entanto, embora possa parecer interessante distribuir os anúncios entre as postagens, você deve observar as regras da rede de anúncios que está usando. O Google AdSense, um serviço amplamente utilizado, tem um limite para o número de anúncios que você pode exibir por página; e se você exceder esse limite, vai ter problemas, e talvez sua conta seja suspensa. Isso é ruim para a maioria das pessoas, mas ainda pior para quem ganha a vida com anúncios na Internet. Por isso, embora eu incentive a distribuição de anúncios pelo site (isso, afinal, é bem melhor do que concentrá-los no topo da página), também me sinto na obrigação de lembrar que você deve verificar se as regras da rede de anúncios incluem alguma limitação. E tome cuidado! Saídas automáticas como essa podem ser perigosas, e um erro em algum lugar pode acabar gerando um bocado de anúncios em toda a parte. Ninguém vai gostar disso: nem seus leitores, nem a rede de anúncios e muito menos você. Outra coisa que você deve considerar com cautela é o uso de páginas de erro 404 com anúncios. É claro que você pode exibir anúncios nessas páginas, mas eles não terão um bom desempenho se forem contextuais, e duvido que os anunciantes que estão pagando pela visualização dos anúncios queiram aparecer em uma página de erro.

254

CAPÍTULO 12: TRUQUES DE DESIGN

CRIANDO PÁGINAS DE 404 PARA AJUDAR O VISITANTE É importante criar páginas de erro 404 que sejam úteis. Essas páginas são exibidas sempre que alguém chega a uma página que não existe em seu site, e embora você possa não ter cometido erro algum, isso pode não se aplicar a quem disponibiliza links para o seu conteúdo, por isso essas páginas são necessárias. O arquivo de modelo do tema que gerencia os erros 404 Page Not Found tem o nome de 404.php, e você pode fazer o que quiser com ele, desde que ele seja executado a partir do WordPress. Esta seção não traz detalhes sobre como construir seu próprio arquivo de modelo 404.php (falamos disso no Capítulo 4). No entanto, ela discute o que acho que uma boa página de erro 404 deve oferecer ao visitante: O fato de que a página não está ali deve ficar óbvio. Em outras palavras, informe ao

visitante que a página que ele buscava não existe, e faça-o de modo que não haja risco de um mal-entendido. Ofereça rotas alternativas. Uma vez que a maior chance de encontrar uma mensagem de erro 404 em uma instalação de WordPress é por meio de um link corrompido vindo de um local externo, você deve oferecer uma rota diferente para o conteúdo que o visitante estava buscando. Ofereça um incentivo específico para que seu visitante utilize a ferramenta de busca. Abra seu site. O visitante talvez não se importe o suficiente para buscar o conteúdo que disparou o erro 404, mas talvez você ainda assim possa capturar sua atenção. Adicione links para suas categorias e ofereça uma breve introdução sobre cada uma delas. Faça seu erro 404 vender o seu site. Mostre o conteúdo mais recente. É fácil exibir uma lista de links mostrando as últimas atualizações. Alguma coisa ali pode chamar a atenção do visitante. Mantenha o bom humor. Uma pitada de humor pode ser uma forma de fazer o visitante se irritar menos com o fato de que o conteúdo que ele queria visualizar não está disponível ali. Ofereça uma forma de relatório de erro. Deixe que o visitante entre em contato com você para avisar sobre o conteúdo indisponível; isso gera uma mensagem positiva, e ainda ajuda você a encontrar possíveis falhas em seu site. Uma página de 404 útil diz muito sobre um site, por isso invista algum tempo para caprichar na sua.

USANDO BIBLIOTECAS DE JAVASCRIPT COM WORDPRESS JavaScript pode ser uma ferramenta excelente, principalmente graças às ótimas bibliotecas como jQuery, MooTools, Scriptaculous, etc. Há uma infinidade dessas bibliotecas disponíveis, o que facilita na hora de adicionar transições e outros elementos visuais decorativos, assim como coisas mais úteis. A maioria dos serviços on-line bacanas de hoje utilizam JavaScript, e a interface de admin do WordPress perde muito da diversão se você desativar JavaScript em seu navegador. Você pode adicionar a funcionalidade de JavaScript também aos seus sites de WordPress, seja apenas para melhorar o apelo visual de seu tema com animações e coisas do tipo, ou para

255

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS adicionar novas funcionalidades, de fato, graças ao brilhantismo do seu código. O que você precisa é pensar em como fazer isso, e é aí que entra em cena wp_enqueue_script(). Com essa tag, você pode carregar qualquer uma das diversas bibliotecas de JavaScript incluídas no WordPress, ou simplesmente anexar sua própria. A utilização é simples. Adicione um JavaScript ao gancho onde ele é necessário, usando

wp_enqueue_script(). Se você quiser retardar ao máximo o carregamento de um

JavaScript, uma vez que ele provavelmente não será necessário até que o usuário faça algo específico, você pode usar wp_enqueue_script() e anexar isso ao gancho wp_footer, da seguinte forma (usando jQuery como exemplo): function load_my_scripts() { wp_enqueue_script('jquery'); } add_action('wp_footer', 'load_my_scripts');

Isso carregará a versão de jQuery integrada ao WordPress. Você pode encontrar outras bibliotecas de JavaScript assim, na pasta wp-includes/js/. A utilização de wp_enqueue_ script() também facilita o carregamento de scripts apenas quando você precisa deles, com o uso criativo de algumas conditional tags. Se você quer o script apenas na página inicial, use is_home(), e assim por diante. Você pode fazer muita coisa com JavaScript, e tudo depende do site e das suas preferências. Algumas pessoas se sentem mais confortáveis com Prototype do que com jQuery, e outras preferem MooTools ou algo totalmente diferente. É por isso que wp_enqueue_script() pode carregar qualquer coisa. Você deve usar essa tag e certificar-se especificamente de não deixar seu site mais lento com JavaScripts caso não precise deles, ou deixar que os scrips sejam carregados cedo demais. Afinal, qual é o objetivo de esperar um JavaScript quando não há uma página para utilizá-lo? Recomendo fortemente que você leia um pouco sobre wp_enqueue_script() no Codex, onde você também vai encontrar informações sobre as diversas bibliotecas de JavaScript incluídas no WordPress, e sobre como você pode passar elementos como dependências, além de como remover o registro de bibliotecas de JavaScript e substituí-las por suas próprias bibliotecas. Comece pela página do Codex (http://codex.wordpress.org/ Function_Reference/wp_enqueue_script) e siga adiante, a partir daí, para a biblioteca de JavaScript em si . Há uma porção de JavaScripts por aí que você pode usar, sem falar nas extensões das populares bibliotecas de que já falamos. Certifique-se de ler sobre elas, não apenas para manter seu site limpo, mas também para garantir que elas funcionem em todos os navegadores para os quais você quer oferecer suporte. Dito isso, se a funcionalidade adicional, a elegância ou o elemento chamativo vai ajudar a melhorar seu site, essa pode ser uma ótima forma de torná-lo mais atraente.

WORDPRESS DO SEU JEITO Às vezes, você precisa que o WordPress leve sua marca um pouco mais longe do que o esperado. Muitas vezes, isso ocorre quando você está usando plug-ins ou recursos que permitem que os usuários se registrem, com configurações e privilégios no lado administrativo das coisas. Ou seja: eles podem acessar a interface de admin do WordPress. 256

CAPÍTULO 12: TRUQUES DE DESIGN Isso tem duas consequências. Primeiramente, os visitantes podem fazer login, ou seja, eles irão usar o formulário de login do WordPress, mostrado na Figura 12-5. O formulário padrão de login não se parece nada com o site que você desenhou cuidadosamente, por isso, é natural que você queira mudar algo nele. Em segundo lugar, os usuários irão acessar a interface de admin do WordPress, que tem a cara do WordPress, e não a cara da sua Super Marca™. Ninguém quer uma coisa dessas, não é mesmo? Infelizmente, o WordPress não oferece as mesmas possibilidades dos temas no lado Figura 12-5: Formulário de login padrão administrativo das coisas quanto no lado do usuário de seu site, mas há várias coisas que você pode fazer. Tudo vai depender do quão importante é que as partes do WordPress se pareçam o mínimo possível com WordPress, e de quanto tempo você quer investir para fazer as alterações.

FORMULÁRIO DE LOGIN PERSONALIZADO Se você precisar mudar uma só coisa dentre todos os elementos administrativos do WordPress, provavelmente será o formulário de login. Ele é cheio de elementos visuais da marca WordPress, o que, em si, já é bem irritante, sobretudo se o seu site estiver fazendo algo totalmente diferente de um típico blog de WordPress. É claro que você pode simplesmente modificar o formulário de login alterando os arquivos no núcleo do WordPress, mas isso significaria correr o risco de causar uma falha em algo crucial, fora o fato de que você precisaria repetir o processo a cada atualização, uma vez que a atualização sobrescreve as alterações. Usar um plug-in é uma ideia bem melhor. Você pode já ter encontrado algumas possibilidades no Capítulo 9. Elas são muito boas, por isso recomendo que teste-as. No entanto, talvez você queira manter o formulário de login alinhado com o tema, uma vez que trata-se de uma questão de design, e isso significa que você quer fazer suas personalizações dentro dos arquivos do tema. Por sorte, você pode fazer isso ativando o gancho de ação login_head com a ajuda de folhas de estilo. Isso significa que você pode fazer o formulário de login ter a aparência que você quiser, desde que não precise alterar o layout em si. Sendo assim, não é problema aplicar um fundo preto e o seu logotipo; basta usar um pouco de CSS. Porém, primeiramente você precisa criar o gancho de função sobre o gancho de ação login_ head. Você provavelmente vai reconhecer esse tipo de código do Capítulo 6, que aborda os ganchos de ação em profundidade. Lembre-se de que você deve facilitar a construção de temas filhos sobre o seu tema, e esses temas filhos podem precisar de seu próprio formulário de login. É por isso que eu uso o parâmetro stylesheet_directory na tag get_ bloginfo(), em vez de template_directory, que é usado normalmente. O código é o seguinte: 257

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS // CSS para formulário de login personalizado function nbcustom_login() { $nbCustomLoginUrl = get_bloginfo('stylesheet_directory').'/noteslogin.css'; wp_register_style( 'nbCustomLoginStyle', $nbCustomLoginUrl ); wp_enqueue_style( 'nbCustomLoginStyle' ); } add_action('wp_head', 'nbcustom_login', 1);

O código acima é relativamente simples; a única coisa que ele faz é adicionar o conteúdo da função nbcustom_login() ao gancho login_head. Naturalmente, estou falando de wp_enqueue_style() (que funciona de forma muito semelhante a wp_enqueue_ script()) contendo uma folha de estilo localizada em uma pasta chamada custom no diretório do tema. Você pode ler sobre wp_enqueue_style() no Codex em http:// codex.wordpress.org/Function_Reference/wp_enqueue_style. O restante fica a seu critério: é só modificar a nova folha de estilo que você incluiu (localizada em custom/login.css nesse exemplo). A página de login é relativamente fácil de entender. Alguns dos elementos que talvez você queira alterar são a cor de fundo (usando a tag body), o logotipo do WordPress, que reside na tag h1 e a própria caixa de login, que está em div#login. Boas modificações para você!

TEMAS DE ADMIN Aplicar um tema à interface de admin do WordPress é, infelizmente, uma tarefa relativamente complicada. Em primeiro lugar, a única forma de fazer isso sem modificar ou sobrescrever os arquivos do núcleo (o que nunca é uma boa ideia) é usando um plug-in. Basicamente, você pode criar um plug-in que use o gancho de ação admin_head e aplique sua própria folha de estilo, da mesma forma como fizemos com o formulário de login no exemplo anterior: function smashing_admin() { echo ''; } add_action('admin_head', 'smashing_admin');

Você já sabe como a coisa funciona: você inclui a folha de estilo smashing-admin.css diretamente dentro do diretório do plug-in, usando algo como http://domain.com/ wp-content/plug-ins/smashing-admin-plug-in/smashing.css nesse caso. Depois disso, você precisa alterar o comportamento dos inúmeros elementos da interface de admin do WordPress. Isso não é para os fracos. E, naturalmente, não esqueça de instalar e ativar o plug-in! Talvez você queira, também, adicionar algo ao rodapé da interface de admin. Para isso, simplesmente acrescente o que quiser ao gancho admin_footer, de forma semelhante ao que acabamos de fazer. Há alguns temas de admin impressionantes por aí, incluindo os mencionados no Capítulo 9, mas não se iluda. Fazer a interface de admin ter a aparência que você quer não é uma tarefa fácil. Dito isso, às vezes você precisa apenas de mudanças mínimas, como trocar as cores e coisas do tipo, e isso não chega a ser um problema, se você usar o método acima.

258

CAPÍTULO 12: TRUQUES DE DESIGN

MELHORANDO SEU SITE DE WORDPRESS Para que o seu site deixe de ser um simples tema de WordPress (por melhor que ele seja) e se torne algo mais completo, é importante que você aprenda os truques do WordPress. Qualquer site que se preze pode se beneficiar do aprimoramento que esses truques oferecem, por isso experimente com diversas técnicas e veja o que você pode fazer com seu site. Embora seja importante controlar a aparência e a atmosfera geral das suas postagens e obter um menu adequado, as possibilidades para o seu site são infinitas. Há blogs excelentes, como o da Smashing Magazine (http://www.smashingmagazine.com/) e A List Apart (http://www.alistapart.com/), que podem ajudá-lo a encontrar ainda mais técnicas interessantes para seu site. Algumas delas podem ser empregadas imediatamente, e outras precisam de uma abordagem mais prática. Divirta-se com seus experimentos!

259

13

DIVERSÃO COM IMAGENS

DIZEM QUE uma imagem vale por mil palavras; com imagens, é possível contar uma história bem mais rapidamente do que com palavras. Não é segredo algum que imagens e texto funcionam muito bem juntos. Além de dar um tempero a mais às coisas, uma imagem pode ajudar a contar uma história e (literalmente) ilustrar um argumento. Se você está usando imagens em seu site, é importante pensar com calma sobre como

incorporar galerias e ilustrações. Este capítulo aborda a exibição de imagens em um site de WordPress para além das tradicionais ilustrações ou cenários inspiradores em suas postagens e páginas. Estamos principalmente falando de galerias, apresentação e serviços de compartilhamento de fotos, isso sem falar no detalhe de configurar o gerenciamento de imagens do WordPress de uma maneira que faça sentido.

CAPÍTULO 13

SMASHING WORDPRESS

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

TRABALHANDO COM GALERIAS DE IMAGENS O WordPress já oferece suporte ao shortcode [gallery] por bastante tempo, com todas as possibilidades que isso traz. Se você estiver trabalhando no editor visual, não vai ver o botão de galeria, apenas uma grande caixa que avisa tratar-se de uma área para imagens. Para obter uma representação mais refinada, você pode alternar para a visualização em HTML. Na verdade, o que [gallery] faz é gerar uma saída das imagens que você subiu em um grid de miniaturas clicáveis. Aí, então, você pode permitir que os visitantes vejam uma versão maior da imagem, seja no design do seu tema ou no arquivo original, em si. O primeiro método é chamado de página de anexo (attachment page), uma vez que as imagens são anexos da postagem de blog. Essa funcionalidade integrada deve cuidar da maior parte de suas necessidades se você possui um site primariamente orientado para texto que publica imagens eventualmente. Para fazer a sintonia fina desse quesito, o primeiro passo depois de instalar o WordPress e selecionar o tema desejado é visitar a página Media, dentro da opção Settings, na interface de admin. Aqui, você pode controlar as circunstâncias sob as quais as diversas imagens são redimensionadas. Quando você faz o upload de uma imagem, ela é salva em quatro versões diferentes, para diferentes necessidades no site. A Figura 13-1 mostra a página de configurações de mídia do WordPress, que define os diversos tamanhos que suas imagens podem ter: A miniatura (thumbnail) é uma versão cortada da imagem, que serve para simbolizar a

imagem em questão. Você pode configurá-la para ser cortada em tamanhos exatos, assim, a imagem inteira nem sempre será exibida. É uma imagem pequena, feita para ser clicável. O tamanho padrão é 150x150 pixels, mas você pode alterar isso para ajustar as configurações ao seu tema. A imagem média (medium) é a imagem completa com o tamanho reduzido e largura e altura propocionais à imagem original que você subiu. Você pode configurar a largura e altura máximas que ditam como a imagem deve ser dimensionada. Essa é também a imagem usada nas páginas de anexo. A imagem grande (large) também é sua imagem completa, mas reduzida proporcionalmente. A imagem original também é disponibilizada, sem qualquer alteração. Não há ressalvas: nenhuma versão da imagem será criada caso sua dimensão seja maior do que a da imagem original. Assim, se sua imagem estiver configurada para ter largura e altura de 800 pixels, mas a imagem que você está subindo for menor que isso, ela não será criada ou disponibilizada para inclusão no WordPress. Não haveria porquê. Então o que acontece? Por que estou tocando nesse assunto? É simples. A miniatura deve ter um tamanho que se ajuste à largura e ao número de colunas que você normalmente espera usar em suas galerias de imagens criadas com o shortcode [gallery]. Selecione um tamanho que funcione bem para o seu site. 262

CAPÍTULO 13: DIVERSÃO COM IMAGENS

Figura 13-1: Página de configurações de mídia do WordPress

Por outro lado, acredito que a imagem média deva ser exatamente da mesma largura máxima que seu design pode suportar. Em outras palavras, se a largura máxima for de 580 pixels, configure a largura máxima da imagem média para 580 pixels, para garantir que você possa incluí-la em suas postagens sempre que quiser. Uma vez que a imagem média é usada nas páginas de anexo, é uma boa ideia fazê-la se encaixar bem nessa página. Se suas páginas de anexo forem construídas de forma a suportar um tamanho de imagem maior que suas postagens tradicionais, você certamente vai ter problemas, mas nesse caso você vai precisar criar imagens personalizadas para suas postagens. O mais importante é que a página de anexo tenha uma aparência agradável. Por fim, a imagem grande é boa para criar um link para uma variante maior. Alguém poderia dizer que a imagem grande deve ser usada na página de anexo, e provavelmente é possível fazer isso acontecer, mas o padrão não é esse, sendo assim, não conte com isso. A imagem grande em geral só interessa se você estiver fazendo o upload de uma foto em alta resolução e não quiser incluir um link para a versão original, uma vez que ela tem 15 megabytes e é ridiculamente grande para ser visualizada na Web, e a imagem grande for substancialmente menor e se adapte ao tamanho da tela.

APLICANDO ESTILOS À GALERIA Deixar as galerias incluídas com o shortcode [gallery] com uma boa aparência é fácil, partindo-se do pressuposto de que você tenha configurado suas miniaturas de acordo com o número de colunas que vai usar. O número de colunas é algo que você pode selecionar na hora de incluir a galeria, por isso preste bem atenção.

263

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS Aplicar estilos à galeria é, na verdade, muito fácil. Tudo fica dentro de um div com várias classes de identificação a serem utilizadas, e uma delas se chama gallery. Como manda a norma do WordPress, há também IDs e classes únicas, mas você provavelmente pode resolver o problema com o div.gallery para suas necessidades de CSS. Seguindo em frente, cada item da galeria é envolto por dl.gallery-item, que por sua vez contém dt.gallery-icon, que possui a miniatura com o link para a imagem e possivelmente também um dd.gallery-caption, caso haja uma legenda para a imagem em questão. Você terá esse formato para todas as imagens que estiver selecionado para exibição em uma fileira, e então tudo isso é interrompido para iniciar uma nova fileira, sem a menor cerimônia, com uma tag br com style="clear:both", e então tudo recomeça. Isso significa que, para as listagens de galerias de miniaturas, você precisa aplicar o estilo aos seguintes elementos (listados em ordem hierárquica): div.gallery {} dl.gallery-item {} dt.gallery-icon {} dd.gallery-caption {}

Este é o código usado pelo tema Notes Blog, com cor e tamanho de fonte sutis para as legendas e um espaço em branco no meio, o que é sempre agradável aos olhos. Naturalmente, seu design pode ser bem mais atraente, adicionando imagens de fundo, bordas e assim por diante. 260 div.gallery { margin-bottom: 14px; } img.attachment-thumbnail { border:0; } dd.gallery-caption { margin-top: 8px; font-size: 12px; color: #777; font-style: italic; }

Isso é apenas a metade do processo. Embora você possa configurar as miniaturas de sua galeria para incluírem um link para a imagem, de fato, você sempre pode optar por criar um link para a página de anexo. Trata-se da página que exibe a imagem no design do seu tema, o que provavelmente significa que ela irá reverter para single.php ou index.php, uma vez que a maioria dos temas não possuem um arquivo de modelo attachment.php, e pouquíssimos possuem arquivos de modelo para video.php, image.php, etc. Para fazer seu tema ser amigável para imagens, você deve adicionar um link de volta para a postagem que contém a galeria de imagens e adicionar links de Anterior/Próxima para que o usuário possa navegar pelas imagens da galeria. Vamos começar pelo link para a imagem anterior. O código a seguir, que talvez você reconheça do Notes Blog, busca a postagem mãe (a postagem à qual o anexo se refere) e cria um link para ela. Nada demais. Você não pode usar the_permalink(), uma vez que isso indicaria o próprio anexo, ao passo que the_title() é, naturalmente, o título da imagem. Você provavelmente deve garantir que o seu modelo de anexo gere a mesma saída.

264

CAPÍTULO 13: DIVERSÃO COM IMAGENS

← post_parent) ?>" title="post_parent) ?>" rev="attachment"> post_parent) ?>



Falando em saídas, a descrição que você pode digitar na hora de fazer o upload ou a edição de imagens é na verdade gerada por the_content(), assim, você pode facilmente acrescentar um bom suporte a anexos para seu modelo single.php ou index.php. Basta usar a conditional tag is_attachment() para fazer a verificação e gerar a saída de acordo com isso, que tudo dará certo. Voltando ao assunto: é hora de adicionar aqueles links para a imagem anterior e para a próxima imagem, facilitando a navegação dentro da galeria, na visualização de imagem anexada. Para fazer isso, use previous_image_link() e next_image_link(); ambas irão gerar, por padrão, a miniatura com link para a outra imagem de destino. Aqui, você está usando divs para deixar os links para a próxima imagem e para a imagem anterior flutuando à direita e à esquerda, respectivamente:



Embora a saída da miniatura possa ser o suficiente se for personalizada para a tarefa, você talvez prefira usar texto. Basta não passar nada para os parâmetros de tamanho da imagem (sim, outros tamanhos também são aceitos) e a saída gerada trará o título da postagem da imagem, ou seja, o nome atribuído por você. Ou, alternativamente, você pode adicionar outro parâmetro para passar um link com texto personalizado, da seguinte forma:



Isso é essencialmente tudo o que você precisa saber para trabalhar com galerias em um site de WordPress. O próximo passo natural, depois de fazer a galeria funcionar com seu tema, é turbinar a coisa toda usando plug-ins.

NAVEGANDO MELHOR COM O EFEITO LIGHTBOX O efeito Lightbox é um nome genérico para uma sobreposição que exibe uma imagem sobre um site, sem abrir um pop-up (ver Figura 13-2). Você precisa fechar a imagem para acessar novamente o site, o que pode soar como uma má ideia, mas compare isso a precisar abrir uma nova página para visualizar a imagem em tamanho completo, e você vai entender o princípio. As melhores soluções lightbox oferecem também botões de navegação.

265

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

Figura 13-2: Efeito lightbox em ação

Isso é feito com JavaScript e alguns truques de design, e há uma infinidade de soluções possíveis esperando por você. A solução que escolher depende de quantos elementos visuais decorativos você quer, e de que tipo de efeito se adapta a você e ao seu site. Acredito que você deve optar por uma solução que venha sob a forma de plug-in de WordPress, no entanto, porque isso significa que você não vai precisar adicionar manualmente as classes de suas imagens para garantir que a solução Lightbox reconheça o link como um link do tipo lightbox. Consulte o Capítulo 9 para obter excelentes opções de plug-ins que oferecem esse efeito caso ainda não tenha um favorito. Os plug-ins fazem isso por você, de modo que, em um piscar de olhos, sua galeria de imagens não precisa mais abrir aquelas páginas de anexo, e seus visitantes poderão navegar facilmente pelas fotos. No entanto, isso tem desvantagens, a mais óbvia delas sendo a possibilidade de o visitante ter desativado JavaScript, ou de alguém clicar sobre o link da miniatura antes que o script de Lightbox tenha sido carregado completamente. O resultado disso é a imagem ser exibida, por inteiro, fora do design, como se um link apontasse para a própria imagem apenas (o que é exatamente o que acontece, mas aí então o script corrige isso com os efeitos adicionados). Não é bonito quando isso acontece, sobretudo se o visitante espera aquele efeito de sobreposição bacana, e os práticos links de navegação da galeria que provavelmente estão incluídos, mas graças ao botão Voltar do navegador, a solução é plenamente funcional. Quais seriam os motivos para não usar uma solução de Lightbox? Uma grande preocupação são os dispositivos menores. Quão atraente será esse efeito em uma tela inferior a sete polegadas, com baixa resolução? Será que nesse caso há alguma utilidade? Podemos dizer o mesmo sobre as páginas de anexo, mas é mais fácil aplicar estilos a essas páginas de acordo com o perfil de cada usuário. Você deve certificar-se de que o script de Lightbox não substitua qualquer outra solução. Por fim, se você ganha dinheiro com visualizações de página, não adote o efeito lightbox a não ser que você acredite que isso trará mais leitores. Afinal, fazer as pessoas carregarem uma nova página e, portanto, um novo conjunto de anúncios, sempre que quiserem visualizar a próxima imagem em uma galeria, pode ser, por si só, um bom negócio.

266

CAPÍTULO 13: DIVERSÃO COM IMAGENS USANDO SCRIPTS E SISTEMAS EXTERNOS Por fim, gostaria de falar um pouco sobre o uso de soluções de galeria externas ao WordPress, como um software de galeria autônomo. Há inúmeros scripts de galeria disponíveis, e alguns deles são, em si, sistemas completos, enquanto outros simplesmente convertem as imagens para diversos tamanhos e exibem o conteúdo em pastas físicas no seu servidor, como HTML. Recomendo que você pense muito bem antes de usar galerias de imagens externas, como por exemplo Gallery2. A principal preocupação por trás disso é a flexibilidade. O WordPress pode ser expandido com inúmeros plug-ins, e se as suas imagens fazem parte do WordPress, elas podem se beneficiar disso. No entanto, se você estiver executando suas imagens em um script externo e simplesmente exibindo-as em seu tema, não terá benefício algum. E o que acontece se o script externo de repente parar de funcionar ou entrar em conflito com sua instalação de WordPress? O mesmo se aplica também aos plug-ins que movem a funcionalidade de galeria do núcleo do WordPress para sua própria instalação. Isso pode significar que eles podem adicionar novos recursos, melhor classificação, ou o que for, mas significa também que, quando o plug-in deixar de receber manutenção e parar de funcionar por conta de uma funcionalidade abandonada de WordPress ou outros conflitos, você vai estar sozinho, algo que não aconteceria se não tivesse optado por uma solução externa. Além disso, no lugar da funcionalidade de galeria oferecida pelo plug-in que você estava considerando, por que não sair em busca de algo que adicione isso aos recursos já incluídos na galeria de imagens? Dito isso, às vezes você precisa fazer mais, e nesses casos vai precisar extrapolar os recursos do núcleo do WordPress, seja usando plug-ins ou sistemas e/ou serviços externos. Apenas certifique-se de que você sabe o que está fazendo, e tenha a certeza de que você sabe o que fazer se precisar retornar para a configuração anterior, ou usar algo diferente. As ferramentas de conversão e importação podem ajudá-lo a ter maior segurança nesses casos.

RANDOMIZANDO ELEMENTOS DE IMAGENS Configurar seu site para exibir aleatoriamente suas imagens e outros elementos pode apimentar as coisas e dar mais vida ao seu site. Na blogosfera, é comum ver imagens de cabeçalho randômicas, ou aleatórias, assim como promoção de postagens aleatórias. Afinal de contas, elementos que mudam sutilmente a cada nova visita (sem comprometer a capacidade de navegação do visitante) são, em geral, vistos como algo mais interessante do que uma exibição estática. A forma mais básica de randomização utiliza PHP e qualquer uma das funções de randomização que a linguagem oferece, como rand() e mt_rand(), por exemplo. Além disso, há diversas soluções de JavaScript que você pode utilizar. Soluções para ambas as técnicas estão disponíveis na Web, para que você não precise desperdiçar tempo modificando sua própria solução a não ser que isso seja realmente necessário. Mas a coisa não para por aí. Também há diversos plug-ins que podem ajudar, e alguns deles são abordados no Capítulo 9. O conteúdo randomizado, especialmente as imagens, se tornou tão comum que é ridiculamente fácil implementar esse recurso. A não ser, é claro, que você queira exibir imagens randomizadas a partir de postagens que foram subidas por você. Por algum motivo, isso é mais difícil. 267

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS EXIBINDO IMAGENS ALEATÓRIAS A PARTIR DE SUAS GALERIAS Uma forma de conteúdo de imagem randômico ainda mais legal vem das suas galerias: as imagens que você já subiu para o WordPress. Essas imagens são anexos, e você pode chegar a elas modificando get_post() em um loop adicional. A ideia é exibir a miniatura de qualquer anexo que seja uma imagem, e criar um link para essa imagem. Uma vez que você já aplicou um estilo adequado às suas galerias (como aprendeu na seção anterior), você sabe que o visitante pode continuar clicando e apreciando suas fotos (ou o que for) a partir dali, por isso essa parece ser uma boa forma de capturar a atenção dos leitores. Este código mostra como fazer isso, neste caso gerando uma saída para tudo, em uma lista não ordenada, que parece a solução mais adequada.





have_posts()) : $new_query->the_post(); ?> $args = array(

'post_type' => 'attachment', 'numberposts' => 1, 'orderby' => rand,

'status' => 'publish',

'post_mime_type' => 'image', );

'parent' => $post->ID

$attachments = get_posts($args); if ($attachments) {

foreach ($attachments as $attachment) {

echo '
• ';
  
  echo wp_get_attachment_link($attachment->ID, 'thumbnail', true, ''); echo '
'; }

}

?>





As duas primeiras linhas servem simplesmente para criar o novo loop de WordPress e limitar o número de postagens que entram no loop. Em seguida, temos um array que pertence à função $args. Essa é uma utilização relativamente comum no WordPress; ela facilita a passagem de todos os parâmetros e seu armazenamento em uma função. Os parâmetros pertencem a get_posts(), que irá controlar a saída, de fato. Vamos falar disso em breve. O array $args deve ser relativamente autoexplicativo, com classificação pelo post type do anexo, exibindo apenas um anexo por postagem (caso contrário, você teria várias imagens em vez de uma só), randomizando a ordem e usando apenas postagens publicadas, limitando as coisas ao tipo MIME 'image'. (Esse valor poderia facilmente ser limitado a 'video', por exemplo, portanto é possível usar o método para vídeos também.) Por fim, você anexa a ID da postagem mãe, como boa prática; isso não é realmente necessário, mas pode ser útil em outros casos, por isso deixei o código ali como informação. 268

CAPÍTULO 13: DIVERSÃO COM IMAGENS Assim, você tem todas as informações do array armazenadas em $args, e agora vai carregar get_posts() com esse array. Para fazer isso, você usa a linha a seguir. $attachments = get_posts($args);

Agora, get_posts() com todos os parâmetros de $args é inteiramente armazenada em $attachments, que você pode usar no loop foreach. Ali, você encontra a seguinte linha, que é o que controla a forma como os anexos serão exibidos: echo wp_get_attachment_link($attachment->ID, 'thumbnail', true, '');

A template tag wp_get_attachment_link() gera o anexo relevante por padrão. Aqui, você está informando a ID de foreach e, então, informando ao loop que ele deve exibir a miniatura e não a imagem em tamanho original (que é o padrão). O valor true passado depois disso informa se a saída deve incluir um link para a página de anexo, e uma vez que essa é a ideia aqui, esse valor precisa ser passado. Por fim, o último parâmetro determina se um ícone de mídia deve ou não ser exibido, e o valor padrão é false, por isso você não precisa passar esse parâmetro. Colocar o trecho de código acima em uma barra lateral vai resultar em uma lista de miniaturas randomizadas com links para suas respectivas páginas de anexo.

MAIS OPÇÕES DE IMAGENS RANDOMIZADAS Isso tudo ainda não é o suficiente? Então sua melhor opção é recorrer ao maravilhoso mundo dos sites de compartilhamento de imagens e seus diversos widgets e códigos de integração (embed), além da infinidade de plug-ins disponíveis (consulte a seção “Aproveitamento Máximo dos Serviços de Compartilhamento de Imagens”, mais adiante neste capítulo, para obter mais detalhes). A combinação desses dois recursos é geralmente uma boa receita para obter bons blocos de imagens que exibem suas obras de arte mais recentes (ou apenas as fotos de suas férias), por isso mergulhe nessas opções para explorar o mundo das imagens. Você vai encontrar uma porção de plug-ins e sugestões no Capítulo 9, caso ainda não tenha consultado esse capítulo. Mas é importante ressaltar a importância do cuidado com a poluição e com a demora no carregamento. A inclusão de serviços de terceiros aumenta o tempo de carregamento, principalmente quando exibem imagens, que podem ou não ter sido adequadamente comprimidas para a Web. Sei que é tentador inserir um widget bacana em Flash obtido em um site de compartilhamento de fotos, ou um plug-in em Ajax-y que exibe suas melhores fotos em uma apresentação de slides infinita, mas tome cuidado. Outra consideração é determinar se você realmente precisa do bloco de imagens. O simples fato de ter acesso a um fluxo de imagens não significa que você tenha que usá-lo ou exibí-lo. O conteúdo das fotos é interessante para os visitantes? Caso contrário, esqueça o assunto e use aquele valioso espaço na tela para exibir outra coisa.

269

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

Usos criativos de imagens de cabeçalho e destaques Dois tipos especiais de imagem podem ser usados de forma ainda mais criativa em seus projetos: a imagem do cabeçalho e a imagem em destaque. Como você sabe, a imagem do cabeçalho é muitas vezes usada como um cabeçalho de blog tradicional, mas não há nada no recurso que limite você nesse sentido. A imagem em destque é uma opção individual para cada postagem, que permite configurar uma imagem específica como símbolo da postagem. Esse recurso é frequentemente usado para imagens de manchete ou com objetivos similares. Mas você também pode fazer outras coisas com esses tipos de imagens! Aqui vão algumas ideias para ajudá-lo a começar. • Use a imagem do cabeçalho como mensagem sazonal. De uma forma quase tipicamente blogueira, a imagem do cabeçalho ou a imagem em destaque pode servir para exibir mensagens de boas festas ou coisas do tipo para seus visitantes. • Use a imagem do cabeçalho para dar ainda mais exposição à sua marca. Uma abordagem mais tradicional da ideia acima é usar a imagem do cabeçalho para dar mais exposição à sua marca, destacar um produto, convenção, serviço, pessoa, etc. • Use a imagem em destaque como fundo. Quem disse que a imagem em destaque precisa ser uma imagem tradicional de manchete? Use-a para criar um fundo para sua postagem, ao invés disso, melhorando a estratégia de sua marca. • Use a imagem em destaque como cabeçalho. Você sabia que o tema Twenty Ten pode substituir o cabeçalho personalizado por uma imagem em destaque (caso haja uma) quando você está lendo uma postagem? Esse conceito pode ser ainda mais refinado, dando à postagem seu próprio cabeçalho, como um site dentro do site.

APROVEITANDO AO MÁXIMO OS SERVIÇOS DE COMPARTILHAMENTO DE IMAGENS Para sites com limitações de hardware ou contas de hospedagem compartilhadas, pode ser essencial economizar espaço e largura de banda, e o que pode ser melhor do que hospedar vídeos no YouTube e imagens no Flickr? O mesmo se aplica a sites maiores que não geram muito retorno financeiro, mas em geral esses sites podem se dar ao luxo de obter soluções personalizadas como dados armazenados na nuvem ou arquivos estáticos nos servidores. Exibir as imagens a partir de qualquer site de compartilhamento de fotos é uma forma garantida de economizar largura de banda e armazenamento, sobretudo se o site em questão publica muitas imagens. Um bom exemplo disso seria um site especializado em jogos eletrônicos, cheio de capturas de tela, tipicamente acima de 700KB por imagem; além disso, com as telas maiores e resoluções HD, há ainda a necessidade de compartilhar as imagens nessa resolução. Digamos que você crie duas galerias de capturas de tela por dia, cada uma contendo 10 imagens. Isso soma 140 imagens por semana, ou 560 por mês. Com cerca de 700 KB por imagem, isso gera um grande volume, que ultrapassa 380 MB por mês. Você não precisa ser matemático para entender que um site assim requer muitos megabytes em largura de banda e armazenamento a longo prazo. É por isso que os sites de compartilhamento de imagens são interessantes. Guardando as imagens no Flickr, você não precisa se preocupar com essas coisas, pois sua largura de banda vai ser coberta pelo Flickr. Pode ser um certo exagero sugerir que um grande site especializado em jogos eletrônicos rode sua biblioteca de imagens no Flickr, mas a mesma matemática se aplica a um site de fotografia, por exemplo. 270

CAPÍTULO 13: DIVERSÃO COM IMAGENS É possível economizar dinheiro com isso, aplicando o “golpe do YouTube” também para suas imagens. Afinal, poucos sites hospedam seus próprios vídeos hoje em dia. Em vez disso, eles usam vídeos integrados a partir de serviços como YouTube ou Vimeo, então por que não fazer o mesmo com as imagens? É claro que isso tem suas desvantagens, mas a mais importante delas é o fato de que, se o seu serviço de hospedagem de imagens sair do mercado, você perde todas as suas imagens. Você pode resolver isso facilmente, se tiver cópias de segurança, é claro, mas seria necessário reinserir as imagens manualmente. Por outro lado, esses serviços são quase sempre players grandes, e se você optar por um desses, ele provavelmente tem poucas chances de ir à falência. Se você pode confiar no YouTube, provavelmente pode confiar em um serviço como o Flickr. Outro problema é o tempo de carregamento. Se o seu serviço de hospedagem de imagens estiver com problemas para exibir as imagens, por qualquer motivo, seu site será afetado. Em longo prazo, acredito que as imagens são mais próximas daquilo que gosto de chamar de “conteúdo direto” do que os vídeos, e por isso minha tendência é armazená-las e disponibilizá-las localmente sempre que possível. Se eu realmente precisar disponibilizar essas imagens a partir de outro local para manter um site no ar, considero a possibilidade de usar um servidor de arquivos ou soluções de nuvem, antes de acabar totalmente dependente de um serviço de terceiros. No entanto, isso não significa que eu não pense em terceirizar, e como usuário fiel do Flickr, eventualmente utilizo o serviço para hospedar imagens. Trata-se de uma solução conveniente, que economiza tempo, largura de banda e espaço. Apesar de tudo o que eu disse até aqui, é difícil argumentar contra esse fato.

PUBLICANDO A PARTIR DO FLICKR O Flickr (http://flickr.com) é provavelmente o site de compartilhamento de imagens mais popular que existe. Ele permite que você faça o upload de fotos gratuitamente, até um certo limite, e se você quiser fazer o upload de ainda mais fotos, pode adquirir uma conta pro. O Flickr também funciona bem com blogs, e você pode até mesmo compartilhar suas fotos do Flickr (assim como as de outras pessoas) diretamente em seu blog. Você pode fazer isso nas configurações da conta. O WordPress é apenas uma das muitas plataformas de blogs nas quais o Flickr permite que você compartilhe suas fotos. Siga os passos a seguir para compartilhar fotos em seu blog usando o Flickr. 1. Faça login no Flickr e vá até a página Your Account (Sua Conta). 2. Clique na guia Sharing & Extending (Compartilhamento e Expansão) e, em seguida, clique sobre o link “edit” à direita de your blogs (seus blogs), para editar as configurações (Ver Figura 13-3.). 3. Adicione seu blog de WordPress, preenchendo os detalhes (ver Figura 13-4). Você vai precisar ativar a publicação por XML-RPC na interface de admin do seu blog, em Settings → Writing. O endereço que você deve usar para o Flickr é a URL de xmlrpc.php, localizado na raiz de sua instalação de WordPress. 4. Use o guia e não deixe de escolher (e possivelmente editar) um layout padrão para as postagens que você publicará a partir do Flickr.

271

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS Pronto. Agora, você pode enviar fotos do Flickr diretamente para seu blog. Encontre a foto que você quer enviar, clique em Share This Link (Compartilhe Este Link) que aparece no topo da página, à direita, ao visualizar a imagem e, em seguida, selecione seu blog na aba Blog It. Infelizmente, você não pode compartilhar todas as fotos do Flickr assim; tudo depende da licença do proprietário do conteúdo, e algumas licenças não permitem compartilhamento.

Figura 13-3: O link de edição à direita dos blogs listados

Figura 13-4: Adicione os detalhes do seu blog de WordPress

272

CAPÍTULO 13: DIVERSÃO COM IMAGENS O Flickr é uma ferramenta muito utilizada não apenas para publicar imagens, mas também para economizar tráfego. Disponibilizando as imagens a partir do Flickr, você não corre o risco de sobrecarregar seu próprio servidor. É claro que isso funciona para os dois lados, pois se o Flickr sair do ar (ou do mercado), suas imagens também sairão, por isso não deixe de fazer cópias de segurança de todo o seu conteúdo.

USANDO O SLIDESHOW DO FLICKR Se você é um usuário fiel do Flickr, pode achar interessante a ideia de integrar uma apresentação de slides a partir do Flickr. Basicamente, isso consiste em um pequeno widget em Flash que você pode colocar onde quiser, dentro do seu site; é possível até mesmo alterar suas dimensões. Você pode obter uma apresentação de slides a partir de qualquer material que esteja agrupado no Flickr, sejam todas as fotos de um usuário ou apenas um álbum. Naturalmente, a apresentação de slides incluirá apenas fotos públicas. É fácil acrescentar um slideshow. Basta encontrar o álbum ou coleção de fotos que você quer exibir e clicar sobre o link Slideshow, no topo da página, à direita (ver Figura 13-5), ao lado de Share This Link. Caso o link Share This Link esteja presente, você pode criar um slideshow a partir do conteúdo; caso contrário, não pode – é simples assim.

Figura 13-5: Pode ser difícil enxergar o link Slideshow, mas normalmente ele vai estar aqui

Clicar no link Slideshow irá iniciar a apresentação de slides (ver Figura 13-6). Clique em Share, no topo da página, à direita e, então, clique sobre o link Customize HTML, abaixo do código de embed. Isso irá exibir uma nova janela, na qual você pode configurar a largura e altura desejadas ou selecionar a largura e altura predefinidas. Copie o código de embed e cole-o onde quiser. 273

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

Figura 13-6: Copie o código de embed a partir da página personalizada, e não a partir do Slideshow, para ter mais opções

Então, quando pode ser útil usar uma apresentação com slides do Flickr? Os sites podem usar esse recurso como uma segurança, quando precisarem da ajuda do Flickr para controlar o tráfego, mas em outros casos eu diria que sua melhor opção é criar galerias bacanas. No entanto, o slideshow é interessante como uma expansão para todo o resto; é como colocar uma caixa na coluna lateral exibindo suas últimas peripécias. Fora isso, a apresentação de slides do Flickr é uma novidade. Para aproveitar ao máximo o que o Flickr tem para oferecer, além da disponibilização de imagens estáticas, você vai precisar pesquisar um pouco mais. Há uma API com a qual você pode brincar (www.flickr.com/ services/api/) e os inúmeros plug-ins disponíveis variam muito entre si, dependendo do que você quer e precisa fazer com o serviço.

CUIDADO COM A POLUIÇÃO Imagens são uma forma excelente de dar mais personalidade a um site, sobretudo quando você usa serviços como Flickr e instala widgets bacanas para exibir suas fotos mais recentes ou exibir suas imagens de outras formas. Seus visitantes vão gostar dos elementos dinâmicos que você adicionar, e todos eles agregam valor à experiência. Ao menos esse é o aproveitamento ideal. Na videa real, grande parte desse tipo de recurso acaba sendo sinônimo de poluição e perturbação do design. O que estou tentando dizer é que você precisa ter certeza de que vai usar essas ferramentas para o bem, não importando se for um elemento de imagens aleatórias ou suas últimas atualizações do Flickr. Tudo no seu site deve fazer sentido, assim como todos os elementos do bom design.

274

14

FUNCIONALIDADES ADICIONAIS

HÁ MUITAS COISAS que você pode fazer com WordPress. Este capítulo é dedicado a algumas funcionalidades bacanas que você pode querer usar em um projeto ou site. Vamos falar de caixas com abas, formulários de login, coisas que você pode fazer com feeds RSS – como criar versões para impressão de seu site de WordPress – e coisas do tipo. Muitos dos elementos descritos aqui podem ser usados em uma infinidade de formas; uma vez que cada site é diferente, sua solução pode acabar sendo muito diferente das ideias apresentadas aqui.

Para cada elemento descrito, explico também quando é uma boa ideia usar a técnica em questão e quando o melhor é simplesmente esquecer o assunto. Entre a expansibilidade dos plug-ins e os diversos recursos que você pode incluir em seu tema, há uma infinidade de opções, e é muito fácil acabar poluindo um site com uma porção de coisas desnecessárias. Antes de acrescentar algo, você deve questionar se o elemento é necessário, mesmo que às vezes seja difícil resistir a alguns recursos bacanas.

CAPÍTULO 14

SMASHING WORDPRESS

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

CAIXAS COM ABAS Caixas com abas (do inglês, “tabbed boxes”) são uma excelente forma de economizar espaço de tela. Em blogs e sites dinâmicos e vivos, as caixas com abas podem ser usadas para exibir postagens populares, comentários recentes e outros elementos que podem ser agrupados de forma natural. O segredo é certificar-se de que o conteúdo das abas que não é exibido por padrão não precise estar sempre visível. Na verdade, essa é a principal questão na hora de trabalhar com caixas com abas: garantir que você não esteja ocultando algo crucial em uma aba. Tecnicamente, as caixas com abas não são difíceis de criar ou de gerenciar. Algumas delas podem sequer ter a aparência de uma caixa com guias; trata-de de um tipo de funcionalidade, mais do que qualquer outra coisa.

UTILIZAÇÃO INTELIGENTE Criar a funcionalidade de caixa com abas, em si, é relativamente fácil, e há uma infinidade de scripts disponíveis, caso você não queira criar um. O código no exemplo a seguir é suficientemente simples na maioria dos casos, mas ele também funcionaria bem com alguns elementos decorativos. Afinal, se você já decidiu utilizar uma caixa com abas, por que não deixá-la mais atraente e fazê-la se adaptar ao seu design? O código a seguir depende da biblioteca de JavaScript Prototype, por isso você deve carregá-lo com wp_enqueue_script(). Consulte a seção que trata de JavaScript, no Capítulo 12, para obter instruções mais detalhadas. Neste exemplo, parto do princípio de que a biblioteca Prototype já foi carregada. Aqui está a parte que precisa ser incluída na seção head de header.php: <script> // Função para visualizar aba function viewTab(tabId) { //Obter todos os elementos filhos de "contents-container" var elements = $('contents-container').childElements(); // Fazer loop em todos eles for (var i=0, end=elements.length; i

276

CAPÍTULO 14: FUNCIONALIDADES ADICIONAIS Talvez você queira incluir isso em seu próprio arquivo. Seguindo adiante, aqui está a marcação básica para a caixa com abas:




• 
  
  Recent
  
  



• 
  
  Popular
  
  



• 
  
  Comments
  
  










Conteúdo da aba de itens recentes.







Conteúdo da aba de itens populares.







Conteúdo da aba de cometários.









Você precisará aplicar estilos para criar o tipo de caixa que deseja, que pode não ser uma caixa com abas, e sim algo totalmente diferente. O segredo é que os links da lista de itens abrem um container div com o conteúdo da aba (ou qualquer outra coisa) em questão. Você poderia parar por aqui, incluindo o código necessário para postagens recentes (Recent) e populares (Popular), além dos comentários mais recentes, em seus respectivos div. Sem problemas. Porém, se quiser facilitar um pouco o gerenciamento, você pode criar uma área para widgets destinada ao div de cada aba, o que lhe daria a liberdade de trocar facilmente uma funcionalidade corrompida por um novo plug-in à sua escolha. Se você quiser adotar esse método, vai precisar recorrer um pouco aos widgets. Primeiramente, temos a parte de registro que vai em functions.php: register_sidebar(array('name'=>'Postagens Recentes')); register_sidebar(array('name'=>'Postagens Populares')); register_sidebar(array('name'=>'Comentários Recentes'));

Então, temos as áreas para widgets, de fato, que naturalmente serão colocadas no respectivo div de cada uma:

277

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS




• 
  
  Recent
  
  



• 
  
  Popular
  
  



• 
  
  Comments
  
  










































Agora, você pode simplesmente soltar o conteúdo de cada aba na área para widgets à sua escolha a partir da interface de admin do WordPress, como faria com widgets de rodapé ou da barra lateral. A Figura 14-1 mostra a aparência que uma caixa com abas pode ter, com algumas alterações mínimas em relação ao código acima.

COM OU SEM ABAS? Então, você deve ou não usar uma caixa com abas? No fim das contas, o que importa é o tipo de conteúdo com o qual você está lidando. O mais importante é que você certifique-se de que a utilização é intuitiva e óbvia para todos os tipos possíveis de usuários. O conteúdo que você Figura 14-1: Caixas com abas podem ajudar na oculta nas abas não pode ser crucial, uma vez organização e navegação que o visitante pode não ser do tipo que sai clicando nas coisas. Além disso, o conteúdo das abas pode acabar não sendo visto quando você tem um visitante acidental que olha brevemente para o site e então decide se vai ficar e explorar o conteúdo ou se prefere ir para outro lugar. Você não pode ocultar seu melhor 278

CAPÍTULO 14: FUNCIONALIDADES ADICIONAIS conteúdo em abas, assim como não deve criar um menu ou caixa de busca que sejam complicados demais para usar. Dito isso, para muitos sites, o uso de caixas com abas pode fazer sentido. Tudo depende de quanto espaço você quer desocupar para listagens de conteúdo, atividade, etc. Por exemplo, existe alguma razão pela qual sua lista de blogs precise estar sempre visível? Por que não colocar todos os links em uma caixa com abas, com uma aba para seus perfis em redes sociais, outra para os sites de amigos, etc. Isso ocupa bem menos espaço, e qualquer pessoa que estiver interessada em mergulhar mais fundo em sua presença on-line ou nos amigos e parceiros de um site pode facilmente recorrer ao uso da caixa com abas. É bem possível que esse mesmo usuário perceba a caixa com abas como uma vantagem quando ela não for seu foco de atenção, uma vez que a economia de espaço simplifica muito a usabilidade de seu site. Em geral, você deve usar com cautela as caixas com abas, e o mesmo vale para os menus com abas. Trata-se de um clique adicional, e isso pode ser irritante para o visitante. Dito isso, não é muito bonito poluir seu site com listas e funções que raramente são usadas, por isso tome uma decisão informada.

EXIBINDO FEEDS RSS Os feeds RSS são realmente úteis, não apenas para assinar atualizações usando um leitor de feeds, mas também para exibir conteúdo de parceiros ou de outros projetos que você esteja publicando na Web. Você provavelmente já conhece o widget de feed RSS incluído no WordPress; ele é capaz de exibir atualizações a partir de qualquer feed RSS que funcione. Quando você quer trabalhar com feeds em seu site, não precisa se limitar apenas a esse widget, ou mesmo aos plug-ins disponíveis. Na verdade, você pode acessar diretamente o parser de feeds e fazer mais coisas personalizadas com a saída do feed. Se você quiser controlar a descrição, isso é possível, assim como é possível adicionar código HTML ao redor dos diversos elementos para obter maior controle, e assim por diante. Se você quiser fazer coisas mais avançadas com o conteúdo de um feed RSS, precisa usar um plug-in ou programar você mesmo o código usando a funcionalidade integrada (que, casualmente, é muitas vezes o que aquele plug-in que você estava considerando usar faz). No entanto, você deve levar em consideração o fato de que a exibição de feeds RSS pode deixar seu site mais lento. Se você estiver obtendo as últimas atualizações a partir de vários sites (ou mesmo um só), eventualmente seu site vai ficar mais lento. Isso acontece porque o seu servidor está fazendo uma consulta de feed para o servidor do feed, e é necessário recolher e executar o parsing de todos os dados com PHP para conseguir gerar a saída que você deseja. Isso se aplica tanto à busca de RSS com hardcode quanto aos widgets que você coloca em seu site para exibir os feeds. Se você depende de uma grande quantidade de conteúdo obtida a partir de feeds, é uma boa ideia se informar sobre soluções de cache para que o carregamento do seu site seja o mais rápido possível. Na verdade, o ideal é deixar que o servidor execute uma tarefa agendada em intervalos regulares, armazenando em cache o conteúdo para ser exibido quando necessário. Existe suporte para cache, mas no que diz respeito a agendar a busca do conteúdo, você está sozinho. Provavelmente, isso significaria desenvolver seu próprio plug-in, ou encontrar um que faça o trabalho por você. 279

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS Portanto, os feeds são, de fato, muito úteis, mas se você navegar na blogosfera (principalmente) e prestar atenção ao que torna os sites mais lentos, vai perceber que os feeds estão entre os principais culpados, juntamente com outras funcionalidades que exibem conteúdo a partir de serviços externos (selos ou anúncios, por exemplo). Em suma: cuidado para não “entupir” seu site de conteúdo obtido a partir de feeds RSS.

O PARSER INTEGRADO O WordPress oferece suporte integrado à exibição de conteúdo de feeds RSS em seu site. Você pode usar o widget de feeds (do qual falaremos mais adiante), mas provavelmente vai precisar de um controle maior. Por sorte, é fácil conseguir esse controle, graças à adição do SimplePie ao núcleo. Sim, há um novo parser de feeds no WordPress a partir da versão 2.8, ou seja, embora suas velhas chamadas wp_rss() ainda possam funcionar, elas estão desatualizadas e devem ser substituídas por algo mais atualizado, a saber, fetch_feed(). Isso pode parecer um tanto intimidante quando você mergulhar pela primeira vez na documentação do SimplePie. No entanto, a coisa não é tão complicada assim. Eis uma inclusão simples das últimas manchetes, com links obtidos a partir do meu lifestream em http://stream.tdh.me:





• Lifestream



get_items() as $item){

printf('
• %s
', $item->get_permalink(),

?>

$item->get_title());

}





Incluindo um feed dessa forma, estou abrindo o feed para as funções do SimplePie. Estou basicamente criando um loop do feed aqui, e imprimindo esse loop, buscando os dados à medida que eles são necessários. Neste caso, estou simplesmente exibindo o link permanente e o título de cada postagem. Você pode expandir isso adicionando uma descrição e a data:





• Lifestream



get_title());

foreach ($feed->get_items() as $item){

printf('
• %s
', $item->get_permalink(), $item->get_title());

printf('

%s

', $item->get_description());

?>

}

printf('

%s

', $item->get_date('j F Y at g:i a'));





280

CAPÍTULO 14: FUNCIONALIDADES ADICIONAIS O SimplePie, por si só, poderia ser o tema de um livro inteiro. Tudo o que você precisa saber está disponível na documentação do SimplePie, que infelizmente não é inteiramente compatível com WordPress, uma vez que trata-se de um parser de RSS autônomo, na verdade. Dito isso, você deve dar uma olhada neste link: http://simplepie.org/wiki/ reference/. Logo mais, voltaremos a falar do SimplePie. Mas antes disso, vamos falar um pouco sobre a solução de widget integrada.

QUANDO USAR A SOLUÇÃO DE WIDGET Então, quando você deve usar o widget de RSS padrão que vem integrado à plataforma? A resposta é simples: nunca! Isso pode soar um tanto radical, sobretudo porque o que o widget realmente faz é a mesma coisa que você fez na seção anterior usando fetch_feed(). Isso mesmo, o widget chama o SimplePie da mesma forma. O problema é que ele também inclui um cabeçalho de feeds, com link para a URL do feed e tudo o mais. Isso não é uma ideia tão boa, não é verdade? Se você quer exibir as últimas atualizações de seu blog, de um site de notícias, do Twitter, ou do que for, não vai querer incluir um link para o feed RSS, em si, no topo da listagem! Talvez você queira incluir um link para o site, em si, mas não para o feed. Espero que isso seja alterado pelo WordPress no futuro, mas as coisas funcionam assim já há um bom tempo. Então quer dizer que você nunca deve usar um widget de feeds? Talvez isso seja um exagero, porque outras pessoas perceberam esse problema e lançaram plug-ins que remediam a situação. Consulte o Capítulo 9 para ver algumas recomendações de plug-ins de RSS bacanas que podem oferecer a solução que você precisa. Na verdade, modificar você mesmo o código de parsing de RSS deve ser a última alternativa, a não ser que você realmente precise fazê-lo. É preferível adicionar uma área para widgets e então adicionar a ela o widget de feeds adequado. Isso signifi ca que você pode facilmente adicionar coisas ao redor, mas naturalmente vai ter maior controle se programar, você mesmo, a coisa toda. Como sempre, escolha a solução que se adapta melhor ao seu projeto.

MÚLTIPLOS FEEDS COM SIMPLEPIE Com a adição do SimplePie você pode criar múltiplos feeds, e não estou me referindo à capacidade de exibir diversos blocos de feed na mesma página. Estou falando da capacidade de reunir uma porção de feeds e combinar todos eles para apresentar o conteúdo. No SimplePie, essa funcionalidade muitas vezes é chamada de multifeeds (essa informação será muito útil quando você estiver buscando soluções na documentação do SimplePie). No exemplo a seguir, realizo um teste rápido usando o SimplePie para listar o conteúdo de dois feeds de acordo com a data, mas limitando a saída a apenas 10 itens.

281

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

• Manchetes Interessantes

enable_order_by_date(true); foreach ($feed->get_items(0, 10) as $item){ printf('
• %s
', $item->get_permalink(), $item->get_title()); printf('

%s

', $item->get_date('j F Y at g:i a')); } ?>



Você está definindo os dois feeds em um array dentro de fetch_feed() em vez de simplesmente colocar a URL do feed individual, como fez quando queria exibir apenas um único feed. Você pode acrescentar vários feeds a esse array, se quiser. Depois disso, adicionamos uma configuração order_by_date para organizar os itens por data, retirada da documentação do SimplePie: $feed->enable_order_by_date(true);

Você poderia fazer isso também para o exemplo com um único feed, mas se estiver exibindo um único feed, provavelmente o item mais recente será exibido no topo por padrão, então isso seria um tanto redundante. Depois disso, há o loop foreach novamente, começando pelo primeiro item (0) e seguindo até o décimo (10), e depois disso o loop é encerrado e você terá 10 itens. Repito que o SimplePie é imenso, mas esse é um bom começo. No momento da escrita deste livro, a seção de ajuda no Codex do WordPress tem relativamente pouco conteúdo, considerando-se que o recurso fetch_feed() foi adicionado na versão 2.8, mas tenho certeza de que, à medida que o tempo passa, mais artigos e exemplos serão incluídos. Enquanto isso, use a documentação do SimplePie para ver o que você pode fazer com esse parser de RSS.

ENVIANDO E-MAIL COM WORDPRESS Se você quiser que o WordPress envie e-mails por você, pode usar a função wp_mail(). Pode ser qualquer coisa, desde uma verificação para confirmar que alguma ação foi executada (ou não) em seu site, até uma lista de notificação completa para mensagens de “Meu blog foi atualizado!”. A função wp_mail() é relativamente fácil de usar. Partindo do pressuposto que você ativaria o código abaixo com alguma função, ele enviaria um e-mail para [email protected] com o assunto “Smashing Party!” (algo como “Ótima Festa!”) e o conteúdo (em formato de texto) “Thanks for the smashing party the other night. TTFN!” (algo como “Obrigado pela excelente festa na noite passada. Até logo!”). A Figura 14-2 exibe o resultado disso.

282

CAPÍTULO 14: FUNCIONALIDADES ADICIONAIS Você pode até mesmo anexar arquivos e enviar e-mails em HTML em vez de usar o padrão de texto simples. Você pode aprender mais sobre o assunto no Codex em http://codex. wordpress.org/Function_Reference/wp_mail. Como sempre, é importante observar algumas regras na hora de enviar e-mails a partir de páginas da Web: Não envie spam. Fica feio para você e

todo mundo sai perdendo. Cuidado com o excesso de e-mails. Isso

pode fazer você entrar em alguma lista negra. Certifique-se de que o seu código funciona. Afinal, qualquer problema pode enviar centenas de mensagens duplicadas, abusando da capacidade do seu servidor e criando todo tipo de problemas para você. Evite riscos de segurança. Certifique-se de que uma pessoa mal-intencionada não vá conseguir enviar spam por meio de sua solução de e-mail. Pode ser qualquer coisa, desde enviar uma quantidade absurda de e-mails, até simplesmente irritar todo mundo clicando mil vezes no botão “Enviar”. Avise todo mundo. Os usuários gostam de saber o que está acontecendo, sobretudo quando seus endereços de e-mail estão envolvidos. Em outras palavras, não deixe de explicar como você vai usar os endereços de e-mail de seus usuários e o que eles podem esperar de você. Em se tratando de e-mails, o melhor é não ter surpresas.

ADICIONANDO UM FORMULÁRIO DE LOGIN

Figura 14-2: Um e-mail simples enviado a partir do WordPress

Figura 14-3: Formulário de login simples

Às vezes, pode ser prudente ter um formulário de login do WordPress (Figura 14-3) um pouco mais à mão, além de simplesmente acessar o formulário em sua própria página, conforme o padrão (em wp-login.php, a partir de sua instalação de WordPress). Se o seu site depende de recursos que exigem login, naturalmente não há problema em adicionar um formulário de login, digamos, no cabeçalho ou na barra lateral.

283

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS O exemplo a seguir parte do pressuposto de que você quer colocar seu formulário de login na barra lateral, o que em geral é feito usando uma ul, por isso o código seria colocado em uma li separada. No entanto, talvez você queira que ele apareça no cabeçalho e não na barra lateral e, nesse caso, você provavelmente deve colocar o código dentro de um div para poder aplicar o estilo adequadamente. Para criar um formulário de login, você só precisa de wp_login_form().

Login

Esqueceu sua senha? /wplogin.php?action=lostpassword">Recuperar senha

Admin

• /wp-admin/">Dashboard
• /wp-admin/post-new.php">Escrever postagem
• ">Sair



O que você tem aqui é uma cláusula if que realiza uma verificação, primeiramente, para determinar se você já fez login, ou se é um usuário de level_0 (o nível de usuário mais baixo no WordPress) ou de um nível superior. Talvez você reconheça esse nível da interface de admin, como correspondendo ao papel de assinante (Subscriber), assim, você não pode fazer virtualmente coisa alguma. Leia mais sobre os papéis no Codex (http://codex.wordpress.org/Roles_ and_Capabilities) e lembre-se de que há 11 níveis de usuário, o mais baixo deles sendo o nível 0 e o mais alto sendo 10.

Assim, a primeira verificação determina basicamente se você fez login, e, caso contrário, o site irá exibir um formulário de login usando wp_login_form(). Há algumas configurações para as template tags de wp_login_form(), que determinam os rótulos que devem ser chamados e coisas do tipo. Essas configurações são relativamente simples, mas você pode aprender mais consultando o Codex em http://codex.wordpress.org/Function_ Reference/wp_login_form. Seguindo adiante, a cláusula else é o que é exibido quando o usuário já fez login. Nesse exemplo, eu gero uma lista com um link para o Dashboard em wp-admin, e outro link para escrever uma nova postagem, e por fim um link para sair. Isso pode ser um tanto redundante a não ser que você tenha desativado a barra de admin que aparece no topo do WordPress para usuários que fizeram 284

CAPÍTULO 14: FUNCIONALIDADES ADICIONAIS login. Além disso, você deve provavelmente incluir verificações para certificar-se de não incluir links para páginas de admin onde o usuário não poderá fazer nada, que é exatamente o que acabei de fazer. Afinal de contas, um usuário com privilégios de Subscriber (nível 0, lembra?) não pode escrever uma nova postagem, de modo que um link para a tela de postagem é inútil para ele. Seria prudente incluir uma verificação semelhante à primeira usando current_user_can(), ou talvez uma verificação mais longa usando a lógica if-else. Repito que esse exemplo serve apenas para mostrar o funcionamento básico do recurso. Lembre-se de não incluir formulários de login em seu design a não ser que eles sejam necessários. Afinal, por que exibir um formulário de login e provocar os mal-intencionados a tirar proveito de sua instalação de WordPress se você não precisa dele? Além disso, não há sentido exibir um formulário de login se o visitante não puder fazer nada com ele, e nesse caso trata-se de um desperdício de espaço de tela. Use os formulários de login quando eles forem importantes.

BLOGS PARA IMPRESSÃO Às vezes, os leitores preferem imprimir um artigo ou entrada de blog em papel, para ter mais conforto. Você deve facilitar a impressão de conteúdo se achar que seu site pode se beneficiar disso. Comece incluindo um link simples com o texto “Imprimir esta página”. Isso pode ser feito facilmente com um pouco de JavaScript, sem precisar personalizar coisa alguma ou usar bibliotecas de script. Imprimir esta página

Isso é tudo; o navegador tentará imprimir a página. É muito simples, mas talvez seu site não seja muito amigável para impressão, sobretudo se você tiver um grande cabeçalho e várias colunas. É por isso que você deve criar um CSS para impressão. Tecnicamente, você não precisa realmente adicionar outra folha de estilo, mas pode ser uma boa ideia separar o conteúdo exclusivo para impressão do conteúdo normal, para exibição na tela. Comece criando uma folha de estilo chamada print.css e examine seu tema para determinar o que deve ou não ser incluído. Provavelmente, a barra lateral e o rodapé serão desnecessários na hora da impressão, por isso remova ambos: #sidebar, #footer { display:none; }

Pronto! Esse exemplo parte do princípio de que sua barra lateral tem a ID #sidebar e de que o rodapé tem a ID #footer, e geralmente esse é o caso. Agora, certifique-se de que o conteúdo, em si, tenha uma aparência minimamente apresentável no papel: #content { width:100%; margin:0; padding:0; float:none; background: #fff; color: #222; } a:link, a:visited { color: #000; }

285

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS Para isso, use texto em preto, fundo em branco, largura total e exclua margens flutuantes e preenchimento. Eu também acrescentei um código para garantir que os links sejam exibidos em preto (não há necessidade para as pseudoclasses :active ou :hover, obviamente). Eu poderia ficar aqui para sempre falando sobre coisas que você pode incluir em seu CSS de impressão. Pode ser uma boa ideia certificar-se de que o título tenha uma aparência agradável, e talvez você não queira incluir aqueles 637 comentários de cada postagem na versão para impressão. Basta ocultar os elementos que você não quer que apareçam no papel e aplicar adequadamente seus estilos aos demais. É muito simples. Talvez você também queira configurar todos os tamanhos de fonte para pontos (pt) em vez de pixels ou em (eme), para usar uma linguagem que a impressora é capaz de compreender. A propósito, falando em impressão, talvez você possa adicionar estilos de quebras de página aos títulos e, possivelmente, a elementos como blocos de citação e listas. Tudo depende de como você quer apresentar seu site para impressão. Agora, só falta incluir o CSS em header.php:

Adicione o CSS abaixo do código padrão de inclusão na seção head do arquivo. Talvez você tenha percebido que optei por usar 'stylesheet_directory' em vez de 'template_ directory' na hora de passar a URL da folha de estilo. Essa é uma opção puramente semântica, uma vez que você provavelmente quer que todas as suas folhas de estilo fiquem no mesmo lugar, e dessa forma print.css deve estar no mesmo local que style.css. Há inúmeras soluções para facilitar o processo de impressão de suas páginas. Eu gosto bastante do Printfriendly (http://www.printfriendly.com) que permite que você adicione botões facilmente. Há também um plug-in que pode ser útil. Se você quiser economizar tempo, dê uma pesquisada no site do Printfriendly para obter mais informações, especialmente nesta página: http://www.printfriendly.com/ button.

E MUITO MAIS... Expandir um site com funcionalidades necessárias é uma etapa óbvia e natural no desenvolvimento de um site. Em se tratando de WordPress, expandir um site muitas vezes significa que você vai precisar exibir ou promover conteúdo de alguma forma, ou adicionar possibilidades de interação, como é o caso do formulário de login. Para completar, o último capítulo mostra mais coisas incomuns que você pode fazer usando WordPress. Afinal, ele pode fazer muito mais do que criar blogs e sites tradicionais. O Capítulo 15 trata de utilidades incomuns do WordPress, para encher sua mente de possibilidades para essa fantástica plataforma de publicação.

286

15

UTILIZAÇÕES INCOMUNS DO WORDPRESS

VOCÊ JÁ SABE que o WordPress é capaz de criar blogs e outros sites editoriais. Você pode usá-lo para sites estáticos ou sites do tipo revista e para qualquer situação em que seja necessário publicar texto, imagens ou diferentes tipos de conteúdo multimídia. Mas por que parar por aí? O WordPress pode ser usado para projetos ainda mais distantes de suas raízes blogueiras, como este capítulo irá mostrar. Com o WordPress, você pode construir sites que os desenvolvedores definitivamente não previam no início. Espero que as adaptações da plataforma

discutidas aqui ajudem você a ver o potencial pleno do sistema. Você vai ver como o WordPress pode ser usado para criar um quadro de vagas ou uma página de perguntas frequentes (FAQ) e/ou base de conhecimento, como usar o WordPress para comércio eletrônico, e muito mais. Além disso, há uma infinidade de coisas que você pode fazer com WordPress, e espero que este capítulo seja uma inspiração para que você coloque sua mente para funcionar e pense em mais coisas que podem ser feitas usando essa maravilhosa plataforma de publicação.

CAPÍTULO 15

SMASHING WORDPRESS

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

TRABALHANDO COM CONTEÚDO ENVIADO PELOS USUÁRIOS Simplesmente porque o WordPress funciona muito bem como CMS para sites grandes e pequenos, não significa que você só possa usá-lo para isso. Você pode permitir que seus usuários enviem outros conteúdos além dos comentários, e fazer algo com esse material em paralelo ao seu conteúdo normal. Você pode separar o conteúdo enviado pelos usuários do restante, ou misturá-lo a qualquer que seja o tipo de conteúdo que você está produzindo. Tecnicamente, para isso você precisa que seus usuários se inscrevam para enviar conteúdo, usando os recursos padrão do WordPress. Um tema popular que traz essa função incluída é o P2, que pode ser encontrado em http://wordpress.org/extend/themes/p2 e é mostrado na Figura 15-1. Esse tema é inspirado no Twitter e é utilizado para comunicação interna em diversas empresas, inclusive na Automattic.

Figura 15-1: WPDevel, o blog oficial da equipe de desenvolvimento do WordPress, usa o tema P2

Para demonstrar apenas uma das diversas formas que você pode trabalhar com conteúdo enviado pelos usuários, o primeiro exemplo deste capítulo aplica o conceito a um quadro de vagas de emprego que você poderia hospedar em um site já existente (com alguns ajustes mínimos), ou simplesmente construir como projeto autônomo.

SOBRE O QUADRO DE VAGAS DE EMPREGO Você provavelmente já viu esse tipo de site, onde indivíduos e empresas podem publicar vagas de emprego ou currículos. Esse exemplo usa postagens de WordPress para armazenar cada oferta de emprego e para classificá-las de acordo com as principais categorias. Para descrever mais precisamente o emprego, vamos usar tags. Cada postagem é marcada com tags que indicam a empresa que publica a vaga, entre outras informações. 288

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS Até aqui tudo bem. Essa utilização é, na verdade, bem próxima do propósito inicial do WordPress, embora não seja um blog. O problema surge quando você quer permitir que os usuários publiquem, eles mesmos, as vagas, sem que você precise fazer isso pessoalmente. É verdade que, para isso, você poderia simplesmente dar um nome de usuário para cada usuário (e até mesmo exibir o formulário de inscrição), mas será que é uma boa ideia ter um monte de gente mexendo na interface de admin do WordPress? Eu diria que não. Essa não é uma solução muito limpa ou amigável para os usuários, já que o que eles querem é simplesmente preencher um formulário detalhando a vaga de emprego, enviá-lo e esperar pela aprovação da equipe do site. E é exatamente assim que esse exemplo funciona. Você emprega um plug-in para essa funcionalidade, que oferece uma página específica contendo o formulário em questão. Ao fim do processo, você terá um site em que os usuários podem publicar vagas de emprego por meio de um formulário, de modo que essas vagas serão armazenadas como postagens de WordPress para a aprovação da equipe do site. As vagas aprovadas (postagens publicadas) serão classificadas em categorias (dependendo do tipo de emprego) e marcadas com as tags adequadas. Esses dados serão obtidos, na medida do possível, a partir do formulário de envio, sem modificar plug-ins, de modo que qualquer coisa que não seja facilmente incluída precisará ser incluída manualmente. A ideia é construir esse quadro de vagas de forma rápida e rasteira, lançar o site com a ajuda do WordPress, e então continuar o desenvolvimento após o lançamento. É hora de começar.

O CONCEITO O código do design e do tema não é tão importante nesse projeto, por isso vamos ser diretos. Vamos simplesmente exibir as vagas em um fluxo de postagens. Você poderia separá-las em colunas, se quisesse, mas, por hora, apenas uma saída simples é o suficiente. Em termos de arquivos de modelo, o exemplo usa um loop específico para a página inicial (loop-home.php) e, naturalmente, um modelo de cabeçalho (header.php) e um de rodapé (footer.php), respectivamente. Além disso, é claro que você tem uma folha de estilo (style.css) para aplicar estilos específicos. Todas as listagens, de categorias a tags, podem ser gerenciadas a partir de um modelo index.php, uma vez que esse é o arquivo de fallback para tudo. Você pode até mesmo incluir o erro 404 em index.php, se quiser. Para acelerar o processo, você vai construir esse projeto sobre o Notes Blog, como um tema filho. É isso mesmo; você não vai precisar se preocupar com os fundamentos e pode mergulhar de cabeça na tarefa de uma vez. Acho que eu já devo ter mencionado que essa é justamente a beleza dos tema filhos, não é mesmo? Então, o que você vai construir? Um tema simples para um quadro de vagas, que irá exibir as últimas ofertas de emprego disponíveis, como mostra a Figura 15-2. Trata-se de um conceito, muito mais do que de um produto finalizado, obviamente, mas isso deve ser o suficiente para ajudar você a começar. 289

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

Figura 15-2: Um quadro de vagas simples adicionado ao tema Notes Blog

Os modelos de Cabeçalho e Rodapé O arquivo header.php padrão do Notes Blog não suporta cabeçalhos personalizados no momento da escrita deste livro (embora provavelmente não vá demorar muito pra isso acontecer), por isso há boas chances de que você adicione seu próprio arquivo de modelo header.php ao tema, caso queira usar um. Nesse caso, porém, vou deixar isso de lado, para economizar espaço, e a essa altura tenho certeza de que você já tem condições de copiar e colar o código para criar seu próprio arquivo header.php. Quanto ao rodapé, você não fará alteração alguma a não ser possivelmente alguma alteração de estilo, usando style.css. O fato de que o rodapé Notes Blog possui quatro áreas para widgets por padrão significa que você pode exibir as últimas vagas usando plug-ins com suporte a widgets (usando o widget de texto, por exemplo) para promoções. No futuro, talvez você precise de um rodapé mais personalizado, mas esse é o suficiente, no momento.

Página Inicial Para facilitar as coisas, você cria loop-home.php para a página inicial, pois essa é a primeira coisa que o Notes Blog vai procurar. O modelo loop-home.php é relativamente simples. Adicione o parâmetro job-listing a post_class() para aplicar estilos personalizados. O loop não gera qualquer saída de conteúdo, apenas o título contendo o link para a vaga e alguns metadados que podem ser úteis nas listagens. Isso é basicamente tudo. O código ficará assim:

>

290

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS

" title="" rel="bookmark">

• • ', '' ); ?>

max_num_pages > 1 ) : ?>

← Older posts', 'notesblog' ) ); ?>

→', 'notesblog' ) ); ?>



Lembre-se de que loop-home.php só vai ser usado quando alguém visitar a página inicial do site, por isso, se você quiser que as outras listagens tenham a mesma aparência e comportamento, vai precisar alterá-las também.

Visualização de Postagem Individual e Todas Aquelas Listagens Na visualização de postagem individual, as vagas provavelmente devem se parecer menos com uma postagem de blog e mais com uma oferta de emprego de verdade. Isso não é tão diferente assim de uma postagem de blog tradicional, mas esse é um lugar onde é uma boa ideia “desblogar” um pouco o jargão. Em outras palavras, elimine tudo que tiver uma terminologia “blogueira”, desde os comentários (a não ser que você queira essa funcionalidade) até os links 291

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS permanentes e rótulos de categorias. Crie uma página que se pareça com todo o resto e então acrescente alguns elementos adicionais, como os listados abaixo: Vagas relacionadas são uma expansão óbvia para qualquer oferta de emprego. Afinal,

você quer que as pessoas usem o site. Atualizações mais recentes para cada categoria específica também podem incentivar o visitante a mergulhar mais fundo no site. Tags podem, em si, parecer uma coisa tipicamente “blogueira”, por isso talvez seja uma boa ideia usar um nome diferente para elas. De qualquer forma, exibir as tags da oferta de emprego é uma forma de permitir que o visitante encontre mais vagas semelhantes, caso esteja interessado em uma tag específica.  Informações de contato são, naturalmente, essenciais para qualquer oferta de emprego, por isso deve ser um campo obrigatório no formulário de envio de vaga. Além disso, destaque essa informação na postagem; em geral, um container com fundo diferente é o suficiente. Consulte o Capítulo 10 para saber mais sobre como fazer o WordPress se parecer menos com uma plataforma de blog e mais com um CMS. A mesma abordagem de “desblogamento” se aplica às outras listagens de seu site. Você provavelmente deve dar ao modelo archive.php uma aparência semelhante à da listagem de empregos da página inicial, por exemplo. Apenas lembre-se de que archive.php é um arquivo de fallback para todos os arquivos, por isso se você tiver outro tipo de conteúdo além de vagas de emprego em sua instalação, a melhor opção é trabalhar com os modelos específicos de cada categoria. Consulte o Capítulo 4 para saber mais sobre arquivos de modelo e sobre quais são carregados em que situação. A funcionalidade de busca pode ser um pouco complicada se você estiver misturando postagens de emprego com conteúdo tradicional. Há boas chances de que você queira usar algumas conditional tags para alterar a saída dependendo dos resultados, mas você pode resolver o problema simplesmente aplicando os estilos adequados em CSS. Lembre-se de que post_class() gera classes específicas para cada categoria, por isso, no mínimo, você poderia chegar aos resultados da busca específica dessa forma, separando as postagens de empregos do restante do conteúdo.

Finalmente, a folha de estilo A folha de estilo começa da mesma forma que começaria em qualquer outro tema, mas você verá que a referência a 'template' aponta para a pasta do Notes Blog, uma vez que esse é o seu modelo – afinal, trata-se de um tema filho. Você também vai começar com uma importação de CSS, uma vez que a folha de estilo do modelo é um bom ponto de partida. No entanto, isso é opcional. O restante é simples, e consiste principalmente em algumas alterações de estilo no CSS do Notes Blog. Duas coisas chamam atenção. Primeiramente, há div.job-listing que obviamente está conectado ao parâmetro job-listing, usado com post_class() em loop-home.php. Assim, podemos localizar o estilo com precisão sem precisar listar todas as categorias que são listagens de vagas e devem receber esse tratamento geral. Em segundo lugar, dentro do título Hack em style.css você vai encontrar um trecho de código referente ao plug-in TDO Mini Forms. Vamos falar disso em breve. Aqui está o arquivo style.css:

292

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS /* Theme Name: Notes Job Board (construído a partir do Notes Blog) Theme URL: http://notesblog.com/themes/blog/job-board/ Description: Notes Job Board é um tema filho usando Notes Blog. Version: 1.0 Tags: light, two-columns, right-sidebar, fixed-width, threaded-comments, sticky-post, translation-ready, custom-background, custom-menus Author: Thord Daniel Hedengren Author URL: http://tdh.me/ Template: notes-blog Get support and services for the Notes Blog theme: http://notesblog.com Created and managed by Thord Daniel Hedengren: http://tdh.me */ @import url('../notes-blog/style.css'); div#blog { border: 10px solid #0ad; } div#top-navigation { margin-bottom: 20px; border-color: #0ad; border-bottom-width: 10px; } a:link, a:active, a:visited { color: #0cf; } a:hover, div#header h1 a:hover, div.homecol h1 a:hover, h2:hover { color: #f90; } div.job-listing { padding: 10px; background: #effffe; border: 1px dotted #0ad; border-width: 1px 0; font-family: Helvetica, Arial, sans-serif; } span.meta-category-job { font-size: 11px; text-transform: uppercase; } span.meta-category-job a {color: #fff; padding: 5px 5px 4px 5px; background: #f90; text-decoration: none; } span.meta-category-job a:hover { background: #444;; } div.job-listing h2 { font-size: 18px; font-weight: bold; margin: 5px 0; } div.job-postmeta { font-size: 12px; text-transform: uppercase; color: #666; } div#copy { background: none; padding:0; } /* HACK */ li#tdomf-form-1 { padding: 10px; background: #666; color: #bfbfbf;: } li#tdomf-form-1 a { color: #fff !important; } li#tdomf-form-1 h2.widget-title { margin-bottom: 10px; color: #fff; } li#tdomf-form-1 form input#content-title-tf, li#tdomf-form-1 form textarea { width: 230px !important; }

293

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS Prontinho. Você acaba de construir um quadro de vagas básico! Agora, você precisa do conteúdo enviado pelos usuários, ou ao menos da funcionalidade necessária para que o quadro de vagas receba o conteúdo.

RECEBENDO AS VAGAS Há inúmeras formas de receber o conteúdo das listagens de vagas, de fato. A forma mais fácil de fazer isso seria fazer as pessoas enviarem as vagas para você por e-mail e então você mesmo adicionaria o conteúdo, mas isso seria chato e trabalhoso. O melhor é usar um plug-in para que os anunciantes insiram os dados diretamente em um rascunho de postagem, que os administradores podem aprovar. Você pode usar um plug-in para fazer isso, chamado TDO Mini Forms (http:// wordpress.org/extend/plugins/tdo-mini-forms/). Essa não é a única opção disponível; outra excelente alternativa é o Gravity Forms, que também oferece ótimos complementos para recursos premium, mas o TDO Mini Forms é suficientemente simples, além de ser gratuito, por isso experimente essa opção antes de decidir se ela serve ou não para o seu propósito. De qualquer forma, a única coisa que nos interessa a essa altura é ter um plug-in que permita aos usuários, que neste caso são pessoas que estão anunciando ou procurando vagas de emprego, enviar conteúdo para o WordPress, para ser armazenado em forma de rascunho nas categorias. Por isso, o que você quer é construir um formulário que permita enviar os seguintes dados: Tipo de anúncio de emprego (o usuário pode escolher a partir de duas categorias: Vagas

Disponíveis ou Buscando um Emprego) Responsável pela oferta (o responsável deverá fornecer um nome, e-mail e, opcionalmente, uma URL para sua página da Web). Título da oferta (o título pretendido) Texto da postagem (o conteúdo da postagem) Informações de contato (sem isso a oferta de vaga seria meio inútil, não é mesmo?) E isso é tudo, embora você possa também considerar a possibilidade de usar uma proteção contra spam. O plug-in TDO Mini Forms pode gerenciar isso com facilidade, mas você pode preferir desenvolver ou usar outras soluções. Se estiver usando o TDO Mini Forms para construir essa solução, você pode especificar que as postagens sejam salvas como rascunhos e anexar as informações do responsável ao conteúdo da postagem. Assim, você não precisará criar uma conta de WordPress para qualquer pessoa que enviar um anúncio. Alternativamente, você pode forçar os anunciantes a se registrarem antes que eles possam acessar a página de “anuncie uma vaga”. Se fizer isso, eles usarão as informações do usuário fornecidas ao WordPress, e o TDO Mini Forms oferece suporte a isso também. Se você forçar os anunciantes a se inscreverem, poderá facilmente criar arquivos para todas as ofertas publicadas por cada usuário, por exemplo, o que pode ser útil. Isso significa também que você pode marcar alguns anunciantes como confiáveis, ignorando o estágio de aprovação e publicando automaticamente seus anúncios.

294

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS Você pode fazer isso da forma como preferir. O mais importante é que você possa fazer os anunciantes e as pessoas em busca de trabalho enviarem o conteúdo diretamente para o WordPress (como rascunhos) para que você possa facilmente gerenciar as vagas listadas.

DESENVOLVIMENTO ADICIONAL E depois disso, qual o próximo passo? Esse quadro de vagas rodando em WordPress é totalmente funcional, mas ainda pode melhorar muito. As primeiras coisas que você talvez precise considerar é uma forma de cobrar pelos anúncios de vaga, e uma forma de controlar o período de tempo pelo qual elas podem ser visualizadas. Afinal, há uma porção de quadros de vagas que cobram pelo serviço, e talvez você queira oferecer um serviço pago, de modo que anexar um serviço de pagamento como PayPal ou algo do tipo seria o próximo passo natural. Para controlar o período de tempo pelo qual uma postagem é exibida, você pode executar um script que altera automaticamente o status de uma postagem de “published” (publicada) para “draft” (rascunho), mas a melhor alternativa é provavelmente adicionar um trecho de código no topo de cada postagem para exibir uma mensagem do tipo “esta oferta de emprego está desatualizada” ou até mesmo ocultar as informações da vaga ou redirecionar o visitante. Você pode facilmente fazer isso usando PHP e algumas conditional tags. Outras melhorias poderiam envolver maior controle quando um anunciante envia uma oferta de emprego. Isso poderia incluir anexos de imagem, tags e localização geográfica. Essa última parte pode ser gerenciada com uma taxonomia personalizada ou usando campos personalizados. Assim, você pode facilmente fazer consultas por ofertas de emprego em diferentes localidades. Talvez você também prefira separar totalmente as vagas de emprego do restante do seu conteúdo, se estiver acrescentando a funcionalidade de quadro de vagas a um site já ativo. Um post type personalizado para as vagas pode resolver facilmente esse problema para você; apenas certifique-se de que seu método para receber as informações sobre vagas, como o TDO Mini Forms, no exemplo acima, funcione com seus post types personalizados. Também é possível usar postagens fixas (sticky) para dar destaque a algumas vagas, para aqueles anunciantes generosos que querem mais exposição. Você pode simplesmente aplicar o estilo desejado nas postagens fixas (fonte maior, cores mais chamativas, bordas, etc.) e deixar que elas fiquem no topo das postagens exibidas, o que talvez não seja tão divertido no design apresentado para esse exemplo, uma vez que ele se baseia apenas em listagens de links. Outra solução seria ter um loop separado que consulta apenas postagens marcadas como sticky, e exibe independentemente essas postagens. Isso significaria que você teria controle total sobre elas, naturalmente. Não há dúvidas de que é possível melhorar muito esse conceito de quadro de vagas. A ideia principal desse exemplo é mostrar a você que o WordPress pode ser usado para criar um site desse tipo. Agora, fica a seu critério (ou o de alguma outra pessoa) tornar o site grandioso e fenomenal. Boa sorte! Agora, vamos à próxima seção, que fala de outro conceito não blogueiro; assim, de um quadro de vagas, passamos a falar sobre uma base de conhecimento. A diferença não é tão grande quanto seria de se esperar.

295

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

USANDO O WORDPRESS COMO UMA BASE DE CONHECIMENTO DO TIPO FAQ Empresas que querem ter sua própria base de conhecimento no formato “perguntas frequentes”, ou FAQ (do inglês, “Frequently Asked Questions”), podem se beneficiar muito do WordPress. O conceito é simples, na verdade. Tudo gira ao redor de postagens enviadas pelos usuários, tags e/ou categorias. Graças aos comentários, é possível ter uma conversa sobre determinada questão enviada por um usuário e, quando a questão é solucionada, o administrador pode movê-la para a parte do site dedicada à base de conhecimento. Eis os recursos essenciais: Problemas enviados pelos usuários de um plug-in; cada problema é, na verdade, uma

postagem. Duas categorias principais: Perguntas Frequentes (FAQ) e Base de Conhecimento

(Knowledge Base). Postagens marcadas com tags (as postagens são problemas, lembra?) para facilitar a busca por palavra-chave. Uma taxonomia personalizada para a Base de Conhecimento. O fluxo de utilização do site seria o seguinte: 1. Um usuário envia um problema usando um formulário no site. O problema é salvo como uma postagem e marcado como rascunho, usando um plug-in. 2. Um administrador publica o problema na categoria FAQ. 3. Agora, é possível comentar sobre o problema. Se um administrador responder, seus comentários serão destacados, mas qualquer um pode responder se quiser. Se você desativar os comentários dos usuários, deve incluir alguma forma para que o usuário que enviou o problema possa fazer perguntas adicionais sobre o mesmo problema sem precisar enviar uma nova postagem. 4. Quando o problema é solucionado, um administrador adiciona a postagem à categoria da Base de Conhecimento (Knowledge Base). 5. Todas as postagens da categoria Base de Conhecimento são marcadas com as tags adequadas dentro da taxonomia personalizada de tags (Knowledge Base Tagging) da Base de Conhecimento. Isso significa que você pode gerar uma nuvem de tags (ou qualquer outra coisa) apenas com base nas tags dentro da categoria da Base de Conhecimento. O objetivo da taxonomia Knowledge Base Tagging é permitir que os usuários naveguem pelos problemas já solucionados em busca de soluções para seus problemas específicos. Isso funciona em conjunto com a função de tags, que também inclui postagens de FAQ (que ainda não foram solucionadas). Essa abordagem pode ser bastante útil. Por fim, há também a navegação por categorias, que significa que é muito fácil criar essas duas seções – FAQ e Base de Conhecimento – dentro do site.

296

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS ADICIONANDO A FUNCIONALIDADE O design, em si, para o tema usado neste exemplo, é bastante simples, por isso vou me concentrar no que realmente importa. Você pode desenvolver esse projeto a partir de praticamente qualquer tema que quiser. Primeiramente, você precisa construir sua nova taxonomia. Você pode ler mais sobre isso no Capítulo 6; este é o código que você vai usar no arquivo functions.php para o tema filho. add_action( 'init', 'kbase', 0 ); function kbase() { register_taxonomy( 'knowledge_base', 'post', array( 'hierarchical' => false, 'label' => 'Knowledge Base Tags', 'query_var' => true, 'rewrite' => true ) ); }

Pronto. Agora, você tem outro campo de tags na interface de admin do WordPress para marcar a postagem que quiser (ver Figura 15-3). Você só vai usar isso para as postagens marcadas com o status “Knowledge Base”, conforme descrito anteriormente.

Figura 15-3: Tags para a Base de Conhecimento

297

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS Configurada a taxonomia, o próximo passo é começar a receber os problemas. Esse processo foi descrito no exemplo anterior, do quadro de vagas, por isso consulte a seção anterior para escolher entre as soluções apresentadas. O plug-in TDO Mini Forms funcionará bem para receber seus problemas, por isso você pode optar por utilizar esse plug-in, ou qualquer outra solução que preferir. Talvez você queira criar um modelo home.php para dar destaque aos mais recentes problemas enviados ou adicionados à Base de Conhecimento (que exibiriam as últimas postagens em cada uma das categorias, simplesmente), além de promover ou oferecer o formulário para envio de um problema. Pessoalmente, eu adicionaria uma imensa caixa de busca e uma nuvem de tags mostrando quais são as tags mais frequentes na taxonomia da Base de Conhecimento. Isso pode ser feito passando o nome da taxonomia para wp_tag_ cloud(), assim:

O parâmetro da taxonomia lê o nome, e não o rótulo, da sua taxonomia personalizada. Aplique à nuvem de tags o estilo que quiser, e você terá uma série de palavras-chave obtidas apenas a partir da taxonomia da Base de Conhecimento, o que, por sua vez, quer dizer que apenas problemas já solucionados serão exibidos. Isso é basicamente tudo, na verdade. Depois de adicionar o recurso de envio e a taxonomia, você só precisa exibir as postagens mais recentes de cada categoria e tentar fazer os usuários realmente usarem a ferramenta de busca para encontrar um problema antes de enviar o mesmo problema novamente.

MELHORIAS ADICIONAIS Embora seja fácil colocar um site de FAQ/Base de Conhecimento no ar com WordPress, há muitas formas de melhorá-lo. O primeiro passo é garantir que os usuários entendam que devem pesquisar e navegar pelo site antes de enviar um problema, caso contrário há boas chances de que você acabe com um monte de conteúdo duplicado. Você quer que seus visitantes usem a busca, e isso significa dar um destaque maior a essa funcionalidade. Infelizmente, se o WordPress tem uma fraqueza, essa fraqueza é a busca, por isso pode ser uma boa ideia usar um serviço externo, como o Google Custom Search Engine (http://google. com/cse) ou alguma variante disso que possa facilmente ser integrada ao seu site para adicionar a funcionalidade de busca. Há também diversos plug-ins que melhoram a busca, e você também pode brincar com eles. Consulte o Capítulo 9 caso ainda não tenha um favorito. Aqui vão algumas outras ideias sobre como melhorar esse projeto: Inscrição e edição. Permita que as pessoas se inscrevam para que possam editar suas

próprias perguntas, obter um arquivo de autor, e assim por diante. Talvez você queira até mesmo forçar a inscrição, para dificultar o spam. Use um post type personalizado. Se você precisa implementar essa solução em um site já existente, seria uma boa ideia fazê-lo com um post type personalizado em vez de usar postagens tradicionais. Esse método seria igualmente fácil de implementar, como você verá mais adiante, neste capítulo. Avaliação. Permita que os usuários avaliem suas respostas, dando notas aos comentários quando a postagem estiver no modo FAQ, e dando notas para a solução do problema, de fato, depois que ele for movido para a Base de Conhecimento. No segundo caso, você vai

298

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS precisar de um plug-in que permita avaliar a postagem, e não os comentários. O Capítulo 9 oferece algumas sugestões nesse sentido. Problemas relacionados. Exiba automaticamente outros problemas semelhantes, usando um plug-in de postagens relacionadas. Usando essa rota, o usuário talvez encontre uma resposta para sua pergunta. Aprimore ainda mais a busca. Usando JavaScript, você pode fazer seus usuários encontrarem mais facilmente a resposta para problemas comuns. Use o tipo de campo de busca que pergunta se você quis dizer XYZ quando digitou XPT. Altere a página inicial. Quanto melhor for a exposição dos problemas, mais rapidamente os usuários vão encontrá-los, e já que esse é o objetivo principal, você deve alterar a página inicial para atender a esse propósito da melhor forma possível. Assinaturas e alertas. Ofereça formas para que seus usuários possam assinar o conteúdo das atualizações e problemas solucionados. Há diversas formas de gerenciar isso, e uma vez que o WordPress oferece um feed RSS para praticamente qualquer coisa, tenho certeza de que eles são a resposta. Certifique-se de que seus usuários compreendam isso, para que possam assinar apenas o conteúdo no qual estão interessados. O conceito da base de conhecimento é outra forma de usar o WordPress para criar um site que não é um blog. Outra forma de fazer isso é usar o WordPress para criar uma loja on-line.

WORDPRESS E COMÉRCIO ELETRÔNICO Nem preciso dizer que você pode usar o WordPress para vender alguma coisa. A forma mais simples disso é ter um blog ou site tradicional com WordPress que funcione como “backend”, e usar seu alcance para vender produtos. Você pode adicionar links afiliados, o que basicamente significa que, sempre que você incluir um link para a Amazon com sua URL afiliada e alguém comprar algo, você ganha uma comissão. Na verdade, se você comprou este livro seguindo um link em algum dos meus sites, eu ganhei um trocado. Obrigado! Porém, quando a maioria de nós pensa em comércio eletrônico, ou e-commerce, estamos pensando em algo maior que simples links afiliados – carrinhos de compras, distribuição digital, pagamentos recebidos por contas de PayPal e coisas do tipo. Você pode ter tudo isso, com certeza, e o Capítulo 9 inclui uma porção de ideias que podem facilitar a implementação dessas coisas, desde simples integrações até funcionalidades completas de carrinho de compras.

USANDO O WORDPRESS PARA CRIAR UMA LOJA NA WEB Você talvez esteja se perguntando se pode rodar uma loja on-line usando WordPress. A resposta resumida é sim; você poderia se quisesse, e se não tivesse produtos demais. A resposta mais longa, no entanto, é a de que provavelmente não será tão simples implementar um site de compras, mas não deixe que isso impeça você de fazê-lo, uma vez que não há qualquer razão para seu site não funcionar perfeitamente, se você estiver preparado para expandir o WordPress com plug-ins, trabalhar com campos personalizados e então pensar em uma forma de conectar seu carrinho de compras ao PayPal e outras soluções de pagamento.

299

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS Isso é meio desanimador, não é mesmo? Relaxe, não é tão ruim quanto parece: existem plug-ins capazes de fazer grande parte do trabalho para você. Porém, comparados a outros sistemas de comércio eletrônico disponíveis, os plug-ins disponíveis deixam a desejar. É difícil recomendar o WordPress para aplicações de comércio eletrônico, a não ser que você tenha um negócio no seu tempo livre ou esteja vendendo um número pequeno de produtos. Dito isso, nada impede você de anexar qualquer um dos muitos scripts de carrinho de compras disponíveis por aí ao seu tema. A maioria deles provavelmente funcionará sem grandes problemas, e aí você só precisaria descobrir como cobrar pelas suas mercadorias. Por sorte, empresas como PayPal (e muitas outras) facilitaram esse processo, por isso você pode capitalizar seu blog ou site de WordPress com uma loja, vendendo os produtos que quiser. Apenas certifique-se de que você sabe onde está se metendo. Estamos falando de vendas, e não apenas de publicação de conteúdo.

VENDENDO PRODUTOS DIGITAIS Mercadorias digitais, como e-books, são um caso completamente à parte. Nada impede que você implemente uma solução de pagamento por um arquivo digital e, depois de receber o pagamento, disponibilize o arquivo. Na verdade, isso não tem praticamente nada a ver com o WordPress, uma vez que o que importa é verificar o pagamento e direcionar o cliente para o arquivo em questão. Adicionar esse tipo de solução ao seu blog é muito fácil se você usar um serviço de terceiros, como o E-junkie (www.e-junkie.com), para gerenciar o pagamento e a entrega de arquivos, embora essa solução fique com uma parte do dinheiro que você recebe. Basta configurar um link e o seu provedor cuida do resto; funciona como em um programa de afiliados, mas com a vantagem de que você fica com uma parcela maior do dinheiro, já que o produto é seu. Você pode fazer o mesmo por conta própia, ou usando os plug-ins e scripts necessários. No entanto, é difícil fugir do fato de que você precisa realmente cobrar pelos seus produtos, o que significa gerenciar os pagamentos. Teoricamente, você mesmo pode gerenciar os pagamentos. Eu não recomendo essa abordagem, até porque as pessoas se sentem mais seguras quando reconhecem a entidade que está gerenciando seu dinheiro. Produtos digitais podem se encaixar perfeitamente em qualquer site. Embora o WordPress não seja um Magento, ele serve muito bem para vender e-books, MP3, arquivos de design ou o que quer que você queira vender para ganhar algum dinheiro.

DESENVOLVENDO PARA COMÉRCIO ELETRÔNICO Então, você decidiu usar o WordPress como base para vender seus produtos, grandes ou pequenos, muitos ou poucos, não importa. Agora, você precisa decidir como pode configurar o site para dar a ele a melhor potência com a maior facilidade de gerenciamento possíveis. Embora você possa usar postagens ou páginas para seu site, é uma boa ideia considerar os post types personalizados. Nem sempre é necessário separar os produtos que você quer vender do restante da infraestrutura do site, mas se for, ou possa ser no futuro, a melhor solução são os post types personalizados. A próxima seção explica como usar post types personalizados para conteúdo de produtos ou para virtualmente qualquer site.

300

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS

CONSTRUINDO UM DIRETÓRIO DE PRODUTOS Adicionar um diretório de produtos (ou qualquer tipo de diretório, como classificados de imóveis ou listagens de pessoas, por exemplo) a um site de WordPress é muito fácil graças aos post types personalizados. Não importa se você tem 10 produtos ou mais de 500, é importante separá-los do restante do conteúdo. O tipo de informações por produto que você precisa armazenar é obviamente específico para suas necessidades, por isso este exemplo traz apenas o básico. Crie um post type personalizado para livros, que no exemplo será chamado de Books. Cada produto individual é na verdade um tipo de livro, armazenado sob a forma de

postagem no post type Books. O exemplo inclui suporte a categorias, que serão categorias de livros, para melhorar a classificação. Esse exemplo não oferece suporte a tags (mas você poderia incluir, se quisesse). As tags ficaram de fora para simplificar o exemplo. Na maioria dos casos, é uma boa ideia permitir a marcação com tags, pois isso pode servir para classificar produtos por fabricante ou coisas do tipo. Aliás, por que livros? Bem, eu achei que era uma boa ideia usar este código para fazer algo útil e criei uma listagem de produtos para meus livros em http://tdh.me. É sempre bom usar um exemplo real. Você pode adotar este código para seu próprio site, assim como tudo neste livro, e como a maioria das coisas que eu programo.

CRIANDO O POST TYPE PARA LIVROS O Capítulo 10 aborda os post types personalizados, por isso, se estiver em dúvida sobre o que eles são e como funcionam, é uma boa ideia recapitular antes. Para criar o post type Books, basta adicionar o código a seguir ao arquivo de modelo functions.php ao seu tema: register_post_type('books', array( 'label' => _ _('Books'), 'singular_label' => _ _('Book'), 'public' => true, 'show_ui' => true, 'capability_type' => 'post', 'hierarchical' => false, 'taxonomies' => array('category'), 'has_archive' => true, 'rewrite' => array('slug' => 'books'), 'query_var' => false, 'supports' => array( 'title', 'editor',

301

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS 'author', 'thumbnail', 'excerpt', 'custom-fields', 'comments' ) ));

O código é relativamente direto: ele registra o post type como 'books' e configura rótulos adequados para que o post type tenha uma boa aparência na interface de admin, como mostra a Figura 15-4. Faça com que o post type seja public, e faça-o se comportar como uma postagem, usando a configuração capability_type, certifique-se de que ele ofereça suporte a categorias e páginas de arquivos e que tenha links permanentes atraentes. (Essa última já está incluída nas configurações padrão, mas eu tenho a tendência de incluí-la assim mesmo.) Por fim, o parâmetro supports contém um array de caixas que esse post type oferecerá, na interface de admin. O restante são valores padrão; mais uma vez, se precisar de uma recapitulação, consulte o Capítulo 10.

Figura 15-4: Escrevendo uma postagem do tipo Books

Agora, só precisamos adicionar postagens ao post type Books e teremos um post type novo em funcionamento!

PÁGINA DE LIVROS Há duas formas de criar uma página contendo todos os produtos do seu post type personalizado ('books', neste exemplo). Uma delas é criar uma página no WordPress e usar um modelo de página para adicionar um loop personalizado, para exibir as postagens de livros da forma que você quer. O segundo método é usar o arquivo de modelo para listagens. Neste exemplo, vamos usar a segunda forma, ou seja, o arquivo usado será archive-books.php (o arquivo archive-[post type] tem prioridade sobre archive.php). Eu poderia simplesmente adicionar algumas 302

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS conditional tags a archive.php ou até mesmo a index.php para fazer a mesma coisa, mas esse método é mais limpo. Um problema comum que ocorre com post types personalizados é uma postagem não ser exibida. Isso acontece porque o WordPress não inclui os post types personalizados no loop, por padrão. Se você quiser exibir postagens de post type específico, como 'books', em um modelo, precisa usar query_posts('post_type=books') para dizer ao WordPress para buscar essas postagens. Obviamente, você pode adicionar diversos post types juntos, simplesmente usando um array, por isso se quiser exibir 'books' e postagens normais, use: query_post( 'post_type => array( 'post', 'books' ) ' )

Obviamente, você poderia usar WP_Query também (mostrado em um exemplo mais adiante) uma vez que ele se comporta da mesma forma que query_posts(). Consulte o Codex para saber mais sobre query_posts():http://codex.wordpress.org/Function_ Reference/query_posts.

Voltemos à página de arquivos dos livros. Uma vez que não tenho tantos livros assim, quero que cada livro (cada postagem do tipo Books) tenha um espaço amplo em minha página de listagem. Isso significa que vamos programar um loop e usar um campo personalizado para exibir a capa (com um fallback, caso ainda não haja um), e então usar um trecho para atrair os leitores. Nesse caso, eu usaria o recurso de imagem de destaque caso ele ainda não tenha sido implementado para outros propósitos no site, por isso vamos usar um campo personalizado com a URL da imagem. Aqui está meu arquivo archive-books.php:

>

"> ID, 'book_cover', $single = true); // Há uma capa, vamos exibí-la! if ($bookscover !== '') { ?>

303

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS

" title="" rel="bookmark">

max_num_pages > 1 ) : ?>

← Older posts', 'notesblog' ) ); ?>

→', 'notesblog' ) ); ?>



Esse é um loop relativamente comum, que se parece muito com o loop do Notes Blog (se precisar de um roteiro mais detalhado do código, consulte o Capítulo 4). Há apenas duas diferenças dignas de nota. A primeira delas é post_class(), que recebeu o parâmetro books-archive. Isso é usado para aplicar estilo; você verá isso na folha de estilo, e a única coisa que o parâmetro faz é adicionar a classe books-archive à saída de post_class(). A segunda diferença é a verificação da capa do livro. O código tem alguns campos personalizados simples em ação. Primeiramente, precisamos armazenar o conteúdo da chave book_cover em $books-cover. Aí, então, verificamos se $bookscover contém algo, o que significa, obviamente, que armazenamos algo ali – precisamente, a URL da imagem da capa do livro. Se $bookscover contiver algo, o código vai gerar uma saída, caso contrário, uma imagem usada como marcador. Essa é uma utilização simples dos campos personalizados; você pode torná-la ainda mais fácil no “backend”, empregando um plug-in como o More Fields (ver Capítulo 9), mas para os propósitos do exemplo, isso já serve. O estilo também é bastante óbvio, mas ainda assim, aqui está ele: 304

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS div.books { margin: 20px 0 40px 20px; clear:both; } /* 640 px - from div.post */ div.books-archive { float:left; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #efefef; } div.books-cover { float:left; width: 190px; } div.books-cover img { padding: 5px; border: 1px solid #efefef; } div.books-content { float: right; width: 440px; }

Isso é tudo bem simples. Vale a pena ressaltar que os post types personalizados não receberão as tradicionais classes de postagem ou página a partir de post_class(), em vez disso, receberão uma classe com base no nome do post type. Assim, nesse caso, recebi books a partir de post_class(), ou seja, preciso aplicar a esse post type um estilo idêntico ao da classe de postagens, se quiser que as postagens em Books se comportem como as postagens normais. Nesse caso, isso significa apenas algumas margens e coisas do tipo. O restante deve ser bem autoexplicativo; você também encontrará a classe books-archive aqui. E isso é tudo. Consegui adicionar uma página de livros ao meu site, como mostra a Figura 15-5, que exibe cada livro como uma postagem em um post type personalizado. Agora, posso facilmente atualizar essa página com novos livros sem precisar editar uma Página – basta acrescentar uma nova postagem ao post type Books, e pronto.

Figura 15-5: Página de livros, simples e pronta para receber um pouco de atenção especial

305

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS EXIBINDO OS PRODUTOS Postagens que pertencem a um post type personalizado não são exibidas, por padrão, no fluxo normal de atualizações. Você pode alterar isso facilmente usando query_posts() ou WP_Query (que se comporta da mesma forma que query_posts(), como você talvez lembre), mas no caso de um diretório de produtos, isso não faz muito sentido. No entanto, você ainda precisa exibir seus produtos, e é possível fazer isso de diversas formas. As seções seguintes oferecem algumas sugestões, que podem ser combinadas entre si.

Adicione um Loop A solução mais versátil para exibir seus produtos é adicionar um loop que gere uma saída de conteúdo a partir do post type personalizado para o seu tema. Poderia ser algo como:

have_posts()) : $my_query->the_post(); ?>
• " title="">



Tenho certeza de que você reconhece o loop. Esse loop simplesmente exibe todas as postagens que pertencem ao post type books como um link em uma lista de itens (sim, todos eles, por isso posts_per_page está configurado para -1 em WP_Query). Quer fazer algo ainda mais impressionante? Então por que não utilizar um JavaScript mais sofisticado para criar um slider bacana e dar destaque aos seus produtos? Existem alguns plug-ins de postagens em destaque que também poderiam ser usados para isso, se você conseguir fazê-los funcionarem com um post type personalizado, e provavelmente alguns plug-ins que simplesmente usam o que quer que você use para alimentá-los. Assim como qualquer outro loop, as únicas limitações são a sua própria imaginação e suas habilidades para fazer o resultado ter uma aparência agradável.

Use Gráficos e Links Se você tem boas imagens de produtos ou material promocional de qualidade, pode ser uma boa ideia aproveitar ao máximo esses recursos para fazer os visitantes se interessarem pelos seus produtos. A forma mais fácil de chamar atenção para produtos na maioria dos sites é adicionar links com elementos gráficos para as áreas para widgets disponíveis (geralmente na barra lateral), conduzindo seus visitantes às diversas páginas de produtos. No meu caso, faço isso principalmente a partir de postagens, mas também a partir de áreas para widgets. Essa solução é provavelmente mais adequada a diretórios de produtos menores, com poucas atualizações e adições, assim, você não precisará colocar muitos produtos em 306

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS destaque ao mesmo tempo. Se suas necessidades são maiores, a opção de loop mostrada anteriormente é preferível.

Uma Simples Entrada de Menu Às vezes, a melhor solução é a mais óbvia. Uma entrada de menu apontando para sua página de produtos pode não ser tão visual, gráfica ou dinâmica quanto um loop que exibe os últimos produtos, mas é eficiente, além de ser algo que seus usuários provavelmente esperam encontrar. Não esqueça de criar um link para a página de produtos no menu, caso possua uma!

CONSTRUINDO UM SITE DE LINKS Um site de links pode ser usado para diversos propósitos, por isso os exemplos desta seção são mais genéricos do que os das seções anteriores. A ideia é usar as postagens como links, que podem ser classificados por categorias e tags. Porém, você não vai simplesmente inserir um link no campo da postagem, e sim usar o campo de título como título do link, e então armazenar a URL de destino em um campo personalizado. Aí, então, você pode usar o campo de trecho (excerpt) para exibir descrições, detalhes ou o que mais se encaixar em seu projeto. Mas você precisa começar pelo princípio. Aqui estão as suas premissas: Toda postagem do blog é um link em seu banco de dados de links. Você usa o campo de título para salvar o título do link (por exemplo, Google). Você armazena a URL de destino em um campo personalizado chamado 'URL' (por

exemplo, www.google.com). Você categoriza seus links usando uma determinada quantidade de categorias (por

exemplo, Mecanismos de Busca ou Web mail). Você marca seus links com as tags apropriadas (por exemplo, gratuito, EUA, ou fontes). Você usa the_excerpt() em vez de the_content() para descrições de links, principalmente para manter suas possibilidades em aberto para o futuro. Agora, podemos começar. Comece armazenando a URL em um campo personalizado. Para isso, basta criar um novo campo personalizado na tela Write post da interface de admin do WordPress e atribuir a ele o nome 'URL'. A ideia é colocar a URL no campo de valor para cada postagem, e então criar um link com o título que aponte para a URL. Em seguida, você vai precisar alterar um pouco o loop. (Para um projeto assim, você provavelmente deve criar um novo tema que se adapte aos objetivos, mas este exemplo usa o tema padrão.) Use o seguinte código dentro do loop:

id="post-">

ID, URL, true); ?>"

307

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS rel="bookmark" title="">

Arquivado em

Desculpe, mas este link está corrompido. Por favor, avise o administrador!

Está corrompido: Arquivado em



Não é uma forma muito bonita de modificar, eu sei, mas o conceito é bem simples. Certifique-se de que haja uma URL enviada para o campo personalizado 'URL'. É isso que esta linha faz:

Se ela retornar true, o código que você quer será exibido, contendo o título com o link e tudo o mais. Em seguida está o título com o link, de fato, que aponta para a origem, obviamente. Afinal, essa era a ideia.

ID, URL, true); ?>" rel="bookmark" title="">



Obviamente, você vai executar echo no conteúdo do campo personalizado 'URL' que, se tudo der certo, será uma URL válida (não há verificação para isso, apenas se há algo armazenado ali). A função get_post_meta() primeiramente pede a ID da postagem, em seguida o nome do campo personalizado (que é 'URL'), e então ela pergunta se deve retornar o conteúdo como uma string ou como um array (você quer uma string, daí o valor, true). Executando echo nesse código, você terá seu link e pronto – temos um título de postagem com link! O loop continua, e você faz tudo isso outra vez.

308

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS A não ser que você esqueça de adicionar uma URL ao campo personalizado. Então, a verificação mencionada acima irá passar por cima da cláusula else, que simplesmente gera uma saída de título de postagem tachado, e uma mensagem avisando aos interessados que a URL está corrompida. Há também um link de edição, acrescentado como boa prática; talvez você queira incluir esse link também nos resultados bem-sucedidos. O restante é relativamente básico, com the_excerpt() exibindo o que quer que você coloque no campo de trecho (ou o conteúdo, de fato, caso você tenha cometido um erro), assim como as categorias, as tags e a data. E isso é tudo, essa é a base para usar o WordPress como gerenciador de links. É claro que você pode refinar um pouco esse método, essencialmente com soluções estéticas que você pode resolver dentro do tema

ALTERNATIVA: FORMATO DE POSTAGEM LINK Outra opção seria usar o formato de postagem link. Essa é uma solução menos avançada do que a anterior, mas pode ser uma opção melhor, dependendo de seus objetivos para o site de diretório de links. O formato de postagem link busca o primeiro link de sua postagem e permite que você brinque com ele. Para usar o formato de postagem link, primeiramente você precisa ativá-lo em functions.php: add_theme_support( 'post-formats', array( 'link' ) );

Obviamente, você pode expandir esse array com mais formatos de postagens, se quiser. A beleza dos formatos de postagem está no fato de que eles são muito fáceis de verificar. Você pode usar a conditional tag has_post_format() para verificar o formato de postagem link, o que pode também ser uma forma alternativa de aplicar estilos às postagens, naturalmente. if ( has_post_format( 'link' ) { echo 'Ei, veja só! É um link!' }

Se quiser usar formatos de postagens, você pode atualizar o código no primeiro exemplo como preferir. Para saber mais sobre formatos de postagem, consulte o Capítulo 4.

ALGUMAS IDEIAS DE UTILIZAÇÃO Por que você deveria usar o WordPress para criar algo que, à primeira vista, parece um simples diretório de links? A facilidade de gerenciamento do WordPress, assim como suas diversas capacidades de feeds e classificação, fazem da plataforma uma excelente opção para essa utilização. Some a isso a capacidade de permitir que os usuários enviem seus próprios links ou de fazer eles se inscreverem, e você tem uma base sólida para começar. Você pode até mesmo permitir que outros sites incluam os links mais recentes de uma determinada categoria ou tag usando feeds RSS, embora você provavelmente deva alterar a saída do feed para que os títulos, nesses casos, também levem aos destinos especificados nos campos personalizados 'URL'.

309

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS Como aproveitar ao máximo esses recursos? Obviamente, as possiblidades são infinitas. Sites de links orientados para um nicho são populares, mas você pode tornar a coisa mais atraente usando plug-ins. Por que não permitir que as pessoas votem ou comentem os links, por exemplo? Assim, você pode incentivar as contribuições dos usuários e aproveitá-las ao máximo, criando listas, rankings, etc. Para um grupo fechado, essa pode ser uma ótima forma de compartilhar recursos e artigos na Web, e, além disso, trata-se de uma boa alternativa a todos os scripts de diretório de links disponíveis por aí. Afinal, poucas plataformas oferecem a facilidade do WordPress, com a opção permanente de integrar novos recursos ao site. Aproveitando as vantagens dos temas e plug-ins, não há limites para o que você pode acabar fazendo com um site assim. Você também pode simplesmente usar o site para compartilhar e salvar links de que você gosta, categorizando e marcando o conteúdo com tags. Afinal, é isso que o delicious.com faz, por isso, com certeza, você pode achar isso útil.

MISTURANDO POSTAGENS DE LINK COM CONTEÚDO TRADICIONAL Talvez você queira misturar esse tipo de título com link ao seu conteúdo tradicional. Você sabe do que estou falando: aquele tipo de site onde o título da postagem aponta para a postagem, de fato, e não para outro lugar. Nesse caso, a solução seria usar uma espécie de aparte para links. Na verdade, isso é bem fácil de criar. Basta reutilizar o código e deixar que o conteúdo dos campos personalizados faça o trabalho por você. Algo semelhante ao código abaixo já resolveria o problema.

id="post-">

ID, URL, true); ?>" rel="bookmark" title="">

" rel="bookmark" title="Link Permanente para ">

by



310

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS '); ?> Publicado em |



Há algumas pequenas mudanças em comparação ao código usado no exemplo original. Isso porque, na verdade, você quer exibir as postagens com o link no título quando não houver um valor no campo personalizado 'URL', mas quando houver, você quer fazer as coisas da mesma forma que fez antes. Essa versão omite algumas categorias e coisas do tipo, e contém div.linkage, adicionado para facilitar o estilo (embora você também possa usar estilos de post_class() na maioria dos casos). Esse código irá fazer toda postagem que contiver algo no campo personalizado 'URL' ter um link integrado ao título, apontando para aquela URL, e não para a postagem em si. É relativamente fácil adicionar isso a qualquer tema. Obviamente, tudo isso ficaria bem mais limpo se você usasse formatos de postagem (do inglês, "post formats"), uma vez que seria possível simplesmente usar has_post_format() e verificar o formato de postagem link, conforme descrito anteriormente. Portanto, é possível criar um site centrado em links usando WordPress. Mas e quanto a uma galeria? A resposta é sim, naturalmente.

EXPLORANDO A GALERIA Hoje, é muito fácil usar o WordPress para imagens – ao menos para a maior parte dos sites. A nova funcionalidade de mídia, com o shortcode [gallery], facilita a inclusão de álbuns de fotos. Porém, o que você faz se é aquele tipo de usuário que quer publicar centenas, talvez milhares de fotos no longo prazo, e quer ter uma galeria de fotos tradicional em seu site? É claro que existem sites de compartilhamento de imagem, mas às vezes você quer fazer as coisas do seu jeito, no seu próprio site. É possível fazer isso usando WordPress. Neste exemplo, você vai usar postagens e categorias para criar uma galeria de fotos. Primeiramente, atribua à galeria de fotos a categoria Gallery (em inglês, neste exemplo). Você pode ter diversas categorias usando o mesmo tratamento, mas neste exemplo vamos criar uma só. A ideia é que cada postagem seja um álbum de fotos, em si. Assim, sua festa de aniversário e todas as fotos onde você aparece apagando as velinhas e abrindo presentes ficariam em uma mesma postagem, por exemplo, com um título adequado e até mesmo tags. As tags são ótimas para classificação, por isso você categoria pode usá-las como quiser. Se não quiser misturar as postagens de galeria de fotos às post com imagens post com imagens postagens normais, mas ainda assim quiser usar tags, você precisa criar uma taxonomia personalizada para marcar suas fotos com post com imagens tags. Assim, você não terá postagens misturadas nos diversos arquivos de tags. Figura 15-6: Modelo de galeria 311

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS Então, como este exemplo funcionaria? A Figura 15-6 é um esboço conceitual para a forma como as postagens se relacionam com a categoria Gallery. Você tem uma categoria Gallery e cada postagem é um álbum de fotos. Você pode gerenciar o conteúdo da forma que quiser. A forma mais simples seria simplesmente fazer o upload das imagens em uma postagem e incluí-las como galeria de miniaturas, usando o shortcode [gallery]. No entanto, você poderia incluir também uma descrição, quem sabe como um trecho, e então usar essas informações para navegação, assinatura de feeds, e exibição dentro de the_content() no arquivo do tema. Ou você pode simplesmente escrever algo abaixo da galeria de fotos; o resultado é o mesmo. O que importa, no caso das postagens, é que elas sempre tenham imagens anexadas se estiverem incluídas na categoria Gallery. Quando você faz o upload de imagens usando o gerenciador de mídia do WordPress enquanto escreve ou edita uma postagem específica, as imagens são anexadas àquela postagem. Essa conexão é necessária tanto para o shortcode [gallery] quanto para a exibição de miniaturas na página de arquivos da categoria, que, nesse caso, é a seção de galerias de fotos dentro do seu site. Uma última coisa, antes de seguirmos para o código: certifique-se de que suas configurações de mídia sejam adequadas para o design e para a configuração da seção de galerias. Para saber mais sobre esse assunto, consulte o Capítulo 13, que também aborda questões como o estilo do shortcode [gallery], e muito mais.

MODELO DA CATEGORIA A essa altura você já tem postagens como álbuns de fotos, cada qual contendo uma (mas provavelmente mais que isso) imagem, e já está exibindo essas imagens usando o shortcode [gallery]. Em seguida, crie a seção Gallery em seu site, usando um arquivo de modelo de categoria. Há diversas formas de fazer isso, mas a mais fácil seria descobrir a ID da categoria Gallery, analizando o campo de URL na tela de edição, na interface do WordPress (ver Figura 15-7).

Figura 15-7: Como encontrar a ID de categoria

312

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS Para este exemplo, faça de conta que a ID da categoria é 140, por isso seu arquivo de modelo terá o nome de category-140.php. Na seção Gallery, você quer exibir uma miniatura para representar cada álbum (que corresponde a uma postagem, lembra?), e há duas formas de fazer isso. Se quiser mais controle, você pode simplesmente escolher uma das miniaturas e configurá-la como um campo personalizado, de modo que ela será exibida nas listagens de álbuns. Porém, essa é outra coisa que você precisaria modificar, por isso recomendo simplesmente que você selecione uma das fotos anexadas e use-a como uma miniatura ilustrativa que leva ao álbum. A forma como você prefere exibir sua foto fica a seu critério. O código a seguir mostra a solução mais básica, que simplesmente pega um loop tradicional e altera a forma como a postagem é exibida. Mais adiante, neste capítulo, vamos fazer algumas coisas mais legais. Mais uma vez, pode ser uma boa ideia consultar o Capítulo 13 para recapitular a configuração básica de imagens antes de começar a aplicar estilos.

Welcome to the Gallery

1, 'post_type' => 'attachment', 'status' => 'publish', 'post_mime_type' => 'image', 'post_parent' => $post->ID ); $images = &get_children($args); foreach ( (array) $images as $attachment_id => $attachment ) { ?>

> " rel="bookmark" title="">



313

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS





O que está acontecendo aqui é o seguinte: você está usando get_children() para desenterrar os anexos das postagens. Uma vez que o loop oferece uma porção de postagens, você pode usar isso para mostrar a categoria onde se encontra, por exemplo. Esta é a parte interessante: 1, 'post_type' => 'attachment', 'status' => 'publish', 'post_mime_type' => 'image', 'post_parent' => $post->ID ); $images = &get_children($args); foreach ( (array) $images as $attachment_id => $attachment ) { ?>

> " rel="bookmark" title="">



Os argumentos passados para get_children() informam que apenas uma imagem por loop deve ser obtida, com a configuração de valor 'numberposts', uma vez que você não quer exibir todos os anexos para cada postagem, e sim exibir uma única imagem, como miniatura. Você quer apenas anexos, quer que sejam publicados, eles devem obrigatoriamenrte ser imagens, graças a 'post_mime_type' (já que um vídeo não se encaixaria, por exemplo), e por fim quer que a postagem em si seja o pai. Tudo isso está armazenado em $args pelo array. Tudo isso é carregado em get_children() e então associado a $images, que você usa dentro do array em foreach, abaixo. Isso será executado apenas uma vez, nesse caso, porque

314

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS você quer associar apenas uma imagem por anexo à postagem em si. A partir daqui, tudo fica fácil, com um div que passa uma classe especial pelo post_ class() para facilitar alterações de estilo. A parte wp_get_attachment_image() executa o echo da imagem que pertence à ID de anexo que você obteve a partir de foreach, acima, e em seguida gera a versão em miniatura. O último parâmetro que não é passado se refere à exibição de ícones de mídia, algo que você não quer usar nesse caso. Assim, o resultado final é a miniatura com um link para a postagem (ver Figura 15-8).

Figura 15-8: Visualização de miniaturas Imagem cedida por http://livinghyboria.com

Você precisa trabalhar um pouco com estilos para que a seção fique minimamente apresentável. O código abaixo foi o que usei no site Living Hyboria (http:// livinghyboria.com), do qual retirei o seguinte trecho: div.gallerypost { float:left; margin: 0 0 10px 10px; padding: 10px; background: #e8e8e8; } div.gallerypost:hover { background: #800; } div.gallerypost img.attachment-thumbnail { width: 120px; height: 120px; }

Lembre-se de que talvez você deva mudar o número de postagens exibidas, se estiver exibindo muitas miniaturas. O padrão de 10 postagens por página provavelmente parecerá um pouco vazio, por isso pode ser melhor usar algo próximo de 40, usando query_posts() imediatamente antes do loop:
315

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS ?>

Digamos que você queira adicionar uma breve descrição a cada álbum (lembrando que cada álbum é uma postagem) e listar tudo com a miniatura à esquerda e a descrição à direita. O exemplo a seguir torna a miniatura clicável, assim como o título, que é exibido acima da descrição. O código inclui até mesmo algumas tags, porque eu adoro tags. O código reside no mesmo modelo que o exemplo anterior, por isso o código alterado dentro do loop é exibido aqui:

> 1, 'post_type' => 'attachment', 'status' => 'publish', 'post_mime_type' => 'image', 'post_parent' => $post->ID ); $images = &get_children($args); foreach ( (array) $images as $attachment_id => $attachment ) { ?>

" rel="bookmark" title="">

" rel="bookmark" title="">



Com esse código, você está exibindo a miniatura da mesma forma que antes. Também está obtendo the_title() e integrando um link a isso, e a descrição é obtida usando the_ excerpt(), assim, você pode oferecer aos usuários a possiblidade de assinar um feed RSS da seção Gallery, por exemplo. Essa solução, ilustrada na Figura 15-9, oferece uma visão mais completa do que simplesmente largar uma miniatura em um grid, para cada álbum.

SOBRE OS ÁLBUNS Neste exemplo, cada postagem é um álbum de fotos, contendo todas as imagens exibidas na galeria de miniaturas usando o shortcode [gallery]. Uma vez que seus uploads de imagem em uma determinada postagem são tratados como anexos, você pode navegar até a página de 316

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS anexo (se quiser que o shortcode [gallery] exiba esse link) e visualizar cada página individualmente, com direito ao seu próprio link permanente e tudo o mais.

Figura 15-9: Listagem simples com miniatura e descrição Imagem cedida por http://livinghyboria.com

Você provavelmente precisará alterar o estilo da visualização de postagem individual para adaptá-lo aos seus álbuns. Há diversas formas de fazer isso, e talvez a saída de post_ class() seja o suficiente. Se você quiser exibir, por exemplo, the_excerpt() abaixo da galeria, precisará adicionar isso. Você pode fazê-lo facilmente, adicionando uma tag condicional para realizar uma verificação em uma categoria específica; se ela retornar true irá exibir the_excerpt(), caso contrário não.

Você também pode adicionar um arquivo de modelo para anexos (attachment.php ou image.php, se quiser mergulhar fundo) e alterar o estilo do modelo como quiser. Isso facilitaria muito na hora de adicionar links de navegação e links para o álbum original. Falamos disso em mais detalhes no Capítulo 13, por isso consulte esse capítulo para saber mais sobre como trabalhar com imagens. Outro fator a considerar é se cada imagem deve oferecer a funcionalidade de comentário. Uma vez que cada anexo é, na verdade, uma postagem com uma classificação diferente, essa funcionalidade é possível. Isso significa também que é possível usar inúmeros plug-ins, entre eles plug-ins de avaliação, por isso que tal deixar que as pessoas avaliem suas imagens? Há muitas possibilidades aqui. Uma dessas possibilidades é evitar inteiramente a página de anexo, usando uma forma alternativa de exibir as imagens. Isso geralmente significa usar o efeito Lightbox. Esse efeito também é abordado no Capítulo 13, e para ver recomendações de plug-ins que podem ajudar a implementar essa técnica, consulte o Capítulo 9. 317

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS Não importa como você decide exibir os álbuns e as fotos em si, provavelmente seja uma boa ideia usar um estilo levemente diferente do que você usa em suas postagens comuns. É sempre uma boa ideia ajudar o visitante a saber onde está, dentro de um site.

OUTRAS UTILIDADES Os exemplos anteriores concentraram-se em adicionar uma seção de galeria para qualquer site que publique muitas imagens. Pode ser o seu blog pessoal ou um site de notícias com a cobertura de um evento; as galerias devem ser usadas sempre que houver muitas imagens envolvidas. Uma vez que o WordPress oferece suporte a galerias também entre postagens, com uma pequena adição ao shortcode [gallery], é relativamente fácil criar um álbum na categoria Gallery e então incluir essa galeria específica usando o shortcode [gallery] e o identificador da postagem. Você só precisa passar a ID da postagem para o shortcode [gallery], assim: [gallery id="952"]. Isso exibiria uma galeria de miniaturas como se você estivesse simplesmente passando [gallery] na postagem com a ID em questão. Nada impede que um site expanda sua funcionalidade de galerias para envolver mais categorias e, conforme mencionado no início desta seção, taxonomias personalizadas para obter mais opções de classificação. Na verdade, adicionar uma taxonomia separada para marcar fotos com tags pode ser uma ótima ideia se você não gosta muito de misturar o conteúdo normal com as fotos. O Capítulo 6 contém todas as informações de que você precisa para criar suas próprias taxonomias. Por fim, há também a possibilidade de que as galerias que você publica sejam o conteúdo principal de seu site. Existe uma grande variedade de designs para galerias por aí, com excelentes designs baseados em CSS, ou temas de WordPress (ou qualquer outra coisa, na verdade). Você pode construir esse tipo de site sobre essa premissa, e até mesmo adicionar um elemento de votação, graças aos inúmeros plug-ins disponíveis. Uma vez que os anexos são postagens, tudo que você pode fazer com uma postagem pode ser acessado quando uma imagem é visualizada como anexo. Naturalmente, isso não funciona tão bem quanto usar sobreposições com o efeito lightbox ou ferramentas semelhantes. Se você precisasse construir uma galeria de imagens, provavelmente evitaria o código personalizado para uma categoria e, em vez disso, usaria as galerias como o padrão para a exibição de suas postagens. Nesse tipo de site, a anomalia seria uma postagem de blog/notícia, por isso você usaria o tratamento personalizado para esse post type, e não o contrário. Você pode categorizar ou marcar o conteúdo com tags da forma que desejar e aproveitar ao máximo as possibilidades de the_excerpt(), assim como fez no exemplo da descrição entre os trechos de código do arquivo de modelo de galeria. Na verdade, seria muito fácil levar esse conceito para a página inicial de um site, caso você quisesse exibir uma miniatura.

E AS IMAGENS EM DESTAQUE? Dependendo do tipo de site que está desenvolvendo, talvez você queira usar o recurso de imagens em destaque (featured images) para representar a galeria, ou simplesmente usar uma miniatura, como no exemplo anterior. Na verdade, se você publica apenas galerias, essa pode ser uma solução ainda melhor, uma vez que é mais fácil manter o controle sobre o que é exibido. No entanto, a maioria dos sites contém um grande volume de conteúdo, e há uma boa chance de que você não queira limitar as imagens em destaque às galerias. Nesse caso, escolher uma única miniatura é uma excelente solução. 318

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS FORMATO DE POSTAGEM GALERIA Outra coisa que você deve manter em mente é o formato de postagem galeria (Gallery). Se você ativar esse formato (ver Capítulo 6), pode não apenas alterar ainda mais os estilos de suas postagens de galeria, graças à nova classe gerada por post_class(), mas também pode executar verificações usando conditional tags (como has_post_format()). Essa é definitivamente uma alternativa a ser considerada, sobretudo se seu site é relativamente simplificado, com todo o conteúdo em uma mesma categoria principal, e tudo o que você realmente precisa fazer é alterar o estilo de acordo com o conteúdo da postagem. Os formatos de postagem são uma forma excelente de ter mais controle sobre o conteúdo sem dividí-lo em muitas categorias. Use-os com sabedoria.

UM BREVE ADENDO: OUTRAS UTILIDADES PARA O WORDPRESS Você pode fazer praticamente qualquer coisa com WordPress se quiser. Aqui vão algumas últimas recomendações para inspirar você a continuar criando.

PÁGINA DE EVENTOS E CALENDÁRIO É tão fácil criar um site com WordPress que ele se tornou uma plataforma muito popular para construir sites de eventos. Você pode facilmente classificar coisas como palestrantes e oficinas usando post types personalizados e manter as páginas de informação como Páginas; o blog, naturalmente, fica para suas postagens normais. Esse tipo de configuração é muito fácil de gerenciar, o que explica sua popularidade. A maior decisão em termos de sites de eventos diz respeito à funcionalidade de programação e inscrição. A programação pode ser gerenciada com um serviço de calendário hospedado, mas há diversos plug-ins de calendário disponíveis que podem se ajustar às suas necessidades. Quanto às inscrições, há muitos serviços na Web que oferecem soluções unificadas, que gerenciam tudo, da inscrição ao pagamento, o que é muito útil. Para oferecer ainda mais funcionalidade, dê uma olhada em plug-ins como wp-eCommerce e nos diversos carrinhos de compras disponíveis; eles já foram usados para tudo, de WordCamps a eventos menores, e podem ser uma opção melhor para você.

INTRANETS E COLABORAÇÃO O WordPress, como você já sabe, é muito fácil para os autores trabalharem. Isso faz dele uma plataforma adequada para intranets em que as equipes precisam se comunicar com toda a organização e entre si. Seja com um blog informal para manter todo mundo na empresa informado, ou com uma grande fonte de informação colaborativa durante projetos, a facilidade de uso que o WordPress oferece faz dele uma excelente escolha. Para conseguir todo o poder das intranets maiores, você talvez precise levar o WordPress um pouco mais longe, com plug-ins adicionais e outras ferramentas que ajudem a plataforma a se comunicar com todos os outros sistemas da intranet. Se você precisa de um blog coletivo mais colaborativo, não deixe de conferir o tema P2 (http://wordpress.org/extend/themes/p2), um tema baseado no Twitter, no qual 319

PARTE IV: RECURSOS E FUNCIONALIDADES ADICIONAIS os usuários podem publicar atualizações curtas e longas a partir da página inicial. Algumas empresas usam esse tipo de configuração para comunicação interna, dentro de uma intranet fechada ou usando um plug-in para manter a confidencialidade do conteúdo. Embora o WordPress não seja um wiki, há alguns plug-ins capazes de adicionar também essa funcionalidade. Decidir se o WordPress é a melhor solução pra sua intranet vai depender de suas necessidades; para comunicação ao estilo blog, obviamente ele é perfeito, mas para outras utilidades, você deve avaliar as necessidades da empresa e partir daí.

COMUNIDADES E FÓRUNS Com o advento do plug-in BuddyPress (http://buddypress.org), o WordPress se tornou uma opção viável para comunidades. Graças ao BuddyPress, agora é mais fácil do que nunca criar um site focado nos membros, fazer os usuários se comunicarem em grupos e até mesmo expandir o WordPress para hospedar blogs e fóruns se você quiser. E o melhor é que praticamente qualquer site de WordPress pode ser expandido com a funcionalidade BuddyPress, graças ao pacote de modelos do BuddyPress (http://wordpress.org/ extend/plugins/bp-template-pack/), um plug-in que ajuda você a “converter” seu tema para se adaptar ao BuddyPress. Para os fóruns, o BuddyPress inclui uma versão do bbPress (http://bbpress.org). O futuro do bbPress ainda é um tanto incerto, mas há boas chances de que, no momento em que você estiver lendo este livro, ele já não seja mais um sistema de fóruns autônomo, e sim um plug-in para WordPress. Essa é uma ideia interessante, sem dúvida. Existem também outros plug-ins, mas você definitivamente deve considerar sua capacidade de lidar com o tráfego e com o carregamento de elementos mais pesados. Caso essas soluções não atendam às suas necessidades, você sempre pode recorrer a sistemas de fórum externos, como o Vanilla (http://vanillaforums.org/), que se integra bem com o banco de dados do usuário de WordPress, se você quiser. Sem dúvida, há muita coisa acontecendo na plataforma WordPress, em termos de expansão da funcionalidade para membros (há uma infinidade de plug-ins dedicados apenas ao conceito de membros) e recursos de comunidade.

BANCOS DE DADOS Tudo mudou depois dos post types personalizados. O fato de você poder adicionar diversas camadas superiores de gerenciamento de conteúdo com apenas algumas linhas de código torna o WordPress extremamente versátil. Isso significa também que você pode construir bancos de dados extensos, com qualquer tipo de informação que quiser, e usar o WordPress como intermediário, possivelmente atuando apenas como interface de usuário. Some-se a isso o fato de que você tem feeds RSS para praticamente tudo dentro do WordPress, e tem uma plataforma capaz de facilmente distribuir suas atualizações para outros sistemas. É ousado dizer isso, mas os post types personalizados realmente fazem as possibilidades parecerem infinitas. Evoluímos muito desde as postagens e páginas, não é verdade?

320

CAPÍTULO 15: UTILIZAÇÕES INCOMUNS DO WORDPRESS SITES ESTÁTICOS Existem ainda os sites estáticos, que não precisam de notícias em destaque ou atualizações frequentes. Por que você deveria usar o WordPress para criar um site desse tipo? Não é mais fácil simplesmente modificar os arquivos de HTML? Talvez, mas se você estiver criando um site estático para um amigo ou cliente, desenvolver o site usando WordPress pode economizar muitas dores de cabeça. Talvez trate-se de um site inteiramente constituído por páginas, sem postagens ou categorias ou nenhum elemento personalizado, apenas um punhado de páginas simples que transmitem ao visitante a mensagem do site. Se você usar WordPress, qualquer pessoa será capaz de atualizar essas páginas. Ninguém precisará chamar você porque o mercadinho da esquina mudou seu horário de funcionamento ou importuná-lo para que acrescente uma nova página sobre o novo escritório na cidadezinha vizinha. Sites estáticos simples criados com WordPress podem levar um pouco mais de tempo para desenvolver, mas economizam muitas edições inoportunas no longo prazo. Talvez isso não seja o que você quer, se estiver cobrando seus cliente por hora de trabalho, por exemplo, mas faça o favor (a eles e a si mesmo) de entregar o melhor produto possível desde o início. Com certeza, você vai se sentir melhor.

VOCÊ PODE CONSTRUIR O QUE QUISER Bem, talvez não qualquer coisa – até o WordPress tem limites –, mas praticamente isso. O WordPress é uma plataforma extremamente versátil, e a maioria dos sites centrados em conteúdo funcionam perfeitamente com um trabalho mímimo de personalização do sistema. Graças à flexibilidade dos temas e à expansibilidade oferecida pelos plug-ins, você realmente pode fazer quase tudo com o WordPress. Toda a ideia por trás deste capítulo é ajudar você a adotar esse pensamento. Sempre que começo a pensar em um novo projeto, seja ele um site pessoal ou algo para um cliente, fico brincando com o conceito em minha mente até chegar a uma conclusão sobre como concretizá-lo da forma mais rápida possível. Na maioria dos casos, o WordPress é a solução para fazer isso. Embora você talvez não seja capaz de construir tudo usando WordPress, vai descobrir que a maioria das suas ideias pode ser concretizada usando essa adorável plataforma.

321

ÍNDICE

ÍNDICE SÍMBOLOS E CARACTERES NUMÉRICOS

WP e-Commerce, 198–9 WP-Mail SMTP, 201–2 WP No Category Base, 196–8 anatomia, 167 desvantagens, 188 funcionalidade para, 173–9 fundamentos básicos, 168–70 hospedagem, 187 incorporação, 170–4 multisites, 185–7 suporte a widget para, 178–85 arquivo functions.php, 28–9, 189 assinatura, 204–5 backups, 17 como alternativa ao loop, 56 comparação com campos personalizados, 133–4 comparação com temas, 163–4 criação, 26 desnecessários, 213–4 durante a instalação, 15–6 efeito lightbox, 266 ferramentas de exportação/importação, 18 feeds RSS, 236–5 galerias, 267 ganchos de ação com, 142–3 gerenciamento de comentários BackType Connect, 202–3 com sistemas de gerenciamento de conteúdo, 226 CommentLuv, 202–3 Cookie for Comments, 202–3 Disqus Comment System, 202–3 Get Recent Comments, 202–3 IntenseDebate Comments, 202–3 ReplyMe, 202–3 integração com Facebook Connect, 87 localização, 27 manutenção, 129–30 mecanismos de busca/mecanismo de busca otimização, 205–7 media, 195–7 mobile, 204–6 para conteúdo, 194–6 para funcionalidade especial, 132–3 para logins, 22–3, 257 para mover diretórios, 15–6 para randomizar elementos de imagem, 267 redes sociais Add to Any, 203–4 botões de envio, 239–41 comentários, 241–3 Facebook, 230–1 Lifestream, 203–4 SexyBookmarks, 204–5 ShareThis, 203–4 Simple Social Bookmarks, 204–5 Sociable, 203–4 Tweet Old Post, 204–5

& (E comercial), 34–5 _ _ () arquivo, 155–6 404 (páginas de erro) com publicidade, 253–4 funcionalidade adequada, 117–8 modelo sem loop, 40 sobre, 81–2, 101–4, 255–6

A add_action() arquivo, 96 Add Custom Field (botão), 63

add_editor_style() arquivo, 90 add-ons (complementos) administrativos Advertising Manager, 200–1 Branded Admin, 197–8 Broken Link Checker, 198–9 Custom Post Type UI, 201–2 Editorial Calendar, 201–2 Fast Secure Contact Form, 197–8 FeedWordPress, 200–1 Google Analyticator, 198–9 Google Analytics for WordPress, 198–9 Maintenance Mode, 197–8 Members, 201–2 Members Only, 200–1 More Fields, 199–200 No Self-Pings, 196–7 Pods, 199–200 Post Editor Buttons, 200–1 Pretty Link, 199–200 Random Redirect, 200–1 Redirection, 199–200 Revision Control, 201–2 Shockingly Big IE6 Warning, 197–8 Sidebar Login, 197–8 TDO Mini Forms, 198–9 Theme My Login, 197–8 TinyMCE Advanced, 200–1 Viper’s Video Quicktags, 200–1 Widget Context, 201–2 Woopra Analytics Plug-in, 200–1 WordPress Download Monitor, 199–200 WordPress Simple PayPal Shopping Cart, 198–200 WordPress.com Stats, 198–9 wp-db-backup, 17 WP-DB-Backup, 197–8 WP-Mail SMTP, 201–2 WP-DB-Backup, 197–8

323

ÍNDICE Twitter, 234–5 Twitter for WordPress, 203–4 Twitter Tools, 203–4 Wickett Twitter Widget, 203–4 sobre, 193 spam Akismet, 201–2 CAPTCHA, 202–3 Really Simple CAPTCHA, 202–3 TypePad AntiSpam, 201–2 WP-Hashcash, 202–3 WP-SpamFree Anti-Spam, 201–2 tema da interface de admin como, 214–6 temas filhos como alternativa, 192 usabilidade, 106–7 utilizações incomuns calendário, 319–20 conteúdo enviado pelos usuários, 291–4 fotos, 317 inscrição dos usuários, 289 para sites de compras, 299–300 páginas de eventos, 319–20 sites de links, 310–1 validade, 190–2 add_theme_support() arquivo, 53, 89–90 Add to Any, 203–4 Advertising Manager, 200–1 Akismet, 201–2 alertas, bases de conhecimento FAQ, 298–9 alertas com plug-ins, 194 Align RSS Images, 204–5 All in One SEO Pack, 205–6 ampersand (&), 34–5 anexos, 17, 262 anúncios em postagens sticky, 139 Apache .htaccess, 22–3 aprovação para plug-ins, 187

assinaturas bases de conhecimento FAQ, 298–9 feeds RSS, 134–5, 158–162 plug-ins, 204–5 assistente de importação, 19 assistentes, importação, 19 ativação de plug-ins, 186–7 atualizações automáticas/upgrades backups, 15–6 plug-ins, 184–5, 187 temas, 115, 118–9 atualizações de status, 52–3 atualizações/upgrades alterações no banco de dados, 14 automáticos, 15–6, 115, 118–9, 184–5, 187 com temas filhos, 122, 125 desvantagens, 15–6 melhorias de segurança, 11–2, 21–2 PHP Hypertext Preprocessor, 184–5 plug-ins, 187 sobrescrever, 26 Automattic (fabricante do WordPress), 242–3, 253–4, 288 autorun para plug-ins, 186–7 AutoThumb, 196–7

B BackType Connect, 202–3 backups de hospedagem na Web, 17 alternar, 18–22 externas, 240–1 instaladores, 11–3 soluções de comentários, 241–4 plug-ins, 187 backups antes/duante a instalação, 15–7, 21–2 do WordPress, 15–7 WordPress Codex, 20–1 bancos de dados com Multisites, 186–7 como componente do blog, 15–6 desinstalação de plug-ins, 176–8 durante a instalação, 10–2, 14–6 gerenciamento integrado, 17 oportunidades, 320–1 plug-ins, 184 servidores externos, 10–2 sobrecarga, 57 tabelas, 15, 186–7 bancos de dados de gerenciamento integrados, 17 barreiras, 220–1 base de conhecimento FAQ, WordPress como, 295–9 bbPress, 212, 320–1 Better Search, 205–6 bibliotecas, JavaScript, 255–6 Bit.ly (encurtador de URL), 236 Blog Time, 207–8 bloginfo(), template tag, 30–3, 35, 79, 159–60 blogs. Ver também WordPress; tópicos específicos componentes, 15–7 configurações, 19, 41

$args array, 268 armazenamento backups, 17 imagens, 270 plug-in conteúdo, 173–4 arquivo archive.php, 291–2 arquivos, 22–3, 100, 132–3 arquivos de áudio, 52–3 arquivos de objeto de máquina, 153–6 arquivos de sistema, 27 arquivos de tag pública, 132–3 arquivos de usuários, 22–3 envio de conteúdo como base de conhecimento FAQ, 295–9 quadros de vagas de emprego, 288–96 tipos, 309–10 limitações de privilégios, 213–4 manuais, 227 arquivos do núcleo, 17, 26–7 arquivos index, 22–3 arquivos. Ver arquivos específicos arrays, 60–1 aside (formato), 52–3

324

ÍNDICE impressão, 285–6 instalação, 10–3 mover, 21–2 segurança, 22–3 temas, 27–9 template tags, 30–2 body_class(), template tag, 53, 78, 136–9 Booleans, 35–6 botões Add Custom Field, 62–3 de envio, 239–42 Facebook, 230–1 Post Editor, 200–1 Twitter, 232–4 botões/links de envio, 239–42 Branded Admin, 197–8 Breadcrumb Trail, 206–7 Broken Link Checker, 198–9 BuddyPress, 212, 320–1 busca bases de conhecimento FAQ, 298–9 quadros de vagas de emprego, 291–2 sobre tags, 133–4

C cabeçalhos imagens, 64–5 modelos, 290 no style.css, 70 personalização, 140–1 cache conteúdo, 238–40, 278–9 feeds RSS, 239–40 caixas com abas, 276–9 calendários, 201–2, 319–20 campos, personalização com plug-ins, 190–1 como alternativa a postagens sticky, 140–1 in design, 247 sobre, 62–5, 111–4 taxonomias, 151–2 usabilidade, 133–4 cancel_comment_reply_link(), 110–1 CAPTCHA, 202–3 Cascading Style Sheets (CSS) código, 51 classes, 53, 78, 137–8, 203–4 folhas de estilo, 73–6 limitações, 64 sliding doors (portas deslizantes), 249–52 categorias aplicar estilos com, 133–6 arquivos, 41 baseadas em design, 246 checklist, 213 IDs, 54–5 modelos, 312–3 para postagens, 144–5 postagens como, 311–2 taxonomias, 144–5

category.php (arquivo), 125–6, 133–4 category-X.php (arquivo), 133–4 citações, 52–3, 223-4 classes em estilo de body, 136–9 classificação conteúdo, 132–3 de temas, 118–20 ordem, 11–2 tags, 32–3, 35, 311–2 CMS. Ver sistemas de gerenciamento de conteúdo (CMS) código conditional tags, 37 design JavaScript, 256 postagens, 246–52 publicidade, 252–4 temas de admin, 258 em sistemas de gerenciamento de conteúdo, 214–5, 221, 223–6 funcionalidade caixas com abas, 276–8 e-mail, 282–4 feeds RSS, 280, 282 formulários de login, 284–5 impressão de blog, 285 HTML, 43, 220–21 imagens galerias, 264–5 randomização, 268, 268–9 instalação alteração de domínio, 15–6 criptografia SSL, 22–3 erros de conexão com o banco de dados, 10–1 header.php (arquivo), 21–2 idiomas, 10–1 locais de diretório, 14–6 Secret Keys, ordem de classificação, 11–2 wp-config-sample.php (arquivo), 10 loops arquivos de modelo, 41–2 básico, 40 campos personalizados, 64, 65 exemplos, 43, 45–9 formatos de postagem, 53 múltiplos, 57–62 postagens sticky, 49, 51 query_posts(), 54–6 omissão de versão, 78 plug-ins funcionalidade, 173–7 fundamentos básicos, 168–9 incorporação, 170–1 widgets, 178–83 redes sociais Facebook, 230–1 links de envio, 240–2 sintaxe, 30–5 Twitter, 232–4 shortcodes, 177–9 temas campos personalizados, 111–4 comentários, 85–7, 110–2 design, 75–6

325

ÍNDICE footer.php (arquivo), 87–9 functions.php (arquivo), 88–97, 103–6 header.php (arquivo), 75–8 index.php (arquivo), 79 layout, 74–5 loop.php (arquivo), 80–4 modelos, 101–4 páginas, 100–2 postagens, 75–6 resetar segmento, 74 sidebar.php (arquivo), 84 style.css, 73 widgets, 106–9 temas filhos, 123–5 temas, tópicos avançados design condicional, 156–9 estilos, 135–8 ganchos de ação, 142–4, 144–6 páginas de opções, 152–4 personalização de recursos, 140–1 taxonomias, 148–51 utilizações incomuns bases de conhecimento FAQ, 296–8 diretórios de produtos, 301–6 fotos, 313–7 quadros de vagas, 290–1, 293–4 sites de links, 307–11 código HTML, 43, 220–1 código malicioso, 27 colaboração, 319–21 colação, 11–2 com temas filhos, 128 comentários do instrutor, 111–12 comentários. Ver também add-ons, gerenciamento de comentários em redes sociais, 241–4 em temas, 108–12 no arquivo functions.php, 95–7 saída, 32–3 sobre, 132–3 CommentLuv, 202–3 comments.php (arquivo), 28–9, 70–1, 73, 85–7 comparação com taxas de consultoria e licenciamento, 212 compartilhamento de imagens, 270–74 compatibilidade reversa, 121, 178–9 compressão para a Web, 268–9 conditional tags como alternativa ao loop, 56 design, 156–9, 249 index.php (arquivo), 55 is_sticky(), 140–1 para títulos, 78 query_posts() com, 54 sobre, 37 configuração de site, 8 configurações alteração, 19 banco de dados, 11–2 no arquivo functions.php, 88–90 plug-ins, 173–7 configurações de largura, 104–5 conjunto de caracteres, 11–2

326

$content_width (arquivo), 104–5 conteúdo assinaturas de feed RSS, 134–5, 158–62 cache, 238–40, 278–9 controle, 247 controle do fluxo, 54 enviado pelos usuários, 288–96 estático, 100 largura, 104–5 plug-ins, 173–4, 194–6 randomização, 267–270 shortcodes, 178–9 tipos, 132–3 conteúdo editorial, 132–3, 201–2, 212 conteúdo em destaque imagens, 318 plug-ins para, 196–7 postagens, 44, 58–60 conteúdo estático, 15–7, 100, 132–3, 320–1 conteúdo externo ao WordPress, 225–7 $control_callback parâmetro, 183 Cookie for Comments, 202–3 credenciais, 22–3 credenciais da conta, 22–3 creenshot.png no lançamento de temas, 118–9 criptografia, 15–6, 22–3 cronjobs/tarefas agendadas, 238–40, 278–9 CSS (Cascading Style Sheets) classes, 53, 78, 137–8, 203–4 código, 51 folhas de estilo, 73–6 limitações, 64 sliding doors (portas deslizantes), 249–52 Custom Post Type UI, 201–2

D dados desinstalação, 184 personalização, 111–3, 133–4 tipos, 35–6 dados de postmeta, 95–6 dashboard_reminder() (função), 182 datas de postagens, 35–6 declaração, 155–6 declaração de widgets, 106–8 desativação de plug-ins, 186–7 “desblogar” o WordPress, 216–8 Desenvolvedor FAQ para o Diretório de plug-ins, 187 design condicional, 156–9 para múltiplos sites, 129–30 truques 404 páginas de erro, 255–6 alterações pessoais, 256–8 aprimoramento de sites, 258 bibliotecas JavaScript, 255–6 menus, 249–53 postagens, 246–9 publicidade, 252–4 sobre, 245 design, 129–30

ÍNDICE desinstalação de dados , 184 plug-ins, 176–8, 186–7 destacar comentários do autor, 111–2 destaque de autor, 111–2 desvantagens arquivos do núcleo, 26 atualizações/upgrades, 15–6 bancos de dados do WordPress, 15 compressão para a Web, 268–9 efeito lightbox, 266 galerias de imagens externas, 267 imagens, em movimento, 19 menus baseados em hover, 252–3 mudanças de serviço de hospedagem na Web, 19–21 plug-ins, 172, 187–8 query_posts(), 55 servidores de banco de dados externos, 10–2 tags na tradução de idiomas, 156–7 temas filhos, 128 dimensionar imagens, 262 diretórios de produtos, 300–7 Disable RSS, 204–5 Disqus Comment System, 202–3, 242–4 div.job-listing, 291–2 div#sidebar-container (arquivo), 85–6 div#site-header (arquivo), 79 domínios alterações, 14–6 encurtamento, 199–200 redirecionamento, 18, 19 $do_not_duplicate (array), 60–1 $do_not_duplicate (objeto), 59 Drupal, 212 dynamic_sidebar() (arquivo), 79, 85–6

E e-commerce, 299–301 echo (declarações), 155–6 economia do compartilhamento de imagens, 271–2 edit_comment_ link() (arquivo), 32–3 edit_post_link() (arquivo), 32–3, 35 editar bancos de dados, 14–5, 19 bases de conhecimento FAQ, 298–9 código, 162–4 desvantagens da substituição, 122 .htaccess, 27 para otimização de mecanismos de busca, 161–3 posts, 15–6, 22–3 editores, 22–3, 213–4 editor-style.css, 89–90 Editorial Calendar, 201–2 efeito lightbox, 265–66, 317 E-junkie, 300–1 elementos dinâmicos, 132–3 elementos obrigatórios em lançamentos de tema, 115, 118–9 em plug-ins, 168–9, 187 else (cláusula), 41

e-mail, 159–60, 282–4 endif loops, 41 endwhile loops, 41 envio para wordpress.org, 118–20 esboço, 132–5 escala de imagens, 262 escrever postagens, 22–3 estatísticas, 142–3 estilo folhas de estilo, 291–4 galerias, 263–7 postagens, 317 sobre, 134–41 estilo de body class, 136–9 estrutura modular, 212 Exec-PHP, 207–8

F Facebook, 230–1, 242–3 Facebook Connect, 87, 243–4 Fantastico, 11–3 Fast Secure Contact Form, 197–8 Featured Content Gallery, 196–7 $featured_query, 58–9 Feedburner, 159–60 feeds RSS assinaturas, 105–6, 134–5 atualização distribuição, 320–1 cache, 239–40 como envio de tema requisito, 118–9 com sistemas de gerenciamento de conteúdo, 226 em redes sociais networking lifestreaming, 236 sobre, 229 exibir, 278–82 parsers, 236, 237 sobre, 158–62 feeds RSS completos, 159–60 FeedWordPress, 200–1, 238–9 ferramentas de exportação/importação, 18–9 ferramentas de importação, 18–9 fetch_feed() array, 282 Flickr, 270–4 Footer Notes (plug-in), 173–7 footer.php (arquivo) código, 87–9 no arquivo index.php, 31–2, 71, 79 no tema Notes Blog, 73 sobre, 28–9, 290 format-aside (classe), 53 formato postagens, 52–3, 89–90, 133–4, 309–10, 319–20 temas, 117–8 fotos. Ver também imagens compartilhamento, 268–9 organização, 311–20 YouTube, 270–2

327

ÍNDICE frameworks (estruturas), 130, 142–3 funcionalidade com ganchos de ação, 142–3 com plug-ins, 167, 170–1, 173–9, 190–1 com temas filhos, 129–30 comentários, 241–3 como consideração do WordPress, 213–4 de base de conhecimento FAQ, 296–9 especializado, 132–3 planejamento, 192 substituição, 172 tópicos avançados caixas com abas, 276–9 e-mail, 282–4 formulários de login, 283–5 impressão de blog, 285–6 RSS feeds, 278–82 sobre, 275 funcionalidade de arrastar e soltar, 106–7 funcionalidade especial, 132–3 funcionalidade wiki, 320–1 funções “plugáveis”, 172 functions.php (arquivo) código, 88–97 com temas pais, 129–30 desvantagens, 164 ganchos de desenvolvedor, 83 indicações, 191–2 no arquivo index.php, 79 papel do tempo de carregamento, 153–4 plug-ins, 28–9, 189 temas filhos como alternativa, 192 shortcodes, 222–4 sobre, 103–7

Google Analytics for WordPress, 198–9 Google Custom Search Engine (listagens de resultados, 134–5 Google Feedburner, 159–60 Google XML Sitemaps, 205–6 GPL (licenciamento) gráficos, 261 Gravatar.com, 118–9, 241–2 instalação guiada, 8–9 plug-ins, 187 sobre, 115, 118–9 WordPress Codex idioma, 168–9

H have_posts() (arquivo), 42, 58–9 header.php (arquivo) ganchos de desenvolvedor, 83 no arquivo index.php, 31–2, 71 no tema Notes Blog, 73, 75–9 sobre, 28–9, 290 código, 21–2 HeadSpace2 SEO, 205–7 hierarquia, modelos, 99 home.php (arquivo), 55, 72 hospedagem de alternar, 18–22 backups, 17 externas, 240–1 instaladores, 11–3 plug-ins, 187 soluções de comentários, 241–4 .htaccess, 22–3, 27

I

G

imagens backups, 17 com sistemas de gerenciamento de conteúdo, 226 compartilhamento, 270–4 de fundo, 141, 249–52, 270 download, 19 em cabeçalhos, 64–5 em campos personalizados, 133–4 em destaque, 318 em diretórios de produtos, 306–7 em postagens, 112–3, 312–3 escala, 262 fotos compartilhamento, 268–9 organização, 311–20 YouTube, 270–72 galerias, 262–7 poluição, 274 randomização de elementos, 267–70 sobre, 261 vídeos, 17, 52–3, 226 imagens de fundo, 141, 249–52, 270 Include Tags There, 31–2 inclusão de conteúdo dos usuários, 293–4 index.php (arquivo) como fallback, 99 como foco, 72

galerias, 52–3, 262–67, 311–20 Gallery2, 267 ganchos com plug-ins, 189 de ação, 130, 142–6, 170, 257 de filtro, 170–1 em functions.php, 93–6 para desenvolvedores, 78, 83 ganchos de ação, 130, 142–6, 170, 257 ganchos de filtro, 170–171 GD Press Tools, 206–7 GD Star Rating, 195–6 gerador de strings aleatórias, 10 get_comments() (chamadas), 71, 216 get_footer()(chamadas), 71, 79 get_header()(chamadas), 71, 79 Get Recent Comments, 202–3 get_sidebar()(chamadas), 71, 79 get_template_part()(chamadas), 41, 79 Global Translator, 206–7 GNU (software de idiomas), 156–7 goo.gl (encurtador de URL), 236 Google AdSense, 253–4 Google Analyticator, 198–9

328

ÍNDICE em sistemas de gerenciamento de conteúdo, 216 em temas, 70–1, 79, 115 loops, 41, 55 sobre, 28–9 inglês como padrão, 9–11 inicialização do WordPress, 78 inscrição (sign-in) bases de conhecimento FAQ, 298–9 com Apache .htaccess, 22–3 envios de conteúdo pelo usuário, 288 formulários, 283–5 personalização, 257–8 unificado, 243–4 instalação de diretórios, 8, 13–4 de plug-ins, 187 de temas, 115 produto, 300–7 instalação backup, 15–7 bancos de dados, 10–2, 14–6 básica, 8–9 diretórios, 13–4 manual, 10–1 serviços de hospedagem, 15–7 sobre, 7–8 instalação básica, 8–9 “instalação em cinco minutos,” 8 instalação em um clique instalação/upgrades, 11–3 instalação manual, 10–1 instaladores, 11–3 IntenseDebate Comments, 202–3, 242–3 interface de admin ajustes, 213–5 checklist, 213 páginas de opções, 152–3 temas, 214–6, 258 interrupções, soluções de comentários hospedadas, 242–3 intranets, 319–21 is_front_page() (arquivo), 79 is_home() (arquivo), 79 is_singular()(arquivo), 84 is_sticky() (conditional tag), 140–1

J JavaScript bibliotecas, 255–6 efeito lightbox, 266 para respostas, 78 jQuery Lightbox, 196–7 jQuery, 255–6 kits para iniciantes, 227

L largura de banda, 270 LaunchPad (software de idioma), 156–7 layout, 70, 132–3. Ver também tópicos específicos de layout licenciamento GPL língua do WordPress Codex, 168–9

plug-ins, 187 sobre, 115, 118–9 informações plug-ins, 168–9, 173–4, 187 temas, 115 taxas, 212 Lifestream, 203–4 lifestreaming, 236–40 Lightbox Gallery, 195–7 Like (botão do Facebook), 230–1 links afiliados, 299–300 em diretórios de produtos, 306–7 sites, 307–12 enviar, 239–42 para miniaturas, 264 links afiliados, 299–300 links da página de autor, 22–3 Living Hyboria (site), 315–6 localização como consideração do WordPress, 213–4 idiomas, 81–2, 89–90 plug-ins, 173–4 tags, 72 logins bases de conhecimento FAQ, 298–9 com Apache .htaccess, 22–3 envio de conteúdo do usuários, 288 formulários, 283–5 personalização, 257–8 unificados, 243–4 loop.home.php (arquivo), 290 loop.index.php (arquivo), 32–3, 79 loop.php (arquivo), 41–2, 79–84, 125–6 loop-category.php (arquivo), 125–6 loops adquirir experiência, 66 alternativas, 56–7 com plug-ins, 190–2 compreensão, 40–2 em diretórios de produtos, 306–7 múltiplos, 57–63 personalização, 62–5, 112–3 publicidade, 252–4 sobre, 28–9, 38–39 utilização consulta de postagens, 54–6 formatos de postagem, 52–3 postagens sticky, 49–3 sobre, 42–9 loops básicos, 40

M Manage Themes (página), 28–9 manchetes, 112–3, 140–1 manchetes ao estilo de revistas, 112–3 manuais, 227 manuals, 227 manutenção programada, produtos de terceiros, 242–3, 267 MD5 treatment, 15–6

329

ÍNDICE footer.php (arquivo), 87–9 functions.php (arquivo), 88–97 ganchos de ação, 144–6 header.php (arquivo), 75–9 index.php (arquivo), 79 loop.php (arquivo), 80–4 listagens de galeria com miniaturas, 264 sidebar.php (arquivo), 84–6 style.css, 73–7 sobre, 72–3 tradução de idioma, 154–6 notesblog_above_footer()(arquivo), 87

Members, 201–2 Members Only, 200–1 menus em áreas para widgets, 221–2 em diretórios de produtos, 306–7 melhoria, 249–53 no arquivo functions.php, 89–1 personalização, 140–1 wp_nav_menu() (arquivo), 79 menus baseados em hover, 252–3 mercadorias digitais, 299–301 metadados para postagens, 112–3 microblogging, 234–5 mídia configurações, 262 plug-ins, 195–7 .mo (arquivos), 153–6 MobilePress, 204–5 mod_rewrite (instalação), 8 modelos e-commerce, 302–3 em temas, 70, 96–104 estilos, 135–6 página, 28–9 para categorias, 312–3 tags, 26, 30–7, 56, 171–2 modificando bancos de dados, 14–6 modo de manutenção, 197–8 MooTools, 255–6 More Fields, 199–200 mudança de URLs, 18 encurtadores, 234–6 indicadores na página inicial, 79 para feeds RSS, 159–62 Mullenweg, Matt (desenvolvedor), 212 multifeeds, 281 múltiplas áreas para widgets, 107–8 múltiplos idiomas, 153–7 múltiplos loops, 57–63 múltiplos sites sobre, 185–7 MySQL atualizações/upgrades, 184–5 bancos de dados durante a instalação, 10 durante mudanças de serviço de hospedagem na Web, 20–1 localização, 10–2 senhas, 15–6 usuários, 22–3 versão 4.0, 8

notesblog_above_post_title_listing()(arquivo), 83 notesblog_above_site() (arquivo), 78 notesblog_add_postmeta_below_title()(arquivo), 95–6, 145–6

notesblog_below_menu() (arquivo), 78 notesblog_below_post_title_listing()(arquivo), 83 notesblog_below_post_title_single()(arquivo), 145–6

notesblog_below_site() (arquivo), 87 notesblog_comment (arquivo), 86 notesblog_inside_head() (arquivo), 78 números inteiros, 35–6 nuvens de tags, 32–4

O objetos. Ver objetos específicos obter postagens, 55 ocultar elementos desnecessários, 213–5 opções específicas, 151–2 open source (produtos), WordPress como, 8 OpenID, 243–4 ordem de classificação ascendente, 35 ordem de classificação descendente, 35 otimização de mecanismos de busca (SEO) méritos do WordPress, 227 plug-ins, 205–7 sobre, 79, 161–3

P P2 (tema), 288, 319–20 padrão arquivos index, 22–3 configuração de largura do conteúdo, 104–5 idiomas, 9–11 reverter para, 15–6 usuários de admin, 22–3 UTF-8 (codificação de caracteres), 11–2 padrões com plug-ins, 173–4 como consideração do WordPress, 213–4 de idioma, 9–11 localização, 81–2, 89–90 localização com, 72 múltiplos, 153–7 padrões para o lançamento de temas, 115 page.php (arquivo), 28–9 página inicial, 290, 298–9

N navegação, 81–2, 89–90 navegação com lightbox, 265–66 NextGEN Gallery, 195–6 No Self-Pings, 196–7 Notes Blog (tema). Ver também temas comments.php (arquivo), 85–7 disponibilidade, 113–5

330

ÍNDICE páginas checklist, 213–4 edição, 22–3 estáticas, 100, 132–3, 217–9 méritos, 133–5 modelos, 28–37, 99, 100 para e-commerce, 302–6 para eventos, 319–20 personalização, 219–20 opções, 151–4 páginas de introdução em Flash, 190–1 páginas de opções, 151– 4 páginas/temas de eventos, 125–6, 319–20 parâmetros com edit_post_link()(arquivo), 32–3 com nuvens de tags, 34 com template tags, 31–3, 35 para feeds RSS, 161–2 plug-ins, 171 parar o WordPress, 71 parsers, 236–9, 278–9 pastas raíz, 13 PayPal, 295–6, 299–300 permalinks, 13, 159–60, 213–4 personalização cabeçalhos, 140–1 campos com plug-ins, 190–1 como alternativa a postagens sticky, 140–1 no design, 247 sobre, 62–5, 111–4 taxonomias, 151–2 usabilidade, 133–4 dados, 111–3, 133–4 de temas, 118–9 logins, 257–258 loops, 112–13 menus, 140–1 páginas, 219–20 planos de fundo, 89–90, 141 postagens, 134–5, 219–20, 298–301, 320–1 postagens sticky, 140–1 recursos, 140–1 shortcodes, 222–6 sites do tipo jornal, 132–3 taxonomias, 133–4, 219–20 widgets, 107–9 personalização de recursos, 140–1 PhotoQ Photoblog Plug-in, 196–7 PHP Hypertext Preprocessor atualizações/upgrades, 184–5 para randomizar elementos de imagem, 267 sobre, 26 tipos, 28–9 versão r. 7, 8 PhpMyAdmin, 15–7, 20–1 plug-ins administrativos, 196–202 plug-ins administrativas Advertising Manager, 200–1 Branded Admin, 197–8 Broken Link Checker, 198–9

Custom Post Type UI, 201–2 Editorial Calendar, 201–2 Fast Secure Contact Form, 197–8 FeedWordPress, 200–1 Google Analyticator, 198–9 Google Analytics for WordPress, 198–9 Maintenance Mode, 197–8 Members, 201–2 Members Only, 200–1 Monitor, 199–200 More Fields, 199–200 No Self-Pings, 196–7 Pods, 199–200 Post Editor Buttons, 200–1 Pretty Link, 199–200 Random Redirect, 200–1 Redirection, 199–200 Revision Control, 201–2 Shockingly Big IE6 Warning, 197–8 Sidebar Login, 197–8 TDO Mini Forms, 198–9 Theme My Login, 197–8 TinyMCE Advanced, 200–1 Viper’s Video Quicktags, 200–1 Widget Context, 201–2 Woopra Analytics Plug-in, 200–1 WordPress Download WordPress Simple PayPal Shopping Cart, 198–200 WordPress.com Stats, 198–9 WP-DB-Backup, 197–8 WP e-Commerce, 198–9 WP-Mail SMTP, 201–2 WP No Category Base, 196–8 anatomia desvantagens, 188 fundamentos básicos, 168–70 funcionalidade, 173–9 hospedagem, 187 incorporação, 170–4 multisites, 185–7 sobre, 167 suporte a widgets, 178–85 aprovação, 187 assinatura, 204–5 ativação, 186–7 backups, 17 com ganchos de ação, 142–3 com sistemas de gerenciamento de conteúdo, 226 como alternativa ao loop, 56 comparação com campos personalizados, 133–4 comparação com temas, 163–4 criação, 26 desinstalação, 176–8, 186–7 desnecessário, 213–4 durante a instalação, 15–6 efeito lightbox, 266 ferramentas de exportação/importação, 18 feeds RSS, 236–40 focado em conteúdo, 194–6 functions.php (arquivo), 28–9, 189 galerias, 267 gerenciamento de comentários BackType Connect, 202–3 CommentLuv, 202–3 Cookie for Comments, 202–3

331

ÍNDICE Disqus Comment System, 202–3 Get Recent Comments, 202–3 IntenseDebate Comments, 202–3 ReplyMe, 202–3 indicações, 190–2 integração com Facebook Connect, 87 localização, 27 manutenção, 129–30 mecanismos de busca/SEO, 205–7 mídia, 195–7 móvel, 204–6 para funcionalidade especial, 132–3 Para logins, 22–3, 257 para mover diretórios, 15–6 para randomizar elementos de imagem, 267 redes sociais Add to Any, 203–4 botões de envio, 239–41 comentários, 241–3 Facebook, 230–1 Lifestream, 203–4 SexyBookmarks, 204–5 ShareThis, 203–4 Simple Social Bookmarks, 204–5 Sociable, 203–4 Tweet Old Post, 204–5 Twitter, 234–5 Twitter for WordPress, 203–4 Twitter Tools, 203–4 Wickett Twitter Widget, 203–4 sobre, 193 spam Akismet, 201–2 CAPTCHA, 202–3 Really Simple CAPTCHA, 202–3 TypePad AntiSpam, 201–2 WP-Hashcash, 202–3 WP-SpamFree Anti-Spam, 201–2 tema da interface de admin, 214–6 temas filhos como alternativa, 192 usabilidade, 106–7 utilizações incomuns calendários, 319–20 envio de conteúdo pelos usuários, 291–4 fotos, 317 páginas de eventos, 319–20 para sites de compras, 299–300 registro do usuário, 289 sites de links, 310–1 wp-db-backup, 17 plug-ins de código e saída, 206–8 plug-ins em todo o site, 186–7 plug-ins móveis, 204–6 .po (arquivos), 153–7 Podcasting, 196–7 Pods, 199–200 PoEdit (language software), 156–7 poll widgets, 132–3 PollDaddy, 195–6 poluição com imagens, 268–9, 274 em bancos de dados, 177–8 em sites, 244 evitar, 13

interface de admin, 213–4 itens raramente usados, 278–9 menus, 249 plug-ins, 239–41 pontuação com sintaxe, 32–6 popular conteúdo/menus, 132–3, 140–1 Popularity Contest, 194 portable object template (POT) (arquivos), 153–7 post_class(), template tag, 49–51, 78, 134–7, 291–2 post_ID, template tag, 135–6 Post Editor Buttons, 200–1 postagens checklists, 213–4 com fotos, 311–20 com imagens, 19, 311–20 como categorias, 311–2 controle, 246–49 edição, 15–6 em bases de conhecimento FAQ, 295–9 em destaque, 44, 58–60 estilo, 134–5, 135–7 formato, 52–3, 89–90, 133–4, 309–10, 319–20 limitar, 55 metadados para, 112–3 número exibido, 315–6 para e-commerce, 300–1 personalização, 62–3, 134–5, 219–20, 320–1 postagens sticky, 49–53, 138–41 saída, 32–3 tags, 42–4 taxonomias, 144–5 verificações, 41 postagens sticky, 49–53, 138–41, 295–6 POT (portable object template) (arquivos), 153–7 precedência de classes body, 137–9 de postagens, 49, 139 de tags, 134–5 de temas, 125 Pretty Link, 199–200 privilégios de escrita, 10, 22–3 problemas de desenvolvimento, 116 produtos comerciais e-commerce, 299–300 envios de vagas de emprego, 295–6 temas, 115, 118–9, 125–6 programas de FTP, 10 promoções em áreas de widget, 220–1 Facebook, 230–1 no arquivo functions.php, 105–7 RSS feeds, 159–60 Twitter, 232–6 promoções especiais, 132–3, 159–60 Prototype, 256 publicidade, 252–4, 266, 293–6

Q quadros de vagas de emprego, 288–96 queries banco de dados, 191–2

332

ÍNDICE estilo, 34–5 feeds para RSS, 160–2 Query Posts, 207–8 query_posts(), 54–8, 60–1, 302–3

R RAND, ordenamento 35 Random Redirect, 200–1 randomizando elementos de imagem, 267–70 Readme, arquivos, 173–4, 187 Really Simple CAPTCHA, 202–3 Really Simple Syndication. Ver feeds RSS recursos de comunidade, 212, 320–1 redes sociais botões de envio, 239–42 comentários, 241–4 Facebook, 230–1, 242–3 importância, 244 lifestreaming, 236–40 logins, 243–4 plug-ins, 203–5 sobre, 229 Twitter, 232–6, 242–3 redirecionando nomes de domínio, 18–9 Redirection, 199–200 registro com .htaccess do Apache , 22–3 conteúdo enviado pelo usuário, 288 FAQ bases de conhecimento, 298–9 formulários, 283–5 lançando temas, 115–20 personalização, 257–8 unificado, 243–4 ReplyMe, 202–3 requisitos do sistema, 8, 184 resumos, feeds RSS, 159–60 revendo temas, 118–9 Revision Control, 201–2 rewind_posts() (arquivo), 57, 60–1 Robots Meta, 206–7 RSS Footer, 204–5

S saída e plug-ins de código, 206–8 Screen Options (configurações), 43 Scriptaculous, 255–6 Search Everything, 206–7 Search Unleashed, 205–6 search.php (arquivo), 28–9 Secret Keys, 10–1, 21–2 segurança no lado do servidor, 22–23 segurança atualizações/upgrades, 11–2 código malicioso, 27 criptografia, 15–6, 22–3 instalação, 21–3 omissão de versão no código, 78 Secret Keys, 10–1 semântica, 127

senhas desafios, 22–3 durante a instalação, 8 redefinir, 14–6 SEO. Ver otimização de mecanismos de busca (SEO) serviços externos backups de amarzenamento, 17 galerias de imagem, 267 servidores de banco de dados, 10–2 servidores alteração, 18–22 banco de dados, 10–2 sobrecarga, 57 set_post_thumbnail_size, 89–90 SexyBookmarks, 204–5 ShareThis, 203–4 Shockingly Big IE6 Warning, 197–8 shortcode redundante, 178–9 shortcode sem parsing, 178–9 shortcodes desinstalação, 177–9 galerias, 262–3, 311–4, 318 personalização, 222–6 Shortlink (link), 234–5 Shutter Reloaded, 196–7 Sidebar Login, 197–8 sidebar.php (arquivo) em temas, 84–6 no arquivo index.php, 31–2, 70–1, 79 no tema Notes Blog, 73 sobre, 28–9 Simple Social Bookmarks, 204–5 SimplePie RSS parser, 236, 238–9, 280 single. php (arquivo), 28–9, 72, 135–6 sintaxe, 25 sistemas de gerenciamento de conteúdo (CMS) plug-ins, 202–3 sobre, 26 WordPress como checklist, 213–4 conceitos básicos, 213–8 conteúdo externo ao WordPress, 225–7 páginas estáticas, 217–9 personalização, 218–20 recursos, 212–3 sobre, 127, 211 sistemas de login unificado, 243–4 sites aprimoramento, 258 do autor, 72 estáticos, 100, 132–3, 320–1 Gravatar, 118–9, 241–2 layout, 132–3 Living Hyboria site, 315–6 opções específicas, 151–2 W3Schools, 26 sites ao estilo de um jornal, 132–3 sites de compras, 299–1 skins para blogs, 27–9 slideshows, 273–4 sliding doors (portas deslizantes), 249–52

333

ÍNDICE filhos adquirir experiência, 130 como alternative ao plug-in, 192 frameworks (estruturas), 130 indicações, 127–8 múltiplos sites, 128–30 sobre, 121 vantagens, 122–7 functions.php, 103–7 fundamentos básicos, 70–2 inchado, 113–4, 142–3, 167, 190 interface de admin, 214–6 lançando, 115–20 localização do, 27 logins, 257 modelos, 96–104 pai, 122 sobre, 27–9, 69 tema Notes Blog arquivo comments.php, 85–7 arquivo footer.php, 87–9 arquivo functions.php, 88–97 arquivo header.php, 75–9 arquivo index.php, 79 arquivo loop.php, 80–4 arquivo sidebar.php, 84–6 disponibilidade de, 113–5 ganchos de ação, 144–6 listagens de galerias de miniaturas, 264 sobre, 72–3 style.css, 73–6 tradução, 154–6 temas, 115, 118–9 tópicos avançados descrição, 132–5 design condicional, 156–9 estilo, 134–41 ganchos de ação, 142–6 múltiplos idiomas, 153–7 otimização de mecanismos de busca (SEO), 161–3 páginas de opções, 151–4 personalização de recursos, 140–1 plug-ins, 163–4 RSS feeds, 158–62 sobre, 131 taxonomias, 145–52 tempo de carregamento, 162–4 usabilidade, 112–3 widgets, 106–9 temas de núcleo, 113–5 temas filhos. Ver também temas sobre, 121 adquirir experiência, 130 como alternativa aos plug-ins, 192 frameworks (estrururas), 130 indicações, 127–8 múltiplos sites, 128–30 vantagens, 122–7 temas inchados alternativas a, 167 com plug-ins, 190–2 sobre, 113–4, 142–3 temas pais, 122. Ver também temas temas premium, 115, 118–9, 125–6

Sociable, 203–4 social bookmarking, 240–1 software de fórum, 212, 320–1 spam com conteúdo enviado pelos usuários, 293–4 controle no serviço de hospedagem, 242–3 plug-ins, 201–3 SSL (criptografia), 22–3 sticky_class(), template tag, 49, 51, 138–9 strings de texto, 35–6 style.css com temas filhos, 122–5 in temas, 28–9, 70–1, 73–6, 115, 118–9 subpastas, 13 Subscribe2, 204–5 substituições, plug-ins como, 172 suporte a Atom (feeds RSS), 158–9 suporte a produtos, 212 suporte a temas, 118–9 SyntaxHighlighter Evolved, 206–7

T t.co (encurtador de URL ), 234–6 tabela de opções, 184 tabelas do banco de dados em plug-ins, 186–7 no WordPress, 15 tags baseadas em design, 246 checklist, 213 condicionais como alternativa ao loop, 56 design, 156–9, 249 index.php, 55 is_sticky(), 140–1 para títulos, 78 query_posts(), 53 sobre, 37 de fechamento, 71 localização, 72 modelos, 26, 30–7, 56, 171–2 para classificação, 133–4, 311–2 para plug-ins, 171–2 para postagens, 42–5 precedência, 134–5 taxonomias para, 144–5 tags de fechamento, 71 taxonomias base de conhecimento FAQ, 296–8 no design, 249 personalização, 133–4, 219–20 sobre, 145–52 taxonomy.php (arquivo), 144–5 TDO Mini Forms, 198–9, 291–4 temas adquirir exeriência, 120 arquivos do núcleo, 113–5 backups, 17 campos personalizados, 111–4 comentários, 108–12

334

ÍNDICE template tags integradas, 26

template_directory parâmetro, 31–2 tempo de carregamento código limpo, 153–4 efeitos de plug-in, 190–2, 213–4 feeds RSS, 278–9 imagens, 271–2 otimização, 162–4 serviços de terceiros, 268–9 terminologia, 217–8 testar temas, 117–8 textdomain (arquivo), 72, 89–90 the_content()(arquivo), 43, 45, 84 the_excerpt()(arquivo), 43–9, 84 the_meta() arquivo, 64–5 the_post() arquivo, 42 Theme My Login, 197–8 títulos doctype, 71 transcrição de chat, 52–3 trechos, RSS feeds, 159–60 troca de serviço de hospedagem, 18–22 Twitter API, 234 Twitter para WordPress, 203–4 Twitter Tools, 203–4 Twitterfeed, 234–5 TypePad AntiSpam, 201–2

U ul#sidebar (arquivo), 85–6 usabilidade de campos personalizados, 112–4, 133–4 do Drupal, 212 do Facebook Connect, 243–4 de plug-ins, 106–7, 172, 178–9, 186–7, 190–1 usuários de admin, 22–3 UTF-8 codificação de caracteres, 11–2

V Vanilla, 320–1 vídeos, 17, 52–3, 226 velocidade de publicação, 213–4 Vimeo, 271–2 Viper’s Video Quicktags, 200–1 vizualização de postagem individual, 291–2

W W3Schools site, 26 while (loop), 41, 59 Wickett Twitter Widget, 203–4 Widget Context, 201–2 Widget Logic, 207–8 widgets alterações, 14 com feeds RSS, 281 como dynamic_sidebar(), 79 como suporte a plug-ins, 178–85 declarações, 89–90 em functions.php, 91–4, 103–4

em sistemas de gerenciamento de conteúdo, 219–21 para enquetes, 132–3 para promoções especiais, 132–3 redes sociais, 231–4 riscos da instalação, 15–6 sobre, 106–9 suporte, 118–9 widgets de perfil, 231 widgets de texto, 220–1 widgets dinâmicos, 220–21 widgets no dashboard, 182–83 Woopra Analytics Plug-in, 200–1 WordPress Codex backups, 20–1 funções “plugáveis”, 172 JavaScript, 256 licenciamento idioma, 168–69 sobre, 26 template tags, 31–2 widgets, 93–4 WP_Query, 42 WordPress Download Monitor, 199–200 WordPress Mobile Edition, 205–6 WordPress Mobile Pack, 205–6 WordPress para múltiplos usuários, 8 WordPress Simple PayPal Shopping Cart, 198–200 WordPress. Ver também tópicos específicos admin (interface), 173–4 bancos de dados, feeds RSS, 238–9 banco de dados de opções, 173–7 encurtamento de URL, 234–5 inicialização, 78 instalação backup, 15–7 bancos de dados, 10–2, 14–6 básicos, 8–9 diretórios, 13–4 manual, 10–1 serviços de hospedagem, 15–7 segurança, 21–3 sobre, 7–8 lançamento de temas na comunidade, 115 omissão de versão no código, 78 utilizações incomuns como base de conhecimento FAQ, 295–9 conteúdo enviado pelos usuários, 288–96, 310–1 diretórios de produtos, 300–7 e-commerce, 299–301 galerias, 311–20 outras utilidades, 319–21 sites de links, 307–12 sobre, 287 WordPress.com Stats, 198–9 wp_add_dashboard_widget() (função), 183 WP-CMS Post Control, 213–5 wp-config.php (arquivo), 10–1, 17, 21–3, 26 wp-config-sample.php (arquivo), 10–1 wp-content (pasta), 17, 19, 27 wp-content/plug-ins/, 169, 186–7 wpcontent/themes/ (pasta), 122

335

ÍNDICE wp-content/themes/ (pasta), 128 WP-Cron (recurso), 238–9 WP-Cumulus, 207–8 wp-db-backup (plug-in), 17 WP-DB-Backup, 197–8 WP-DBManager, 207–8 WP e-Commerce, 198–9 wp_enqueue_script() (arquivo), 256 wp_footer() (chamada), 71, 87–8 WP Greet Box, 194 WP-Hashcash, 202–3 wp_head() (chamada), 71, 78, 87–8, 142–3 WP-Lifestream, 237–9 wp_list_comments() (arquivo), 86, 109–10 wp_mail() (arquivo), 282 WP-Mail SMTP, 201–2 wp_nav_menu()(arquivo), 79

WP No Category Base, 195–8 WP-PageNavi, 208 WP-Polls, 195–6 WP-PostRatings, 194 WP_Query (arquivo), 42, 58, 302–3 $wp_query object, 42, 58, 60–1 WP-SpamFree Anti-Spam, 201–2 WP Super Cache, 207–8 wp_tag_cloud()(arquivo), 34–5 WP_Widget (classe), 178–9 WPtouch, 205–6 wp-Typography, 207–8 Write Post (tela), 43, 45, 64

Y Yet Another Related Posts Plug-in, 194 YouTube, 270–2

336