FULL.

Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Siga a FULL.

Criando um atalho de alternância para a página de perguntas frequentes do WordPress

Você está em:

Criando um atalho de alternância para a página de perguntas frequentes do WordPress

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.

Alternar WordPress Menos

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.

Tema WordPress elegante

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.