Tempo fa un utente di WordPress ha chiesto all'autore di un articolo: come faccio ad inserire i bottoni di condivisione social prima del contenuto dei post? Per rispondere a questa domanda vedremo insieme un semplice esempio che mostra come inserire un bottone di Twitter prima del contenuto dei post.
Come funziona the_content?
In WordPress the_content ha una duplice valenza: come funzione, restituisce tutto quello che è stato inserito nel contenuto del post durante la sua creazione (nel database corrisponde al campo post_content), come hook, rappresenta un'azione da eseguire su tale contenuto.
In pratica, the_content è una stringa che contiene marcatura HTML. Quando la manipoliamo, non dobbiamo fare altro che ricordarci alcune regole base per la manipolazione delle stringhe in PHP.
Nel nostro caso utilizzeremo la concatenazione di stringhe.
L'esempio
Dopo aver preso dal sito di Twitter il codice HTML, dobbiamo assemblarlo tenendo conto di due aspetti:
- Il titolo di ciascun post.
- L'URL abbreviato di ciascun post.
Nel nostro bottone dovremo quindi specificare:
data-textdata-url
Inoltre dovremo anche specificare la lingua e il nostro nome utente tramite i parametri data-lang e data-via. Ecco l'esempio (da inserire nel file functions.php):
function insert_tweet_button($content) {
if(!is_feed()) {
global $post;
$id = $post->ID;
$link = wp_get_shortlink($id);
$title = get_the_title($id);
$button = '<div class="tweet-btn"><a href="https://twitter.com/share" class="twitter-share-button" data-text="' . $title . '" data-url="' . $link . '" data-lang="it" data-via="gabromanato" data-count="horizontal">Tweet</a>';
$button .= '<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>';
return $button . $content;
}
}
add_action('the_content', 'insert_tweet_button');
Abbiamo detto che the_content restituisce una stringa, quindi la nostra funzione dovrà accettare come parametro tale stringa. A questo punto dobbiamo verificare che stiamo operando sui post del sito e non sul contenuto dei feed. Quindi accediamo all'oggetto $post e ne estraiamo l'ID corrente, che useremo per ottenere lo shortlink del post e il suo titolo.
La nostra funzione restituirà una nuova stringa in cui il bottone di Twitter viene prima del contenuto del post. Il risultato è mostrato nell'immagine che segue.
