Vamos aprender a criar uma caixa suspensa para incluir nos posts do WordPress através de um short code. Essa caixa suspensa poderá guardar qualquer tipo de conteúdo: links, textos, imagens etc.
Na verdade vamos adaptar o uso da caixa suspensa já ensinada no post: Criando uma caixa suspensa com CSS3 e configurar o short code “caption” para apresentar a nossa caixa suspensa para WordPress eliminando assim a necessidade do uso de algum plug in, buscando assim diminuir o uso excessivo de plug ins que como todos sabem podem se tornar ruim por SEO da pagina.
Imagens:


Vamos agora ao código da nossa função:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180
// ||| CAIXA SUSPENSA ||
$divi='1';
function caption_shortcode( $atts, $content = null ) {
global $divi;
?>
<style type="text/css">
/* CAIXA SUSPENSA */
/* |||||| CONFIGURAÇÃO DO MENU |||||| */
.csfs{
overflow:hidden;
height:auto;
width:450px;
background-image: -moz-linear-gradient(100% 100% 90deg, #e9bc36,#ff9900);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9900), to(#e9bc36));
-webkit-border-radius:14px;
border-radius: 14px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
color: #ffffff;
font-family:arial;
font-weight:bold;
background-color:#fab514;
padding-bottom:5px;
}
.csfs .botao_arredondado_pr{
float:left;
overflow:hidden;
height:25px;
width:25px;
margin:auto;
background-image: -moz-linear-gradient(100% 100% 90deg, #33cc00,#66ff66);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#66ff66), to(#33cc00));
-webkit-border-radius:20px;
border-radius: 20px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
font-family:"arial black";
background-color:#66ff66;
display:block;
text-align:center;
margin:5px 5px auto 5px;
}
.csfs .meio_caixa_pr{
display:none;
height:100%;
width:100%;
margin:auto auto auto 15px;
padding:0px;
}
.csfs .titulo_pr{
margin:5px 0px 0px 0px;
}
.csfs .titulo_pr a,.csfs .botao_arredondado_pr #sinal{
margin:5px 0px 0px 0px;
color:#ffffff;
text-decoration:none;
}
.csfs #cca a{color:#ffff00;text-decoration:none;margin-left:10px;}
.csfs h3{text-transform: capitalize;}
.csfs .botao_arredondado_pr a{text-decoration:none;color:#ffffff;}
/* |||| FIM CONFIGURAÇÃO DO MENU |||| */
</style>
<script type="text/javascript">
var corp="1"
function mostra(n){
if(corp=="1"){
document.getElementById('cca'+n).style.display="block"
document.getElementById('sinal'+n).innerHTML="-"
corp="2"
}else{
document.getElementById('cca'+n).style.display="none"
document.getElementById('sinal'+n).innerHTML="+"
corp="1"
}
}
</script>
<?
extract( shortcode_atts( array( 'texto' => 'Artigos Recomendados' ), $atts ) );
$divi++;
return '<div class="csfs" style="padding:5px auto auto 0px;margin:20px auto"><div class="botao_arredondado_pr"><a href="javascript:void(0)" id="sinal'.$divi.'" onclick="mostra('.$divi.')">+</a></div><h3 class="titulo_pr"><a href="javascript:void(0)" onclick="mostra()">'.$texto.'</a></h3><div id="cca'.$divi.'" class="meio_caixa_pr">' . $content . '</div></div>
';
}
add_shortcode( 'caption', 'caption_shortcode' );
// ||| FIM CAIXA SUSPENSA ||
A maneira de chamar as classes na CSS está ligeiramente diferente do tutorial Criando uma caixa suspensa com CSS3 portanto não use a do tutorial, coloque do jeito que está descrito acima.
Exemplo de uso:

OBS: Os efeitos de sombra, gradiente e cantos arredondados não são reconhecido pelo Internet Explore, pelo menos até a versão 9 (fazer o que?) porém se quiser pelo menos os cantos arredondados, você pode fazer uso do arquivo “border-radius.htc”, poderá entender como usar lendo o post: Menu inclinado com cantos arredondados em css3.
Introduzindo a função no arquivo functions.php do seu tema atual.
Abra o editor no painel de controle do WordPress na guia “Aparência†e link “Editorâ€.

Escolha a opção “Funções do temaâ€:

Colocar a função no final do arquivo que será aberto para edição, atualizar e já estará pronto para uso a sua caixa suspensa para conteúdo com short code WordPress.
Veja também como colocar um play de áudio no WordPress com uso de short code: Ãudio WordPress com short code.
Até a próxima.



Demerval, mas esse código sera adicionado as funções, ou seja, toda vez que eu quiser utilizar essa função basta ir na edição dos posts e adicionar?
Abraços, Arlindo Armando
Isso, depois de colocar a função no arquivo functions.php, basta introduzir o short code no post como na imagem “Exemplo de uso:â€
Com o conteúdo que quiser dentro.
Mas só uma por postagem.Atualizei o código, agora é possÃvel colocar mais de uma caixa por postagem.