Integrazione di Disqus in WordPress

L'infrastruttura di commento di WordPress è abbastanza bella e soddisfacente per molti, ma se hai bisogno che i tuoi commentatori si connettano al tuo sito web con account di social media come Facebook, Twitter, Google e simili, devi installare plugin che forniscano questa funzionalità.

O potresti semplicemente usare Disqus.

Disqus è un sistema di commenti che fornisce quasi tutte le API di autenticazione tra cui Facebook, Twitter, Google, Yahoo e OpenID. Inoltre, puoi accedere con le tue credenziali di Disqus (che ti permettono di seguire ogni conversazione su ogni sito che hai commentato) o semplicemente commentare con un nome e un indirizzo e-mail.

C'è un modo semplice per integrare Disqus in WordPress: basta registrare un nuovo account Disqus e installare il plugin per WordPress. Si sincronizza anche con i tuoi commenti nativi di WordPress, quindi non devi preoccuparti dei tuoi commenti esistenti. E li mantiene sincronizzati!

Ma se non hai più bisogno di sincronizzarti con i commenti nativi (come me) e se sei un maniaco dell'ottimizzazione (come me) che odia quelle aggiunte ai plugin delle query di database, o se non ti interessa dei tuoi commenti esistenti a tutto e voglio ricominciare da capo, c'è un modo relativamente semplice per integrare Disqus nel tuo blog WordPress.

Prime cose in primo luogo: registrazione di un nuovo account Disqus

La parte più semplice di questo tutorial: basta andare su Disqus.com e compilare questo modulo a pagina singola per registrare un nuovo account:

(Non dimenticare di verificare il tuo account facendo clic sul link di verifica che verrà inviato al tuo indirizzo e-mail!)

Impostazione del plugin ed esportazione di commenti esistenti su Disqus

Bene, conosci il trapano: scarica il plugin, estrai l'archivio sul tuo plugins cartella (o cerca "Disqus Comment System" dalla pagina "Installa plugin" del tuo pannello di amministrazione e installa il plugin da lì) e attivalo.

Impostazione del plugin

Quando attivi il plugin, ci sarà un avviso WordPress con un link per configurare il tuo plugin. Lì, devi prima accedere con le tue credenziali di Disqus:

Dopo, scegli il tuo sito web. Complimenti, hai appena installato Disqus sul tuo blog!

Ora, fai clic sulla pagina Commenti e poi sul link Opzioni avanzate in alto a destra della pagina. Ci sono diverse opzioni da verificare:

Nome breve della Disqus: Questo è il nome breve che hai impostato durante la registrazione su Disqus. Dovrebbe essere impostato automaticamente per te quando hai effettuato l'accesso un minuto fa.
Le chiavi API: Anche questi sono impostati automaticamente per te e non dovresti cambiarli. Se hai accidentalmente cambiato o cancellato uno di questi due, visita la pagina del tuo profilo su Disqus.com per ottenere le chiavi API corrette.
Applicazione pubblica e chiavi segrete: Questi sono utilizzati per le applicazioni SSO (single sign-on). Non stiamo trattando in questo tutorial, quindi li passeremo.
Dove usare i commenti di Disqus su: Puoi scegliere di mostrare il sistema di commenti di Disqus solo sui tuoi post che hai disattivato i commenti, oppure puoi abilitare Disqus per ogni post. Lascia l'opzione così com'è se vuoi mostrare Disqus su tutti i tuoi post.
Output JS per i conteggi dei commenti: Disqus tenta automaticamente di modificare le parti "X Comments" del tuo tema. Se fallisce, potrebbe essere necessario abilitare questa opzione.
Disabilita la sincronizzazione automatica: Se non si desidera sincronizzare nuovi commenti (pubblicati su Disqus) con il database dei commenti nativi di WordPress, selezionare questa opzione e disabilitarla.
Disabilita il rendering lato server: Questa opzione ti consente di inserire un elenco di testo dei commenti del post prima che Disqus venga caricato nella pagina. Google ora indicizza i commenti di Facebook e di Disqus (e altri sistemi di commenti del genere) ma non conosco altri motori di ricerca, quindi se consideri di essere trovato da altri motori di ricerca con i commenti sul tuo blog, lascia questa opzione deselezionata; altrimenti (il che significa che ti interessa solo di Google e / o non hai bisogno di essere trovato con le parole nei commenti dei tuoi post) controlla questa opzione e disabilita il rendering lato server.

Controlla uno dei tuoi post per vedere come Disqus si carica sul sistema di commenti nativi. Sei a posto ora!

Esportazione di commenti esistenti su Disqus

Sotto le opzioni che abbiamo esaminato proprio ora, c'è la sezione "Import / Export" dove possiamo, sai, importare ed esportare i nostri commenti:

Il processo di esportazione consiste nel fare clic sul pulsante "Esporta" e attendere che Disqus finisca di "importare" i commenti nel suo database:

Potrebbero essere necessarie alcune ore per completare il processo - il mio blog ha avuto 20.000 commenti quando sono passato a Disqus e ci sono volute ore! Ma mentre preparavo questo tutorial, ci sono voluti 2 secondi per esportare 2 commenti (per il mio blog di esempio):

Tutto ok; ora abbiamo finito con il plugin - ora possiamo sbarazzarcene! :)

Disattiva il plugin, se intendi utilizzare il codice nel prossimo passaggio. Preferisco riattivarlo di tanto in tanto per eseguire il backup dei miei commenti su Disqus nel mio database (facendo clic su "Sincronizza commenti" nella sezione "Importa / Esporta" e aspettando diversi minuti) ma se non pensi di andare mai per utilizzare nuovamente il plug-in e non sono necessarie le opzioni salvate nel database, è anche possibile disinstallarlo con il pulsante "Disinstalla".

Integrazione Disqus in WordPress senza plugin

Come abbiamo discusso in precedenza, fare cose senza plugin ci aiuta a ottimizzare il nostro sito Web - una singola query è una singola query, giusto?

Ad ogni modo, ecco le funzioni che utilizzeremo - come sempre, aggiungili all'interno del tuo tema functions.php file:

Incorporare i commenti di Disqus

 function disqus_embed ($ disqus_shortname) global $ post; wp_enqueue_script ( 'disqus_embed', 'http: //'.$disqus_shortname.'.disqus.com/embed.js'); eco '
 ';

La funzione è piuttosto semplice: usa il codice ovunque tu voglia nel tuo single.php e page.php file da incorporare e mostrare i commenti di Disqus per quella pagina. Puoi cercare il comments_template (); funzione e sostituirlo con la nostra nuova funzione, dal momento che non useremo più le funzioni di commento nativo.

Esaminiamo un po 'il codice:

Carica il JS: Come sai, non possiamo fare nulla se non cariciamo il JS! :)
Posiziona il div per caricare i commenti in: Stiamo facendo eco perché Disqus ha bisogno di questo div con questo ID per caricare i commenti in.
Variabili di configurazione JS di Disqus: Dobbiamo impostare queste variabili per rendere la pagina riconoscibile per Disqus. Non dobbiamo davvero impostare disqus_title e disqus_url poiché Disqus può recuperarli dall'URL della pagina e </code> tag ma se qualcuno visita il tuo sito con un indirizzo che contiene, ad esempio, <code>...? Utm_source = feedburner</code>, l'URL sarà diverso dall'originale e ciò potrebbe causare problemi.</li> </ol> <blockquote> <p><strong>Mancia:</strong> Prova a caricare <code>yourdisqusshortname.disqus.com/embed.js</code> nel tuo browser - verrai reindirizzato a Disqus 'CDN. Copia quel nuovo link e usalo nel <code>wp_enqueue_script</code> funzione per ottimizzare ulteriormente il codice - mezzo secondo è mezzo secondo, a destra?</p> </blockquote> <h3>Recupero del conteggio commenti</h3> <pre> function disqus_count ($ disqus_shortname) wp_enqueue_script ('disqus_count', 'http: //'.$disqus_shortname.'.disqus.com/count.js'); eco ''; </pre> <p>Possiamo usare il codice (<code><?php disqus_count('myexampleblog'); ?></code>) ovunque nei nostri file di tema <em>finché è in The Loop</em>. Purtroppo Disqus può contare solo i commenti con un link che ha <code>#disqus_thread</code> alla fine - aiutami con i tuoi commenti se trovi un modo diverso per mostrare il conteggio dei commenti.</p> <blockquote> <p><strong>Mancia:</strong> È possibile modificare il testo di output visitando <code>yourdisqusshortname.disqus.com/admin/settings/appearance/</code> e modifica delle caselle "Link di conteggio commenti" e "Link di conteggio reazioni". Puoi persino usare l'HTML!</p> </blockquote> <h2>Conclusione</h2> <p>Disqus è stata fondata nel 2007 e conta oltre 75 milioni di utenti in tutto il mondo. Forse manca di alcune funzionalità di configurazione, ma è uno dei più grandi sistemi di commenti là fuori. L'idea principale di questo articolo era mostrarti come registrarti su Disqus, installarlo sul tuo blog WordPress, migrare i tuoi commenti e usare diverse linee di codice per mostrare i commenti. Per un'ulteriore revisione di Disqus, puoi fare riferimento a un altro articolo su Wptuts + e conoscerlo meglio.</p> <p>E come sempre, sei più che benvenuto a condividere le tue idee e il codice relativo a questo argomento sui tuoi commenti!</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/code">Codice</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/code/integrating-google-play-services-on-android.html">Integrazione di Google Play Services su Android</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_14/integrating-google-play-services-on-android_7.png');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/code/integrating-cloudflare-with-wordpress.html">Integrazione CloudFlare con WordPress</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_13/integrating-cloudflare-with-wordpress.gif');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">it.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da zero. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Ricerca..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>