Diversos

Criando um Shortcode Para Exibir Caixas no WordPress

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Um dos diferenciais dos templates premium são ferramentas que facilitam a vida do usuário, como os shortcodes para inserção de botões, mapas, blocos de texto em colunas, etc. Mesmo que você seja usuário intermediário ou avançado, não é confortável ter que repetir um código mais longo dentro do post sempre que quiser exibir algo parecido – e para isso o WordPress tem a facilidade dos shortcodes.

Vamos ver aqui como implementar um sistema de exibição de caixas, com um código simples em PHP e mais um trecho curto de CSS. Essas caixas podem abrigar texto, vídeo, imagem ou qualquer conteúdo, e com mínimos conhecimentos de CSS você pode mudar a aparência delas para combinar melhor com o template do seu blog.

Clique aqui para ver exemplos da caixa.

1. Criando o shortcode

Comece pelo código responsável por “pegar” o shortcode dentro das páginas e transformá-lo na marcação da caixa. Insira no arquivo functions.php do seu template:

// shortcode caixas
function caixas ($atts, $content=null) {
extract(shortcode_atts( array(
'cor' => 'cinza',
'posicao' => '',
),
$atts) );

if ( $cor != '') {
$return = '<div class="box caixa-'. $cor .' '. $posicao .'">'. do_shortcode($content) .'</div>';
return $return; }	
}
add_shortcode('caixa','caixas');

O que ele faz é bem simples: pega os valores “cor” e “posicao” que você aplicar ao shortcode e junta a uma marcação de div que já elva a classe “box”, e essa div “abraça” o conteúdo (content).

Salve e envie para o servidor se editou o arquivo localmente. Teste seu blog para ver se tudo está normal. Ainda não é esperado nenhum resultado, falta estilizar e aplicar o shortcode em algum lugar!

2. Estilização

Abra o arquivo style.css e acrescente:

/* CAIXAS */
// estilo geral
.box {
max-width: 96%;
height: auto;
font-size: 1.1em;
font-family: Georgia, Times, serif;
margin-bottom: 30px;
position: relative;
color: #555;
padding: 20px 25px;
}
// estilo das sombras
.box:before, .box:after {
z-index: -1;
position: absolute;
content: "";
bottom: 18px;
left: 10px;
width: 25%;
top: 70%;
max-width: 300px;
-webkit-box-shadow: 0 15px 12px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 15px 12px rgba(0, 0, 0, 0.6);
box-shadow: 0 15px 12px rgba(0, 0, 0, 0.6);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
max-height: 160px;
}
.box:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
.box p {
margin:0 0 0.1em 0
}
// estilos para caixa flutuante
.esq, .dir {
max-width: 45%;
margin-bottom: 10px;
}
.esq {float:left; margin-right: 30px;}
.dir {float:right; margin-left: 30px;}
// estilos para caixas coloridas
.caixa-cinza {
background-color: rgb(224,224,224);
color: #666;
text-shadow: 0 1px 0 rgb(247, 247, 247);
}
.caixa-vermelha {
background-color: rgb(255, 179, 173);
color: rgb(0, 0, 0);
text-shadow: 0 1px 0 rgb(255, 207, 207);
}
.caixa-verde {
background-color: rgb(205, 255, 181);
color: rgb(24, 87, 26);
text-shadow: 0 1px 0 rgb(223, 255, 224);
}
.caixa-amarela {
background-color: rgb(243, 230, 137);
color: rgb(155, 110, 15);
text-shadow: 0 1px 0 rgb(255, 255, 210);
}
.caixa-branca {
background-color: rgb(255, 255, 255);
color: rgb(151, 151, 151);
}

Acho que ficou claro com os comentários, certo? Salve, envie ao servidor e a parte “técnica” está pronta.

3. Usando o shortcode

Usar é muito fácil. Onde quiser exibir uma caixa, é só envolver o conteúdo com o shortcode [caixa], assim:

[caixa]Aqui o conteúdo da caixa[/caixa]

Atenção para fechar o shortcode como visto acima. Esse exemplo simples vai gerar uma caixa cinza sem alinhamento nenhum, e para usar as caixas com outras cores disponíveis (amarelo, verde, vermelho e branco), é só acrescentar um atributo com a cor, desse jeito:

[caixa cor=verde]Conteúdo[/caixa]

Ou mude o verde por “vermelha”, “amarela”, “branca” ou “cinza”, embora essa última seja desnecessária – é a cor automática.

Para criar caixas flutuantes (laterais com conteúdo ao redor), use:

[caixa cor=amarela lado=dir]Conteúdo[/caixa]

Isso resultará em uma caixa amarela, flutuando à direita. Para trocar de lado, é só alterar o “dir” para “esq”, como você já devia ter imaginado.

Veja a página de exemplos para ter uma melhor ideia de como vão ficar. Se tiver dúvidas ou sugestões, comente.

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Deixe um Comentário

Pin