Kommentare ermöglichen es Benutzern, mit den Inhalten Ihrer Website zu interagieren. Aus diesem Grund glauben wir, dass es wichtig ist, Ihr Kommentarlayout und Ihr Kommentarformular so zu gestalten, dass es sowohl benutzerfreundlich als auch gut aussieht. Vor kurzem hat uns ein Benutzer gefragt, wie er jQuery-Tooltips zum WordPress-Kommentarformular hinzufügen kann. Wir dachten, andere könnten dies auch nützlich finden. In diesem Tutorial zeigen wir Ihnen, wie Sie jQuery-Tooltips im WordPress-Kommentarformular hinzufügen.
Warum jQuery-Kurzinfos hinzufügen?
QuickInfos werden angezeigt, wenn ein Benutzer mit der Maus zu einem Element führt, und bieten ihm normalerweise eine Beschreibung zu diesem bestimmten Element. In diesem Tutorial werden wir jQuery-Tooltips hinzufügen, um Tipps anzuzeigen wie: Bitte verwenden Sie Ihren richtigen Namen in Kommentarformularfeldern.
Durch das Hinzufügen von jQuery-Tooltips können Sie die Benutzererfahrung verbessern und es sieht schöner aus.
So fügen Sie jQuery-Kurzinfos hinzu
Als erstes müssen Sie einen Ordner auf Ihrem Desktop erstellen und ihn benennen wpb-comment-tooltips
. In diesem Ordner müssen Sie diese drei Dateien erstellen:
- wpb-comment-tooltips.php
- wpb-tooltip.css
- wpb-tooltip.js
Verwenden Sie einen Nur-Text-Editor wie Notepad, um diese Dateien zu erstellen. Nachdem Sie die Dateien erstellt haben, müssen Sie öffnen wpb-comment-tooltip.php
im Texteditor. Kopieren Sie diesen Code und fügen Sie ihn in die Datei ein:
<?php /** Plugin Name: Themelocal's Comment Form Tool Tips Description: A jQuery powered comment form tool tips plugin based on a tutorial by Themelocal Version: 1.0 Author: Themelocal Author URI: https://www.wpbeginner.com License: GPL2 */ // Only load our scripts and style when a comment form is displayed add_action( 'comment_form_before', 'wpb_comment_tooltips' ); function wpb_comment_tooltips() { wp_enqueue_script('wpb-tooltip-jquery', plugins_url('/wpb-tooltip.js', __FILE__ ), array('jquery-ui-tooltip'), '', true); wp_enqueue_style('wpb-tooltip-css', plugins_url('/wpb-tooltip.css', __FILE__), false, null); } // Modify comment form fields and add title attribute to form input fields function alter_comment_form_fields($fields){ $fields['email'] = '<p class="comment-form-email"><label for="email">' . __( 'Email', 'twentythirteen' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="email" title="Your email is safe with us, see our privacy policy." name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>'; $fields['url'] = '<p class="comment-form-url"><label for="url">' . __( 'Website', 'twentythirteen' ) . '</label>' . '<input id="url" name="url" title="Your website or any social media profile URL" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>'; $fields['author'] = '<p class="comment-form-author">' . '<label for="author">' . __( 'Name', 'twentythirteen' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="author" title="Please use your real name, no keywords." name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>'; return $fields; } add_filter('comment_form_default_fields','alter_comment_form_fields'); ?>
Im obigen Code haben wir zuerst einen Plugin-Header erstellt und diesem Plugin einen Namen und eine Beschreibung gegeben. Danach laden wir unsere JavaScript- und CSS-Datei (siehe unsere Anleitung zum Hinzufügen von JavaScript und Styles in WordPress).
Wir achten auch darauf, dass diese Dateien nur geladen werden, wenn ein Kommentarformular angezeigt wird. Danach haben wir das Standardkommentarformular modifiziert und das Titelattribut in Eingabefeldern hinzugefügt. Dieses Titelattribut enthält die Nachricht, die im Tooltip angezeigt werden soll. Im Autorenfeld haben wir beispielsweise verwendet:
title="Please use your real name, no keywords."
Nachdem Sie die Plugin-Datei erstellt haben, ist es an der Zeit, ein wenig jQuery hinzuzufügen. Offen wpb-tooltip.js
Datei und fügen Sie diesen Code darin ein:
(function($) { $( "#commentform" ).tooltip({ position: { my: "center bottom-10", at: "center top", using: function( position, feedback ) { $( this ).css( position ); $( "<div>" ) .addClass( "arrow" ) .addClass( feedback.vertical ) .addClass( feedback.horizontal ) .appendTo( this ); } } }); })(jQuery);
In diesem Code, #commentform
ist der Selektor, in dem jQuery Tooltips anzeigt und .tooltip
ist der Inhaltsteil, in dem wir die Position für Tooltips definiert haben.
Der letzte Schritt besteht nun darin, ein wenig CSS hinzuzufügen wpb-tooltip.css
Datei. Einfach diesen Code kopieren und einfügen:
.ui-tooltip, .arrow:after { background: #356aa0; border: 2px solid white; } .ui-tooltip { padding: 10px 20px; color: white; border-radius: 20px; font: bold 14px "Helvetica Neue", Sans-Serif; text-transform: uppercase; box-shadow: 0 0 7px #356aa0; max-width:350px; } .arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px; } .arrow.top { top: -16px; bottom: auto; } .arrow.left { left: 20%; } .arrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; box-shadow: 6px 5px 9px -9px #356aa0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); tranform: rotate(45deg); } .arrow.top:after { bottom: -20px; top: 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 hochladen wpb-comment-tooltips
Ordner von Ihrem Desktop nach /wp-content/plugins/
Verzeichnis auf Ihrem Webserver mit einem FTP-Client wie Filezilla. Nachdem 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 lernen, wie Sie jQuery-Tooltips in das WordPress-Kommentarformular einfügen. Wir empfehlen Ihnen, diesen Code zu ändern und zu versuchen, QuickInfos an anderen Stellen hinzuzufügen. Sehen Sie sich zum Beispiel an, wie wir unserer Website Tooltip-Testimonials hinzugefügt haben. Für Feedback und Fragen hinterlassen Sie bitte unten einen Kommentar.