17713433920 info@mac163.com

WordPress注释模板(回调)不仅是创建自定义WordPress主题时较为复杂的步骤之一,而且自定义默认注释代码也相当复杂。如果您是主题开发人员,并且想尝试自定义注释以使其看起来像您想要的样子而陷于困境,但是不能这样做,因为您需要添加额外的div类或必须删除一些div类,那么您需要查看这篇文章。我将向您展示如何轻松创建WordPress将用于评论结构的自定义回叫模板,以便您可以完全控制评论设计。

如何在WordPress中创建自定义评论回调
如何在WordPress中创建自定义评论回调

给开发人员的说明。在为WordPress.org目录构建WordPress主题或在其他任何市场上进行重新分发时,最好保留默认的注释设计,以确保与第三方插件没有任何可能的冲突。本教程主要适用于在其活动站点上寻求定制解决方案的用户(通过子主题进行修改)或为客户开发定制设计的用户。

现在进入实际教程,如果您对我们如何改进指南有任何疑问或建议,请在指南下方的评论部分中告诉我。

步骤1:建立Better-comments.php

为您的父主题或子主题创建一个新的php文件(您可以命名为任何东西,但我喜欢将其命名为Better-comments.php),然后将以下代码粘贴。

<?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.
}

这是一个供您使用的入门模板,其中包括您希望用于注释的基本输出,还包括一些额外的div,以简化样式。

步骤2:加入新的Better-comments.php模板

将新创建的文件放在您的父主题或子主题中,然后转到您的functions.php文件,并使用require_once函数加载文件。请参见下面的示例(如果已将Better-comments.php文件添加到主题的其他子文件夹中,请确保更改位置–我通常将自定义函数放在函数或inc文件夹中,以使其与核心分开模板文件)。

注意:以下代码段包含2个示例,您需要使用正确的代码行,具体取决于您是将模板添加到父主题还是子主题。

// 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';

您可以在functions.php文件中的任何位置添加代码,只需确保将其添加在<?php和?>标记内。

步骤3:向wp_list_comments添加更好的评论回调

现在,我们只需要告诉WordPress将我们的自定义输出模板用于注释即可。有两种方法可以执行此操作,具体取决于您是与父级一起工作还是更改默认的父主题功能(又称子主题或插件)。

父主题:如果您正在使用父主题,则需要找到comment.php文件,并希望编辑wp_list_comments函数以在参数数组中包含回调,例如:

<?php
// Display comments
wp_list_comments( array(
    'callback' => 'better_comments'
) ); ?>

子主题或插件:如果您正在使用子主题或插件,并且想要过滤注释html输出,则不希望使用wp_list_comments_args过滤器并传递新的回调参数,例如:

// Filter the comment list arguments
add_filter( 'wp_list_comments_args', function( $args ) {
    $args[ 'callback' ] = 'better_comments';
	return $args;
} );

当然,在两种情况下,我们都引用了在步骤1中使用的函数名称(better_comments)。

步骤4:调整自定义HTML输出

如果一切操作正确,WordPress现在将在主题中使用您的better_comments函数作为注释html输出。与仅使用wp_list_comments函数相反,您现在可以编辑将与每个注释一起显示的所有代码。现在,“天空是极限”。编辑您的函数,使WordPress注释看起来像您想要的样子。以下是一些您可以做的令人敬畏的事情的示例:

以不同方式显示Pingback和常规注释

如果看一下代码,您会发现它具有一个switch语句,该语句用于显示pingback / trackback与标准注释不同。虽然我们通常建议您在网站上使用pingback / trackback或希望它们对最终产品看起来不错(如果您是主题开发人员),则可以使用此方法根据评论完全更改输出类型。

显示评论用户“徽章”

如果您正在运行社区风格的博客,您的读者已登录,则可以为每个评论插入一个“徽章”,以显示留下评论的人的“角色”。因此,您可以为订阅者,贡献者,作者,管理员等显示徽章。

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 }
}

更改墓碑大小

您可以用更好的注释执行的另一项很酷的操作是更改头像大小,我们相信,您可以通过wp_list_comments数组手动更改它,也可以使用wp_list_comments_args过滤器更改它,但是现在您也可以手动更改它,这意味着您甚至可以根据评论使用不同的大小(也许您希望作者的头像更大,这可能会很酷)。

更改默认Gravatar或将其完全删除

如果要手动设置默认头像图标的URL,则可以修改get_avatar函数以为默认图片添加第3个参数。这意味着您可以添加一个与您的网站匹配的有趣的默认头像。或者,如果您不使用头像代码,则可以将其完全删除(这对于带有大量注释的网站来说是个好主意,因为gravatars的加载速度可能会变慢,并且会使网站膨胀。)

<?php echo get_avatar( $comment, $avatar_size, 'URL TO CUSTOM DEFAULT AVATAR' ); ?>

奖励:突出作者评论

从技术上讲,这与您的自定义评论输出无关,但是值得一提,因为许多主题默认情况下都不集成此主题。在comment_class输出中,如果评论是由帖子的作者做出的,则该评论将包含bypostauthor类名,这使您可以  将帖子作者的评论样式设置为与其他评论不同,从而使它们脱颖而出。

.bypostauthor {background: #ffff99;}

微信二维码

扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
Mac163网站建设,需要帮助点击我!
  • 17713433920
  • 在线客户
  • 联系邮箱
  • 扫一扫,加好友

关闭搜索
购物车
回到顶部