10mar
8

Sidebar modificado a medida

En un blog de un colegio queria personalizar el menu de paginas del sidebar izquierdo.

La idea era que partiendo de la estructura de paginas (padres -> hijas) pudiera montar un menu de opciones agrupadas segun las paginas padre.

En la imagen lo veis mejor:

menu-cole.jpg

Como veis los titulos de las secciones son las paginas padre y las opciones son paginas hijas.

Si Colexio ID=4 , Vida Escolar ID=5 y Galeria Fotos ID=6 la solucion es editar el fichero sidebar.php del theme que utilices e incorporas el siguientes codigo:

< ?php wp_list_pages('child_of=4&sort_column=menu_order&title_li=COLEXIO') ?>
< ?php wp_list_pages('child_of=5&sort_column=menu_order&title_li=VIDA ESCOLAR') ?>
< ?php wp_list_pages('child_of=6&sort_column=menu_order&title_li=GALERIA FOTOS')?>

Seguro que a partir de este ejemplo se pueden sugerir muchas mejoras, de todas formas espero haber aportado algo a este nuevo site dedicado al mejor sistema de blogs del mundo.

Para saber más:

por en Programación, Tutoriales / Trucos, Wordpress.org Galeria, sidebar
  • http://carneargenta.wordpress.com Carne Argenta

    buena idea, justo lo que andaba buscando.-

    PD: hay algun error el la plantilla, o simplemente se me cargo mal, pero el codigo a editar en la sidebar se superpone con los anuncios 125×125

  • http://blog.oldskull.net OLDSKULL

    Muy buen aporte, lo estaba buscando!

  • http://carneargenta.wordpress.com Carne Argenta

    no pude modificar el ccomments anterior, estuve buscando por tu blog y no pude encontrar un tutorial para cambiarme de wordpress.com a wordpress.org =(

  • http://blog.oldskull.net OLDSKULL

    una pregunta, tengo instalado el plugin gTranslate y cuando en la sección de “Pagina superior” me salen las paginas que he creado me salen con el prefijo[lang_es] por ejemplo:
    [lang_es]mis cosas[/lang_es] sabéis si podría eliminar ese prefijo del desplegable?

    Gracias!

  • http://fernandotellado.com/ Fernando Tellado

    OLDSKULL, quizás tu consulta excede la flexibilidad de los comentarios. mejor planteála en los foros ;)

    http://foro.ayudawordpress.com

  • http://blog.oldskull.net OLDSKULL

    Perdon! no me he dado cuenta!

  • http://www.invertiras.com crystyta

    Hola a ver si me podeis echar un cable con esto. Quiero cambiar el ancho de mi sidebar a 300 pixeles de ancho y no tengo ni idea de hacerlo. Esta es mi hoja de estilo de mi plantilla:

    /* sidebar defines */

    div#sidebar.left { width:220px; padding:30px 5px 35px 9px; float:left; font:normal 12px “Trebuche MS”,verdana,sans-serif,tahoma,impact,arial; color:#454545; }
    div#sidebar.right { width:185px; padding:30px 0px 35px 20px; float:left; font:normal 12px “Trebuche MS”,verdana,sans-serif,tahoma,impact,arial; color:#454545; }

    div#sidebar table { margin:10px 0px 0px 0px; border:none; border-collapse:collapse;}
    div#sidebar table tbody {border:none; padding:0px; margin:0px;}
    div#sidebar table tr { padding:0px; margin:0px;}
    div#sidebar table th { background:#0d4d63; color:#ffffff; margin:0px; padding:0px; border:none; text-align:center; vertical-align:middle; width:28px; height:25px;}
    div#sidebar table td { background:#f9f9f9; color:#bbbbbb; margin:0px; padding:0px; border:none; text-align:center; vertical-align:middle; width:28px; height:25px;}

    div#sidebar ul { list-style:none; margin:0px; padding:0px; }

    div#sidebar ul li {padding:0px; margin:0px; border-bottom:1px dotted #cccccc; }

    div#sidebar ul li a { font:normal 12px “Trebuchet Ms”,Verdana,sans-serif,tahoma,impact,arial; color:#727272;}
    div#sidebar table td a { color:#212121; }
    div#sidebar ul li a:hover { font:normal 12px “Trebuchet Ms”,Verdana,sans-serif,tahoma,impact,arial; color:#1eacdd;}
    div#sidebar ul li h2.sidebartitle{ height:25px; font:bold 18px Tahoma,”Trebuchet MS”,verdana,sans-serif; color:#105a74; margin:0px; padding:0px;}
    div#sidebar ul li.widget { padding:20px 0px 0px 0px; border:none;}

    div#sidebar ul li ul { list-style:none; margin:0px 0px 0px 2px; padding:0px 0px 0px 0px; color:#727272; }

    div#sidebar ul li ul li ul { list-style:square inside; padding:0px 0px 0px 8px; color:#929292;}
    div#sidebar ul li ul li ul a { color:#929292;}
    div#sidebar ul li ul li ul li {margin:0px; border-bottom:none;}
    div#sidebar ul li form { margin:0px; padding:0px;}
    div#sidebar ul li input[type="text"] { padding:5px; width:110px; margin:0px 5px 0px 0px; font:normal 12px “Trebuche MS”,verdana,sans-serif,tahoma,impact,arial; color:#666666; border:1px solid #999999; }
    div#sidebar ul li input[type="submit"] { width:52px; padding:0px; height:26px; margin:0px; }
    div#sidebar ul.search-form li { border:none; }
    div#sidebar ul li form#searchform label {display:block; }

    Si me decis donde tengo que poner los valores os lo agradeceria profundamente.

    Un saludo

  • http://www.invertiras.com crystyta

    Hola a ver si pudieras contestarme a otra pregunta. Me interesa mucho ordenar el sidebar como lo has hecho arriba pero al agregar el codigo no me sale nada absolutamente. Donde tengo que agregar exactamente el código?

    Gracias