Carosello articoli in evidenza

[lucafornaciarifotografie]

Scusate quello che ho messo qui sotto è il codice per creare un carosello di articoli in evidenza.
Però al codice manca una parte che non riesco a fare da solo. Cioè al loop di div avrei la necessità di aggiungere la classe active solo al primo di essi (vedi commento //qui)
Sapete aiutarmi?
Avrei bisogno di una funzione che li numeri (un counter o una key?) e oi dire se è 0 aggiungi classe active altrimenti non aggiungere niente.
Grazie

<?php
/*
 * ### SEZIONE ULTIMA NOTIZIA ###
 * Mostra l'ultimo articolo in evidenza (sticky).
 * Pensata come alternativa o preliminare "a section-last-news".
 *
 */
?>


<div id="sono_un_div">
<section id="novita_evidenza" class="">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
        
  <?php
$args = array(
    'posts_per_page' => 2,
    'posts_ignore' => 1,
    'post__in'  => get_option( 'sticky_posts' ),
    'ignore_sticky_posts' => 1
);
?>

<?php
$the_query = new WP_Query($args);
if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post();

        $img_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large');
        if ($img_url != "") {
            $img_url = $img_url[0];
        }else if(get_theme_mod('active_immagine_evidenza_default')) {    
            $img_url = esc_url(get_theme_mod('immagine_evidenza_default'));
            if($img_url=="") {
                $img_url = esc_url( get_template_directory_uri() ) . "/images/400x220.png";
            }
        }

        $category = get_the_category();
        $posttags = get_the_tags();
        $datapost = get_the_date('j F Y', '', ''); ?>
        
     <div class="carousel-item border border-success">    //qui
        


    <article>
        <div class="novita-foto">
            <?php if($img_url!="") { ?>
            <img src="<?php print $img_url; ?>" alt="<?php the_title(); ?>" />
            <?php } ?>
        </div>
        <div class="novita-testo">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <h2>
                            <a href="<?php the_permalink(); ?>"
                               title="<?php the_title(); ?>">
                                <?php the_title(); ?>
                            </a>
                        </h2>
                        
                        <div class="scheda-icona-small">
                            <svg class="icon"><use xlink:href="<?php echo esc_url( get_template_directory_uri() ); ?>/static/img/ponmetroca.svg#ca-today"></use></svg>
                            <?php echo $datapost; ?>
                        </div>
                        
                        <p><?php echo get_the_excerpt(); ?></p>
                        
                        <?php if (!empty($category)) { ?>
                        <div class="argomenti">
                            <h4><?php echo __('Categories','italiawp2'); ?></h4>
                            <div class="argomenti-sezione-elenco">
                                <?php
                                    foreach ($category as $cat) {
                                        echo '<a href="' . esc_url(get_category_link($cat->term_id)) . '" title="' . esc_html($cat->name) . '" class="badge badge-pill badge-argomenti">' . esc_html($cat->name) . '</a>';
                                    }
                                 ?>
                            </div>
                        </div>
                        <?php } ?>
                        
                        <?php if (!empty($posttags)) { ?>
                        <div class="argomenti">
                            <h4><?php echo __('Topics','italiawp2'); ?></h4>
                            <div class="argomenti-sezione-elenco">
                                <?php
                                    foreach ($posttags as $tag) {
                                        echo '<a href="' . esc_url(get_tag_link($tag)) . '" title="' . esc_html($tag->name) . '" class="badge badge-pill badge-argomenti">' . esc_html($tag->name) . '</a>';
                                    }
                                 ?>
                            </div>
                        </div>
                        <?php } ?>
                        
                        <a href="<?php echo get_permalink( get_option( 'page_for_posts' ) ); ?>"
                           title="<?php echo __('Go to the page','italiawp2'); ?>: <?php echo __('All the news','italiawp2'); ?>" class="tutte">
                            <?php echo __('All the news','italiawp2'); ?>
                            <svg class="icon">
                                <use xlink:href="<?php echo esc_url( get_template_directory_uri() ); ?>/static/img/ponmetroca.svg#ca-arrow_forward"></use>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </article>


</div>
            
<?php
    
    endwhile;  endif;
?>


</div>

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

</section>
</div>
<?php

    wp_reset_postdata();

[alemoppo]

Hai già tentato con :first-child ? ad esempio:

.carousel-inner:first-child
{
  codice da applicare al primo "carousel-item"
}

Poi ci sarebbe la via "rozza", ovvero usare un flag che valga un certo valore solo alla prima occorrenza del ciclo:

<?php
...
$firstElement = true;
while ($the_query->have_posts()) :

?>
<div class="carousel-item border border-success <?= ($firstElement)?'active':'' ?>">
<?php
$firstElement = false;
...

Ciao!

[lucafornaciarifotografie]

No, non puoi farlo con la pseudo classe perché poi la classe active si deve spostare e lo fa il codice di bootstrap. Cmq ho risolto con un counter
<?php


$the_query = new WP_Query($args);

$cont=0;

if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post();
$class = "";
if ($cont==0)$class = "active";
$cont++;

[signorfilm]

Salve,
esiste un plugin che svolga questo compito? Ovvero pubblicare un carosello di articoli in evidenza nella homepage che sia meno intrusivo di quello già in dotazione nella sezione "aspetto". Sono stato consigliato nell'usare WP Content Slide ma non riesco a trovarlo nella sezione "plugin".
Grazie

[frasidipace]

Salve,
esiste un plugin che svolga questo compito? Ovvero pubblicare un carosello di articoli in evidenza nella homepage che sia meno intrusivo di quello già in dotazione nella sezione "aspetto". Sono stato consigliato nell'usare WP Content Slide ma non riesco a trovarlo nella sezione "plugin".
Grazie

Salve,
Può installare il plugin Stackable, oppure Essential Blocks, che aggiungono una serie di blocchi a quelli nativi, tra cui il carosello di articoli.

Saluti

[signorfilm]

Grazie

[signorfilm]

Chiedo scusa, non so se sono io a non riuscire, ma avevo bisogno di inserire lo slide nella homepage: nel corpo, non nel header o nel footer o nella sidebar

[frasidipace]

Chiedo scusa, non so se sono io a non riuscire, ma avevo bisogno di inserire lo slide nella homepage: nel corpo, non nel header o nel footer o nella sidebar

Salve,
i blocchi possono essere inseriti in qualsiasi punto del corpo di qualsiasi pagina.

Saluti