añadir sidebar a tema

Inicio Foros WordPress Themes y Diseño añadir sidebar a tema

Este debate contiene 8 respuestas, tiene 2 mensajes y lo actualizó  martawp hace 4 años, 1 mes.

  • Autor
    Publicaciones
  • #76486

    martawp
    Participante

    Hola a todos,

    primero agradecer este foro ya que me está ayudando mucho en el diseño de mi primera web con wordpress. Ahora me veo con un problema que no he podido solucionar desde los temas del foro.

    Estoy modificando el theme Travelify, no puedo mostrarlo porque aun lo tengo en mi local unicamente.

    Con este tema estoy usando wooCommerce y tengo en el sidebar izquierdo las categorías de productos de wooCommerce.
    Ahora quiero añadir un segundo sidebar donde pondré el carrito y alguna imagen (tipo envío gratis o algo así).
    El caso es que en el antiguo foro encontré una explicación de cómo hacer esto:

    Pero basicamente tienes que hacer una copia de tu archivo sidebar.php y llamarla por ejemplo sidebar2.php luego tienes que decirle a todos los archivos que la llamen colocando <?php include (TEMPLATEPATH . '/sidebar2.php'); ?> justo debajo de la otra llamada de la sidebar, esto es un ejmplo.
    Luego tienes que editar el archivo css llamado style para adaptar la plantilla a la nueva sidebar.

    En mi tema tengo los siguientes archivos:
    sidebar.php
    sidebar-left.php
    sidebar-right.php
    content-leftsidebar.php
    content-rightsidebar.php

    Cada uno llama correctamente al correspondiente sidebar y yo lo que he hecho para que entren los dos ha sido modificar los estilos:

    #secondary {
    float: left;
    margin-left: 3.06%;
    /*MCA cambiamos width*/
    width: 20%;
    }

    #primary {
    float: left;
    /*MCA aumentamos width y eliminamos margin*/
    margin-left: 1%;
    width: 60%;
    }

    Luego de la administración he añadido widgets al sidebar derecho.

    Estoy segura de que algo se me escapa…..¿Alguien me puede ayudar?

    Un saludo y gracias!

  • #76487

    martawp
    Participante

    Hola,

    sigo buscando la solución leyendo por google y he encontrado lo siguiente:

    1- Hay que registrar el sidebar en functions.php
    Hemirado en mi tema y están registrados en functions.php (carpeta library):

    register_sidebar( array(
    ‘name’ => __( ‘Left Sidebar’, ‘travelify’ ),
    ‘id’ => ‘travelify_left_sidebar’,
    ‘description’ => __( ‘Shows widgets at Left side.’, ‘travelify’ ),
    ‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
    ‘after_widget’ => ‘</aside>’,
    ‘before_title’ => ‘<h3 class=”widget-title”>’,
    ‘after_title’ => ‘</h3>’
    ) );

    // Registering main right sidebar
    register_sidebar( array(
    ‘name’ => __( ‘Right Sidebar’, ‘travelify’ ),
    ‘id’ => ‘travelify_right_sidebar’,
    ‘description’ => __( ‘Shows widgets at Right side.’, ‘travelify’ ),
    ‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
    ‘after_widget’ => ‘</aside>’,
    ‘before_title’ => ‘<h3 class=”widget-title”>’,
    ‘after_title’ => ‘</h3>’
    ) );

    2 – Después hay que crear el archivo en cuestión del sidebar, los mios ya están creados como comenté anteriormente.

    3 – llamar al sidebar donde queremos mostrarlo. Yo en mi archivo sidebar.php tengo:

    <div id=”secondary”>
    <?php get_sidebar( ‘left’ ); ?>
    <?php get_sidebar( ‘right’ ); ?>
    </div><!– #secondary –>

    También he probado a poner el get en el index a lo bruto, pero tampoco funciona.

    Mi imaginación se agota, ¿alguna idea?

     

    Un saludo y gracias de nuevo

  • #76488

    martawp
    Participante

    Hola de nuevo,

    ya he encontrado la solución y la voy a compartir con vosotros por si alguien quiere tres columnas en el tema travelify….

    Este tema está pensado para unicamente dos columnas, así que en las opciones del tema seleccionamos nuestra columna a la derecha o a la izquierda. Si por ejemplo escogemos izquierda, el tema usará el content-leftsidebar.php, aquí yo he añadido <?php get_sidebar( ‘right’ ); ?>, el problema es que me lo añadía en la columna de la izquierda y todos los elemento se veían a la izquierda, el motivo es que en style.css el float está a left para #secondary. Para solucionarlo lo que he hecho ha sido crear un nuevo <div> con id secondary2:

    <div id=”secondary2″ “>
    <?php get_sidebar( ‘right’ ); ?>
    </div><!– #secondary2 –>

    quedando el archivo content-leftsidebar así:

    <div id=”secondary” class=”no-margin-left”>
    <?php get_sidebar( ‘left’ ); ?>
    </div><!– #secondary –>

    <div id=”secondary2″ “>
    <?php get_sidebar( ‘right’ ); ?>
    </div><!– #secondary2 –>

    Mi siguiente problema es que se veían descolocados en la pantalla porque estaban los div descolocados, hay que poner en este orden:

    <div id=”secondary” class=”no-margin-left”>
    <div id=”primary”>
    <div id=”secondary2″ “>

    Ahora hay que jugar con los estilos para que todo entre en la pantalla.

     

    Un saludo

  • #76489

    LGrusin
    Miembro

    Gracias martawp

    Un saludo

  • #76491

    martawp
    Participante

    Hola de nuevo,

    ando despistada otra vez….ya conseguí ver mis tres columnas en el tema y en el orden que yo quiero que salgan pero cuando voy a pantallas de woocomerce como por ejemplo la de productos, mis columnas no salen colocadas como deberían estar. El caso es que los estilos los hereda de woocomerce evidentemente.

    En mis páginas normales del tema tengo en el archivo content-leftsidebar.php (también en el right por si acaso), la siguiente estructura:

    <div id=”secondary” class=”no-margin-left”>
    <div id=”primary”>
    <div id=”secondary2″ “>

    Si entramos en páginas de woocomerce sin embargo aparece la siguiente estructura:

    <div id=”content-woocommerce” class=”main”>
    <div id=”secondary”>
    <div id=”secondary2″ “>

    No sé en qué archivo se generan estos div’s, ¿alguien lo sabe?

    He buscado en mi proyecto por las palabras content-woocommerce porque debería haber un div con ese id, pero no me encuentra más que los estilos del style.css.

    Un saludo y gracias!

  • #76492

    martawp
    Participante

    Se pegó dos veces el mismo post, sorry

  • #76493

    martawp
    Participante

    Hola,

    he vuelto a encontrar una solución pero me parece una chapuza. Os pongo mi solución por si a alguien se le ocurre algo mejor…

    El archivo header.php de mi tema termina con el div del cuerpo, el cual se cierra en el archivo footer.php.

    Lo que he hecho en el archivo header.php es:

    <div id=”main” class=”container clearfix”>
    <div id=”secondary” class=”no-margin-left”>
    <?php get_sidebar( ‘left’ ); ?>
    </div><!– #secondary –>

    El problema es que luego desde el navegador con la herramienta de desarrolador (F12) se ven los div’s en el siguiente orden:

    <div id=”secondary”>
    <div id=”content-woocommerce” class=”main”>
    <div id=”secondary”>
    <div id=”secondary2″ “>

    Es decir, llamamos dos veces al sidebar left, aunque luego se muestra bien, seguramente porque se muestra uno encima del otro…lo cual no me parece que esté bien.

    ¿Ideas?

  • #76497

    LGrusin
    Miembro

    ¿Por qué quieres añadir otra columna?

    ¿No sería mejor que woocommerce utilizara sus propios widgets aunque fuera a dos columnas? Es decir, sidebar left diferente según fuese una página o woocommerce.

    Por cierto, en el readme del theme pone que se puede configurar a tres columnas, creo que es un error del autor.

    Un saludo

  • #76503

    martawp
    Participante

    Estoy haciendo una tienda para un familiar y este quiere que en la izquierda estén las categorías, en medio los productos y a la derecha el carro para ir viendo lo que has añadido a carrito.

    Evidentemente lo mejor habría sido buscar un tema que tenga 3 columnas, pero no lo he encontrado y este ya lo tengo casi terminado.

    Lo que dices del readme, efectivamente debe de ser un error porque al menos desde el admin no existe esa opción.

    Gracias

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest