Isótopo: muestra la última publicación dentro de cada categoría

7 minutos de lectura

avatar de usuario
olén

Cómo funciona ahora mismo:

  • Muestra los últimos 6 proyectos por defecto
  • Al presionar las listas específicas muestra la última publicación dentro de esa categoría que son los últimos 6 proyectos. Por ejemplo: Muestra los 4 últimos dentro Foto porque 4 de las 6 son categorías como Foto. Esto significa que si los 6 últimos proyectos están en la categoría Fotoninguna de las publicaciones dentro de las otras categorías se mostraría. Por favor, vea la pantalla de abajo si no entiende.

No muestra todas las publicaciones dentro de cada categoría.

Cómo debería funcionar:

  • Mostrar los últimos 6 proyectos por defecto (esto funciona)
  • Cuando presione una categoría, debería mostrar las últimas 6 publicaciones dentro de esa categoría

Ver página aquí

Nota: Si está utilizando Chrome con Windows 10, el efecto de desplazamiento ha dejado de funcionar por algún motivo. El error se ha informado a Chrome y Windows.

<ul id="filters" class="whitetext whitelink myeluft">
    <li class="smoothtrans"><a href="#" data-filter="*" class="selected smoothtrans">Alle</a></li>
    <li class="smoothtrans"><a href="#" data-filter=".foto" class="smoothtrans">Foto</a></li>
    <li class="smoothtrans"><a href="#" data-filter=".video" class="smoothtrans">Video</a></li>
    <li class="smoothtrans"><a href="#" data-filter=".web" class="smoothtrans">Web</a></li>
</ul>

PHP

<?php

$args = array(
    'post_type' => (array( 'foto', 'video', 'web' )),
    'posts_per_page' => '6',
    'post_taxonomy' => 'any',
);

$the_query = new WP_Query($args); 


// Loop post_type
?>

<?php if ( $the_query->have_posts() ) : ?>
    <div id="isotope-list">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 

        $termsArray = get_the_terms( $post->ID, "category");  //Get the terms for this particular item
        $termsString = ""; //initialize the string that will contain the terms
            foreach ( $termsArray as $term ) { // for each term 
                $termsString .= $term->slug.' '; //create a string that has all the slugs 
            }
        ?> 
        <div class="<?php echo $termsString; ?> item col-md-4"> 
            <ul class="grid cs-style-3">
                <li>
                    <figure>
                        <?php if ( has_post_thumbnail() ) { 
                              the_post_thumbnail('frontpage_thumb');
                        } ?>
                        <figcaption class="lefttext">
                            <h3><?php the_title(); ?></h3>
                            <span class="offgrey"><?php echo(types_render_field( "produkt", array( 'raw' => true) )); ?> / <?php echo(types_render_field( "produsert", array( 'raw' => true) )); ?></span>
                            <a href="https://stackoverflow.com/questions/31298642/<?php the_permalink() ?>" title="Se prosjekt" rel="bookmark" class="smoothtrans">Se prosjekt</a>
                        </figcaption>
                    </figure>
                </li>
            </ul>             
        </div> <!-- end item -->
        <?php endwhile;  ?>
    </div> <!-- end isotope-list -->
    <script src="<?php bloginfo('stylesheet_directory'); ?>/js/toucheffects.js"></script>
<?php endif; ?>

JS

jQuery(function ($) {

    var $container = $('#isotope-list'); //The ID for the list with all the blog posts
    $container.isotope({ //Isotope options, 'item' matches the class in the PHP
        itemSelector : '.item', 
        layoutMode : 'masonry'
    });

    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

    $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
     var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });

    return false;
    });

});

Mis pensamientos (actualizado el 13/07/15)

Lo he investigado más, y al deshabilitar el 'posts_per_page' y solo usando la configuración personalizada de wp, el problema es el mismo. Entonces, supongo que el problema es que al presionar cada categoría no se actualiza ni obtiene ninguna otra publicación que la que se muestra primero.

Por lo tanto, creo que los argumentos deben configurarse en otro lugar, o el js debe modificarse para obtener las publicaciones más recientes. Pero esto no es mi experiencia, y por lo tanto le pregunto si tiene alguna solución. He buscado en ambos motores de búsqueda y SO para esta pregunta, pero no pude encontrarla. Sin embargo, veo que páginas similares tienen el mismo problema. Con eso, creo que resolver este problema también ayudaría a otros usuarios.

  • Lo tomo en la sección de php, la etiqueta de apertura de php (en la parte superior) está realmente allí y ¿se te pasó por alto ponerla en la pregunta?

    – ArtísticoPhoenix

    8 de julio de 2015 a las 16:56


  • Buena pregunta. Lo comprobaré cuando vuelva. Pero creo que sí, de lo contrario no hubiera funcionado.

    – Olén

    08/07/2015 a las 18:58

  • sin embargo, no funciona, o no estaría aquí, ya que está mezclando código html y php, es posible que haya salido a la página y no se haya ejecutado como código.

    – ArtísticoPhoenix

    08/07/2015 a las 20:32


  • Tengo la etiqueta php de apertura al principio de la página. Entonces, ¿crees que el código es correcto?

    – Olén

    08/07/2015 a las 21:04

  • No diría que creo eso, eso fue solo lo más obvio.

    – ArtísticoPhoenix

    8 de julio de 2015 a las 22:26

Su código actual solicita a la base de datos solo 6 publicaciones recientes. Complemento de isótopos y luego filtrarlos en la interfaz.

Esto significa que no puede mostrar más publicaciones además de estas 6. Al hacer clic en las etiquetas (foto, video, web), el isótopo filtra estas 6 publicaciones para mostrar solo las que tienen la categoría seleccionada. No solicita más publicaciones, solo filtra las publicaciones que ya tiene.

Puede hacer que su código solicite más publicaciones cuando haga clic en las etiquetas de filtro, pero deberá usar AJAX.

  • Gracias por ayudar. He estado buscando un poco en AJAX, pero tampoco estoy tan familiarizado con esto. ¿Tiene un recurso para consultar, o algún código?

    – Olén

    15 de julio de 2015 a las 8:15

  • ¿Finalmente hiciste que esto funcionara? Por favor, si mi respuesta te ayudó, márcala como respuesta correcta.

    – Creador de temas

    14 de octubre de 2015 a las 7:45

Dos cosas que no entiendo

  1. ¿Por qué hay dos opciones de navegación/elección? dos nav

2. El primero funciona correctamente, pero el segundo no tiene ningún enlace o función, tiene un enlace para volver al mismo usando # hiperreferencia.

3. El video y la web tienen lo mismo. ¿Lo pusiste a sabiendas? Si no, marca la categoría asignada.

  • Gracias por comentar Estoy trabajando en el sitio web, y aún no ha sido lanzado. Lo que significa que hay varios errores y publicaciones/páginas no actualizadas. Por favor, solo mire la página principal (goo.gl/9IsTIl). El filtrado funciona: simplemente no he publicado publicaciones correctas y actualizadas en video y web. Cuando se resuelva esta pregunta, arreglaré todas las demás páginas y publicaciones.

    – Olén

    13 de julio de 2015 a las 13:11

una cosa que puede hacer es buscar todas las publicaciones a la vez y mostrar solo 6 usando algo como esto

jQuery('#isotope-list').isotope({
    filter: ':nth-child(-n+3)'
});

  • Gracias por comentar. Probé tu consejo usando 1n+4, pero no funcionó. Funcionó para “todos”, pero no para las categorías. El problema seguía siendo el mismo…

    – Olén

    15 de julio de 2015 a las 7:38

El filtro funcionará solo en los elementos disponibles en la página.

Al presionar una categoría, debería mostrar las últimas 6 publicaciones dentro de esa categoría si está disponibleen tu caso (http://www.vekvemedia.no/) el total de elementos son 6 y 5 elementos pertenecen a la categoría “foto”, por lo que al presionar la categoría “foto” se mostrarán 5 elementos.

Solución-1: si tiene la opción “Todos”, entonces debe cargar todos los elementos disponibles en la primera carga después de que el filtro funcione y muestre todos los elementos de la categoría correspondiente.

Solución-2: Al usar ajax, obtenga 6 registros que coincidan con la categoría (como “foto”)

¿Ha sido útil esta solución?