WP Wiki Tooltip ist ein WordPress Plugin mit dem man sehr einfach erklärende Tooltips für bestimmte Schlagworte in Artikel und Seiten integrieren kann. Der Inhalt der Tooltips wird per AJAX von einem angegebenen Wiki (auf Basis der bekannten Wiki-Software MediaWiki) geladen. Die Tooltips werden auf Basis des bekannten Paketes Tooltipster erzeugt.
Installation
Die Installation ist – wie bei jedem guten WordPress Plugin – recht einfach:
- Das Plugin steht direkt im WordPress Repository zur Verfügung. Außerdem kann man es sich von GitHub herunterladen und manuell ins WordPress einfügen.
- Nach der Installation muss man das Plugin aktivieren.
- Nun sollte man einen Blick in die Einstellungen werfen, denn zu mindestens ein Wiki in derselben Sprache wie der Blog, scheint sinnvoll.
- Und schon steht einer Verwendung über Shortcodes in Artikeln und Seiten nichts mehr im Wege 🙂
Einstellungen
Das Plugin richtet im Backend eine eigene Seite für seine Einstellungen ein. Diese ist unter dem Menüpunkt „Einstellungen“ zu finden. Dort kann man folgende Optionen regeln:
- URLs der Wikis
Man kann beliebig viele Wikis als Basis für die Inhalt der Tooltips verwalten. - Ziel der Links von Wiki Seiten
Man kann auswählen, ob die Link zu den Wiki Seiten im aktuellen oder einem neuen Fenster / Tab geöffnet werden sollen. - Wann und wie stehen die Tooltips zur Verfügung
Man kann den Trigger (Klick oder Hover) wählen und auch eine Mindestbreite definieren, die notwendig ist, um die Tooltips anzuzeigen. Seit der Version 1.8.0 gibt es auch einige Einstellungen im Falle, dass eine Seite nicht gefunden wird. - Fehlerbehandlung
Welche Fehlermeldungen sollen ausgegeben werden, wenn eine Seite oder ein Kapitel nicht geladen werden kann? Oder soll der Link komplett entfernt werden? - Design der Tooltips
Durch die Verwendung von Tooltipster für die Darstellung der Tooltips kann man eines von fünf Themes auswählen. Auch kann man eine der fünf Animationen für das Erscheinen der Tooltips auswählen. - CSS der Links von Wiki Seiten
Um die Links zu Wiki Seiten optisch von allen anderen Link im Blog zu unterscheiden, kann man sie mit eigenen CSS Angaben versehen. Diese werden in das style-Attribute eingefügt. - Thumbails
Es gibt verschiedene Optionen, um Bilder, die auf einer verlinkten Wiki-Seite vorhanden sind, bereits im Tooltip anzuzeigen.
Anwendung
Um einen Tooltip zu erhalten, muss man einfach einen Shortode in einem Artikel oder einer Seite einsetzen. Die Shortcodes können durch verschiedene Attribute erweitert werden:
[wiki]WordPress[/wiki]
oder
[wiki title="WordPress"]a nice blogging tool[/wiki]
oder
[wiki base="EN"]WordPress[/wiki]
oder
[wiki titel="WordPress" section="Themes"]Themes in WordPress[/wiki]
Weiter Informationen gibt es in der offiziellen Readme!
Unterstützung erwünscht!
Wenn du mich unterstützen möchtest, freue ich mich über eine kleine Spende 🙂
Wer inhaltlich etwas betragen möchte und Ideen und Anregungen zur Weiterentwicklung hat, kann diese hier gern als Kommentar hinterlassen!
Hello, and thank you for a fantastic plugin (wp wiki tooltip).
I just want to leave a tip on a possible feature. This plugin (https://wordpress.org/plugins/encyclopedia-lexicon-glossary-wiki-dictionary/) has the ability to add words to a list, these words will link directly without a shortcode in the editor.
Thanks Mikael for this idea! I will think about if it makes sense for my plugin and how to integrate in an future version 🙂
Vielen Dank für das tolle Plugin!
Leider gibt es seit der 1.4.0 Version nur noch Fehler. Ich nutze den Tooltip in Verbindung mit Wikipedia.org in der deutschen Version. Nur leider wir mittlerweile bei jedem Tooltip „Fehler!“ angezeigt. Bei jedem leider. Egal welcher Begriff. Vorher ging es tadellos. Selbst Begriffe die bereits funktionierten gehen nicht mehr. Gibt es irgendwelche Erkenntnisse? Würde mich über eine Hilfestellung sehr freuen.
Vielen Dank
Timo Hörske
Hallo Timo,
ich haben in den „Upgrade Notices“ geschrieben, dass beim Update auf die 1.4.0 die eingestellte Wiki-Basis-URL nicht mit übernommen wird! Du musst nach dem Update also unbedingt in der Einstellungsseite vorbeischauen, um dort die deutsche Wiki-Basis einzustellen. Dann sollten auch die schon bestehenden Tooltips weiter funktionieren! Schreib hier bitte, ob es so geklappt hat…
Beste Grüße
NiDa
Das hatte ich gesehen und auch gleich umgesetzt. Leider bisher ohne Erfolg.
Aber ich probiere es gerne nochmal aus.
Habe es nochmal überschrieben und gespeichert. Jetzt gehts. Komisch.
Vielen Dank
Wunderbar, das freut mich!
Erstmal vielen Dank für das tolle Plugin – es ist wirklich das was ich gesucht habe und funktioniert super!
Ich hätte noch 2 Anregungen:
1) Manchmal ist die Ladezeit bei aktivierten Thumbnails/Bildern bei mäßigerer Internetverbindung etwas lang. Wenn man die Tooltips dann aber einmal durchs Hovern oder Klicken gesehen hat, ist die Datei wahrscheinlich im cache (?) gespeichert und wird dann ohne Verzögerung angezeigt. Ich bin WordPress und Code-Neuling aber wäre es vielleicht möglich eine Option anzubieten, dass die Thumbnails bereits beim Laden der Seite im cache gespeichert werden und sie damit – sobald die Seite einmal ready ist – sofort angezeigt werden? Ich habe mal einen Workaround gesehen, bei dem die Seite beim Aufrufen noch keine Tooltip-Links hatte und diese erst nach und nach hinzukamen, als diese dann eben auch geladen waren.
2) Bei chemischen Seiten, die einen gelben Informationskasten auf der rechten Seite haben wird anstelle des Textes direkt unter der Unterschrift der Text aus der meist sehr kurzen Kurzbeschreibung im Kasten angezeigt. Ich weiß nicht ob das so gewollt ist – falls nicht könntest du ja mal darüber nachdenken, das Plugin den üblichen Text greifen zu lassen. Als Beispiel wäre hier z.B. die folgende Seite zu nennen: https://de.wikipedia.org/wiki/Bortriiodid. Anstelle von dem Text unter der Überschrift „Bortriiodid ist eine chemische Verbindung aus der Gruppe der Bor-Halogen-Verbindungen bzw. anorganischen Iodverbindungen.“ wird nur der Text aus dem Kasten „farbloser Feststoff“ verwendet.
Auch mit den kleinen Änderungswünschen ist das Plugin nach wie vor wirklich gut und wird auch weiter von mir verwendet.
Liebe Grüße aus Berlin
Marian
Hallo Marian,
vielen Dank für dein Feedback und die Spende!!!
Auf welcher Seite verwendest du das Plugin? Würde ich mir gern einmal anschauen!
Danke auch für die beiden Tipps! Die Idee, wahlweise den Inhalt nicht erst mit AJAX zu laden, sondern gleich beim Seitenaufbau, werde ich einbauen!!! Das Problem mit den chemischen Elementen schaue ich mir an. Gibt es da noch andere Seiten mit diesem Problem?
Beste Grüße
Nico
Danke für das Plugin! Ich musste allerdings etwas rumprobieren: Die Tooltips vertragen sich nicht mit Autoptimize, genauer gesagt dessen „JavaScript-Code optimieren“-Option.
Gibt es eine Möglichkeit, die Anzeige mehrerer Absätze bzw. der gesamten Wiki-Seite ohne (Link auf das Wiki selbst) zu erzwingen? Ich will das Wiki ausschließlich als Datenbasis für ein Namensverzeichnis (mit mehreren Hundert Tooltip-Einträgen) nutzen und dessen Oberfläche selbst vor den Nutzern verbergen.
Gruß Rüdiger
Hallo Rüdiger,
vielen Dank für dein Feedback und sorry, dass ich erst heute reagiere! Business ist aktuell sehr stressig 😉
Die Sache mit der Kompatibilität mit Autoptimize schaue ich mir die Tage mal an.
Die Möglichkeit, auch eine komplette Seite in dem Tooltip anzuzeigen und auch den Link auszublenden, werde ich einbauen. Sollte ich eigentlich recht fix hinbekommen…
Beste Grüße
Nico
hi
I want to change the text direction of the balloon text to RTL and make the text justified. But I could not find its CSS file. Could you please tell me how can I do that?
Thanks,
Saeed
Hi Saeed,
would it be enough if you write ‚direction: rtl;‘ in the backend field for styling the tooltip content?
Thank you for your reply. In fact, I know a some basic CSS and I have been searching for exact tag name of balloon CSS properties using plugin editor and looking at the page source, and still couldn’t find its tag name and file location. So I simply placed direction:rtl into *{} (all elements) in additional css theme style, which works somehow, but seems that it is not a good way. I just want to edit the balloon, not all page elements. besides, text alignment is not solved for me yet. Sorry again…
Once again Saeed, the easiest and best way is to add your style in the field you find on the settings page!
If you really want to change the CSS of your template, here is the HTML structure of the baloon:
<div class="wiki-tooltip-balloon">
<div class="head">THE TITLE</div>
<div class="body">THE CONTENT</div>
<div class="foot">THE LINK TO WIKI PAGE</div>
</div>
So,
a div.wiki-tooltip-balloon div.body {}should work (but is really not necessary)!Many thanks. I understand what you mean, but there seems that something over-rights this attribute which I cannot figure out. Anyway thanks a lot.