Depois de finalmente lançar meu primeiro tema no Themeforest, o “Classy WordPress Business Theme”, decidi compartilhar alguns tutoriais e o código de como criei alguns dos recursos incríveis do tema.
Não vou orientá-lo em cada passo explicando cada pedaço de código porque é muito fácil de descobrir, em vez disso, fornecerei tudo o que você precisa para recortar/colar os códigos de acesso em seu próprio tema (ainda melhor!)
O atalho de alternância
Criar o shortcode Toggle é muito simples. Tudo o que precisamos fazer é adicionar uma função shortcode ao nosso arquivo functions.php que tem 2 opções: título e cor. Dessa forma, ao adicionar o código de acesso, você pode escolher o título em que pode clicar para o efeito de alternância e a cor para adicionar várias opções de cores à sua alternância, como você pode ver no link de demonstração acima, onde adicionei um branco e cinza para que as pessoas possam criar esse efeito de cor alternada.
Simplesmente copie e cole o shortcode no seu arquivo functions.php:
// Register the toggle shortcode
function toggle_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array(
‘title’ => ‘Click To Open’,
‘color’ => ”
), $atts ) );
return ‘<h3 class=”toggle-trigger”><a href=”#”>’ . esc_html( $title ) . ‘</a></h3><div class=”toggle_container”>’ . do_shortcode( wp_kses_post( $content ) ) . ‘</div>’;
}
add_shortcode( ‘toggle’, ‘toggle_shortcode’ );
A alternância de Javascript, CSS e imagens
Abaixo está todo o código que usei para criar as alternâncias no meu Tema WordPress Premium, se você quiser obter a mesma aparência.
Javascript
Aqui está o Javascript. Você pode colocar isso no seu arquivo custom.js ou no cabeçalho do seu tema.
Importante : verifique se você já está incluindo a biblioteca jQuery, pois ela é necessária para que o restante do js funcione
jQuery( function( $ ) {
$( document ).ready(function() {
$( “.toggle_container” ).hide();
$( “.toggle-trigger” ).click( function() {
$(this).toggleClass( “active” ).next().slideToggle( “normal” );
return false;
} );
} );
} );
CSS
Aqui está o CSS. Simplesmente coloque no seu arquivo style.css
/*toggle*/
.toggle-trigger {
margin: 0px !important;
font-size: 18px;
padding: 10px;
padding-left: 30px;
background-color: #F5F5F5;
background-image: url(‘images/shortcodes/toggle-plus.png’);
background-position: 10px center;
background-repeat: no-repeat;
}
.toggle-trigger a {
color: #333;
text-decoration: none;
display: block;
}
.toggle-trigger a:hover {
color: #0489B7;
text-decoration: underline;
}
.toggle-trigger.active{
background-image: url(‘images/shortcodes/toggle-minus.png’) !important;
background-position: 10px center;
background-repeat: no-repeat;
}
.toggle_container {
overflow: hidden;
padding: 20px 10px;
}
Imagens
Abaixo estão as duas imagens para o shortcode. Basta clicar com o botão direito do mouse e clicar em “salvar imagem como” para salvar as imagens na pasta de imagens do seu tema.
Usando o código de acesso
Agora que você adicionou todo o código necessário para o shortcode, você pode inserir facilmente suas alternâncias no seu site assim:
[toggle title=”Your Toggle Title” color=”white”]Toggle Content[/toggle]
Demasiado preguiçoso? Obtenha o tema!
Clique na imagem abaixo para fazer o checkout do meu tema premium e comprá-lo.