So fügen Sie jQuery-Tooltips im WordPress-Kommentarformular hinzu

Kommentare ermöglichen Benutzern, sich mit dem Inhalt Ihrer Website zu beschäftigen. Deshalb glauben wir, dass es wichtig ist, das Layout Ihrer Kommentare und das Kommentarformular zu gestalten, damit es sowohl benutzerfreundlich als auch gut aussieht. Kürzlich hat uns ein Benutzer gefragt, wie er jQuery-Tooltips zum WordPress-Kommentarformular hinzufügen kann. Wir dachten, andere könnten das auch nützlich finden. In diesem Lernprogramm zeigen wir Ihnen, wie Sie jQuery-Tooltips in das WordPress-Kommentarformular einfügen.

Warum sollten Sie jQuery-Tooltips hinzufügen??

QuickInfos werden angezeigt, wenn ein Benutzer die Maus zu einem Objekt bewegt und ihm normalerweise eine Beschreibung zu diesem bestimmten Element gibt. In diesem Lernprogramm fügen wir jQuery-Tooltips hinzu, um Tipps wie "Bitte verwenden Sie Ihren echten Namen" in Feldern für Kommentarfelder anzuzeigen.

Durch das Hinzufügen von jQuery-QuickInfos können Sie die Benutzererfahrung verbessern und es sieht schöner aus.

Wie man jQuery Tooltips hinzufügt

Als erstes müssen Sie einen Ordner auf Ihrem Desktop erstellen und ihm einen Namen geben wpb-Kommentar-Tooltips. In diesem Ordner müssen Sie diese drei Dateien erstellen:

• wpb-comment-tooltips.php
• wpb-tooltip.css
• wpb-tooltip.js

Verwenden Sie einen einfachen Texteditor wie Editor, um diese Dateien zu erstellen. Nachdem Sie die Dateien erstellt haben, müssen Sie sie öffnen wpb-comment-tooltip.php im Texteditor. Kopieren Sie diesen Code und fügen Sie ihn in die Datei ein:

 '. __ ("E-Mail", "zwanzig dreizehn"). ''. ($ req? '*': "). '
'; $ fields ['url'] = '
'. __ ("Website", "zwanzig dreizehn"). ''. '
'; $ fields ['author'] = '
'. ''. __ ('Name', 'zwanzig dreizehn'). ''. ($ req? '*': "). '
'; $ Felder zurückgeben;  add_filter ('comment_form_default_fields', 'alter_comment_form_fields'); ?> 

Im obigen Code haben wir zuerst einen Plugin-Header erstellt, dem dieses Plugin einen Namen und eine Beschreibung gegeben hat. Danach laden wir unsere JavaScript- und CSS-Datei (siehe unser Handbuch zum Hinzufügen von JavaScript und Styles in WordPress)..

Wir stellen außerdem sicher, dass diese Dateien nur geladen werden, wenn ein Kommentarformular angezeigt wird. Danach haben wir das Standard-Kommentarformular geändert und das Titelattribut in Eingabefeldern eingefügt. Dieses Titelattribut enthält die Nachricht, die in der QuickInfo angezeigt werden soll. Im Autorfeld haben wir beispielsweise Folgendes verwendet:

title = "Bitte verwenden Sie Ihren richtigen Namen, keine Keywords."

Nachdem Sie die Plugin-Datei erstellt haben, ist es Zeit, ein wenig jQuery hinzuzufügen. Öffnen wpb-tooltip.js Datei und fügen Sie diesen Code hinzu:

 (Funktion ($) $ ("#commentform") .tooltip (position: my: "center bottom-10", at: "center top") mit: function (position, feedback) $ (this). css (position); $ ("") .addClass ("arrow") .addClass (feedback.vertical) .addClass (feedback.horizontal) .appendTo (this););) (jQuery); 

In diesem Code, #commentform ist der Selektor, in dem jQuery QuickInfos und anzeigt .Tooltip ist der Inhaltsteil, in dem wir die Position für Tooltips definiert haben.

Der letzte Schritt besteht darin, ein wenig CSS hinzuzufügen wpb-tooltip.css Datei. Kopieren Sie einfach diesen Code und fügen Sie ihn ein:

 .ui-tooltip, .arrow: after background: # 356aa0; Rand: 2px durchgehend weiß;  .ui-Tooltip Auffüllen: 10px 20px; Farbe weiß; Grenzradius: 20px; Schrift: fett 14px "Helvetica Neue", Serifenlos; Text-Transformation: Großbuchstaben; Box-Schatten: 0 0 7px # 356aa0; Max-Breite: 350px;  .arrow width: 70px; Höhe: 16px; Überlauf versteckt; Position: absolut; links: 50%; Rand links: -35px; unten: -16px;  .arrow.top top: -16px; unten: auto;  .arrow.left left: 20%;  .arrow: after content: ""; Position: absolut; links: 20px; oben: -20px; Breite: 25px; Höhe: 25px; Box-Schatten: 6px 5px 9px -9px # 356aa0; -webkit-transform: drehen (45 Grad); -Moz-Transformation: drehen (45 Grad); -ms-transform: drehen (45 Grad); -o-transform: drehen (45 Grad); tranform: drehen (45deg);  .arrow.top: after bottom: -20px; oben: auto;  

Fühlen Sie sich frei, diese CSS-Datei an Ihre Bedürfnisse anzupassen.

Das ist alles. Jetzt haben Sie erfolgreich ein Plugin erstellt, das jQuery-Tooltips in Ihr WordPress-Kommentarformular einfügt. Alles was Sie tun müssen, ist das Hochladen wpb-Kommentar-Tooltips Ordner von Ihrem Desktop zu / wp-content / plugins / Verzeichnis auf Ihrem Webserver mit einem FTP-Client wie Filezilla. Wenn Sie das Plugin hochgeladen haben, gehen Sie zu Plugins Seite im WordPress-Adminbereich und aktivieren Sie das Plugin.

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat, zu erfahren, wie Sie jQuery-Tooltips im WordPress-Kommentarformular hinzufügen. Wir empfehlen Ihnen, diesen Code zu ändern und an anderen Stellen Tooltips hinzuzufügen. Sehen Sie sich beispielsweise an, wie wir unserer Site Tooltip-Testimonials hinzugefügt haben. Bitte hinterlassen Sie einen Kommentar und Fragen.