构建一个Bootstrap WordPress主题#13 开启评论功能

我们要做的最后一件事是在我们的文章详情页面添加一些评论功能:

  1. 打开 single.php 文件,我们要在类名为panel-body的div底部再添加一个评论模板, 添加comments_template() 方法:
<?php endif; ?>
<?php comments_template(); ?>
</div>
  1. 创建一个名为 comments.php 的新文件,在文件内输入TEST,保存并刷新页面。


    comments.php
  2. 接下来在comments.php 文件中添加评论模板结构:
<div class="comments">
<?php if(have_comments()): ?>
    <h3 class="comments-title">
    <?php echo get_comments_number(). ' 条评论'; ?>
    </h3>
    <ul class="row comment-list">
    <?php wp_list_comments(array('avatar_size' => 90, 'callback' => 'add_theme_comments'));?>
    </ul>
    <?php if(!comments_open() && '0' != get_comments_number() && post_type_supports(get_post_type(), 'comments')) : ?>
    <p class="no-comments">
        <?php _e('Comments are closed.', 'dazzling'); ?>
    </p>
    <?php endif; ?>
<?php endif; ?>
</div>

这部分代码是最外围一个类名为comments的div和<?php if(have_comments()): ?>,内部包含了h3,ul,和p标签三部分。上面的代码将检查评论功能是否已关闭,如果是,那么我们可以留下一点注释。

  1. 接下来我们在这个div下方放置一条横线, 然后我们需要创建我们的注释参数,然后创建表单:
<hr>
<?php
$comments_args = array(
// change the title of send button
'label_submit'=>'发布',
// change the title of the reply section
'title_reply'=>'写下评论',
// remove "Text or HTML to be displayed after the set of comment
//fields"
'comment_notes_after'=>'',
// redefine your own textarea (the comment body)
'comment_field'=>'<p class="comment-form-comment">
<label for="comment">' ._x('Comment', 'noun') . '</label><br/>
<textarea class="form-control" id="comment" name="comment"
aria-required="true">
</textarea></p>',
);
comment_form($comments_args);

保存代码,刷新前端页面:


报错了

提示无法找到回调函数 add_theme_comments,问题出在这里:

<?php
    wp_list_comments(array(
        'avatar_size' => 90,
        'callback' => 'add_theme_comments'
    ));
?>

打开 functions.php 文件,添加下面的代码:

// Add Comments
function add_theme_comments($comment, $args, $depth){
    $GLOBALS['comment'] = $comment;
    extract($args, EXTR_SKIP);
    if('div' == $args['style']){
    $tag = 'div';
    $add_below = 'comment';
    } else {
    $tag = 'li class="well comment-item"';
    $add_below = 'div-comment';
    } ?>

现在我们有一个名为add_theme_comments()的函数,它和我们的回调相匹配。 然后我们向函数传递了三个参数。我们通过这些参数在下面添加了一些标签和类,以便我们可以设置这个样式。

现在我们也会发布其他一些东西。 为此,我们添加以下代码:

<<?php echo $tag; ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?> id="comment-<?php comment_ID() ?>"><?php 
    if ( 'div' != $args['style'] ) { ?>
        <div id="div-comment-<?php comment_ID() ?>" class="comment-body"><?php
    } ?>
        <div class="comment-author vcard"><?php 
            if ( $args['avatar_size'] != 0 ) {
                echo get_avatar( $comment, $args['avatar_size'] ); 
            } 
            printf( __( '<cite class="fn">%s</cite> <span class="says">says:</span>' ), get_comment_author_link() ); ?>
        </div><?php 
        if ( $comment->comment_approved == '0' ) { ?>
            <em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></em><br/><?php 
        } ?>
        <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'), 
                    get_comment_date(),  
                    get_comment_time() 
                ); ?>
            </a><?php 
            edit_comment_link( __( '(Edit)' ), '  ', '' ); ?>
        </div>

        <?php comment_text(); ?>

        <div class="reply"><?php 
                comment_reply_link( 
                    array_merge( 
                        $args, 
                        array( 
                            'add_below' => $add_below, 
                            'depth'     => $depth, 
                            'max_depth' => $args['max_depth'] 
                        ) 
                    ) 
                ); ?>
        </div><?php 
    if ( 'div' != $args['style'] ) : ?>
        </div><?php 
    endif;
}

上面这部分代码可以在https://codex.wordpress.org/Function_Reference/wp_list_comments找到。让我们保存代码到前端刷新页面看看:

正常显示

  1. 打开style.css和添加名为comment-item的类。
.comment-list{
    list-style: none;
    margin:0 !important;
    padding:0 !important;
}
.comment-item{
    overflow:auto;
}

现在这个主题看起来很不错。 我们可以回复并留下评论。 我们现在有一个带Bootstrap的WordPress主题,我们可以把它作为基本主题来创建其他Bootstrap主题。我们还使用了navbar-walker,这非常有用。

总结:
到目前为止我们学习了如何构建基础的Bootstrap WordPress主题。 我们处理了文章类别,最近的帖子和最近的评论等小部件,以使它们适合Bootstrap主题。我们还研究了博客文章的遍历展示并为其添加了元数据。 我们看到了如何设置导航栏以及侧边栏小部件。 我们还添加了一个搜索框并构建了文章详情页面。 我们还处理了评论功能 - 评论部分和表格。

希望这个教程对喜欢WordPress的朋友们有帮助。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354