Riporto un post di wpbeginner che di certo può essere molto utile: di seguito vedremo come inserire un segnale, che evidenzi ai visitatori che in passato hanno navigato sul nostro sito o blog la presenza di nuovi articoli da leggere.
Inserire questo genere di segnale può aiutare ad aumentare il numero di pagine viste, ossia di articoli letti, e dunque il tempo di permanenza, riducendo ovviamente la frequenza di rimbalzo. L’utente, grazie ad un semplice “bollino” potrà navigare velocemente tra i contenuti non ancora letti e rimediare.
Come spesso accade con WordPress, ci sono due diverse strade per arrivare allo stesso obiettivo: utilizzare o non utilizzare un plugin. Rimanendo fedele al post originale, ho deciso di elencare entrami i metodi, tuttavia consiglio sempre di utilizzare solo i plugin indispensabili e se possibile fare tutto il resto senza. Sta a te decidere! ;)
Evidenziare i nuovi post con un Plugin
Chiaramente i plugin hanno un pregio fondamentale e condiviso: rendono le modifiche e le implementazioni molto rapide. Anche in questo caso è così, grazie ad un plugin gratuito che trovi sul repository ufficiale di WordPress: Mark New Posts.
Una volta installato il plugin dovrai attivarlo come fai solitamente con tutti i plugin. Una volta attivato, potrai andare dal menu a sinistra del backend di WordPress alla voce Impostazioni, facendo click su Mark New Posts.
Da questa pagina potrai settare le tue preferenze per ottenere il risultato desiderato. La prima cosa da impostare è il posizionamento del segnale: puoi scegliere se mostrarlo prima del titolo, dopo oppure sia prima che dopo.
La seconda cosa da impostare è il segnale stesso: puoi scegliere tra diversi marker come ad esempio il tondo, una scritta oppure una bandiera o un’immagine personalizzata.
Infine dovrai impostare la regola che il plugin deve seguire per smettere di mostrare il segnale: puoi decidere di eliminarla solo dopo che l’utente ha aperto il post, oppure far si che basti la sola visualizzazione perché scompaia alla prossima visita.
Dopo aver salvato le impostazioni il tutto funzionerà già e potrai apprezzare la novità direttamente sul tuo sito.
Evidenziare i nuovi post senza aggiungere Plugin
La seconda opzione è di certo un po’ più lunga e macchinosa, ma fa si che la tua installazione di WordPress non si appesantisca con un plugin in più.
Per aggiungere il segnale per i visitatori di ritorno che li avvisa dei nuovi post non letti, bisogna inserire uno snippet di codice all’interno del file functions.php del proprio tema, preferibilmente child, o all’interno del plugin per inserire funzioni e personalizzazioni in WordPress.
Il codice è il seguente:
function wpb_lastvisit_the_title ( $title, $id ) { if ( !in_the_loop() || is_singular() || get_post_type( $id ) == 'page' ) return $title; // if no cookie then just return the title if ( !isset($_COOKIE['lastvisit']) || $_COOKIE['lastvisit'] == '' ) return $title; $lastvisit = $_COOKIE['lastvisit']; $publish_date = get_post_time( 'U', true, $id ); if ($publish_date > $lastvisit) $title .= '<span class="new-article">New</span>'; return $title; } add_filter( 'the_title', 'wpb_lastvisit_the_title', 10, 2); // Set the lastvisit cookie function wpb_lastvisit_set_cookie() { if ( is_admin() ) return; $current = current_time( 'timestamp', 1); setcookie( 'lastvisit', $current, time()+60+60*24*7, COOKIEPATH, COOKIE_DOMAIN ); } add_action( 'init', 'wpb_lastvisit_set_cookie' );
Quello che viene fatto da questa funzione è molto semplice: controlla se tra i cookie c’è quello relativo all’ultima visita: se c’è aggiunge la scritta “New” accanto agli articoli pubblicati dopo l’ultima visita, se invece non c’è ne installa uno, che sarà utile s l’utente tornerà.
Come puoi notare la scritta è all’interno di uno <span> con classe new-article: questo ci consente di creare uno stile personalizzato richiamando la classe via CSS.
Lo stile proposto nell’esempio qui sopra si ottiene con il seguente CSS, che chiaramente può essere modificato secondo le esigenze:
.new-article { background: #feffdd; padding: 3px; border: 1px solid #eeefd2; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-left:5px; font-size: small; font-weight: bold; }Se hai domande o considerazioni non esitare e commenta qui sotto, come sempre riceverai risposta nel minor tempo possibile.