Mein Word Cloud Plugin für WordPress liegt in einer neuen Version vor! Die Word Cloud unterstützt nun OCR, Tags, interne und externe Quellen und vieles mehr. Da ich also sehr viele grundlegende Änderungen vorgenommen habe, gibt es an dieser Stelle eine komplett neue Dokumentation. Viel Spass.
Was ist eine Word Cloud?
Eine Word Cloud, auch Schlagwortwolke, Wortwolke usw., dient der besseren Visualisierung von Texten. Um eine Word Cloud zu erstellen, werden die Vorkommen von Wörtern eines Textes gezählt. Die Wörter mit der größten Häufigkeit werden groß dargestellt, Wörter mit geringerer Häufigkeit weniger groß. Und das ganze wird dann in einer Wolkenform dargestellt, mit den größten Wörtern in der Mitte.
So ist es möglich auf einen Blick zu erkennen, welche Wörter in einem Text am häufigsten vorkommen. Das ist nicht nur bei der Analyse von Texten sondern auch von Webseiten nützlich. So kannst du z.B. bei WordPress eine Word Cloud aus Tags erstellen (Tag Cloud), anhand der man sehen kann, welche Tags auf einer Seite am meisten verwendet wurden.
Die folgende Word Cloud zeigt auf einen Artikel, in dem ich einen Algorithmus beschreibe, um in JavaScript ein Labyrinth zu erstellen:
Was kann dieses Plugin?
WP Word Cloud stellt einen Shortcode zur Verfügung, mit dem du beliebig viele Word Clouds auf deinen Seiten einfügen kannst. Du kannst verschiedene Quellen nutzen, um dort die Wörter zu zählen und in einer Word Cloud darstellen zu lassen.
- inline – du gibst den Text direkt im Shortcode im Beitrag an
- url – ein Verweis auf eine Internetadresse
- id – der Verweis auf eine Seite / einen Beitrag
- sql – eine SQL-Abfrage um Text aus der Datenbank zu lesen
- custom-field – Text aus einem custom field des Beitrages / der Seite
- Text, den der Besucher der Webseite selber eingeben kann
- Text von einem Bild, das der Besucher der Website hochlädt
Das Plugin greift auf zwei sehr großartige Bibliotheken zurück: WodCloud2.js von TimDream (github.com). Sowie die Offline-Implementierung von Tesseract in JavaScript (github.com).
Installation
Über die Kommandozeile
Wenn du Zugriff auf deinen Server über SSH hast, kannst du das Plugin folgendermaßen installieren:
Wechsle in den Plugin-Ordner deiner WordPress-Installation und lege dort einen neuen Ordner an: WP-Word-Cloud, wechsle danach in diesen Ordner:
1 2 |
mkdir /htdocs/wp-content/plugins/WP-Word-Cloud cd /htdocs/wp-content/plugins/WP-Word-Cloud |
Danach kannst du das Plugin-Repository mit git klonen:
1 |
git clone https://github.com/nickyreinert/wordCloud-for-Wordpress.git . |
Wenn du git nicht benutzen möchtest oder kannst, kannst du das Plugin auch mit wget herunterladen und dann entpacken. Dann musst du den Plugin-Ordner allerdings nicht selber erstellen:
1 2 3 |
cd /htdocs/wp-content/plugins/ wget https://github.com/nickyreinert/wordCloud-for-Wordpress/archive/wordCloud-for-wordPress-2.zip --no-check-certificate unzip wordCloud-for-wordPress-2.zip -d WP-Word-Cloud |
Mit einem FTP-Programm
Wenn du keinen Zugriff auf die Kommandozeile hast, kannst du das Plugin von dieser Adresse herunterladen:
https://github.com/nickyreinert/wordCloud-for-Wordpress/archive/wordCloud-for-wordPress-2.zip
Danach entpackst du das Archiv und lädst den kompletten Ordner in das Plugin-Verzeichnis deiner WordPress-Installation. Du kannst den Ordner mit dem FTP-Programm dann umbenennen:

Abschluss der Installation
Abschließend muss das Plugin noch im Backend von WordPress aktiviert werden. Dazu suchst du im Plugin-Bereich nach dem Eintrag “WP Word Cloud” und klickst auf “aktivieren”. Fertig.

Erste Verwendung
Das Plugin aktiviert für deine WordPress-Installation einen neuen Shortcode: [ wp-word-cloud ]. Diesen kannst du nun auf jeder Seite und in jedem Beitrag beliebig oft einfügen. Wenndu den Gutenberg-Editor verwendest, benötigst du dafür den Block “Shortcode“. Im konventionellen Editor kannst du den Shortcode einfach in deinen Text einfügen.
Eine einfache Implementierung sieht z.B. so aus:
[ wp-word-cloud source-type="url" id="meine-word-cloud" ]https://www.spiegel.de[ /wp-word-cloud ]
Es gibt drei Parameter, die du immer angeben musst:
- id, eine eindeutige Id, mit der die Word Cloud auf deiner Seite angesprochen wird, z.B. meine-word-cloud oder einfach nur test
- source-type, welcher Art die Quelle für die Word Cloud ist, also z.B. von einer url oder den tags
- sowie Inline-Text, als Verweis auf die Quelle, von wo der Inhalt für die Word Cloud kommt, also z.B. die URL https://www.spiegel.de oder die Id eines Beitrages (123)
Zusätzliche Einstellungen
Natürlich gibt es noch eine Menge weiterer Parameter, mit denen du das Erscheinungsbild der Word Cloud steuern kannst. Das Plugin setzt bei der ersten Installation für all diese Parameter Standard-Einstellungen fest. Diese sind grundsätzlich global gültig und können auf der Einstellungseite angepasst werden:

Jeden dieser globalen Parameter kannst du auch in deinem Shortcode verwenden. So wir die globale Einstellung überschrieben. So ist die Hintergrundfarbe z.B. standardmäßig transparent eingestellt. Möchtest du sie für die aktuelle Word Cloud auf grün und halbtransparent ändern, übergibst du einfach den Parameter background-color folgendermaßen:
[ wp-word-cloud source-type="url" id="meine-word-cloud" background-color="rgba(0,255,255,0.5)" ]https://www.spiegel.de[ /wp-word-cloud ]
Eine genaue Beschreibung aller Parameter folgt jetzt:
Parameter
id
Dieser Parameter ist für jeden Shortcode, den du einfügst, verpflichtend! Die Id adressiert jede Word Cloud auf einer Seite oder in einem Beitrag. Damit ist es möglich, mehrere Word Clouds gleichzeitig einzubinden. Mit der Id kannst du außerdem das Aussehen der Word Cloud mit CSS steuern. Beispiel:
[ wp-word-cloud source-type="inline" id="wordcloud1" ]Lorem Ipsum[ /wp-word-cloud ]
[ wp-word-cloud source-type="inline" id="wordcloud2" ]Lorem Ipsum[ /wp-word-cloud ]
source-type
Damit legst du fest, um was für eine Quelle es sich handelt. Dieser Parameter ist verpflichtend. Die folgenden Quellen werden unterstützt:
source-type=inline
Der Text wird innerhalb des Shortcodes übermittelt, z.B:
[ wp-word-cloud source-type=inline id="demo" ]Lorem Ipsum[ /wp-word-cloud ]
source-type=url
Im Shortcode wird eine URL angegeben, von der der Text abgerufen wird, z.B:
[ wp-word-cloud source-type=url id="demo" ]https://www.spiegel.de[ /wp-word-cloud ]
source-type=id
Im Shortcode wird eine Id übergeben, die auf eine Seite oder einen Beitrag deiner Webseite verweist, z.B:
[ wp-word-cloud source-type=id id="demo" ]123[ /wp-word-cloud ]
source-type=sql
Im Shortcode wird eine SQL-Abfrage übergeben, die eine bereits gezählte Wortliste zurück gibt, z.B:
[ wp-word-cloud source-type=sql id="demo"]SELECT word,count FROM table;[ /wp-word-cloud]
source-type=tags
Die Word Cloud zeigt alle Tags deiner Seite an, hier musst du im Shortcode nichts weiter übergeben:
[ wp-word-cloud source-type=tags id="demo"]SELECT word,count FROM table;[ /wp-word-cloud]
source-type=custom-field
Im Shortcode wird auf ein custom field, also benutzerdefiniertes bzw. eigenes Feld verwiesen, z.B:
[ wp-word-cloud source-type=custom-field id="demo"]my-custom-field[ /wp-word-cloud]
Die Darstellung der eigenen Felder musst du im Gutenberg-Edito ggf. erst aktivieren. Klicke dazu das Punkt-Menü und dann ganz unten auf “Ansicht anpassen”. Es öffnet sich nun eine Liste, in der du die “eigenen Felder” aktivieren kannst:
count-words
Wenn die im Shortcode angegebene Quelle einen kompletten Text enthält, müssen die Wörter darin erst gezählt werden. Dazu muss count-words auf 1 gesetzt werden. Ist count-words=0 gesetzt, erwartet das Plugin eine List mit gezählten Wörtern.
enable-frontend-edit
Ist dieser Parameter auf 1 gesetzt, wird auf der Seite ein Textfeld angezeigt. Das Textfeld enthält den Text, der mit dem Shortcode definiert wurde. Der Besucher kann den Text dann beliebig verändern oder eigenen Text hinzufügen, um so die Word Cloud selber zu steuern. Die Berechnung der Word Cloud findet im Browser statt. Im folgenden Beispiel kommt der Text von einem benutzerdefiniertem Feld im Backend. Er wird an das Frontend ausgeliefert und dort in der Word Cloud dargestellt. Gleichzeitig kann man den Text aber auch anpassen und die Wolke neu zeichnen lassen:
[ wp-word-cloud source-type="custom-field" enable-frontend-edit
=1 id="demo"]my-custom-field[ /wp-word-cloud]

OCR – Texterkennung
enable-ocr
Ist dieser Parameter auf 1 gesetzt, kann der Benutzer auf der Webseite ein Bild hochladen oder mit der Kamera aufnehmen. Im Browser findet dann eine Text-Erkennung statt. Die Wörter werden dann gezählt und die Word Cloud darauf basierend gezeichnet. Wenn enable-frontend-edit nicht aktiv ist, hat dieser Parameter keine Wirkung.
[ wp-word-cloud source-type="custom-field" enable-frontend-edit=1 enable-ocr=1 id="demo"]my-custom-field[ /wp-word-cloud]
Für diese Funktionalität greift das Plugin auf die Tesseract-Bibliothek zurück. Diese ermöglicht die Texterkennung von abfotografierten Dokumenten in verschiedenen Sprachen. Die Texterkennung erfolgt komplett im Browser, also beim Besucher der Webseite. Das Bild wird nicht zum Server hochgeladen.
ocr-language
Mit diesem Parameter legst du fest, welche Sprache(n) das ORC-Modul unterstützen soll. Standardmäßig ist hier deu eingestellt. Du kannst mehre Sprachen angeben, wenn du sie mit einem + trennst, z.B. Deutsch + Englisch:
[ wp-word-cloud source-type="custom-field" enable-frontend-edit=1 enable-ocr=1 ocr-language="deu+eng" id="demo"]my-custom-field[ /wp-word-cloud]
Eine Liste aller unterstützten Sprachpakete findest du hier:
https://tesseract-ocr.github.io/tessdoc/Data-Files#data-files-for-version-400-november-29-2016
ocr-local-libraries
Das OCR-Modul lädt einige, größere Dateien von einem anderen Server nach, unter anderem auch die Sprachpakete. Du kannst diese Dateien auch auf deinem Server anbieten. Dazu musst du die folgenden Dateien herunterladen und im Unterordner “lib” innerhalb des Plugin-Ordners ablegen:
- https://unpkg.com/tesseract.js@v2.0.0/dist/worker.min.js
- https://unpkg.com/tesseract.js-core@v2.0.0/tesseract-core.wasm.js
Außerdem benötigst du die von dir konfigurierten Sprachpakete. Diese kannst du hier für die Version 4 herunterladen. Die Sprachpakete gehören ebenfalls in den Unterordner “lib”. Außerdem musst du manuell die Dateiendung “.gz” anhängen.
Eingrenzen der Wortliste
min-word-length
Hiermit legst du fest, wie lang ein Wort mindestens sein soll, um beim Zählen berücksichtigt zu werden. Diese Einstellung wird nicht berücksichtigt, wenn du eine fertige Wortliste als Quelle angibst. In diesem Beispiel wird das Wort Foo beim Zählen ignoriert.
[ wp-word-cloud source-type="inline" count-words=1 min-word-lenght=4 id="demo"]Lorem Ipsum Foo[ /wp-word-cloud]
min-word-occurence
Mit diesem Parameter legst du fest, wie oft ein Wort mindestens vorkommen muss, um in der word cloud dargestellt zu werden. Diese Einstellung wird immer berücksichtigt, auch wenn du eine fertige Wortliste als Quelle angibst. Im Beispiel werden nur Wörter in der word cloud dargestellt, die mindestens 2 mal vorkommen:
[ wp-word-cloud source-type="inline" count-words=1 min-word-occurence=2 id="demo"]Lorem Ipsum Foo[ /wp-word-cloud]
black-list und enable-black-list
Die Blacklist enthält Wörter, die beim Zählen nicht berücksichtigt werden dürfen. Das können z.B. Funktionswörter oder Fremdwörter sein, die du nicht in der word cloud sehen möchtest. Die Wörter werden mit einem Leerzeichen getrennt angegeben. Wenn du den Parameter im Shortcode angibst, wird die globale Einstellung komplett ignoriert. Die Blacklist wird nur verwendet, wenn der Parameter enable-black-list auf 1 gesetzt ist. Im Beispiel wird das Wort “Lorem” beim Zählen ignoriert, das es sich auf der Blacklist befindet.
=1 [ wp-word-cloud source-type="inline" count-words=1 enable-black-list
black-list="Lorem" id="demo"]Lorem Ipsum Foo[ /wp-word-cloud]
enable-custom-black-list
Ist dieser Parameter aktiviert, kann der Besucher deiner Webseite Wörter in der word cloud anklicken, um sie aus der word cloud zu entfernen. Die Wörter erscheinen dann unter der word cloud in einer “benutzerdefinierten” Blacklist. Wenn sie dort erneut angeklickt werden, erscheinen sie wieder in der word cloud.

persistent-custom-black-list
Hiermit kannst du festlegen, dass die Blacklist erhalten bleibt, wenn der Besucher einen neuen Text in das Eingabefeld eingibt. Ist der Parameter deaktiviert, wird die benutzerdefnierte Blacklist gelöscht, sobald der Besucher einen neuen Text eingibt. Dieser Parameter ist nur wirksam, wenn auch das Textfeld aktiviert ist.
ignore-chars
Mit diesem Parameter legst du fest, welche Zeichen aus dem Text entfernt werden, bevor er gezählt wird. Hier wird ein regulärer Ausdruck dieser Form erwartet:
ignore-chars="\(\)\[\]\,\.;"
Auf diese Art kannst du ungewollte Satzzeichen, Sonderzeichen oder Steuerzeichen entfernen.
Erscheinungsbild anpassen
style
text-transform
Hiermit kannst du festlegen, dass der Text beim Darstellen in der word cloud groß oder kleingeschrieben werden soll. Dieser Parameter kann dementsprechend drei Werte annehmen:
- uppercas (alle Wörter groß schreiben)
- lowercase (alle Wörter klein schreiben)
- none (keine Änderung)
Diese word cloud nutzt als Ressource die aktuellen Mitteilungen von fefe:
Hi,
Irgendwie will bei mir dass mit der SQl-Funktion nicht klappen.
Ich bekomme in Gutenberg immer diese Fehlermeldung “Aktualisierung fehlgeschlagen. Die Antwort ist keine gültige JSON-Antwort.” und im Frontend diese “WordPress-Datenbank-Fehler: [Unknown column ‘checkboxTest’ in ‘where clause’]
SELECT value FROM
efzu_cf7_vdata_entry
WHERE name=checkboxTest
“.Aber das ist nicht wahr, die Query ist richtig das habe ich mir mehrfach bestätigt und habe sie auch mit anderen Plugins bzw. auch direkt in phpMyAdmin nutzen können.
Kann da jemand helfen?
Hallo Ludwig,
kann man das ganze irgendwo Live sehen? Kannst du mal zeigen, wie du den ShortCode eingebunden hast? Sieht sonst nämlich so aus, als würde die SQL Query nicht korrekt durchgereicht werden Das darf natürlich nicht sein.
Hallo,
ich habe das Ganze hier mal auf öffentlich gestellt und einen Screenshot in den Beitrag mit eingebettet, der zeigt wie ich den ShortCode eingebunden habe.
http://wordpress.ludwigloth.de/uncategorized/wolke/
Das embeded answergarden kann man hier natürlich ignorieren 😉
Es scheint so, als würden die Anführungszeichen nicht erkannt werden. Damit wird checkboxTest nicht als String sondern als Spaltennamen “falsch interpretiert”. Ich schau mir das mal an, du kannst ansonsten auch mal andere Anführungszeichen probieren, ‘ oder ” z.B.
Das habe ich schon probiert. Diese ` einfachen Anführungszeichen sind die einzigen, die nicht als HTML-Entity erkannt werden. Die anderen werden entsprechend als „ oder ‘ gerendert.
Ich hab den Fehler gefunden. Es lag einerseits an einem Bug im Code aber vor allem daran, dass WordPress Single (‘) und Double-Quotes (“) in die Hexadezimal-Repräsentation ähnlicher Zeichen umwandelt. Also nicht wie zu erwarten in " (das wäre z.B. die Gänsefüßchen / Doublequotes “). Sondern in die leicht verschobenen (“ bzw. ”). Hier hilft also auch ein decodieren nicht weiter. Ich muss die HexDez direkt mit den Gänsefüßchen ersetzen.
Long story short: Es sollte jetzt funktionieren, zieh’ dir bitte noch mal die aktuelle Version aus dem Repo: https://github.com/nickyreinert/wordCloud-for-Wordpress
Jap nun funktioniert es. Vielen Dank 🙂
Hello 🙂 I have an error in my console when trying to create a Word cloud:
Uncaught TypeError: Cannot read property ‘connection,’ of undefined
Connection in the first word in my inline text. Where can I send you more debug, like the shortcode I am using and my settings?
Thanks
Hi!
This plugin is great! Few questions if I may:
What do you think, would it be possible to read the words from google sprteadsheet? I tried “url” but the resulting words don’t make much sense.
Also is it possible to add an external “black-list”, with many words?
On the github page on the bottom of the page at the Source selection you wrote: “custom field in “source-id”. There you need to provide a simple, comma separated list like this: Foobar,5 Hello,2 World,4 Test,10″ These numbers mean the occurrences of the words? Because I tried that with “custom-field” and it doesn’t work. It woulr be great if it did, even greater if it would work on a google spreadsheet the same way.
Thank you for sharing this plugin with us
Hey, thank you.
# it’s possible, of course. But not out of the box. Google Sheets can be accessed by an API, just pointing to the URL does not make sense. AFAIK Google Sheets supports an URL that renders the content of a sheet as an CSV file, you could try that.
# again, possible, you may refer to GitHub to add a feature request there, currently I dont have much time, maybe someone else can help out
# that’s right, it’s the word frequency / occurences of the words. You have to put this list into an additional custom field in the WordPress backend and name the field like that
hope that helped you 🙂
Hi!
This plugin is great! Few questions if I may:
What do you think, would it be possible to read the words from google sprteadsheet? I tried “url” but the resulting words don’t make much sense.
Also is it possible to add an external “black-list”, with many words?
On the github page on the bottom of the page at the Source selection you wrote: “custom field in “source-id”. There you need to provide a simple, comma separated list like this: Foobar,5 Hello,2 World,4 Test,10″ These numbers mean the occurrences of the words? Because I tried that with “custom-field” and it doesn’t work. It woulr be great if it did, even greater if it would work on a google spreadsheet the same way.
Thank you for sharing this plugin with us!