WordPress-Plugin um eine Word-Cloud mit beliebigen Wörtern darzustellen

Wer träumt nicht davon, eine Wolke aus Wörtern in WordPress darstellen zu können? Der Fachmann spricht hier von einer sogenannten Word-Cloud. Ich meine hier übrigens ausdrücklich nicht die bekannten TagClouds, bei denen schlicht die verwendeten WordPress-Tags in einer Wolke anklickbar angezeigt werden. Hier geht es einfach um die Darstellung von Wörtern, die entsprechend der Vorkommen verschieden groß dargestellt werden. Leider gab es genau für diesen Zweck bisher kein WordPress-Plugin. Dafür habe ich aber eine sehr leicht zu bedienende JavaScript-Bibliothek von Tim Dream: wordCloud2.js gefunden, auf der ich das Plugin aufgebaut habe.

Installation

Der ganze Spaß steht auf GitHub zur Verfügung. Du musst lediglich den Source-Code herunterladen und in einen Unterordner in wp-content/plugins entpacken. Wenn du das Plugin im Backend aktiviert hast, kannst du auf jeder Seite und jedem Beitrag den Shortcode [ word-cloud ] nutzen.

Die folgenden Parameter kannst du im Shortcode übergeben. Der Parameter target-id ist dabei immer notwendig, alle anderen sind nicht verpflichtend.

  • target-id – damit wird jede Instanz von word-cloud adressiert. Du kannst je Seite mehrere Word-Clouds erstellen, die Target-Id wird auch als CSS-Id verwendet
  • source -wenn du eine eigene SQL-Abfrage verwenden möchtest, musst du diesen Parameter auf “sql” setzen, andernfalls wird versucht, ein Custom-Field auszulesen
  • source-id – wenn sich die Wortliste in einem Custom-Field befindet, musst du mit diesem Parameter den Namen des Felds angeben
  • query – wenn du eine SQL-Abfrage verwendest, nutzt du dafür diesen Parameter
  • backgroundColor – die Hintergrundfarbe der Cloud, z.B. #123123
  • gridSize – ein ganze Zahl, mit der die Lücke zwischen den Wörtern gesteuert werden kann
  • fontFamily – welcher Font soll verwendet werden
  • fontWeight – das Gewicht der Schriften, also z.B. bold oder normal
  • minRotation – eine ganze Zahl, die das Mindestmaß der Rotation bestimmt, ist der Wert 0, wird die Rotation deaktiviert
  • maxRotation – das gleiche, nur für die Obergrenze der Rotation
  • weightFactor – eine ganze Zahl, um die Gewichtung der Wörter zu beeinflussen, also ein Multiplikator für die Größe
  • shape – die Form der Wolke, hier kannst du folgende Formen verwenden: circle (Standard), cardioid (Apfel bzw. Herz), diamond, square, triangle-forward, triangle, pentagon und star

Beispiel

Wörter aus einer MySQL-Tabelle nutzen

Die folgende Word-Cloud verwendet eine Liste von 100 Wörtern aus einer Datenbank-Abfrage:

Hier siehst du eine Word-Cloud, die auf eine kleinere Liste zurückgreift, die ich in einem Custom-Field übergebe:

Wörter aus einem benutzerdefinierten Feld nutzen

Achtung: Dieser Weg funktioniert mit dem neuen Gutenberg-Editor (ab WordPress 5) nicht, da dieser (Stand Januar 2019) keine benutzerdefinierten Felder anzeigt.

Wenn du auf eine Liste mit Wörter aus einem benutzerdefinierten Feld zugreifen willst, übergibst du als source-id den Namen des benutzerdefinierten Feldes:

Das benutzerdefinierte Feld legst du dann mit genau diesem Namen an und füllst es mit den Wörter und den Werten, die die Größe represäntieren sollen:

Benutzerdefiniertes Feld mit eigener Wortliste im klassischen Editor

2 Kommentare

  1. steffen sagt:

    Ich habe das Plugin geladen und aktiviert.
    Und nun stehe ich vor eine für mich unlösbaren Aufgabe.
    Wie binde ich es ein? Und wie muss ich die Worte für die Wolke eingeben?
    Ich bin leider (fast) Laie.

    1. nicky sagt:

      Hey steffen,

      wenn du dich im Editor befindest, musst du dort zunächst folgenden ShortCode einfügen:

      [word-cloud target-id="allWords" source-id="allWords"]

      Nun kommt es drauf an, wo sich deine Wörter befinden. Wenn du eine MySQL-Tabelle nutzt, kannst du mit dem Parameter source=”sql” darauf verweisen. Der Parameter query enthält dann die SQL-Abfrage.

      Du kannst die Wortliste auch in einem benutzerdefinierten Feld ablegen. (Achtung: Der Gutenberg-Editor zeigt diese nicht mehr an, du musst den klassischen Editor benutzen). Dann kannst du den Parameter “source” ganz weglassen, musst mit source-id aber auf den Namen des benutzerdefinierten Felds verweisen.

      Wenn das funktioniert, sag Bescheid, ansonsten werde ich die Anleitung hier noch etwas besser bebildern 🙂

Start the Discussion!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.