Creare Shortcode con Contenuti Dinamici in WordPress

Nel primo articolo abbiamo visto come creare un semplice shortcode che stampa un contenuto statico in una pagina o un post di WordPress. Ora, esploreremo come rendere i nostri shortcode più potenti, aggiungendo contenuti dinamici.

Ma cosa si intende con Shortcode con Contenuti Dinamici?
Un contenuto dinamico è un contenuto che cambia in base a determinate condizioni, come l’autore del post, la data di pubblicazione o lo stato di login dell’utente. Questo tipo di shortcode è particolarmente utile quando vuoi che i tuoi contenuti si adattino automaticamente alla situazione in cui vengono visualizzati.

Contenuto Dinamico: Mostrare Dati dell’Utente

Per iniziare, creerai uno shortcode che visualizza informazioni personalizzate in base al login dell’utente. Se l’utente è loggato, verrà mostrato un messaggio personalizzato con il suo nome utente. Se non è loggato, verrà visualizzato un link per il login.

Ecco come fare:

function myown_html_vars($atts){
  // Recupera gli attributi
  $atts = shortcode_atts(array(
    'title' => 'User info',  // Titolo di default
  ), $atts);
  $title = $atts['title'];

  // Controlla se l'utente è loggato
  $user_id = is_user_logged_in() ? get_current_user_id() : 0;

  // Mostra il contenuto in base allo stato di login
  if ($user_id) {
    $user_info = get_userdata($user_id);
    $output = "
    <div class='myown_html_vars'>
      <h3>$title</h3>
      You're logged in as <b>$user_info->user_login</b>, with ID <b>$user_info->ID</b>
    </div>";
  } else {
    $login_url = wp_login_url();
    $output = "
    <div class='myown_html_vars'>
      <a href='$login_url'>Login</a>
    </div>";
  }
  return $output;
}
add_shortcode('myown_html_vars', 'myown_html_vars');

Spiegazione del Codice

• shortcode_atts(): Permette di definire un attributo personalizzato (title), che possiamo usare per personalizzare il titolo del nostro contenuto.
• is_user_logged_in(): Questa funzione verifica se l’utente è loggato. Se l’utente è loggato, il codice recupera i suoi dati e li visualizza. Altrimenti, mostra un link per il login.

Per usare questo shortcode, inserisci il seguente codice in una pagina o post:

[myown_html_vars title="User Info"]

Come vedi lo shortcode adesso ha una veriabile title, puoi modificarla per personalizzare il contenuto.

WordPress offre delle API eccellenti che possiamo usare in combinazione con gli shortcode. Complichiamo un po’ le cose.

Mostrare i Post Recenti con un Shortcode Dinamico

Ti sarà capitato spesso di voler mostrare gli ultimi post e per farlo avrai usato plugin o editor visuali. Invece di utilizzare plugin complessi per questo scopo, puoi creare uno shortcode che recupera e visualizza i post recenti con lo stile che desideri.

Ecco il codice per creare un shortcode che visualizza una lista di post recenti:

function myown_posts($atts){
  // Impostiamo i valori di default per gli attributi
  $atts = shortcode_atts(array(
    'post_type' => 'post',
    'posts_per_page' => 5,
    'order' => 'DESC',
    'title' => 'Latest Posts',
  ), $atts);

  // Recuperiamo i valori degli attributi
  $postType = $atts['post_type'];
  $postsPerPage = $atts['posts_per_page'];
  $order = $atts['order'];
  $title = $atts['title'];

  // Query per recuperare i post
  $loop = new WP_Query([
    'post_type' => $postType,
    'posts_per_page' => $postsPerPage,
    'order' => $order,
  ]);

  // Creiamo l'output HTML
  $output = "<div class='myown_posts'><h2>$title</h2>";

  // Cicliamo sui post recuperati e li aggiungiamo all'output
  while ( $loop->have_posts() ) : $loop->the_post();
    $postTitle = get_the_title();
    $content = get_the_excerpt();
    $output .= "
      <div class='myown_posts_item'>
        <h3>$postTitle</h3>
        <p>$content</p>
      </div>";
  endwhile;

  $output .= "</div>";

  // Reset della query
  wp_reset_postdata();

  return $output;
}
add_shortcode('myown_posts', 'myown_posts');

Come funziona:

• WP_Query: Utilizziamo questa funzione per creare una query personalizzata che recupera i post recenti.
• shortcode_atts(): Qui possiamo personalizzare alcuni parametri, come il numero di post da visualizzare (posts_per_page), l’ordine (order), e il titolo della sezione (title).
• L’output è una lista di post recenti che possiamo inserire in qualsiasi pagina o post utilizzando lo shortcode [myown_posts].

Per esempio, se inserisci

[myown_posts posts_per_page="10" order="ASC"]

verranno mostrati i 10 post in ordine crescente, dal più recente al più nuovo. Se vuoi invertire l’ordine ti basterà inserire questo:

[myown_posts posts_per_page="10" order="DESC"]

Puoi personalizzare l’html dell’output modificano l’echo nella funzione, e per modificare lo stile ti basterà intervenire nel foglio di stile del tuo tema o del tuo child theme.