Oferta SiteGround Black Friday

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.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 0 / 5. Total de votos: 0

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en las redes sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)

Sobre el autor

8 comentarios en “Sidebar modificado a medida”

  1. 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

  2. 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 =(

  3. 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!

  4. 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

  5. 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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
- Responsable: Fernando Tellado ([email protected])
- Fin del tratamiento: Moderación de comentarios para evitar spam
- Legitimación: Tu consentimiento
- Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
- Derechos: Acceso, rectificación, portabilidad, olvido

 

Scroll al inicio