Personalizzare lo stile di ogni post della index.php – WordPress


personalizzare-singoli-post-index-php-loop-wordpress

Una delle fasi più importanti e delicate per la realizzazione di un tema wordpress è proprio quando ci troviamo ad affrontare la gestione e dell’index.php, ovvero del loop che regola l’inserimento dei post in essa.

Il codice base che ci viene offerto come default dal sito ufficiale e che tutti consigliano di utilizzare, ha questa forma:

<!-- Start the Loop. -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

	<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
		<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
		<?php the_content(); ?>
	</div>

<?php endwhile; ?>

	<div class="navigation">
		<div class="next-posts"><?php next_posts_link(); ?></div>
		<div class="prev-posts"><?php previous_posts_link(); ?></div>
	</div>

<?php else : ?>

	<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
		<h1>Not Found</h1>
	</div>

<?php endif; ?>
 <!-- Finish the Loop. -->

Ma questo impedisce di personalizzare singolarmente ogni singolo post, difatti tutti questi elementi avranno la stessa grafica e non è possibile modificarli, a meno di cambiare le regole del loop! Vediamo come…

<?php if (have_posts()) : ?>
            <?php $count = 0; ?>
            <?php while (have_posts()) : the_post(); ?>
            <?php $count++; ?>

            <?php if ($count == 1) : ?>

            <div class="item1">

            <!-- Put Your Stuff Here -->

            </div><!-- .item# --> 

            <?php elseif ($count == 2) : ?>      

            <div class="item2">

            <!-- Put Your Stuff Here -->

            </div><!-- .item# --> 

            <?php elseif ($count == 3) : ?>      

            <div class="item3">

            <!-- Put Your Stuff Here -->

            </div><!-- .item# --> 

            <?php elseif ($count == 4) : ?>      

            <div class="item4">

            <!-- Put Your Stuff Here -->

            </div><!-- .item# --> 

            <?php elseif ($count == 5) : ?>      

            <div class="item5">

            <!-- Put Your Stuff Here -->

            </div><!-- .item# -->

<?php else : ?>

<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

Cosa cambia dal modello standard?

Anzitutto vediamo che le regole di if, elseif, sono state particolareggiate con un ($count == 1) e simili, che definisce precisamente il post dell’articolo. A questo punto risulta semplice identificare ogni singolo post e cambiare lo stile al suo interno.

Cosa ne pensate? Avete trovato utile l’articolo?

Commenti: Vedi tutto

Lascia una risposta