Você está procurando uma maneira de criar e anexar barras laterais dinamicamente a páginas ou posts? Embora provavelmente exista um plugin para isso, criamos um trecho de código rápido que você pode usar para criar e anexar barras laterais dinamicamente a páginas ou posts.
Este trecho permitirá que você crie facilmente novas barras laterais simplesmente adicionando o nome a um array. Você também poderá definir a barra lateral criada dinamicamente quando uma página for carregada, selecionando-a na metabox de seleção de barra lateral personalizada.
Primeiro, ele criará uma nova metabox dentro do editor de páginas, permitindo que você anexe uma das barras laterais criadas dinamicamente. Segundo, você notará um array de nomes, por exemplo: Barra Lateral 01, Barra Lateral 02, etc. Estes são os nomes das barras laterais criadas dinamicamente às quais você pode adicionar ou alterar novas barras laterais.
Instruções:
Tudo o que você precisa fazer é adicionar este código ao arquivo functions.php do seu tema ou a um plugin específico do site
$dynamic_widget_areas = array(
/* rename or create new dynamic sidebars */
"Sidebar 01",
"Sidebar 02",
"Sidebar 03",
"Sidebar 04",
"Sidebar 05",
"Sidebar 06",
"Sidebar 07",
"Search Template",
);
if ( function_exists('register_sidebar') ) {
foreach ($dynamic_widget_areas as $widget_area_name) {
register_sidebar(array(
'name'=> $widget_area_name,
'before_widget' => '<div id="%1$s" class="widget %2$s left half">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));
}
}
add_action("admin_init", "sidebar_init");
add_action('save_post', 'save_sidebar_link');
function sidebar_init(){
add_meta_box("sidebar_meta", "Sidebar Selection", "sidebar_link", "page", "side", "default");
}
function sidebar_link(){
global $post, $dynamic_widget_areas;
$custom = get_post_custom($post->ID);
$link = $custom["_sidebar"][0];
?>
<div class="link_header">
<?
echo '<select name="link" class="sidebar-selection">';
echo '<option>Select Sidebar</option>';
echo '<option>-----------------------</option>';
foreach ( $dynamic_widget_areas as $list ){
if($link == $list){
echo '<option value="'.$list.'" selected="true">'.$list.'</option>';
}else{
echo '<option value="'.$list.'">'.$list.'</option>';
}
}
echo '</select><br />';
?>
</div>
<p>Select sidebar to use on this page.</p>
<?php
}
function save_sidebar_link(){
global $post;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {return $post->ID;}
update_post_meta($post->ID, "_sidebar", $_POST["link"]);
}
add_action('admin_head', 'sidebar_css');
function sidebar_css() {
echo'
<style type="text/css">
.sidebar-selection{width:100%;}
</style>
';
}
Copie o trecho de código abaixo e substitua todo o código dentro do seu template sidebar.php do seu tema WordPress e pronto.
<!-- begin sidebar -->
<div id="sidebar">
<?
global $post;
$custom = get_post_custom($post->ID);
$link = $custom["_sidebar"][0];
if($link != ''){
echo '<ul id="widgets">';
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar($link) ) :
endif;
echo '</ul>';
}
?>
</div>
<!-- end sidebar -->
Observação: Se esta é a primeira vez que você adiciona trechos de código no WordPress, consulte nosso guia sobre como copiar / colar trechos de código corretamente no WordPress, para não quebrar acidentalmente seu site.
Se você gostou deste trecho de código, considere conferir nossos outros artigos no site como: 10 melhores plugins do WordPress para desenvolvedores web e como criar um formulário de várias páginas no WordPress.
altere seu código.
Olá Kevin,
Obrigado pelo código. Preciso de ajuda. Quero exibir a 2ª barra lateral abaixo da 1ª. como posso fazer isso?? Por favor, me ajude!!!
oi Kevin
A caixa de seleção não está funcionando no wordpress 3.8. alguma ideia
Oi Kevin.
Eu sou meio novo nisso e preciso de um pouco de ajuda. Eu instalei este plugin, mas tenho problemas com o CSS, alguma dica?
A propósito, este plugin é incrível!
Se alguém tiver um problema com a barra lateral não aparecendo, tente isto em vez da parte 2:
post->ID; $link = get_post_meta($postid, ‘_sidebar’, true); if($link != ”){ echo ”; if (function_exists(‘dynamic_sidebar’) && dynamic_sidebar(($link))) :endif; echo ”; } wp_reset_query(); ?>
tudo funciona perfeitamente,
mas parece que você não sabe qual barra lateral é selecionada quando você volta para a sua página. eu implementei errado? ou existe uma maneira fácil de ter o dropdown pré-selecionado se a barra lateral dessa página for escolhida…
obrigado
Aviso: Índice não definido: _sidebar em /home/
Estou recebendo este erro na barra lateral em archive.php e páginas, posts sem barra lateral selecionada.
Não passa no debug. Alguma ideia?
Olá Amigos,
Estou usando o código no thesis. Tudo parece ótimo para mim, exceto uma coisa.
Eu renomeei "Sidebar 01" para "Product 01" e, portanto, foi alterado na minha área de edição de posts, mas na área de widgets ainda está mostrando "Sidebar 01" e respectivamente.. Alguém pode me ajudar para que o nome na área de widgets também possa ser alterado?? Obrigado & Atenciosamente.
obrigado por isso, salvou meu dia lol, um problema é que só aparece em post ou página e não em post e página, eu contornei adicionando o seguinte à função sidebar_init:
add_meta_box("sidebar_meta", "Seleção de Barra Lateral", "sidebar_link", "page", "side", "default");Eu adoraria que fosse um pouco mais dinâmico, como em vez de pré-definir a quantidade de barras laterais criadas, permitir que o usuário administrador insira uma quantidade de barras laterais a serem criadas e, em seguida, exiba essas no dropdown. Alguma ideia de como fazer isso?
obrigado por um ótimo snippet.
Estou pensando em transformar isso em um plugin para que as pessoas possam ter uma interface administrativa para criar novas barras laterais.
Daniel, você poderia postar um snippet maior disso? Implementei o código acima no meu tema, mas não tinha certeza onde sua adição precisaria ir… isso faz parte do arquivo sidebar.php, ou do arquivo functions?
Pergunta…
É necessário algum nível de sanitização para que isso seja adicionado a um tema por segurança?
Olá, obrigado por este snippet. Como posso adicionar a seleção às categorias?
Se eu entendi corretamente, você quer dizer atribuir barras laterais com base na categoria?
Estou muito feliz com esta postagem e muito útil, especialmente para mim. Espero que também seja útil para outros usuários do WordPress. Ótimo trabalho seu, querido Kevin Chard. Obrigado
Sem problemas, fico feliz em saber que você gostou do trecho.
hmm, não consigo fazer isso funcionar. continuo recebendo o seguinte erro: “Undefined index: _sidebar in [THEME_PATH]/functions.php on line 97
a caixa de seleção aparece na tela de edição da página, mas nenhuma das barras laterais criadas no array aparece no menu suspenso. alguma ideia de como resolver isso?
Oi Chris,
Certifique-se de que sua barra lateral esteja vazia, basta usar o código que postei acima. O _sidebar é onde as informações são salvas. Onde o erro é exibido? É na página do editor ou quando você tenta salvar seu functions.php?
Kevin,
Obrigado pela sua resposta. Quando visito a tela “Editar Página” onde a meta box é adicionada, as barras laterais que armazenei no array “$dynamic_widget_areas” não estão sendo exibidas na caixa suspensa “Seleção de Barra Lateral” como uma opção. Em vez disso, recebo os seguintes erros no meu log de depuração:
“Índice indefinido: _sidebar em [THEME_PATH]/functions.php na linha 110”
“Aviso PHP: Argumento inválido fornecido para foreach() em [THEME_PATH]/functions.php na linha 118”
Além disso, quando visito uma página que deveria exibir uma barra lateral, recebo este erro:
“Índice indefinido: _sidebar em [THEME_PATH]/sidebar.php na linha 17”
Não alterei seu código acima e, sim, estou colocando-os nos lugares corretos. Qualquer ajuda é muito apreciada!
hhmmm Chris, isso é estranho, você não teria um plugin que causaria problemas com este código? ou outro código dentro do functions.php? se você ainda tiver problemas, eu o configurarei como um plugin que você pode baixar para ver se isso resolve as coisas.
Oi novamente,
Desculpe, eu estava trabalhando no meu localhost, tentei fazer o upload para minha hospedagem e funcionou sem nenhum problema. Você tem alguma ideia de por que não está funcionando no Wampserver.
E onde o administrador do WordPress pode adicionar uma nova barra lateral? Apenas a partir desse array ou há alguma opção Adicionar Nova Barra Lateral na tela de visualização? Eu não conseguia ver tal opção de adição.
Obrigado novamente pelos seus ótimos snippets.
Hakan
Olá Hakan, Fico feliz em saber que você conseguiu fazer as coisas funcionarem, embora seja muito estranho que não funcione localmente, para ser honesto, não tenho certeza do porquê. Em relação à atualização, no momento você ainda precisa atualizar o array. Embora, devido ao feedback que estou recebendo, eu possa corrigir as coisas e lançá-lo como um plugin no futuro com uma interface administrativa.
Obrigado novamente Hakan, fico feliz em saber que você gosta dos snippets.
Olá Kevin,
Sinto muito, mas o resultado é o mesmo. Nenhuma mudança. Na minha área de administração, estou recebendo:
‘; echo ”; echo ”; foreach ( $dynamic_widget_areas as $list ){ if($link == $list){ echo ”; }else{ echo ”; } } echo ‘
‘; ?>Selecione a barra lateral a ser usada nesta página.
sob a parte de Seleção de Barra Lateral no lado direito e no site de pré-visualização, estou recebendo:
ID); $link = $custom[“_sidebar”][0]; if($link != ”){ echo ”; if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar($link) ) : endif; echo ”; } ?>
Ótima ideia. Eu tive que criar páginas de modelo de barra lateral separadas, ou apenas modelos separados para o meu site porque eu tendia a usar muitas barras laterais (barras laterais personalizadas para cada página que eu criava, basicamente). Acho que é incrível usar para testes A/B e marketing avançado (CTAs específicos na barra lateral vinculados a páginas específicas). Obrigado! 🙂
Oi Antonin
Fico feliz em saber que você gostou, postei há um tempo sobre apenas a primeira metade para criar a parte das barras laterais usando o array. Então, ao trabalhar em um tema, precisei anexá-las e tive essa ideia.
Oi Kevin,
Quando aplico seu código, vejo
“‘; echo ”; echo ”; foreach ( $dynamic_widget_areas as $list ){ if($link == $list){ echo ”; }else{ echo ”; } } echo ‘
‘; ?>
Selecione a barra lateral a ser usada nesta página.”
na barra lateral da minha página em “Seleção de Barra Lateral”
Você tem alguma ideia sobre isso?
Olá Hakan, você vê o código dentro da página?
Oi Hakan,
Fiz o upload da primeira parte para funcionar como um plugin, então isso pode ser mais fácil para você configurar.
http://wpsnipp.com/wp-content/uploads/2011/11/sidebars.php_.zip
Abra o zip e faça o upload deste arquivo para sua pasta de plugins, depois adicione o segundo código acima para substituir seu código de barra lateral. Não se esqueça de ativar o plugin chamado attach sidebars. Espero que ajude.
Você publicou isso para o Wordpress? Se sim, me envie um link pelo twitter (@antjanus), escreverei um artigo sobre isso (e o recomendarei a todos 🙂 ).
Como um plugin, ele é limitado. Eu estava pensando que o motivo pelo qual Hakan teve um problema era apenas a localização dentro do arquivo functions.php, então eu o transformei em um plugin para corrigir o problema dele mais rápido. Ele precisa ter algum tipo de interface para que as pessoas possam adicionar novas barras laterais antes que eu possa lançá-lo como um plugin, pois o array não é prático.
Bom ponto. Me avise quando terminar (ou se você fizer isso no final) 🙂