首页
常用
教程文档
- C语言
- javascript
- PHP
- Python
- SQL
WordPress相关
- WordPress部分钩子列表
客户案例
询盘分享
- 客户分享
- 虚假询盘
合作方式

原生评论自定义样式

作者 kim
发布时间 2019年3月20日
所属栏目 Wordpress开发
2,097 阅读
0
0 评论

http://www.ashuwp.com/courses/simple/119.html

1、建立comments.php

首先是新建 comments.php，将下面的代码全部复制到里面去：

<?php
if ( post_password_required() )
    return;
?>
<div id="comments" class="responsesWrapper">
    <meta content="UserComments:<?php echo number_format_i18n( get_comments_number() );?>" itemprop="interactionCount">
    <h3 class="comments-title">共有 <span class="commentCount"><?php echo number_format_i18n( get_comments_number() );?></span> 条评论</h3>
    <ol class="commentlist">
        <?php
        wp_list_comments( array(
            'style'       => 'ol',
            'short_ping'  => true,
            'avatar_size' => 48,
            'type'        =>'comment',
            'callback'    =>'simple_comment',
        ) );
        ?>
    </ol>
    <nav class="navigation comment-navigation u-textAlignCenter" data-fuck="<?php the_ID();?>">
    <?php paginate_comments_links(array('prev_next'=>true)); ?>
    </nav>
    <?php if(comments_open()) : ?>
        <div id="respond" class="respond" role="form">
            <h2 id="reply-title" class="comments-title"><?php comment_form_title( '', '回复给 %s' ); ?> <small>
                    <?php cancel_comment_reply_link(); ?>
                </small></h2>
            <?php $user_ID = wp_get_current_user(); if ( get_option('comment_registration') && !$user_ID ) : ?>
                <p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
            <?php else : ?>
                <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" class="commentform" id="commentform">
                    <?php if ( $user_ID ) : ?>
                        <p class="warning-text" style="margin-bottom:10px">以<a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>身份登录 | <a class="link-logout" href="<?php echo wp_logout_url(get_permalink()); ?>">注销 »</a></p>
                        <textarea class="form-control" rows="3" id="comment" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};" placeholder="当你的才华还撑不起你的野心时,那你就应该静下心来评论下..." class="form-control" tabindex="1" name="comment"></textarea>
                    <?php else : ?>
                        <textarea class="form-control" rows="3" id="comment" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};" placeholder="当你的才华还撑不起你的野心时,那你就应该静下心来评论下..." tabindex="1" name="comment"></textarea>
                        <div class="commentform-info">
                            <label id="author_name" for="author">
                                <input class="form-control" id="author" type="text" tabindex="2" value="<?php echo $comment_author; ?>" name="author" placeholder="昵称[必填]" required>
                            </label>
                            <label id="author_email" for="email">
                                <input class="form-control" id="email" type="text" tabindex="3" value="<?php echo $comment_author_email; ?>" name="email" placeholder="邮箱[必填]" required>
                            </label>
                            <label id="author_website" for="url">
                                <input class="form-control" id="url" type="text" tabindex="4" value="<?php echo $comment_author_url; ?>" name="url" placeholder="网址(可不填)">
                            </label>
                        </div>
                    <?php endif; ?>
                    <div class="btn-group commentBtn" role="group">
                        <input name="submit" type="submit" id="submit" class="btn btn-sm btn-danger btn-block" tabindex="5" value="发表评论" /></div>
                    <?php comment_id_fields(); ?>
                </form>
            <?php endif; ?>
        </div>
    <?php endif; ?>
</div>

<?php

if ( post_password_required() )

return;

<?php

wp_list_comments( array(

'style' => 'ol',

'short_ping' => true,

'avatar_size' => 48,

'type' =>'comment',

'callback' =>'simple_comment',

) );

</ol>

<?php paginate_comments_links(array('prev_next'=>true)); ?>

</nav>

<?php if(comments_open()) : ?>

<?php cancel_comment_reply_link(); ?>

</small></h2>

<?php $user_ID = wp_get_current_user(); if ( get_option('comment_registration') && !$user_ID ) : ?>

<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>

<?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" class="commentform" id="commentform">

<?php if ( $user_ID ) : ?>

<p class="warning-text" style="margin-bottom:10px">以<a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>身份登录 | <a class="link-logout" href="<?php echo wp_logout_url(get_permalink()); ?>">注销 »</a></p>

<?php else : ?>

<input class="form-control" id="author" type="text" tabindex="2" value="<?php echo $comment_author; ?>" name="author" placeholder="昵称[必填]" required>

</label>

<input class="form-control" id="email" type="text" tabindex="3" value="<?php echo $comment_author_email; ?>" name="email" placeholder="邮箱[必填]" required>

</label>

<input class="form-control" id="url" type="text" tabindex="4" value="<?php echo $comment_author_url; ?>" name="url" placeholder="网址(可不填)">

</label>

</div>

<?php endif; ?>

<?php comment_id_fields(); ?>

</form>

<?php endif; ?>

</div>

<?php endif; ?>

</div>

2、增加评论列表展示样式

然后在主题的 functions.php 中加入自定义的评论列表展示样式：

//自定义评论列表模板
function simple_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li class="comment" id="li-comment-<?php comment_ID(); ?>">
   		<div class="media">
   			<div class="media-left">
        		<?php if (function_exists('get_avatar') && get_option('show_avatars')) { echo get_avatar($comment, 48); } ?>
   			</div>
   			<div class="media-body">
   				<?php printf(__('<p class="author_name">%s</p>'), get_comment_author_link()); ?>
		        <?php if ($comment->comment_approved == '0') : ?>
		            <em>评论等待审核...</em><br />
				<?php endif; ?>
				<?php comment_text(); ?>
   			</div>
   		</div>
   		<div class="comment-metadata">
   			<span class="comment-pub-time">
   				<?php echo get_comment_time('Y-m-d H:i'); ?>
   			</span>
   			<span class="comment-btn-reply">
 				<i class="fa fa-reply"></i> <?php comment_reply_link(array_merge( $args, array('reply_text' => '回复','depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
   			</span>
   		</div>
<?php
}
?>

//自定义评论列表模板

function simple_comment($comment, $args, $depth) {

$GLOBALS['comment'] = $comment; ?>

<?php if (function_exists('get_avatar') && get_option('show_avatars')) { echo get_avatar($comment, 48); } ?>

</div>

<?php printf(__('<p class="author_name">%s</p>'), get_comment_author_link()); ?>

<?php if ($comment->comment_approved == '0') : ?>

<em>评论等待审核...</em><br />

<?php endif; ?>

<?php comment_text(); ?>

</div>

<?php echo get_comment_time('Y-m-d H:i'); ?>

</span>

<i class="fa fa-reply"></i> <?php comment_reply_link(array_merge( $args, array('reply_text' => '回复','depth' => $depth, 'max_depth' => $args['max_depth']))) ?>

</span>

</div>

<?php

}

函数说明

<?php
get_avatar($id_or_email,$size,$default, $alt);
//$id_or_email这个参数必须，可以使一个用户ID、一个email,或者直接一个comment对象，上面代码就是直接将评论对象作为参数
//$size，这个参数就是头像大小，默认是96，上面代码设为32
//$default 一个图片地址，就是用户没有头像是显示的图片，默认是后台设置的那个
//$alt 就是图片的$alt信息了，我觉得alt信息应该用评论者名字
?>
<?php comment_reply_link();
//回复链接
?>
<?php
get_comment_author_link();
//获取评论者的链接
?>
<?php
get_comment_time();
//获取评论时间
edit_comment_link();
//编辑评论的链接
comment_text();
//输出评论内容
?>

<?php

get_avatar($id_or_email,$size,$default, $alt);

//$id_or_email这个参数必须，可以使一个用户ID、一个email,或者直接一个comment对象，上面代码就是直接将评论对象作为参数

//$size，这个参数就是头像大小，默认是96，上面代码设为32

//$default 一个图片地址，就是用户没有头像是显示的图片，默认是后台设置的那个

//$alt 就是图片的$alt信息了，我觉得alt信息应该用评论者名字

<?php comment_reply_link();

//回复链接

<?php

get_comment_author_link();

//获取评论者的链接

<?php

get_comment_time();

//获取评论时间

edit_comment_link();

//编辑评论的链接

comment_text();

//输出评论内容

3、前台调取

最后在需要调取的地方增加如下代码

<?php if ( comments_open() || get_comments_number() ) :
 comments_template();
endif;?>

<?php if ( comments_open() || get_comments_number() ) :

comments_template();

endif;?>

comments_template()函数默认的就是加载主题文件夹下面的comments.php文件，这个函数也是可以带参数的，以便让你可以加载别的文件，比如某些页面你需要加载一个不一样的评论表单，你就需要使用comments_template()带上参数，这里不细说。
为了防止某些恶意用户直接打开评论文件，我们在comments.php的头部添加代码：

<?php
    if (isset($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
        die ('Please do not load this page directly. Thanks!');
?>

<?php