Categorie
Articolo

Aggiungere Link e ID ai titoli nei post

Ogni tanto, qualcuno mi fa una domanda a cui ho dato la risposta in un articolo scritto in passato, allora rispondo mandando il link dell’articolo. Questa può essere una soluzione, ma in alcuni casi questo non è abbastanza, dato che sarebbe più utile un link che punta ad una sezione specifica dell’articolo, segnata da un titolo.

Gli ID in HTML

Per chi non lo sapesse, in HTML è possibile assegnare degli ID ai tag, in questo modo:

<h1 id="sezione-articolo">Sezione articolo</h1>

Facendo questo, ci sarà possibile inviare un link come questo: https://iltuosito.it/articolo#sezione-articolo. Come vedete è presente un # prima dell’ID. Chi clicca su quel link verrà portato direttamente alla sezione corrispondente al tag con l’ID sezione-articolo.

Ovviamente però sarebbe troppo complesso aggiungere manualmente un ID ogni volta che inseriamo un titolo nel nostro articolo, quindi ora vedremo una soluzione automatica al problema.

Aggiungere automaticamente gli ID ai titoli

Questo snippet di codice, che potete copiare nel vostro file functions.php si occuperà di cercare nel contenuto dei vostri post tutti i titoli con tag da <h1> a <h6>, per poi aggiungere ad essi un ID in maniera automatica.

function headings_add_id( $content ) {
  $content = preg_replace_callback( '/(\<h[1-6](.*?))\>(.*)(<\/h[1-6]>)/i', function( $matches ) {
    if ( ! stripos( $matches[0], 'id=' ) ) {
      $matches[0] = $matches[1] . $matches[2] . ' id="' . sanitize_title( $matches[3] ) . '">' . $matches[3] . $matches[4];
    }
    return $matches[0];
  }, $content );

  return $content;
}
add_filter( 'the_content', 'headings_add_id' );

L’ID che viene assegnato ad ogni titolo corrisponde al testo del titolo, tutto in minuscolo e con i trattini al posto degli spazi.

Come vedete, dopo aver aggiunto il codice sopra, ogni titolo avrà un ID.

Aggiungere i Link prima del titolo

Se avete osservato attentamente l’immagine sopra, potreste aver notato che all’interno del tag <h2>, prima del testo del titolo vero e proprio c’è anche un tag <a>. Esso è il link a quella determinata sezione di codice e può rendere molto più semplice copiare quel link per poi condividerlo.

Per aggiungerlo sarà necessaria qualche modifica allo snippet di codice che abbiamo usato già nel passaggio precedente.

function headings_add_id_and_link( $content ) {
  $content = preg_replace_callback( '/(\<h[1-6](.*?))\>(.*)(<\/h[1-6]>)/i', function( $matches ) {
    if ( ! stripos( $matches[0], 'id=' ) ) {
      $titleLink = '<a href="#' . sanitize_title( $matches[3] ) . '" class="heading-link"><i class="glyphicon glyphicon-link"></i></a>';
      $matches[0] = $matches[1] . $matches[2] . ' id="' . sanitize_title( $matches[3] ) . '">' . $titleLink . $matches[3] . $matches[4];
    }
    return $matches[0];
  }, $content );

  return $content;
}
add_filter( 'the_content', 'headings_add_id_and_link' );

Ecco come potrebbe essere il risultato finito, dopo aver aggiunto un po’ di CSS:

Conclusione

In definitiva, questa è una cosa veramente semplice da aggiungere al proprio sito solo con qualche riga di codice, ma il risultato può rivelarsi estremamente utile!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *