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

Kommentare ermöglichen es Benutzern, mit den Inhalten Ihrer Website zu interagieren. Deshalb glauben wir, dass es wichtig ist, Ihr Kommentar-Layout und Kommentarformular so zu gestalten, dass es benutzerfreundlich und ansprechend ist. Kürzlich fragte uns ein Benutzer, wie er jQuery-Tooltips zum WordPress-Kommentarformular hinzufügen kann. Wir dachten, dass dies auch für andere nützlich sein könnte. In diesem Tutorial zeigen wir Ihnen, wie Sie jQuery-Tooltips in das WordPress-Kommentarformular einfügen.

Warum jQuery-Tooltips hinzufügen?

Tooltips erscheinen, wenn ein Benutzer mit der Maus über ein Element fährt, und geben normalerweise eine Beschreibung des jeweiligen Elements an. In diesem Tutorial fügen wir jQuery-Tooltips hinzu, um Hinweise wie „Bitte verwenden Sie Ihren echten Namen in den Kommentarfeldern“ anzuzeigen.

Durch das Hinzufügen von jQuery-Tooltips können Sie die Benutzererfahrung verbessern und es wird schöner aussehen.

So fügen Sie jQuery-Tooltips hinzu

Als Erstes müssen Sie einen Ordner auf Ihrem Desktop erstellen und ihn wpb-comment-tooltips nennen. 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 Notepad, um diese Dateien zu erstellen. Sobald Sie die Dateien erstellt haben, müssen Sie wpb-comment-tooltip.php im Texteditor öffnen. Kopieren Sie diesen Code und fügen Sie ihn in die Datei ein:

<?php
/** 
Plugin Name: WPBeginner's Comment Form Tool Tips
Description: A jQuery powered comment form tool tips plugin based on a tutorial by WPBeginner
Version: 1.0
Author: WPBeginner
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 unseren Leitfaden zum korrekten Hinzufügen von JavaScript und Styles in WordPress).

Wir stellen auch sicher, dass diese Dateien nur geladen werden, wenn ein Kommentarformular angezeigt wird. Danach haben wir das Standard-Kommentarformular modifiziert und das title-Attribut zu den Eingabefeldern hinzugefügt. Dieses title-Attribut enthält die Nachricht, die im Tooltip angezeigt werden soll. Zum Beispiel haben wir im Autorenfeld verwendet:

title="Bitte verwenden Sie Ihren echten Namen, keine Schlüsselwörter."

Jetzt, da Sie die Plugin-Datei erstellt haben, ist es an der Zeit, etwas jQuery hinzuzufügen. Öffnen Sie die Datei wpb-tooltip.js und fügen Sie diesen Code hinzu:

(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 ist #commentform der Selektor, an dem jQuery Tooltips anzeigt, und .tooltip ist der Inhaltsbereich, in dem wir die Position für Tooltips definiert haben.

Nun ist der letzte Schritt, ein wenig CSS in die Datei wpb-tooltip.css einzufügen. Kopieren Sie einfach diesen Code und fügen Sie ihn ein:

.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 nach Ihren Bedürfnissen anzupassen.

Das ist alles. Jetzt haben Sie erfolgreich ein Plugin erstellt, das jQuery-Tooltips zum WordPress-Kommentarformular hinzufügt. Alles, was Sie tun müssen, ist, den Ordner wpb-comment-tooltips von Ihrem Desktop in das Verzeichnis /wp-content/plugins/ auf Ihrem Webserver hochzuladen, indem Sie einen FTP-Client wie Filezilla verwenden. Sobald Sie das Plugin hochgeladen haben, gehen Sie zur Seite Plugins im WordPress-Adminbereich und aktivieren Sie das Plugin.

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie jQuery-Tooltips in das WordPress-Kommentarformular einfügen. Wir ermutigen Sie, diesen Code zu modifizieren und zu versuchen, Tooltips an anderen Stellen hinzuzufügen. Schauen Sie sich zum Beispiel an, wie wir Tooltip-Testimonials auf unserer Website hinzugefügt haben. Für Feedback und Fragen hinterlassen Sie bitte einen Kommentar unten.