Lezione 10 - Sezione News in Homepage

Ora che abbiamo visto come funziona il Loop di wordpress, proviamo ad inserirlo all'interno della nostra Homepage.

L'obiettivo è quello di creare una sezione "News" al di sotto della sezione "Chi siamo".

Riapriamo il nostro file index.php ma questa volta invece di inserire l'intero codice all'interno di questo file, per mantenere il tutto più ordinato utilizziamo la funzione get_template_part().

</section><!-- Fine sessione Chi siamo ---->
  <?php get_template_part('news-section'); ?>
</body>
</html>

La funzione get_template_part() serve, come si può intuire dal nome, a includere altre parti di template.

Per fare in modo che venga inclusa la nostra news-section creiamo all'interno della cartella del nostro tema un nuovo file che si chiamerà news-section.php. All'interno del nuovo file inseriamo lo stesso codice che abbiamo visto nella scorsa lezione con delle piccole aggiunte:

<section id="news" class="section-home">
    <div class="container">
        <h2 class="text-center">Ultime News</h2>
         <?php if ( have_posts() ) :
                   while ( have_posts() ) : the_post(); ?>
                  <div class="col-md-4">
                      <div class="container-news">
                        <a href="<?php the_permalink(); ?>">
                            <h2 class="text-center"><?php the_title();?></h2>
                         
                           <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
                           <img class="image-news" src="<?php echo $url; ?>" alt="<?php the_title(); ?>"/>
                        </a>
                      </div>
                   </div>
                   <?php endwhile; ?>
        <?php endif; ?>
    </div>
</section>

Tralsciando la parte di markup utilizzata per impostare la nostra sezione news, andiamo a vedere le nuove funzioni inserite:

• the_permalink() questa funzione all'interno del Loop restituisce l'url dell'articolo.
• get_post_thumbnail_id($post->ID) restituisce l'ID dell'immagine in evidenza che carichiamo da pannello, richiede come argomento l'id del post a cui ci riferiamo.
• wp_get_attachment_url() restituisce l url dell'immagine, richiede come argomento il suo id.

Con questo codice andiamo a stampare tutti gli articoli pubblicati in ordine per data. Nella prossima lezione vedremo come modificare la query del loop e come stampare solamente gli ultimi 3 articoli della categoria news.

Infine procediamo con le sistemazioni grafiche da css.

.image-news { width:90%;
              margin-left:5%;
              border-radius: 5px;
              opacity: 1;
              transition-property: opacity;
              transition-duration: 1s;}
              
.container-news { border: 1px solid #ECECEC;
                  border-radius: 10px;
                  padding-bottom: 20px;
                  border-radius: 10px;
                  background-color: #ffffff;
                  }
                  
a, a:link, a:visited, a:focus { color:#414141;
                                text-decoration: none;}
                                
#news {  background-color:#E3E0CD;}

.container-news:hover img {opacity: 0.75;}

Se avete fatto tutto nel modo corretto dovreste trovarvi con un'homepage simile a questa:

Il numero di articoli presenti in homepage saranno pari al numero di articoli pubblicati (con un massimo di 10, valore impostato di default).

Se avete dubbi o domande commentate pure qui sotto!