Usando la muratura - Come rendere ogni xth Post Thumbnail Image copre più colonne?
-
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 );
. 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,
- .
-
do non Usa
query_posts()
C'è una ragione per cui anche la pagina del codex secondo: - 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 -
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.
.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
oget_posts
.
E:
.è
fortemente consigliato di utilizzare il pre_get_posts
Filtra invece e modifica la query principale controllandois_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:
- .
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.