¿Estás buscando una forma de crear y adjuntar dinámicamente barras laterales a páginas o publicaciones? Si bien probablemente exista un plugin para esto, hemos creado un fragmento de código rápido que puedes usar para crear y adjuntar dinámicamente barras laterales a páginas o publicaciones.
Este fragmento te permitirá crear fácilmente nuevas barras laterales simplemente agregando el nombre a un arreglo. También podrás definir la barra lateral creada dinámicamente cuando una página se carga seleccionando de la metabox de selección de barra lateral personalizada.
Primero, creará una nueva metabox dentro del editor de páginas que te permitirá adjuntar una de las barras laterales creadas dinámicamente. Segundo, notarás un arreglo de nombres, por ejemplo: Barra lateral 01, Barra lateral 02, etc. Estos son los nombres de las barras laterales creadas dinámicamente a las que puedes cambiar o agregar nuevas barras laterales.
Instrucciones:
Todo lo que tienes que hacer es agregar este código al archivo functions.php de tu tema o a un plugin específico del sitio
$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>
';
}
Copia el siguiente fragmento de código y reemplaza todo el código dentro de tu plantilla sidebar.php de tu tema de WordPress y listo.
<!-- 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 -->
Nota: Si es la primera vez que agregas fragmentos de código en WordPress, consulta nuestra guía sobre cómo copiar / pegar fragmentos de código correctamente en WordPress, para que no rompas accidentalmente tu sitio.
Si te gustó este fragmento de código, considera revisar nuestros otros artículos en el sitio como: los 10 mejores plugins de WordPress para desarrolladores web y cómo crear un formulario de varias páginas en WordPress.
cambia tu código.
Hola Kevin,
Gracias por el código. Necesito ayuda. Quiero mostrar la segunda barra lateral debajo de la primera. ¿Cómo puedo hacerlo? ¡¡¡Por favor ayúdame!!!
hola Kevin
El cuadro desplegable no funciona en wordpress3.8. ¿Alguna idea?
Hola Kevin.
Soy algo nuevo en esto y necesito un poco de ayuda. Instalé este plugin pero tengo problemas con el CSS, ¿algún consejo?
¡Por cierto, este plugin es genial!
Si alguien tiene un problema con que la barra lateral no se muestre, pruebe esto en lugar de la 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(); ?>
todo funciona genial, pero parece que no sabes qué barra lateral se selecciona cuando vuelves a tu página. ¿Lo implementé mal? ¿O hay una forma fácil de tener el menú desplegable preseleccionado si se elige la barra lateral de esa página...
gracias
Aviso: Índice no definido: _sidebar en /home/
Estoy recibiendo este error en la barra lateral en archive.php y en páginas, posts sin barra lateral seleccionada.
No pasa la depuración. ¿Alguna idea?
Hola amigos,
Estoy usando el código en Thesis. Todo se ve genial para mí excepto una cosa. He renombrado "Sidebar 01" a "Product 01" y por lo tanto se ha cambiado en mi área de edición de publicaciones, pero en el área de widgets todavía me muestra Sidebar 01 y respectivamente... ¿Alguien puede ayudarme para que el nombre en el área de widgets también se pueda cambiar?? Gracias y Saludos.
gracias por esto, me salvó el día jajaja, un problema es que solo aparece en post o página y no en post y página, lo solucioné agregando lo siguiente a la función sidebar_init:
add_meta_box("sidebar_meta", "Selección de Barra Lateral", "sidebar_link", "page", "side", "default");Sin embargo, me encantaría que fuera un poco más dinámico, en lugar de predefinir la cantidad de barras laterales creadas, permitir que el usuario administrador ingrese una cantidad de barras laterales a crear y luego mostrarlas en el menú desplegable. ¿Alguna idea de cómo hacerlo?
gracias por un gran fragmento.
Estoy pensando en convertir esto en un plugin para que la gente tenga una interfaz de administración para crear nuevas barras laterales.
Daniel, ¿podrías publicar un fragmento más grande de esto? Implementé el código anterior en mi tema, pero no estaba seguro de dónde iría tu adición... ¿es parte del archivo sidebar.php, o del archivo functions?
Pregunta…
¿Es necesario algún nivel de saneamiento para que esto se agregue a un tema por seguridad?
Hola, gracias por este fragmento. ¿Cómo puedo agregar la selección a las categorías?
Si entiendo correctamente, ¿quieres decir asignar barras laterales según la categoría?
Estoy muy feliz con esta publicación y muy útil especialmente para mí. Espero que también sea útil para otros usuarios de WordPress. Gran trabajo de tu parte, querido Kevin Chard. Gracias
No hay problema, me alegra saber que te gusta el fragmento.
hmm, no parece que esto funcione. Sigo recibiendo el siguiente error: “Índice no definido: _sidebar en [RUTA_DEL_TEMA]/functions.php en la línea 97
el cuadro de selección aparece en la pantalla de edición de la página, pero ninguna de las barras laterales creadas en el array aparece en el menú desplegable. ¿Alguna idea de cómo remediar esto?
Hola Chris,
Nos aseguraremos de que tu barra lateral esté vacía, solo usa el código que publiqué arriba. El _sidebar es donde se guarda la información. ¿Dónde se muestra el error? ¿Es en la página del editor o cuando intentas guardar tu functions.php?
Kevin,
Gracias por tu respuesta. Cuando visito la pantalla “Editar página” donde se agrega el meta box, las barras laterales que almacené en el array “$dynamic_widget_areas” no se muestran en el cuadro desplegable “Selección de barra lateral” como una opción. En cambio, recibo los siguientes errores en mi registro de depuración:
“Índice no definido: _sidebar en [RUTA_DEL_TEMA]/functions.php en la línea 110”
“Advertencia de PHP: argumento no válido suministrado para foreach() en [RUTA_DEL_TEMA]/functions.php en la línea 118”
Además, cuando visito una página que se supone que debe mostrar una barra lateral, obtengo este error:
“Índice no definido: _sidebar en [RUTA_DEL_TEMA]/sidebar.php en la línea 17”
No he alterado tu código anterior, y sí, los estoy poniendo en los lugares correctos. ¡Cualquier ayuda es muy apreciada!
hhmmm Chris, esto es extraño, ¿no tendrás algún plugin que cause problemas con este código? ¿o algún otro código dentro de functions.php? Si todavía tienes problemas, lo configuraré como un plugin que puedes descargar para ver si eso resuelve las cosas.
Hola de nuevo,
Lo siento, estaba trabajando en mi localhost, intenté subirlo a mi hosting y funcionó sin ningún problema. ¿Tienes alguna idea de por qué no funciona en Wampserver.
¿Y dónde puede el administrador de wordpress agregar una nueva barra lateral? ¿Solo desde esa matriz o hay alguna opción de Agregar nueva barra lateral en la pantalla de vista previa? No pude ver tal opción de agregar.
Gracias de nuevo por tus excelentes fragmentos.
Hakan
Hola Hakan, me alegra saber que lograste que todo funcionara, aunque es muy extraño que no funcione localmente, para ser honesto, no estoy seguro de por qué. Con respecto a la actualización, a partir de ahora todavía necesitas actualizar la matriz. Aunque debido a los comentarios que estoy recibiendo, puede que arregle las cosas y lo lance como un plugin en el futuro con una interfaz de administración.
Gracias de nuevo Hakan, me alegra saber que te gustan los fragmentos.
Hola Kevin,
Lo siento, pero el resultado es el mismo. No hay cambios. En mi área de administración, estoy recibiendo:
‘; echo ”; echo ”; foreach ( $dynamic_widget_areas as $list ){ if($link == $list){ echo ”; }else{ echo ”; } } echo ‘
‘; ?>Selecciona la barra lateral que deseas usar en esta página.
Debajo de la sección Selección de barra lateral, en el lado derecho y en el sitio de vista previa, estoy obteniendo:
ID); $link = $custom["_sidebar"][0]; if($link != ""){ echo ""; if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar($link) ) : endif; echo ""; } ?>
Gran idea. He tenido que crear páginas de barra lateral separadas, o simplemente plantillas separadas para mi sitio web porque solía usar muchas barras laterales (barras laterales personalizadas para cada página que creaba básicamente). Creo que es increíble usarlo para pruebas A/B y marketing avanzado (CTAs específicos en la barra lateral vinculados a páginas específicas). ¡Gracias! : )
Hola Antonin
Me alegra saber que te gusta. Hace un tiempo publiqué sobre la primera mitad para crear la sección de barras laterales usando el array. Luego, al trabajar en un tema, necesité adjuntarlas y se me ocurrió esta idea.
Hola Kevin,
Cuando aplico tu código, veo
“‘; echo ”; echo ”; foreach ( $dynamic_widget_areas as $list ){ if($link == $list){ echo ”; }else{ echo ”; } } echo ‘
‘; ?>
Selecciona la barra lateral que deseas usar en esta página.”
en la barra lateral de mi página en "Selección de barra lateral"
¿Tienes alguna idea sobre eso?
Hola Hakan, ¿ves el código dentro de la página?
Hola Hakan,
Subí la primera parte para que funcione como un plugin, así que esto podría ser más fácil de configurar para ti.
http://wpsnipp.com/wp-content/uploads/2011/11/sidebars.php_.zip
Abre el zip y sube este archivo a tu carpeta de plugins, luego agrega el segundo código de arriba para reemplazar el código de tu barra lateral. No olvides activar el plugin llamado attach sidebars. Espero que esto ayude.
¿Publicaste esto para WordPress? Si lo haces, envíame un enlace por Twitter (@antjanus), escribiré un artículo sobre ello (y lo recomendaré a todos 🙂 ).
Como plugin es limitado, pensaba que la razón por la que Hakan tuvo un problema era solo la ubicación dentro del archivo functions.php, así que lo convertí en un plugin para solucionar su problema más rápido. Necesita tener algún tipo de interfaz para que la gente pueda agregar nuevas barras laterales antes de que pueda lanzarlo como plugin, ya que el array no es práctico.
Buen punto. Avísame cuando lo hayas terminado (o si lo haces al final) 🙂