Você já viu uma área de tabber em sites populares que permite que você veja posts populares, recentes e com apenas um clique? Isso é chamado de widget de tabu jQuery e permite economizar espaço na tela do usuário combinando diferentes widgets em um. Neste artigo, mostraremos como adicionar um widget do Tabork jQuery no WordPress.
Por que você deve adicionar um widget do Tabork jQuery?
Ao executar um site do WordPress, você pode facilmente adicionar itens às barras laterais usando widgets de arrastar e soltar. À medida que o seu site cresce, você pode sentir que não tem espaço suficiente na barra lateral para mostrar todo o conteúdo útil. Isso é exatamente quando um tabger é útil. Ele permite que você mostre itens diferentes em uma mesma área. Os usuários podem clicar em cada guia e ver o conteúdo que eles estão mais interessados. Muitos sites de grandes nomes usam para mostrar artigos populares hoje, esta semana e este mês. Neste tutorial, mostraremos como criar um widget de tabagista. No entanto, não estamos mostrando o que adicionar nas suas guias. Você pode adicionar basicamente tudo o que quiser.
Nota: este tutorial é para usuários de nível intermediário e exigirá conhecimento HTML e CSS. Para usuários de nível iniciante, consulte este artigo.
Criando jQuery Tabber Widget no WordPress
Vamos começar. A primeira coisa que você precisa fazer é criar uma pasta na sua área de trabalho e nomeá-la site-tabber-widget . Depois disso, você precisa criar três arquivos dentro desta pasta usando um editor de texto simples, como o Bloco de notas.
O primeiro arquivo que vamos criar é wpb-tabber-widget.php . Ele conterá código HTML e PHP para criar guias e um widget personalizado do WordPress. O segundo arquivo que vamos criar é wpb-tabber-style.css , e conterá o estilo CSS para o contêiner de abas. O terceiro e o último arquivo que vamos criar é wpb-tabber.js , que conterá o script jQuery para alternar guias e adicionando animação.
Vamos começar com wpb-tabber-widget.php Arquivo. O objetivo deste arquivo é criar um plugin que registre um widget. Se esta é sua primeira vez criando um widget do WordPress, recomendamos que você dê uma olhada no nosso modo de criar um guia personalizado do widget WordPress ou simplesmente copie e cole esse código em wpb-tabber-widget.php Arquivo:
local
Plugin URI: http://www.site.com
Descrição: Um widget jquery tabber simples.
Versão: 1.0
Autor: site
Autor URI: http://www.site.com
Licença: GPL2
* /
// criando um widget
classe WPBTabberWidget estende WP_Widget {
função WPBTabberWidget () {
$ widget_ops = array (
'classname' => 'WPBTabberWidget',
'description' => 'Simple jQuery Tabber Widget'
);
$ this-> WP_Widget (
'WPBTabberWidget',
'Site Tabber Widget',
$ widget_ops
);
}
widget de função ($ args, $ instance) {// saída da barra lateral do widget
função wpb_tabber () {
// Agora, encaue nossa folha de estilos e script jQuery
wp_register_style ('wpb-tabber-style', plugins_url ('wpb-tabber-style.css', __FILE__));
wp_register_script ('wpb-tabber-widget-js', plugins_url ('wpb-tabber.js', __FILE__), array ('jquery'));
wp_enqueue_style ('wpb-tabber-style');
wp_enqueue_script ('wpb-tabber-widget-js');
// Criando guias, você adicionará seu próprio código dentro de cada guia
?>
- Tab 1
- Tab 2
- Tab 3
No código acima, criamos um plugin e, em seguida, dentro desse plugin, criamos um widget. Na seção de saída do widget, adicionamos scripts e folhas de estilo e depois geramos o resultado HTML para nossas guias. Por fim, registramos o widget. Lembre-se, você precisa adicionar o conteúdo que deseja exibir em cada guia.
Agora que criamos o widget com código PHP e HTML necessários para nossas guias, o próximo passo é adicionar jQuery para exibi-los como abas no contêiner da aba. Para fazer isso, você precisa copiar e colar este código em wp-tabber.js Arquivo.
(função ($) {
$ (". tab_content"). hide ();
$ ("ul.tabs li: primeiro"). addClass ("ativo"). show ();
$ (". tab_content: first"). show ();
$ ("ul.tabs li"). clique em (function () {
$ ("ul.tabs li"). removeClass ("ativo");
$ (este) .addClass ("ativo");
$ (". tab_content"). hide ();
var activeTab = $ (this) .find ("a"). attr ("href");
// $ (activeTab) .fadeIn ();
se ($ .browser.msie) {$ (activeTab) .show ();}
else {$ (activeTab) .fadeIn ();}
retorna falso;
});
}) (jQuery);
Agora nosso widget está pronto com jQuery, o último passo é adicionar estilo às guias. Criamos uma amostra de estilos que você pode copiar e colar em wpb-tabber-style.css Arquivo:
ul.tabs {
posição: relativa;
índice z: 1000;
flutuador: esquerda;
fronteira esquerda: 1px sólido # C3D4EA;
}
ul.tabs li {
posição: relativa;
transbordamento: oculto;
altura: 26px;
flutuador: esquerda;
margem: 0;
preenchimento: 0;
altura da linha: 26px;
cor de fundo: # 99B2B7;
borda: 1px sólido # C3D4EA;
fronteira-esquerda: nenhuma;
}
ul.tabs li a {
exibição: bloco;
preenchimento: 0 10px;
Esboço: nenhum;
text-decoration: none;
}
html ul.tabs li.active,
html ul.tabs li.active a: hover {
cor de fundo: # D5DED9;
borda inferior: 1px sólido # D5DED9;
}
.widget-area .widget .tab um {
cor: #FFFFFF;
}
.tab_container {
posição: relativa;
topo: -1px;
índice z: 999;
largura: 100%;
flutuador: esquerda;
font-size: 11px;
cor de fundo: # D5DED9;
borda: 1px sólido # C3D4EA;
}
.tab_content {
preenchimento: 7px 11px 11px 11px;
altura da linha: 1,5;
}
.tab_content ul {
margem: 0;
preenchimento: 0;
estilo de lista: nenhum;
}
.tab_content li {
margem: 3px 0;
}
.tab-clear {
limpar ambos;
}
local
local
Esperamos que este tutorial o ajude a criar um tabi jQuery para o seu site WordPress. Para perguntas e comentários, você pode deixar um comentário abaixo ou juntar-se a nós no Twitter ou no Google+.