Usando la muratura - Come rendere ogni xth Post Thumbnail Image copre più colonne?

wordpress.stackexchange https://wordpress.stackexchange.com/questions/151589

  •  28-09-2020
  •  | 
  •  

Domanda

Per essere specifico:

    .
  • Sto usando la muratura per mostrare tutti i post all'interno di una certa categoria
  • Le immagini delle miniature per ciascun post sono visualizzate nella pagina della categoria in un formato a 3 colonne utilizzando le colonne della larghezza del fluido CSS
  • Devo mostrare la settima immagine anteprima che dura la larghezza di tutte le 3 colonne

In passato ho aggiunto un contatore ai posti per indirizzare il XX post per applicare una classe e uno stile di conseguenza.Ma è probabilmente con la muratura, che è assolutamente elementi di posizionamento?

Modifica

Sto usando questo codice per query Posts on the murary Pagina:

    if ( get_query_var( 'paged' ) ) {
    $paged = get_query_var( 'paged' );
} elseif ( get_query_var( 'page' ) ) {
    $paged = get_query_var( 'page' );
} else {
    $paged = 1;
}
$args = array(
    'posts_per_page' => 12, 
    'paged' => $paged
);

// Override the primary post loop
query_posts( $args );
.

È stato utile?

Soluzione 2

Quindi non ho potuto capire come aggiungere una classe di sequenza numerica a ciascun post / articolo div, ma ho appena cambiato il modello per il settimo post nel modello di muratura.

L'ho fatto questo:

<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while (have_posts()) : the_post(); ?>

<?php $count++; ?>
<?php if ($count == 7) : ?>

     <article class="masonry-entry masonry-3col masonry-post-no-7">
     </article>

<?php else: ?>  

     <article class="masonry-entry masonry-3col">
     </article>
<?php endif; ?>
<?php endwhile; ?>
.

Altri suggerimenti

Questo non dovrebbe essere un problema con la muratura, almeno non ne ho mai avuto uno con esso (o il suo simile isotopo equivalente). In realtà è solo la bellezza di quelle biblioteche che sei in grado di avere questo tipo di layout. Il resto si abbassa agli stili CSS giusti. Non so come applichi la tua classe contatore / indice, ma lo farei come mostrato di seguito:

function wpse151589_indexed_post_class( $classes ) {
    global $wp_query;

    // the current_post property value starts counting at 0
    // we are doing + 1 to start from 1
    $index = $wp_query->current_post + 1;

    // if you want the number to always have 3 digits
    // like 001, uncomment the next line
    //$index = sprintf( '%1$03d', $index );

    // results in classes like post-nr-1/001
    $classes[] = 'post-nr-' . $index;

    return $classes;
}
add_filter( 'post_class', 'wpse151589_indexed_post_class' );
.



.

Modifica: Rispondi al commento

Ci sono alcune cose che mi piace notare,

    .
  1. do non Usa query_posts() C'è una ragione per cui anche la pagina del codex secondo:

    .

    Questa funzione non è destinata a essere utilizzata da plugin o temi. Come spiegato in seguito, ci sono migliori, più performanti opzioni per modificare la query principale.

    e successivamente su:

    .

    Per le query post-post generale, utilizzare WP_Query o get_posts .

    E:

    .

    è fortemente consigliato di utilizzare il pre_get_posts Filtra invece e modifica la query principale controllando is_main_query

    Le due fonti più informative ed eccezionali per il Perché si trovano in realtà qui su Wordpress Sviluppo, valgono assolutamente la pena di leggere:

      .
    • Quando dovresti usare wp_query vs query_posts () vs get_posts ()?
    • Quando utilizzare wp_query (), query_posts () e pre_get_posts

    • che post_class() non può essere utilizzato all'esterno Il loop è non true

      C'è anche un Sezione a riguardo nella documentazione. Concessate la pagina Codex per post_class non è la migliore, ma è abbastanza chiaro che la funzione ha due parametri, sono: $classes e $post_id.

      post_class( $classes, $post_id );
      
      .

      che significa:

      .

      Per visualizzare i post esterni al loop o in un loop alternativo, il secondo parametro sulla funzione Post_Class può essere l'ID post. Le lezioni saranno quindi determinate da quel post.

      questo - in aggiunta alle informazioni da 1. - rende molto possibile utilizzare questo per il tuo scopo.

    • the WP_Query Object ha una proprietà denominata $current_post

      .

      $ Current_Post
      (Disponibile durante L'indice Loop ) del post attualmente visualizzato.

      Può essere utilizzato per il tuo scopo, quindi non è necessario reinventare la ruota.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a wordpress.stackexchange
scroll top