Kommentare sind eine gute Möglichkeiten, um mit deinen Leserinnen und Lesern zu interagieren. Aber, hast du dich jemals gefragt, wie du das obligatorische WordPress-Kommentarformular besser an deine Bedürfnisse anpassen kannst? Ob du zusätzliche Felder hinzufügen, die Reihenfolge ändern oder sogar spezielle Validierungen einbauen möchtest – mit ein paar einfachen Anpassungen kannst du das Kommentarformular komplett personalisieren.

In diesem Beitrag zeige ich dir, wie du das Kommentarformular von WordPress mit ein paar Zeilen Code individualisierst. Egal, ob du die E-Mail-Felder modifizieren oder benutzerdefinierte Informationen wie eine Telefonnummer hinzufügen möchtest – ich erkläre dir Schritt für Schritt, wie du das umsetzen kannst.

Das Anpassen des WordPress-Kommentarformulars mithilfe von Funktionen bietet dir viel Flexibilität, um die Struktur, das Erscheinungsbild und die Felder zu ändern. Das Standard-Kommentarformular wird durch die Funktion comment_form() generiert, die du durch Übergeben eines Arrays von Argumenten anpassen kannst.

Hier erfährst du, wie du das WordPress-Kommentarformular mithilfe von Funktionen in der functions.php-Datei anpassen kannst:

1. Grundlegende Anpassung des Kommentarformulars

Du kannst das WordPress-Kommentarformular anpassen, indem du dich in den Filter comment_form_defaults einhakst (hook) und die Standardeinstellungen änderst.

1. Starte deinen bevorzugten FTP-Client (z. B. Filezilla).
2. Stelle eine Remote-Verbindung zu deinem Hosting-Server her.
3. Navigiere zum Ordner /wp-content/themes/.
4. Öffnen den Ordner deines aktives Themes.
5. Suche nach der Datei functions.php.
6. Lade die Datei functions.php herunter.
7. Öffne die Datei functions.php mit einem Texteditor (z. B. Notepad++).
8. Bearbeite und speichere deine Datei.
9. Lade die aktualisierte functions.php auf deinen Hosting-Server hoch.

Hier ist eine Beispiel-Funktion:

function devslife_custom_comment_form($fields) {

    // Kommentarfeld anpassen
    $fields['comment_field'] = '<p class="comment-form-comment"><label for="comment">' . _x( 'Kommentar', 'noun' ) .
        '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">' .
        '</textarea></p>';

    // Namensfeld anpassen
    $fields['fields']['author'] = '<p class="comment-form-author">' .
        '<label for="author">' . __( 'Name' ) . '</label> ' .
        ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
        '" size="30" ' . $aria_req . ' /></p>';

    // E-Mail-Feld anpassen
    $fields['fields']['email'] = '<p class="comment-form-email"><label for="email">' . __( 'E-Mail' ) . '</label> ' .
        ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
        '" size="30" ' . $aria_req . ' /></p>';

    // Website-Feld anpassen (optional)
    $fields['fields']['url'] = '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' .
        '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
        '" size="30" /></p>';

    // Text des "Senden"-Buttons ändern
    $fields['submit_button'] = '<button type="submit" class="submit">' . __( 'Kommentar senden' ) . '</button>';

    // Entferne das Website-Feld
    // unset($fields['fields']['url']);

    return $fields;
    
}
add_filter('comment_form_defaults', 'devslife_custom_comment_form');

PHP

2. Felder im Kommentarformular neu anordnen bzw. die Reihenfolge ändern

Standardmäßig sind die Felder (Name, E-Mail usw.) in einer bestimmten Reihenfolge angeordnet. Du kannst sie neu anordnen, indem du das Array $fields modifizierst.

function devslife_reorder_comment_fields($fields) {

    $new_fields = array();
    // Verschiebe das Kommentarfeld nach oben
    $new_fields['comment'] = $fields['comment'];
    // Autor-, E-Mail- und URL-Felder neu anordnen
    $new_fields['author'] = $fields['author'];
    $new_fields['email'] = $fields['email'];
    $new_fields['url'] = $fields['url'];
    
    return $new_fields;
    
}
add_filter('comment_form_fields', 'devslife_reorder_comment_fields');

PHP

Dieser Code verschiebt das Kommentar-Textfeld an die Spitze des Formulars und ordnet dann die Autor-, E-Mail- und URL-Felder darunter an.

3. Eigene Felder zum Kommentarformular hinzufügen

Wenn du eigene Felder zum Kommentarformular hinzufügen möchtest (z. B. eine DSGVO-Checkbox, Bewertungsfelder oder benutzerdefinierte Felder), kannst du dich in den Filter comment_form_fields einhaken.

Hier ist ein Beispiel, wie du ein benutzerdefiniertes „Telefonnummer“-Feld zum Kommentarformular hinzufügst:

function add_custom_phone_field($fields) {

    $fields['phone'] = '<p class="comment-form-phone">' .
        '<label for="phone">' . __( 'Telefonnummer' ) . '</label>' .
        '<input id="phone" name="phone" type="text" size="30" /></p>';
        
    return $fields;
    
}
add_filter('comment_form_default_fields', 'add_custom_phone_field');

PHP

In diesem Code haben wir ein benutzerdefiniertes Telefonfeld zum Formular hinzugefügt.

4. Eigene Felder bei der Formularübermittlung validieren

Wenn du benutzerdefinierte Felder hinzufügst, möchtest du sicherstellen, dass diese Felder bei der Übermittlung des Kommentars validiert werden. Das kannst du erreichen, indem du dich in den Filter preprocess_comment einhakst.

Hier ist ein Beispiel, wie du das benutzerdefinierte Telefonnummer-Feld validierst:

function devslife_validate_custom_comment_fields($commentdata) {

    if (empty($_POST['phone'])) {
        wp_die(__('Fehler: Bitte geben Sie Ihre Telefonnummer an.'));
    }
    
    return $commentdata;
    
}
add_filter('preprocess_comment', 'devslife_validate_custom_comment_fields');

PHP

Dieser Code stellt sicher, dass Benutzer keinen Kommentar absenden können, ohne ihre Telefonnummer einzugeben.

5. Eigene Felder in der Datenbank speichern

Um die Daten des benutzerdefinierten Feldes in der Datenbank zu speichern, kannst du die Aktion comment_post verwenden.

Hier ist, wie du das benutzerdefinierte Telefonnummer-Feld speicherst:

function devslife_save_comment_phone_meta($comment_id) {

    if (isset($_POST['phone'])) {
        $phone = sanitize_text_field($_POST['phone']);
        add_comment_meta($comment_id, 'phone', $phone, true);
    }
    
}
add_action('comment_post', 'devslife_save_comment_phone_meta');

PHP

6. Eigene Felder im Admin-Bereich anzeigen

Um das benutzerdefinierte Feld im WordPress-Admin-Bereich anzuzeigen, kannst du dich in add_meta_boxes_comment und edit_comment einhaken.

Hier ist, wie du die Telefonnummer im Kommentar-Admin-Bereich anzeigen kannst:

function devslife_add_phone_comment_meta_box() {

    add_meta_box('title', __('Telefonnummer'), 'display_phone_comment_meta_box', 'comment', 'normal', 'high');
    
}
add_action('add_meta_boxes_comment', 'devslife_add_phone_comment_meta_box');

function devslife_display_phone_comment_meta_box($comment) {

    $phone = get_comment_meta($comment->comment_ID, 'phone', true);
    ?>
    <p>
        <label for="phone"><?php _e('Telefonnummer'); ?></label>
        <input type="text" name="phone" value="<?php echo esc_attr($phone); ?>" class="widefat" />
    </p>
    <?php
    
}

// Speichere das Feld, wenn der Kommentar aktualisiert wird
function devslife_update_comment_phone_meta($comment_id) {

    if (isset($_POST['phone'])) {
        $phone = sanitize_text_field($_POST['phone']);
        update_comment_meta($comment_id, 'phone', $phone);
    }
    
}
add_action('edit_comment', 'devslife_update_comment_phone_meta');

PHP

Dieser Code fügt eine Meta-Box zum Kommentarbearbeitungsbildschirm im WordPress-Admin-Bereich hinzu, in der die Telefonnummer angezeigt und bearbeitet werden kann.

7. Eigene Felder im Frontend anzeigen

Um benutzerdefinierte Felder (wie Telefonnummern) im Frontend mit jedem Kommentar anzuzeigen, kannst du dich in den Filter comment_text einhaken.

Hier ist, wie du die Telefonnummer unter jedem Kommentar anzeigst:

function devslife_display_custom_comment_phone($comment_text, $comment) {

    $phone = get_comment_meta($comment->comment_ID, 'phone', true);
    if ($phone) {
        $comment_text .= '<p><strong>' . __('Telefonnummer:') . '</strong> ' . esc_html($phone) . '</p>';
    }
    
    return $comment_text;
    
}
add_filter('comment_text', 'devslife_display_custom_comment_phone', 10, 2);

PHP

Das zeigt die Telefonnummer zusammen mit dem Kommentartext an.

Zusammenfassung der Anpassungen

Felder neu anordnen: Ändere die Reihenfolge, in der die Felder angezeigt werden.
Eigene Felder: Füge neue Felder wie Telefonnummern, Checkboxen usw. hinzu.
Validierung: Stelle sicher, dass die Felder vor der Formularübermittlung ausgefüllt werden.
Daten speichern: Speichere benutzerdefinierte Felddaten in der WordPress-Datenbank.
Admin-Anzeige: Zeige benutzerdefinierte Felder im Kommentar-Admin-Bereich an.
Frontend-Anzeige: Gib benutzerdefinierte Felder im Frontend mit Kommentaren aus.

Mit diesen Anpassungen hast du die volle Kontrolle darüber, wie das WordPress-Kommentarformular funktioniert und aussieht.

Hat dir dieser Beitrag gefallen, dann freuen wir uns auf dein Feedback : )

Tagged with: Code, Datenbank speicher, E-Mail, Eigene Felder hinzufügen, Feedback, Felder im Admin-Bereich, Frontend, functions.php, Kommentarbereich, Kommentare, Kommentarfeld, Kommentarformular, Name, PHP, Reihenfolge ändern, Senden-Button, Telefonnummer, Validierung, WordPress, zusätzliche Felder

So passt du das WordPress-Kommentarformular an deine Bedürfnisse an