wordpress博客创建留言板美化页面

这几天偶然看到一个wordpress博客创建留言板美化页面的标题，感觉还不错，起码比我自己之前的留言页面要好看些，之前默认页面都是文字排版，没有样式。这个页面自带了样式，比较适合B2主题。

使用教程：

一、在B2子主题/wp-content/themes/b2child/Pages目录下新建一个Message-Board.php文件复制下面代码保存。父主题同理!

<?php 
/*
Template Name: 留言板
*/
get_header();
$id= $post->ID;
$comments = get_comments('status=approve&type=comment&post_id='.$post->ID);
$view = get_post_meta($id,'views',true);
$user_id = get_post($id)->post_author;
$data = get_userdata($user_id);
?>
    <link rel="stylesheet" href="/css/joe.mode.min.css">
    <link rel="stylesheet" href="/css/joe.normalize.min.css">
    <link rel="stylesheet" href="/css/joe.global.min.css">
    <link rel="stylesheet" href="/css/joe.responsive.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/draggabilly@2.3.0/dist/draggabilly.pkgd.js"></script>
    <script src="/js/joe.leaving.min.js"></script>
    <div id="Joe">
        <div class="joe_container">
            <div class="joe_main">
                <div class="joe_detail">
                    <h1 class="joe_detail__title">留言板</h1>
                    <div class="joe_detail__count">
                        <div class="joe_detail__count-information">
                            <img width="35" height="35" class="avatar lazyload" src="<?php echo get_avatar_url($user_id)?>" alt="">
                            <div class="meta">
                                <div class="author">
                                    <a class="link" target="_blank" href="<?php echo get_author_posts_url($user_id);?>" title="<?php echo $data->display_name;?>"><?php echo $data->display_name;?></a>
                                </div>
                                <div class="item">
                                    <span class="text"><?php echo get_post($id)->post_date;?></span>
                                    <span class="line">/</span>
                                    <span class="text" id="Joe_Article_Views"><?php echo $view;?>阅读</span>
                                </div>
                            </div>
                        </div>
                        <time class="joe_detail__count-created" datetime="<?php echo date( 'm/d');?>"><?php echo date( 'm/d');?></time>
                    </div>
                    <div class="joe_detail__leaving">
                        <ul class="joe_detail__leaving-list">
                    <?php if( $comments ) : ?>
                    <?php foreach($comments as $post) : setup_postdata($post);?>
                    <?php
                    ?>
                        <li class="item">
                            <div class="user">
                                <img class="avatar lazyload" src="<?php echo get_avatar_url( $post->user_id, 43);?>" alt="<?php echo $post->comment_author;?>">
                                <div class="nickname">
                                    <a href="<?php echo get_author_posts_url($post->user_id);?>" target="_blank" rel="external nofollow"><?php echo $post->comment_author;?></a>
                                </div>
                                <div class="date"><?php echo date( 'Y-m-d ',strtotime($post->comment_date));?></div>
                            </div>
                            <div class="wrapper">
                                <div class="content">
                                <?php echo $post->comment_content;//var_dump?>
                                <!--</?php if($post->comment_content){?>-->
                                <!--<img class="draw_image" src="" alt="画图">-->
                                <!--</?php }?>-->
                                </div>
                            </div>
                        </li>
                    <?php endforeach; ?>
                    <?php endif; ?>
                        </ul>
                    </div>
                </div>
                <div class="joe_comment">
                    <h3 class="joe_comment__title">留言（<?php echo $post->comment_count;?>）</h3>
                        <?php comments_template('', true); ?>
                </div>
            </div>
        </div>
    </div>
<?php get_footer();

二、将样式文件上传网站根目录下。

三、后台新建一个页面，模板选择留言板。