• Nenhum resultado encontrado

DESIGN CONDICIONAL

No documento Smashing Wordpress - Além Do Blog (páginas 165-168)

As conditional tags (tags condicionais) são ótimas, pois permitem que você crie um projeto mais dinâmico, capaz de se alinhar a qualquer situação em que o visitante se encontre. Você pode oferecer coisas diferentes dependendo da condição, o que explica o título.

O uso mais óbvio das conditional tags é verifi car o local em que o visitante está, dentro do seu site, e gerar uma saída adequada. Esse recurso é usado no arquivo de modelo index.php do Núcleo do tema Notes Blog para evitar a necessidade de possuir todos os diversos arquivos de modelo (é melhor criá-los em temas fi lhos, afi nal de contas). Este código verifi ca onde o visitante está e gera uma saída adequada:

<?php

if (is_category()) {

echo '<h1 class="listhead">'; _e("Category", "notesblog");

echo ' <strong>'; single_cat_title(); echo '</strong></h1>'; } if (is_tag()) { echo '<h1 class="listhead">'; _e("Tag", "notesblog"); echo ' <strong>'; single_tag_title(); echo '</strong></h1>'; } if (is_search()) { echo '<h1 class="listhead">';

_e("Your <strong>search result</strong>", "notesblog"); echo '</h1>';

} ?>

O código vai acima do loop e gera várias mensagens de título h1, dependendo de onde você estiver, usando as conditional tags is_category(), is_tag() e is_search(). Essas tags fazem exatamente o que você deve estar imaginando: retornam true caso trate-se de uma página de categoria, uma página de tags ou um resultado de busca. Quando isso acontecer, o código irá imprimir o cabeçalho correto.

E, sim, _e() é utilizado para localização, como você já sabe.

O design condicional pode ser bastante útil, como você pode perceber. Você pode fazer alterações mais características ao design também, como por exemplo incluir cabeçalhos diferentes dependendo do local onde você está, dentro do site, e assim por diante. Ou pode construir um menu que realce a página ou categoria onde você está, como no exemplo a seguir. Este exemplo ensina a construir uma conditional tag simples e a aplicar uma classe específi ca para o item de menu relevante, ou seja, aquele que representa a página que você está, de fato, visualizando.

1. Comece com um pouco de marcação básica para o menu:

<ul>

<li>um item de menu</li> </ul>

Essa é, obviamente, uma lista não ordenada, e a ideia é ter um item de menu para cada item da lista. Assim, adicionar mais itens de menu signifi caria apenas adicionar mais itens à lista. 2. Em seguida, adicione alguns links:

<ul> <li><a href="/">Home</a></li> <li><a href="/category/music/">Music</a></li> <li><a href="/category/books/">Books</a></li> <li><a href="/category/games/">Games</a></li> <li><a href="/about/">About</a></li> </ul>

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

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ífi co. 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 verifi car se você está no lugar em questão: se estiver, gere a classe, caso contrário, não. Em primeiro lugar, comece verifi cando 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 fi car com a opção “front page” (do inglês, algo como “página inicial”):

<li <?php if (is_front_page()) echo 'class="activemenu"'; ?>><a href="/">Home</a></li>

Caso se trate da página inicial, o PHP executará echo na classe. Caso contrário, não – simples assim.

5. Por fi m, complete o menu:

<ul>

<li <?php if (is_front_page()) echo 'class="activemenu"'; ?>> <a href="/">Home</a>

</li>

<li <?php if (is_category('music')) echo 'class="activemenu"'; ?>> <a href="/category/music/">Music</a>

</li>

<li <?php if (is_category('books')) echo 'class="activemenu"'; ?>> <a href="/category/books/">Books</a>

</li>

<li <?php if (is_category('games')) echo 'class="activemenu"'; ?>> <a href="/category/games/">Games</a>

</li>

<li <?php if (is_page('about')) echo 'class="activemenu"'; ?>> <a href="/about/">About</a>

</li> </ul>

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!

Verifi car se o visitante está em uma página específi ca 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

de menu específi co 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.

No documento Smashing Wordpress - Além Do Blog (páginas 165-168)