Die WordPress-Kommentarvorlage (Callback) ist nicht nur einer der komplizierteren Schritte beim Erstellen eines benutzerdefinierten WordPress-Themes, sondern der Standardkommentarcode ist auch ziemlich kompliziert anzupassen. Wenn Sie ein Theme-Entwickler sind und beim Versuch, Ihre Kommentare so anzupassen, dass sie so aussehen, wie Sie es möchten, nicht mehr können, aber nicht können, weil Sie zusätzliche Div-Klassen hinzufügen oder einige entfernen müssen, dann müssen Sie diesen Beitrag lesen . Ich zeige Ihnen, wie Sie ganz einfach eine benutzerdefinierte Rückrufvorlage erstellen, die WordPress für Ihre Kommentarstruktur verwendet, damit Sie die vollständige Kontrolle über Ihr Kommentardesign haben.
Ein Hinweis an die Entwickler.. Beim Erstellen eines WordPress-Themes für die WordPress.org Verzeichnis oder für die Weiterverteilung auf einem anderen Marktplatz ist es am besten, das Standardkommentardesign beizubehalten, um sicherzustellen, dass es keine möglichen Konflikte mit Plugins von Drittanbietern gibt. Dieses Tutorial ist in erster Linie für diejenigen gedacht, die nach einer benutzerdefinierten Lösung auf ihrer aktiven Site suchen (indem sie die Änderung über ein untergeordnetes Thema vornehmen) oder für diejenigen, die ein benutzerdefiniertes Design für ihren Kunden entwickeln.
Nun zum eigentlichen Tutorial und wenn Sie Fragen oder Vorschläge haben, wie wir den Leitfaden verbessern können, lassen Sie es mich bitte im Kommentarbereich unter dem Leitfaden wissen.
Schritt 1: Erstellen Sie better-comments.php
Erstellen Sie eine neue PHP-Datei für Ihr übergeordnetes oder untergeordnetes Thema (Sie können es beliebig nennen, aber ich nenne es gerne better-comments.php) und fügen Sie den folgenden Code ein.
<?php
// My custom comments output html
function better_comments( $comment, $args, $depth ) {
// Get correct tag used for the comments
if ( 'div' === $args['style'] ) {
$tag = 'div';
$add_below = 'comment';
} else {
$tag = 'li';
$add_below = 'div-comment';
} ?>
<<?php echo $tag; ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?> id="comment-<?php comment_ID() ?>">
<?php
// Switch between different comment types
switch ( $comment->comment_type ) :
case 'pingback' :
case 'trackback' : ?>
<div class="pingback-entry"><span class="pingback-heading"><?php esc_html_e( 'Pingback:', 'textdomain' ); ?></span> <?php comment_author_link(); ?></div>
<?php
break;
default :
if ( 'div' != $args['style'] ) { ?>
<div id="div-comment-<?php comment_ID() ?>" class="comment-body">
<?php } ?>
<div class="comment-author vcard">
<?php
// Display avatar unless size is set to 0
if ( $args['avatar_size'] != 0 ) {
$avatar_size = ! empty( $args['avatar_size'] ) ? $args['avatar_size'] : 70; // set default avatar size
echo get_avatar( $comment, $avatar_size );
}
// Display author name
printf( __( '<cite class="fn">%s</cite> <span class="says">says:</span>', 'textdomain' ), get_comment_author_link() ); ?>
</div><!-- .comment-author -->
<div class="comment-details">
<div class="comment-meta commentmetadata">
<a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>"><?php
/* translators: 1: date, 2: time */
printf(
__( '%1$s at %2$s', 'textdomain' ),
get_comment_date(),
get_comment_time()
); ?>
</a><?php
edit_comment_link( __( '(Edit)', 'textdomain' ), ' ', '' ); ?>
</div><!-- .comment-meta -->
<div class="comment-text"><?php comment_text(); ?></div><!-- .comment-text -->
<?php
// Display comment moderation text
if ( $comment->comment_approved == '0' ) { ?>
<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'textdomain' ); ?></em><br/><?php
} ?>
<div class="reply"><?php
// Display comment reply link
comment_reply_link( array_merge( $args, array(
'add_below' => $add_below,
'depth' => $depth,
'max_depth' => $args['max_depth']
) ) ); ?>
</div>
</div><!-- .comment-details -->
<?php
if ( 'div' != $args['style'] ) { ?>
</div>
<?php }
// IMPORTANT: Note that we do NOT close the opening tag, WordPress does this for us
break;
endswitch; // End comment_type check.
}
Dies ist eine Einstiegsvorlage, mit der Sie arbeiten können. Sie enthält die grundlegende Ausgabe, die Sie für Ihre Kommentare benötigen, mit einigen zusätzlichen Divs zum einfacheren Gestalten.
Schritt 2: Fügen Sie Ihre neue better-comments.php-Vorlage hinzu
Platzieren Sie die neu erstellte Datei in Ihrem übergeordneten oder untergeordneten Thema, gehen Sie dann zu Ihrer Datei functions.php und verwenden Sie die Funktion require_once, um Ihre Datei zu laden. Sehen Sie sich das Beispiel unten an (stellen Sie sicher, dass Sie den Speicherort ändern, wenn Sie die Datei better-comments.php einem anderen Unterordner in Ihrem Design hinzugefügt haben – ich lege meine benutzerdefinierten Funktionen normalerweise in einen Ordner functions oder inc, um sie vom Kern zu trennen Vorlagendateien).
Notiz: Das folgende Snippet enthält 2 Beispiele, in denen Sie die richtige Codezeile verwenden sollten, je nachdem, ob Sie die Vorlage zu einem übergeordneten oder untergeordneten Thema hinzufügen.
// Include better comments file from a Parent theme
require_once get_parent_theme_file_path( '/functions/better-comments.php' );
// Or include via a child theme
require_once get_stylesheet_directory() . '/functions/better-comments.php';
Sie können den Code an beliebiger Stelle in Ihre Datei functions.php einfügen, achten Sie nur darauf, ihn innerhalb der Tags hinzuzufügen.
Schritt 3: Bessere Kommentarrückrufe zu wp_list_comments hinzufügen
Jetzt müssen wir WordPress nur noch anweisen, unsere benutzerdefinierte Ausgabevorlage für die Kommentare zu verwenden. Und es gibt zwei Möglichkeiten, dies zu tun, je nachdem, ob Sie mit einem Elternteil arbeiten oder die Standardfunktion des Elternthemas ändern (auch bekannt als Kindthema oder Plugin).
Übergeordnetes Thema: Wenn Sie mit einem Parent-Theme arbeiten, sollten Sie die Datei comments.php suchen und die Funktion wp_list_comments bearbeiten, um den Rückruf wie folgt in das Argumentarray aufzunehmen:
<?php
// Display comments
wp_list_comments( array(
'callback' => 'better_comments'
) ); ?>
Child-Theme oder Plugin: Wenn Sie mit einem Child-Theme oder einem Plugin arbeiten und die HTML-Kommentarausgabe filtern möchten, verwenden Sie die wp_list_comments_args filtern und übergeben Sie Ihr neues Callback-Argument wie folgt:
// Filter the comment list arguments
add_filter( 'wp_list_comments_args', function( $args ) {
$args[ 'callback' ] = 'better_comments';
return $args;
} );
Und natürlich verweisen wir in beiden Fällen auf den Funktionsnamen, den wir in Schritt 1 verwendet haben (better_comments).
Schritt 4: Optimieren der benutzerdefinierten HTML-Ausgabe
Wenn Sie alles richtig gemacht haben, verwendet WordPress jetzt Ihre better_comments-Funktion für die HTML-Kommentarausgabe in Ihrem Theme. Im Gegensatz zur einfachen Verwendung des wp_list_comments Funktion können Sie jetzt den gesamten Code bearbeiten, der bei jedem Kommentar angezeigt wird. Jetzt ist der „Himmel die Grenze“. Bearbeiten Sie Ihre Funktion, damit WordPress-Kommentare so aussehen, wie Sie es möchten. Nachfolgend finden Sie einige Beispiele für die großartigen Dinge, die Sie tun können:
Pingbacks und regelmäßige Kommentare anders anzeigen
Wenn Sie sich den Code ansehen, können Sie sehen, dass er eine switch-Anweisung enthält, die verwendet wird, um die Pingbacks/Trackbacks anders als Standardkommentare anzuzeigen. Während wir normalerweise empfehlen, die Pingbacks/Trackbacks zu deaktivieren, wenn Sie sie auf Ihrer Website verwenden oder möchten, dass sie für Ihr Endprodukt gut aussehen (wenn Sie ein Theme-Entwickler sind), können Sie diese Methode verwenden, um die Ausgabe je nach Kommentar vollständig zu ändern Typ.
Zeigen Sie einen Kommentar-Benutzer-„Badge“ an
Wenn Sie ein Blog im Community-Stil betreiben, in dem Ihre Leser angemeldet sind, können Sie für jeden Kommentar ein „Badge“ einfügen, das die „Rolle“ der Person anzeigt, die den Kommentar hinterlassen hat. So können Sie ein Abzeichen für Abonnenten, Mitwirkende, Autor, Administrator usw. anzeigen.
global $wp_roles;
if ( $wp_roles ) {
$user_id = $comment->user_id;
if ( $user_id && $user = new WP_User( $user_id ) ) {
if ( isset( $user->roles[0] ) ) { ?>
<div class="comment-user-badge <?php echo esc_attr( $user->roles[0] ); ?>"><?php esc_html( translate_user_role( $wp_roles->roles[ $user->roles[0] ]['name'] ) ); ?></div>'
<?php }
} else { ?>
<div class="comment-user-badge guest"><?php esc_html_e( 'Guest', 'textdomain' ); ?></div>
<?php }
}
Gravatargröße ändern
Eine andere coole Sache, die du mit den besseren Kommentaren machen kannst, ist die Avatargröße zu ändern. Wir sind sicher, du hättest sie manuell über das wp_list_comments-Array oder den wp_list_comments_args-Filter ändern können, aber jetzt kannst du sie auch manuell ändern, das heißt, du könntest sogar Verwenden Sie je nach Kommentar unterschiedliche Größen (vielleicht möchten Sie, dass der Avatar des Autors größer ist, das könnte cool sein).
Standardgravatar ändern oder vollständig entfernen
Sie können die Funktion get_avatar ändern, um einen dritten Parameter für einen Standardgravatar hinzuzufügen, wenn Sie die URL Ihres Standardavatarsymbols manuell festlegen möchten. Das bedeutet, dass Sie einen lustigen Standard-Avatar hinzufügen können, der zu Ihrer Website passt. Alternativ können Sie den Avatar-Code auch vollständig entfernen, wenn Sie ihn lieber nicht verwenden (dies kann eine gute Idee für Sites mit vielen Kommentaren sein, da Gravatare etwas langsam geladen werden und die Site auch aufblähen können).
<?php echo get_avatar( $comment, $avatar_size, 'URL TO CUSTOM DEFAULT AVATAR' ); ?>
Bonus: Autorenkommentare hervorheben
Technisch gesehen hat dies nichts mit Ihrer benutzerdefinierten Kommentarausgabe zu tun, aber es ist eine Erwähnung wert, da viele Designs dies standardmäßig nicht integrieren. Wenn der Kommentar vom Autor des Beitrags erstellt wurde, enthält der Kommentar in der Ausgabe von comment_class den Klassennamen bypostauthor. Dies ermöglicht es Ihnen, die Kommentare des Autors Ihres Beitrags anders zu gestalten als die anderen Kommentare, um sie hervorzuheben.
.bypostauthor {background: #ffff99;}