Disqus integreren in WordPress

De commentaarinfrastructuur van WordPress is voor velen vrij netjes en bevredigend, maar als je je commenters nodig hebt om verbinding te maken met je website met sociale media-accounts zoals Facebook, Twitter, Google en dergelijke, moet je plug-ins installeren die deze functionaliteit bieden.

Of u kunt gewoon Disqus gebruiken.

Disqus is een reactiesysteem dat bijna elke authenticatie-API biedt, inclusief Facebook, Twitter, Google, Yahoo en OpenID. Bovendien kunt u zich aanmelden met uw Disqus-inloggegevens (waarmee u elk gesprek op elke site waarop u hebt gereageerd) kunt volgen of gewoon commentaar kunt geven met een naam en een e-mailadres.

Er is een eenvoudige manier om Disqus te integreren in WordPress: u registreert gewoon een nieuw Disqus-account en installeert de WordPress-plug-in. Het synchroniseert zelfs met uw eigen WordPress-opmerkingen, zodat u zich geen zorgen hoeft te maken over uw bestaande opmerkingen. En het houdt ze gesynchroniseerd!

Maar als je niet meer hoeft te synchroniseren met de native comments (zoals ik) en als je een optimalisatie-freak bent (zoals ik) die een hekel heeft aan die extra databasequery's die plug-ins maken, of als je niet geeft om je bestaande opmerkingen bij alles en willen beginnen met vers, er is een relatief eenvoudige manier om Disqus te integreren in uw WordPress-blog.

First Things First: Registreren van een nieuw Disqus-account

Het gemakkelijkste onderdeel van deze zelfstudie: Ga gewoon naar Disqus.com en vul dit formulier van één pagina in om een nieuw account te registreren:

(Vergeet niet om uw account te verifiëren door op de verificatielink te klikken die naar uw e-mailadres wordt verzonden!)

De plug-in instellen en bestaande opmerkingen exporteren naar Disqus

Nou, je kent de oefening: download de plug-in, pak het archief uit naar je plugins map (of zoek "Disqus Comment System" op de pagina "Plug-ins installeren" van uw beheerderspaneel en installeer de plug-in vanaf daar) en activeer deze.

De plug-in instellen

Wanneer u de plug-in activeert, zal er een WordPress-melding verschijnen met een link om uw plug-in in te stellen. Daar moet u eerst inloggen met uw Disqus-referenties:

Kies daarna uw website. Gefeliciteerd, je hebt zojuist Disqus geïnstalleerd op je blog!

Klik nu op uw pagina Opmerkingen en vervolgens op de koppeling Geavanceerde opties rechtsboven op die pagina. Er zijn verschillende opties om te controleren:

Disqus korte naam: Dit is de korte naam die u instelt tijdens het registreren bij Disqus. Het moet automatisch voor u worden ingesteld wanneer u zich een minuut geleden hebt aangemeld.
De API-sleutels: Deze worden ook automatisch voor u ingesteld en je zou ze niet moeten veranderen. Als u per ongeluk een van deze twee hebt gewijzigd of verwijderd, bezoekt u uw profielpagina op Disqus.com om de juiste API-sleutels te verkrijgen.
Toepassing Openbare en geheime sleutels: Deze worden gebruikt voor SSO-toepassingen (single sign-on). We behandelen deze tutorial niet, dus we zullen deze doorgeven.
Waar kunt u Disqus-reacties gebruiken op: U kunt ervoor kiezen het reactiesysteem van Disqus alleen weer te geven op uw berichten waarvoor u opmerkingen hebt uitgeschakeld, of u kunt Disqus inschakelen voor elk bericht. Laat de optie zoals is als u Disqus wilt weergeven voor al uw berichten.
JS-uitvoer voor opmerkingen telt: Disqus probeert automatisch de delen "X Comments" van uw thema te wijzigen. Als dit mislukt, moet u deze optie mogelijk inschakelen.
Automatische synchronisatie uitschakelen: Als u geen nieuwe reacties (geplaatst op Disqus) met uw eigen WordPress commentaardatabase wilt synchroniseren, vinkt u deze optie aan en schakelt u deze uit.
Schakel server side rendering uit: Met deze optie kunt u een tekstoverzicht van de opmerkingen van het bericht plaatsen voordat Disqus op de pagina wordt geladen. Google indexeert nu Facebook- en Disqus-opmerkingen (en andere reactiesystemen), maar ik ben niet op de hoogte van andere zoekmachines, dus als u overweegt gevonden te worden in andere zoekmachines met de opmerkingen op uw blog, laat u deze optie uitgeschakeld; anders (wat betekent dat je alleen om Google geeft en / of je niet gevonden hoeft te worden met de woorden in de commentaren van je berichten) vink deze optie aan en schakel server side rendering uit.

Vink een van je berichten aan om te zien hoe Disqus zichzelf laadt via het native reactiesysteem. Je bent goed om nu te gaan!

Existing van bestaande opmerkingen naar Disqus

Onder de opties die we zojuist hebben onderzocht, is er de sectie 'Importeren / exporteren' waar we onze opmerkingen kunnen importeren en exporteren:

Het exportproces bestaat uit het klikken op die knop "Exporteren" en wachten tot Disqus klaar is met het "importeren" van uw opmerkingen in zijn database:

Het kan enkele uren duren voordat het proces is voltooid. Mijn eigen blog had 20.000 reacties toen ik naar Disqus overschakelde en het duurde letterlijk uren! Maar tijdens het voorbereiden van deze zelfstudie duurde het 2 seconden om 2 opmerkingen te exporteren (voor mijn voorbeeldblog):

Okee; nu zijn we klaar met de plug-in - we kunnen er nu gewoon vanaf! :)

Deactiveer de plug-in als u de code in onze volgende stap gaat gebruiken. Ik geef er de voorkeur aan om het af en toe opnieuw te activeren om een back-up te maken van mijn Disqus-opmerkingen in mijn database (door te klikken op "Opmerkingen synchroniseren" in het gedeelte "Importeren / exporteren" en enkele minuten te wachten), maar als je denkt dat je nooit gaat om de plug-in opnieuw te gebruiken en de opties die in uw database zijn opgeslagen niet nodig hebben, kunt u deze ook verwijderen met de knop "Verwijderen".

Disqus integreren in WordPress zonder een plug-in

Zoals we eerder hebben besproken, helpt het doen van dingen zonder plug-ins ons om onze website te optimaliseren - een enkele query is een enkele query, goed?

Hoe dan ook, hier zijn de functies die we gaan gebruiken - zoals altijd, voeg deze toe aan je thema's functions.php het dossier:

Disqus-opmerkingen insluiten

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

De functie is vrij eenvoudig: gebruik de code waar je maar wilt in je single.php en page.php bestanden om Disqus-opmerkingen voor die pagina in te sluiten en weer te geven. U kunt zoeken naar de comments_template (); functie en vervang deze door onze nieuwe functie, omdat we de native commenting-functies niet meer zullen gebruiken.

Laten we de code een beetje bekijken:

Laad de JS: Zoals je weet, kunnen we niets doen als we de JS niet laden! :)
Plaats de div om de opmerkingen in te laden: We galmen omdat Disqus dit nodig heeft div met deze ID om de reacties in te laden.
JS-configuratievariabelen van Disqus: We moeten deze variabelen instellen om de pagina herkenbaar te maken voor Disqus. We hoeven niet echt in te stellen disqus_title en disqus_url sinds Disqus ze kan ophalen van de URL van de pagina en </code> tag, maar als iemand uw site bezoekt met een adres met bijvoorbeeld, <code>...? Utm_source = feedburner</code>, de URL is anders dan het origineel en dat kan problemen veroorzaken.</li> </ol> <blockquote> <p><strong>Tip:</strong> Probeer te laden <code>yourdisqusshortname.disqus.com/embed.js</code> in uw browser - u wordt doorgestuurd naar het CDN van Disqus. Kopieer die nieuwe link en gebruik deze in de <code>wp_enqueue_script</code> functie om de code een beetje verder te optimaliseren - een halve seconde is een halve seconde, toch??</p> </blockquote> <h3>Het aantal reacties ophalen</h3> <pre> function disqus_count ($ disqus_shortname) wp_enqueue_script ('disqus_count', 'http: //'.$disqus_shortname.'.disqus.com/count.js'); echo ''; </pre> <p>We kunnen de code gebruiken (<code><?php disqus_count('myexampleblog'); ?></code>) overal in onze themabestanden <em>zolang het in The Loop is</em>. Helaas kan Disqus de reacties alleen tellen met een link die heeft <code>#disqus_thread</code> op het einde - help me met uw opmerkingen als u een andere manier vindt om het aantal reacties te laten zien.</p> <blockquote> <p><strong>Tip:</strong> U kunt de uitvoertekst bewerken door te bezoeken <code>yourdisqusshortname.disqus.com/admin/settings/appearance/</code> en het wijzigen van de vakken "Reactietelling koppelen" en "Reactietelling koppelen". U kunt zelfs HTML gebruiken!</p> </blockquote> <h2>Conclusie</h2> <p>Disqus is opgericht in 2007 en heeft wereldwijd meer dan 75 miljoen gebruikers. Het mist misschien een aantal configuratiefuncties, maar het is een van de beste reactiesystemen die er zijn. Het hoofdidee van dit artikel was om je te laten zien hoe je je bij Disqus registreerde, het op je WordPress-blog installeerde, je opmerkingen migreerde en verschillende regels code gebruikte om de reacties te tonen. Voor een verdere beoordeling van Disqus, kunt u verwijzen naar een ander artikel over Wptuts + en het beter leren kennen.</p> <p>En zoals altijd bent u meer dan welkom om uw ideeën en code die relevant zijn voor dit onderwerp te delen met uw opmerkingen!</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">Code</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">Google Play-services integreren op 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">CloudFlare integreren met 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="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur. </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="Zoeken..."> <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>