Wil je balken en grafieken toevoegen in WordPress of wil je weten hoe je een grafiekvisualisatietool maakt in WordPress?

Visuele hulpmiddelen zoals grafieken, balken en cirkeldiagrammen zijn een ideale manier om gegevens beter te presenteren in uw berichten / pagina's.

In deze zelfstudie laten we u zien hoe u balken en afbeeldingen maakt met de plug-in Visualizer WordPress Charts WordPress.

Maar eerder, als je WordPress nog nooit hebt geïnstalleerd, ontdek je Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog 

Ga dan terug naar waarom we hier zijn.

Het probleem met balken en afbeeldingen op WordPress

Er is veel van WordPress plugins om balken en grafieken aan uw inhoud toe te voegen. De meeste gebruikers vinden deze tools echter moeilijk te gebruiken.

Ontdek onze 8 WordPress plug-ins om diagrammen op uw website te maken

Sommige van deze plug-ins vereisen zelfs dat gebruikers gegevens toevoegen in een shortcodes in zeer gecompliceerde formaten om te onthouden.

In plaats van deze plug-ins te gebruiken, maken veel gebruikers afbeeldingen in hun desktop-apps en converteren ze naar afbeeldingen.

Het kan werken als u niet van plan bent iets te veranderen. Een afbeelding kan echter geen interactieve grafiek vervangen waarin de payload-gegevens verschijnen wanneer de gebruiker de muis over een bepaalde sectie beweegt.

Met het gebruik van afbeeldingen kunt u:

  • Voeg gegevens toe vanuit een gegevensbron op uw computer of op internet.
  • Vul grafieken, grafieken en balken met uw gegevens.
  • Maak geweldige, interactieve, kleurrijke, responsieve afbeeldingen.
  • Wat nog belangrijker is, moet u de mogelijkheid bieden om de gegevens bij te werken wanneer u maar wilt.

Dat gezegd hebbende, laten we eens kijken hoe Visualizer WordPress-grafieken je daar helpen bereiken.

Hoe afbeeldingen te maken met Visualizer WordPress-grafieken

Het eerste dat u hoeft te doen, is de plug-in installeren en activeren Visualizer WordPress Charts. Voor meer informatie, zie onze gids stap voor stap stap voor het installeren van een WordPress-plug-in.

Hoewel de gratis versie niet alles doet wat je nodig hebt, bieden de ontwikkelaars van deze plug-in ook aan Visualizer WordPress Pro-grafieken die extra functies toevoegt, zoals het toevoegen van gegevens met behulp van een spreadsheet als interface en het importeren van gegevens uit andere bronnen.

Het kost 79 $ voor een enkele licentie met een jaar klantenondersteuning en updates regelmatig

Let op: Deze handleiding is gebaseerd op de gratis versie van de plugin.

Na activering moet u de pagina "bezoeken Media> Visualizer-bibliotheek ". Hier worden alle afbeeldingen weergegeven.

hoe u een diagramvisualisatietool maakt

U moet op de knop «klikken Toevoegen Om uw eerste grafiek toe te voegen.

Hierdoor verschijnt een venster op het scherm. U ziet verschillende soorten grafieken die beschikbaar zijn. Selecteer gewoon het type diagram dat u wilt toevoegen en klik op de volgende knop om door te gaan.

Ontdek ook Hoe interactieve kaarten toe te voegen aan uw WordPress-website

lijst met grafieken voor WordPress

De volgende stap is om uw gegevensbron in CSV-indeling toe te voegen. Als u uw gegevens heeft opgeslagen met een Excel-spreadsheet, Google-spreadsheet of een ander programma, kunt u deze gewoon exporteren als een CSV-bestand.

Ontdek ook Hoe de plugin WP Ultimate CSV Import gebruiken om gegevens te importeren op WordPress

U kunt uw CSV-bestand downloaden of opslaan op uw computer en het vervolgens gebruiken om een ​​grafiek te genereren.

een WordPress-afbeelding genereren

Uw CSV-bestand moet de kolomnamen in de eerste rij en het gegevenstype in de tweede rij hebben. De plug-in ondersteunt gegevenstypen: string, nummer, boolean, datum, tijd, datum en tijd van de dag.

Bekijk dit voorbeeldbestand, beschikbaar op Google Spreadsheets.

Leer door dit artikel te ontdekken Gebruikersgegevens exporteren naar een CSV-bestand

voorbeeld van Google Sheet-gegevens

Als u een CSV-bestand maakt met een teksteditor, bekijk dan dit voorbeeld CSV-bestand:

Browser, bezoekersreeks, Chrome-nummer, 7894 Firefox, 6754 Internet Explorer, 4230 Safari, 2106 Opera, 627

Een grafiek aan WordPress toevoegen vanuit Google Drive Spreadsheet

Als u uw gegevens heeft opgeslagen als een spreadsheet op Google Drive, kunt u deze aan uw diagram toevoegen zonder ze te exporteren.

Wij adviseren u ook om onze te ontdekken 5 WordPress plug-ins om Google Drive te integreren op uw website

Open uw gegevensbestand in Google Spreadsheets en klik op ' Bestand> Publiceren voor web .

publiceer voor het web google speadsheet

Dit zal een venster openen waarin u moet kiezen hoe u dit document wilt publiceren. U moet " Door komma's gescheiden waarden (.csv) In het vervolgkeuzemenu.

Exportmodus voor WordPress-gegevens

Vergeet niet op de knop «te klikken publiceren Om toegang te krijgen tot de gepubliceerde versie van uw gegevens.

U ziet de openbare URL voor uw spreadsheet als een CSV-bestand. U moet deze URL kopiëren en teruggaan naar de Visualizer-plug-in-tabel.

Klik op de knop Van het web En voer de URL van uw Google Spreadsheet csv-bestand in.

google link naar de stylesheet

Zodra u de URL invoert, zoekt de plug-in naar uw CSV-bestand en geeft een real-time voorbeeld van uw diagram weer.

U kunt op de knop Tabel maken klikken om uw grafiek op te slaan.

Een afbeelding toevoegen aan een artikel of pagina

Om een ​​tabel of grafiek toe te voegen aan uw artikelen en WordPress-pagina's, kunt u dit net zo gemakkelijk doen als u afbeeldingen aan artikelen / pagina's toevoegt.

Cookies en WordPress: maken, op te halen en te verwijderen ontdek ze door op deze link te klikken

Maak een nieuwe post / pagina of bewerk een bestaande waar je de tabel wilt toevoegen. Klik in het bewerkingsscherm op de " Voeg een medium toe Boven de visuele editor.

voeg een nieuw WordPress media toe

Dit zal een pop-upvenster openen met uw media. U moet op het tabblad "Visualisaties" in de linkerkolom klikken. U vindt alle afbeeldingen die u op deze website heeft gemaakt en opgeslagen.

visualisatie WordPress media voorbeeld

Klik op het onderstaande invoegpictogram om het toe te voegen. De pop-up verdwijnt en je ziet dat je tabel aan je WordPress-bericht is toegevoegd als een shortcodes.

Voeg kaart toe als een tafel

U kunt het nu opslaan op uw WordPress-artikelen / pagina's en uw website bezoeken om te zien hoe het allemaal werkt.

Bewerk Visualizer plugin graphics op WordPress

U kunt uw grafieken op elk gewenst moment bewerken en bewerken. Bezoek gewoon Media> Visualizer-bibliotheek ". Vanaf deze pagina kunt u een tabel klonen, verwijderen of de visuele instellingen wijzigen.

wijziging van WordPess-afbeeldingen

Het bijwerken van gegevens uit een bestaand diagram zonder de tabel te wijzigen is vrij eenvoudig met Visualizer.

Als u gegevens uit een Google-spreadsheet heeft toegevoegd, hoeft u alleen maar naar de volgende locatie te navigeren om de gegevens bij te werken: " Bestand> Publiceren voor het web En publiceer uw spreadsheet opnieuw. Uw wijzigingen worden automatisch bijgewerkt.

Wij nodigen u ook uit om onze te raadplegen 10 WordPress plugins naar Google Maps insluiten op uw blog

Aan de andere kant, als u een CSV-bestand heeft gedownload, moet u het CSV-bestand op uw computer bijwerken. Als u klaar bent, selecteert u het diagram dat u wilt bijwerken en klikt u op de link tabel bewerken.

In de sectie Uploaden U hoeft alleen uw nieuwe CSV-bestand te uploaden. De wijzigingen worden automatisch bijgewerkt.

Een diagram aan een zijbalk toevoegen

Visualizer gebruikt shortcodes om afbeeldingen in te voegen. Ga gewoon naar " Media> Visualizer-bibliotheek U ziet een shortcode onder elk van uw grafieken.

Kopieer de shortcode en ga naar " Uiterlijk> Widgets ". Sleep een tekstwidget naar uw zijbalk en plak de shortcode in de widget.

Ontdek ook enkele premium WordPress-plug-ins  

U kunt andere gebruiken WordPress plugins om een ​​moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. WordPress PDO Crud

WordPress PDO Crud is een krachtige plug-in waarmee u formulieren kunt maken om frontend-gegevenstoevoegings-, wijzigings- en verwijderingsbewerkingen uit te voeren.

Wordpress pdo crud wordpress plug-ins tabellen invoegen grafische website blogformulier

Het biedt een prachtige tabel waaraan u uw gegevens op verschillende manieren kunt toevoegen, die gemakkelijk door elke webmaster kunnen worden gedefinieerd.

De belangrijkste kenmerken zijn: ayntaxe heel eenvoudig, de sin meerdere verschijningen, de gautomatisch genereren van invoeg- of updateformulieren uit databasetabellen,weergave van bepaalde velden, de pondersteunt velen WordPress plugins, dexportatie van gegevens in pdf, xml, csv en excel, dinaar personalisatie-instellingen, demeertalige upport, de rzoeken op bepaalde velden, omeerdere verwijderingsmogelijkheden, e.

Downloaden demonstratie | web hosting

2. Aanbevolen audio

Aanbevolen audio is geweldig WordPress Plugin die de beste HTML5-functies heeft geërfd, zoals de naam al doet vermoeden. Met deze plug-in kunt u het volume van de geselecteerde audio voor elk bericht en elke pagina aanpassen. 

Aanbevolen audio premium WordPress-plug-ins voegen een audiospeler toe

Als functies zullen we onder andere hebben: het nummer op de voorpagina, een audiospeler die HTML5 volledig ondersteunt, ondersteuning voor mobiele apparaten zoals: iPhone, iPad, Android en WP7, afspelen van audiobestanden opgeslagen in de WordPress mediabibliotheek , ondersteuning voor oude browsers, ondersteuning voor audioformaten: mp3, wav, ogg, enz ..., meertalig, en vele anderen ...

Downloaden | demonstratie | web hosting

3. ChimpMate Pro

Chimpmaat is de WordPress Plugin van MailChimp Pop-up, waarmee u uw lezers kunt omzetten in abonnees. Het is ontworpen om uw e-maillijst te laten groeien zonder bezoekers te irriteren met vervelende pop-ups.

Chimpmaat pro

Het is volledig aanpasbaar en u beheerst wanneer en waar pop-ups worden weergegeven. Zijn andere kenmerken zijn: hij fHet werkt perfect op verschillende browsers en heeft pmeerdere planningsopties, een volledig aanpasbare lay-out, eenresponsieve klantondersteuning, iperfecte integratie met WooCommerce, een eUitstekend cachebeheer, perfecte integratie met veel WordPress-thema'sde Meertalige ondersteuning dankzij de WPML-plug-in, Enniet veel meer.

DownloadenDemo | web hosting

Andere aanbevolen bronnen

We nodigen u ook uit om de onderstaande bronnen te raadplegen om verder te gaan in de greep en controle van uw website en blog.

Conclusie

Alstublieft ! Dat is alles voor deze tutorial. Ik hoop dat je hiermee kaarten en afbeeldingen beter op WordPress kunt weergeven. Aarzel niet om deel de tip met je vrienden op je sociale netwerken.

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.

Maar vertel ons in de tussentijd over uw commentaires en suggesties in de speciale sectie.

...