Você já viu uma área de abas em sites populares que permite ver posts populares, recentes e em destaque com apenas um clique? Isso é chamado de widget de abas jQuery, e permite economizar espaço na tela do usuário combinando diferentes widgets em um só. Neste artigo, mostraremos como adicionar um Widget de Abas jQuery no WordPress.
Por que você deve adicionar um Widget de Abas jQuery?
Ao gerenciar um site WordPress, você pode facilmente adicionar itens às suas barras laterais usando widgets de arrastar e soltar. À medida que seu site cresce, você pode sentir que não tem espaço suficiente na barra lateral para mostrar todo o conteúdo útil. É exatamente aí que um widget de abas se torna útil. Ele permite que você mostre diferentes itens na mesma área. Os usuários podem clicar em cada aba e ver o conteúdo em que estão mais interessados. Muitos sites de grande nome o utilizam para mostrar artigos populares do dia, da semana e do mês. Neste tutorial, mostraremos como criar um widget de abas. No entanto, não mostraremos o que adicionar em suas abas. Você pode adicionar basicamente o que quiser.
Observação: este tutorial é para usuários de nível intermediário e exigirá conhecimento de HTML e CSS. Para usuários de nível iniciante, consulte este artigo em vez disso.
Criando um Widget de Abas jQuery no WordPress
Vamos começar. A primeira coisa que você precisa fazer é criar uma pasta na sua área de trabalho e nomeá-la wpbeginner-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 abas e um widget personalizado do WordPress. O segundo arquivo que criaremos é wpb-tabber-style.css, e ele conterá o estilo CSS para o contêiner das abas. O terceiro e último arquivo que criaremos é wpb-tabber.js, que conterá o script jQuery para alternar abas e adicionar animação.
Vamos começar com o arquivo wpb-tabber-widget.php. O propósito deste arquivo é criar um plugin que registra um widget. Se esta é a sua primeira vez criando um widget do WordPress, recomendamos que você dê uma olhada em nosso guia de como criar um widget personalizado do WordPress ou simplesmente copie e cole este código no arquivo wpb-tabber-widget.php:
<?php
/* Plugin Name: WPBeginner jQuery Tabber Widget
Plugin URI: https://www.wpbeginner.com
Description: A simple jquery tabber widget.
Version: 1.0
Author: WPBeginner
Author URI: https://www.wpbeginner.com
License: GPL2
*/
// creating a widget
class WPBTabberWidget extends WP_Widget {
function WPBTabberWidget() {
$widget_ops = array(
'classname' => 'WPBTabberWidget',
'description' => 'Simple jQuery Tabber Widget'
);
$this->WP_Widget(
'WPBTabberWidget',
'WPBeginner Tabber Widget',
$widget_ops
);
}
function widget($args, $instance) { // widget sidebar output
function wpb_tabber() {
// Now we enqueue our stylesheet and jQuery script
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');
// Creating tabs you will be adding you own code inside each tab
?>
<ul class="tabs">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<?php
// Enter code for tab 1 here.
?>
</div>
<div id="tab2" class="tab_content" style="display:none;">
<?php
// Enter code for tab 2 here.
?>
</div>
<div id="tab3" class="tab_content" style="display:none;">
<?php
// Enter code for tab 3 here.
?>
</div>
</div>
<div class="tab-clear"></div>
<?php
}
extract($args, EXTR_SKIP);
// pre-widget code from theme
echo $before_widget;
$tabs = wpb_tabber();
// output tabs HTML
echo $tabs;
// post-widget code from theme
echo $after_widget;
}
}
// registering and loading widget
add_action(
'widgets_init',
create_function('','return register_widget("WPBTabberWidget");')
);
?>
No código acima, primeiro criamos um plugin e depois, dentro desse plugin, criamos um widget. Na seção de saída do widget, adicionamos scripts e folhas de estilo e, em seguida, geramos a saída HTML para nossas abas. Por último, registramos o widget. Lembre-se, você precisa adicionar o conteúdo que deseja exibir em cada aba.
Agora que criamos o widget com o código PHP e HTML necessário para nossas abas, o próximo passo é adicionar o jQuery para exibi-las como abas no contêiner de abas. Para fazer isso, você precisa copiar e colar este código no arquivo wp-tabber.js.
(function($) {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
//$(activeTab).fadeIn();
if ($.browser.msie) {$(activeTab).show();}
else {$(activeTab).fadeIn();}
return false;
});
})(jQuery);
Agora nosso widget está pronto com o jQuery, o último passo é adicionar o estilo às abas. Criamos uma folha de estilo de exemplo que você pode copiar e colar no arquivo wpb-tabber-style.css:
ul.tabs {
position: relative;
z-index: 1000;
float: left;
border-left: 1px solid #C3D4EA;
}
ul.tabs li {
position: relative;
overflow: hidden;
height: 26px;
float: left;
margin: 0;
padding: 0;
line-height: 26px;
background-color: #99B2B7;
border: 1px solid #C3D4EA;
border-left: none;
}
ul.tabs li a{
display: block;
padding: 0 10px;
outline: none;
text-decoration: none;
}
html ul.tabs li.active,
html ul.tabs li.active a:hover {
background-color: #D5DED9;
border-bottom: 1px solid #D5DED9;
}
.widget-area .widget .tabs a {
color: #FFFFFF;
}
.tab_container {
position: relative;
top: -1px;
z-index: 999;
width: 100%;
float: left;
font-size: 11px;
background-color: #D5DED9;
border: 1px solid #C3D4EA;
}
.tab_content {
padding: 7px 11px 11px 11px;
line-height: 1.5;
}
.tab_content ul {
margin: 0;
padding: 0;
list-style: none;
}
.tab_content li {
margin: 3px 0;
}
.tab-clear {
clear:both;
}
É só isso. Agora, basta fazer o upload da pasta wpbeginner-tabber-widget para o diretório /wp-content/plugins/ do seu site WordPress via FTP. Alternativamente, você também pode adicionar a pasta a um arquivo zip e ir para Plugins » Adicionar Novo na sua área de administração do WordPress. Clique na aba de upload para instalar o plugin. Assim que o plugin for ativado, vá para Aparência » Widgets, arraste e solte o WPBeginner Tabber Widget na sua barra lateral e pronto.
Esperamos que este tutorial tenha ajudado você a criar um tabber jQuery para o seu site WordPress. Para perguntas e feedback, você pode deixar um comentário abaixo ou se juntar a nós no Twitter ou Google+.
Nitish Chauhan
Olá,
Meu plugin está ativado, mas na seção de widgets aparece a mensagem “Não há opções para este widget”. Por favor, diga-me como ativar todas as funções e eu quero criar um plugin como
“jQuery(document).ready(function() {
var wrapper = jQuery(“.input_fields_wrap”); //Campos wrapper
var add_button = jQuery(“.add_field_button”); //Botão de adicionar ID
//contador inicial de caixas de texto
jQuery(add_button).click(function(e){ //ao clicar no botão de adicionar input
e.preventDefault();
//caixa de texto máxima permitida
//incremento da caixa de texto
jQuery(wrapper).prepend(‘×’); //adicionar caixa de input
jQuery(‘.input_fields_wrap’).sortable();
jQuery(‘.input_fields_wrap’).disableSelection();
});
jQuery(wrapper).on(“click”,”.remove_field”, function(e){ //usuário clica para remover texto
e.preventDefault(); jQuery(this).parent(‘div’).remove();
});
});”
meu código de javascript. Por favor, sugira se você tiver alguma solução.
Obrigado
Nabam Rikam
Eu inseri os plugins na barra lateral, mas quando tento clicar, diz que não há opção para este plugin. E depois de navegarmos no site, vemos três caixas de texto em branco. Me guie um pouco, irmão.
goutham
Não estou recebendo abas ou widgets no meu site. Copiei e colei o mesmo código. Não está funcionando.
Kunle
Eu quero colocar o plugin recém-criado em um lugar na minha página, e não nas barras laterais ou no rodapé.
Como faço isso, para colocá-lo em qualquer lugar da minha página web
Zadius
Este é o segundo tutorial que tento e, por algum motivo, o arquivo do plugin não aparece no diretório de plugins do meu site. Eu faço o upload do arquivo diretamente usando FTP, mas quando faço login na minha área de administração do WordPress, nada aparece na aba de plugins. Por favor, me aconselhe. Obrigado.
Atualização: Eu compactei o arquivo e o carreguei através da interface do plugin do WordPress. O arquivo não aparece na pasta do meu plugin na minha interface FTP, então não tenho a menor ideia de onde ele aparece. Mas eu o instalei, então obrigado!
John
Obrigado pelo tutorial. No entanto, notei que o título está faltando quando adiciono o widget à área de widgets. Como posso adicionar o espaço para o título para inserir um título?
Drazen
Olá
Obrigado por isso. Eu estava apenas me perguntando, como adicionar uma opção, para que quando eu estiver visualizando o widget, eu possa simplesmente colar links nele, em cada aba?
Por exemplo:
Guia 1 (opção para renomeá-lo nas opções do widget)
– Caixa de texto abaixo dele nas opções do widget (para que eu possa adicionar texto, links, etc.)
Guia 2 (opção para renomeá-lo nas opções do widget)
– Caixa de texto abaixo dele nas opções do widget (para que eu possa adicionar texto, links, etc.)
Guia 3 (opção para renomeá-lo nas opções do widget)
– Caixa de texto abaixo dele nas opções do widget (para que eu possa adicionar texto, links, etc.)
Obrigado
Gavin Wilshen
Tutorial brilhante. Obrigado, pessoal!
Grant
Continua me dando este erro:
O plugin não pôde ser ativado porque acionou um erro fatal.
Erro de análise: erro de sintaxe, T_NS_SEPARATOR inesperado, esperando T_STRING em /home/content/11/10826211/html/wp-content/plugins/wpbeginner-tabber-widget/wpb-tabber-widget.php na linha 16
WPBeginner Support
Grant, acabamos de verificar o código novamente. O plugin ativou sem problemas em nosso ambiente.
Admin
Rahul
Valeu cara, você é um gênio. Eu estava prestes a comprar um plugin premium do CodeCanyon e então encontrei este guia.
Jonathan
Por que quando eu instalo este plugin ele diz que precisa ser atualizado, e a atualização é de outro desenvolvedor & tem mais de 3 anos?
WPBeginner Support
Não deveria fazer isso. Se você alterou o nome do plugin e ele corresponde a outro plugin, o WordPress o confundiria com o outro plugin.
Admin
Jonathan
Eu não mudei nada; eu fiz exatamente o que você mostrou acima.
Jonathan
Este é o plugin que o WordPress pensa que é & e está tentando atualizá-lo para. http://wordpress.org/plugins/tabber-widget/
Acabei de atualizar o plugin para a versão 2.0 & isso (por qualquer motivo) fez com que ele parasse de pedir para atualizá-lo para o outro plugin. Eu tentaria renomear & alterar as informações do outro plugin, mas essa foi a única coisa que pareceu funcionar.
WPBeginner Support
The only reason we can think of is that you probably named the plugin file or folder to tabber-widget.php instead of wpb-tabber-widget.php which caused WordPress to confuse the plugin with this other one. The version trick is ok too until this other plugin releases 2.0+
so its bed to clear the confusion.
WPBeginner Support
Não conseguimos reproduzir isso. Você tem acesso a outro site WordPress onde pode tentar isso, apenas para testar se não há nada de errado do seu lado?
Doris
Isso meio que derrota o propósito do WordPress ser dinâmico, não é? Codificar texto em um widget? Existe uma maneira de buscar conteúdo dinâmico do banco de dados? Nós, novatos, não temos muita experiência em codificação, sabe... Alguém pensaria que existe um plugin que faria isso...
WPBeginner Support
Este tutorial é voltado para usuários de nível intermediário e o objetivo aqui é mostrar como criar um widget de abas. Para usuários de nível iniciante, existem várias tags de modelo integradas que podem gerar conteúdo dinamicamente dentro de cada aba. Por exemplo:
Exibir uma lista de suas páginas do WordPress:
<ul> <?php wp_list_pages('title_li='); ?> </ul>1-click Use in WordPress
Mostrar Posts Aleatórios:
<ul> <?php $posts = get_posts('orderby=rand&numberposts=5'); foreach($posts as $post) { ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> </li> <?php } ?> </ul>1-click Use in WordPress
Mostrar comentários recentes:
1-click Use in WordPress
E muitos outros.
Admin
manoj sakhwar
Bom artigo. obrigado…
Grant
O que eu não entendo é onde colar o código. Em que tipo de documento eu coloco o código? (Eu tenho um Mac).
WPBeginner Support
Use o TextEdit para criar esses arquivos.
Admin
Keith Davis
Amo este, pessoal.
Sempre procurando maneiras de aproveitar melhor um espaço limitado.
Jim Davis
Instalei os arquivos e ativei o widget. Ele é exibido como esperado, no entanto, clicar nas abas 2 e 3 não muda o conteúdo. O conteúdo permanece como o conteúdo da Aba 1. Perdi alguma coisa? Veja meu site de teste em http://jimdavis.org/blog/
Jim
WPBeginner Support
Jim, você não perdeu nada. Este é um widget de exemplo e você pode editá-lo. Insira seu próprio código e conteúdo dentro de cada aba editando o arquivo do plugin wpb-tabber-widget.php
Admin