Soporte » Diseño – Temas y plantillas » problema grid de ultimos posts en página secundaria

  • Hola muy buenas a tod@s.

    Estoy intentado incluir en una página secundaria un teaser grid con los últimos posts publicados, (algo muy sencillo y que no ocupa mas de 10 lineas de código). Pero cuando intento hacerlo en una plantilla de página algo ocurre.

    COPIO el código de index.php donde tengo un teaser grid funcionando perfectamente, y lo PEGO en la plantilla de página para una página secundaria. Pero esta, en vez de mostrar la matriz con los últimos posts, muestra UNA ÚNICA COLUMNA (si intento inspeccionar el div que contiene cada post con el navegador, me muestra que éste tiene un margen gigante, PERO ESO ES FALSO)

    La web es: http://proyectofireflies.com
    La matriz funcionando perfectamente está en la página de inicio.
    La página secundaria con el fallo es: http://proyectofireflies.com/luciernagas/

    Me desespero!!!!

    Que alguien me eche un cable porfavor.

Viendo 15 respuestas - de la 1 a la 15 (de un total de 18)
  • Moderador LGrusin

    (@lgrusin)

    Supongo que es por problemas de estilos CSS que tendrás que adaptar al Tema que usas. También mirando el código fuente de la página veo algunos errores.

    Igual no deberías usar una plantilla de página para eso. Prueba en su lugar crear un archivo llamado page-luciernagas.php y trabaja desde ahí.

    Un saludo

    Iniciador del debate olgahueso

    (@olgahueso)

    Gracias LGrusin. El problema es que cuando no utilizo CSS y lo hago todo a pelo, también tengo el mismo error.

    Lo que hago es crear un luciernagas.php y asignarlo como plantilla y ponérselo a la página «luciernagas» como plantilla de página. ¿Como dices tu que habría que hacerlo? ¿Puedo insertar un archivo php sin más sin necesidad de hacer una página y asignarle una plantilla?¿como?

    Muchísimas gracias

    Moderador LGrusin

    (@lgrusin)

    Algo de CSS debe tener, si no es imposible alinear y darle apariencia a las columnas.

    De hecho el Tema tiene sus propios estilos CSS, por eso no sale como quieres. Intenta usarlos para el grid de vez de añadir nuevos, es lo más lógico. Debes partir de uno de los archivos del Tema y no inventar uno propio. ¿Qué Tema es?

    Lo de usar un archivo page-luciernagas.php es porque puede ser más cómodo si trabajas sólo con código. Todo lo que quieras hacer lo pones en ese archivo.

    En este caso, suponiendo que ya existe una página llamada «luciernagas» WordPress tomará el archivo page-luciernagas.php sin que tengas que hacer nada más.

    Un saludo

    Iniciador del debate olgahueso

    (@olgahueso)

    Hola LGrusin. Yo trabajo solo con código y estoy usando elmismo css que da el tema y que he usado en index.php (Página que se muestra correctamente), la única diferencia es que en luciernagas utilizo el estilo «visible» en vez de invisible (que es como se define en index.php, cosa que no entiendo por que los teasers aparecen en el index)

    El tema es griffin

    Moderador LGrusin

    (@lgrusin)

    Me perdí…

    No hace falta código para eso…

    Volvamos al principio. Ya el Tema muestra los posts a 3 columnas, ¿exactamente qué quieres hacer?

    Un saludo

    Iniciador del debate olgahueso

    (@olgahueso)

    Ok, si ingresas en la página http://proyectofireflies.com verás el index.php (con algunas modificaciones simples). Lo único que quiero es copiar ese código y ponerlo en varias páginas diferentes. De momento lo he copiado y pegado en «luciernagas». Pero al hacerlo no se muestra igual. Y eso es lo que no entiendo. ¿Por que siendo exactamente el mísmo código, no se muestra igual?

    Uso los mismos CSS que daba el tema, en ambas páginas.

    Muchas gracias LGrusin

    Moderador LGrusin

    (@lgrusin)

    Veo que hay diferencias en las cajas div que genera la página de inicio y las de la página Luciernagas. Posiblemente por estar metido en una página.

    Has hecho tantos cambios en el Tema que me es complicado seguir el orden de las cajas div y los valores.

    Posiblemente exista otra manera de hacer lo que quieres de forma más fácil.

    Si encuentro algo te lo dire…

    Un saludo

    Iniciador del debate olgahueso

    (@olgahueso)

    Muchas gracias LGrusin.

    Entonces ¿Cuando utilizas una «página», wordpress automaticamente incluye divs adicionales? Por que de ser así, ahí puede estar el problema.

    Moderador LGrusin

    (@lgrusin)

    Más o menos, adicionales o diferentes…

    Es un poco complicado de explicar.

    En tu Tema esto es lo que ocurre cuando abres una página. WordPress carga page.php y dentro está content-page.php. Es decir, content-page.php es la parte central del archivo page.php

    Si creas una plantilla de página que has tomado del archivo page.php ocurre exactamente lo mismo.

    Si la plantilla de página la has copiado de otro archivo, como por ejemplo index.php, WordPress detectará que es una página y cargará el archivo content-page.php dentro.

    El archivo index.php tiene una estructura de cajas diferente a page.php

    Cuando index.php muestra las entradas en la página de inicio, tiene aspecto diferente puesto que carga el archivo content.php en vez de content-page.php.

    Por tanto, debes «emular» exactamente las cajas DIV y demás estilos del archivo index.php de la página de inicio si quieres que la apariencia sea la de éste.

    Podrías crearte tu propio archivo content-luciernaga.php y llamarlo desde la plantilla de página, en vez de usar
    get_template_part('content', get_post_format());
    usa
    get_template_part('content', 'luciernaga');
    y ahí pones la estructura que quieras.

    Ten en cuenta que las categorías muestran la misma vista que la página de inicio que quieres emular. Por tanto, todo este rollo es innecesario… 🙂

    Un saludo

    Moderador LGrusin

    (@lgrusin)

    Por cierto, acabo de recordar que las columnas se crean con masonry en jQuery, por tanto, deja #teaser-holder {visibility:hidden;} que jQuery ya se encarga de hacerlo visible y recolocar las columnas en su sitio.

    Saludos

    Iniciador del debate olgahueso

    (@olgahueso)

    Por ahi pueden ir los tiros LGrusin. Por que al ponerlo hidden como en index.php, en este caso no se ve nada. Por lo que puede ser un problema con el jQuery ¿Que opinas? No soy experta en java y no tengo mucha idea de como manipular o que hace exactamente el jQuery.

    Aquí te dejo el código de Luciérnagas para que lo veas.

    <?php
    /*
    Template Name: luciernagas
    */
    ?>
    
    <?php get_header(); ?>
    <?php
    $page = (get_query_var('paged')) ? get_query_var('paged') : 1;
    query_posts($VARIABLE_BUSQUEDA . '&cat=4');
    $posts_per_page = 20
    ?>
    <div id="teaser-holder" class="row" style="visibility:visible;")>
    	<?php
    		if (have_posts()) :
    			while (have_posts()) : the_post();
    			get_template_part('content',   get_post_format());
    			endwhile;
    		else :
    			get_template_part('content', 'none');
    		endif;
    	?>
    </div>
    
    <div id="Llamita"   class="col-md-12">
    <center>
    <a  href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    <img   width="200px" id="Logo_Llamita" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/Llamita_web.jpg" onmouseover="this.src='<?php bloginfo('stylesheet_directory'); ?>/assets/img/Llamita_web_azul.jpg';"  onmouseout="this.src='<?php bloginfo('stylesheet_directory'); ?>/assets/img/Llamita_web.jpg';"  />
    </a>
    </center>
    </div>
    -
    
    <?php griffin_pagination(); ?>
    <?php get_footer(); ?>

    Lo único raro o diferente al código original es el :

    <?php
    $page = (get_query_var('paged')) ? get_query_var('paged') : 1;
    query_posts($VARIABLE_BUSQUEDA . '&cat=4');
    $posts_per_page = 20
    ?>

    Uso VARIABLE_BUSQUEDA, que es una copia exacta del query_string, por que no puedo tener acceso al query_string en otras páginas que no sean la principal. Declaro VARIABLE_BUSQUEDA en index.php así:

    <?
    global $VARIABLE_BUSQUEDA;
    $VARIABLE_BUSQUEDA=$query_string;
    ?>

    Otra cosa que puede darnos alguna pista es que en luciernagas he eliminado estas lineas de código que corresponden a la barrita de búsqueda que sale al inicio en index.php (dado que si incluyo ese código en luciérnagas, nunca desaparecen las barras. Como si no terminase de encontrar nada nunca). Este es el código que he eliminado en «luciernagas» (justo despues de la cabecera):

    <?php if (is_search()) : ?>
        <h1><?php _e('Search results:', 'griffin'); echo ' "' . get_search_query() . '"'; ?></h1>
    <?php endif; ?>
    
    <div class="spinner">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>


    RESUMEN:

    * No puedo usar query_string en «luciernagas», por lo que uso
    una variable declarada por mi

    * Al poner la visibilidad en «hidden» en luciernagas, todo
    desaparece. ¿Nos está diciendo que hay un problema con el
    jQuery?

    * Elimino el código de inicio de la búsqueda por que no terminan
    de desaparecer las barritas en «luciernagas» (en index.php lo
    hace correctamente)

    MUCHISIMAS GRACIAS POR TODO LGRUSIN

    Moderador LGrusin

    (@lgrusin)

    Uf, has elegido un Tema un poco antipático para esto… 🙂

    Bien, en tu codigo, modifica:
    <div id="teaser-holder" class="row" style="visibility:visible;")>
    por
    <div id="teaser-holder" class="row">

    en
    get_template_part('content', get_post_format());
    pones
    get_template_part('content');

    y en el archivo assets/js/griffin.js
    donde pone
    if($('body').hasClass('blog') || $('body').hasClass('search-results') || $('body').hasClass('archive')) {
    modificalo para que quede
    if($('body').hasClass('blog') || $('body').hasClass('search-results') || $('body').hasClass('archive') || $('body').hasClass('page')){

    Esta parte final es la que muestra los posts en columnas en una página, antes era imposible porque el jQuery no actuaba.

    Ahora tendrás otro problema posiblemente con la paginación. La consulta (query) no está bien del todo.

    Si hubieses creado una categoría llamada Luciernagas y hubieses asignado entradas a ella, nada de esto era necesario. Simplemente accedías a la categoría luciernaga y ya salían todos los post en ella.

    Un saludo

    Iniciador del debate olgahueso

    (@olgahueso)

    Muchas gracias. Ya me funciona y se ven todas las columnas correctamente

    Pero efectivamente, tengo el problema de la paginación, todas las páginas me conducen a la primera. ¿Por que aparece?

    Moderador LGrusin

    (@lgrusin)

    Quita lo de la variable, no lo necesitas. El query es el siguiente:

    <?php
    $page = (get_query_var('paged')) ? get_query_var('paged') : 1;
    query_posts( array( 'cat' => '4', 'paged' => $page, 'posts_per_page' => '20'));
    ?>

    Un saludo

    Iniciador del debate olgahueso

    (@olgahueso)

    En index.php, justo después del bucle para llamar a los posts, reseteo el query al original (wp_reset_query()), y con ello consigo paginación correcta. Pero si hago lo mismo en luciernagas, la paginación no me funciona.

Viendo 15 respuestas - de la 1 a la 15 (de un total de 18)
  • El debate ‘problema grid de ultimos posts en página secundaria’ está cerrado a nuevas respuestas.