wordpress添加第三方评论系统——Waline

首先，你需要有属于自己的Waline URL

Waline注册方法

2.打开wordpress主题文件夹

具体位置为：wordpress所处文件夹/wp-content/themes/你使用主题的名称/

譬如我使用的是twentyfifteen主题，那么文件夹位置应该为：

wordpress所处文件夹/wp-content/themes/twentyfifteen/

3.修改comments.php

3.1打开comments.php

文件内容形如下图：

非twentyfifteendde的comments.php

3.2删除第一个</div>区块的内容

如上图，comments.php内有两个</div>区块，第一个</div>区块为

<div id="comments" class="<?php echo comments_open() ? 'comments-area' : 'comments-area comments-closed'; ?>">

第二个区块为

<div class="<?php echo $discussion->responses > 0 ? 'comments-title-wrap' : 'comments-title-wrap no-responses'; ?>">

删除第一个</div>区块的内容即可

<div id="comments" class="<?php echo comments_open() ? 'comments-area' : 'comments-area comments-closed'; ?>">
    <div class="<?php echo $discussion->responses > 0 ? 'comments-title-wrap' : 'comments-title-wrap no-responses'; ?>">
        <h2 class="comments-title">
        <?php
        if ( comments_open() ) {
            if ( have_comments() ) {
                _e( 'Join the Conversation', 'twentynineteen' );
            } else {
                _e( 'Leave a comment', 'twentynineteen' );
            }
        } else {
            if ( '1' == $discussion->responses ) {
                /* translators: %s: Post title. */
                printf( _x( 'One reply on &ldquo;%s&rdquo;', 'comments title', 'twentynineteen' ), get_the_title() );
            } else {
                printf(
                    /* translators: 1: Number of comments, 2: Post title. */
                    _nx(
                        '%1$s reply on &ldquo;%2$s&rdquo;',
                        '%1$s replies on &ldquo;%2$s&rdquo;',
                        $discussion->responses,
                        'comments title',
                        'twentynineteen'
                    ),
                    number_format_i18n( $discussion->responses ),
                    get_the_title()
                );
            }
        }
        ?>
        </h2><!-- .comments-title -->
        <?php
        // Only show discussion meta information when comments are open and available.
        if ( have_comments() && comments_open() ) {
            get_template_part( 'template-parts/post/discussion', 'meta' );
        }
        ?>
    </div><!-- .comments-title-flex -->
    <?php
    if ( have_comments() ) :

        // Show comment form at top if showing newest comments at the top.
        if ( comments_open() ) {
            twentynineteen_comment_form( 'desc' );
        }

        ?>
        <ol class="comment-list">
            <?php
            wp_list_comments(
                array(
                    'walker'      => new TwentyNineteen_Walker_Comment(),
                    'avatar_size' => twentynineteen_get_avatar_size(),
                    'short_ping'  => true,
                    'style'       => 'ol',
                )
            );
            ?>
        </ol><!-- .comment-list -->
        <?php

        // Show comment navigation.
        if ( have_comments() ) :
            $prev_icon     = twentynineteen_get_icon_svg( 'chevron_left', 22 );
            $next_icon     = twentynineteen_get_icon_svg( 'chevron_right', 22 );
            $comments_text = __( 'Comments', 'twentynineteen' );
            the_comments_navigation(
                array(
                    'prev_text' => sprintf( '%s <span class="nav-prev-text"><span class="primary-text">%s</span> <span class="secondary-text">%s</span></span>', $prev_icon, __( 'Previous', 'twentynineteen' ), __( 'Comments', 'twentynineteen' ) ),
                    'next_text' => sprintf( '<span class="nav-next-text"><span class="primary-text">%s</span> <span class="secondary-text">%s</span></span> %s', __( 'Next', 'twentynineteen' ), __( 'Comments', 'twentynineteen' ), $next_icon ),
                )
            );
        endif;

        // Show comment form at bottom if showing newest comments at the bottom.
        if ( comments_open() && 'asc' === strtolower( get_option( 'comment_order', 'asc' ) ) ) :
            ?>
            <div class="comment-form-flex">
                <span class="screen-reader-text"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></span>
                <?php twentynineteen_comment_form( 'asc' ); ?>
                <h2 class="comments-title" aria-hidden="true"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></h2>
            </div>
            <?php
        endif;

        // If comments are closed and there are comments, let's leave a little note, shall we?
        if ( ! comments_open() ) :
            ?>
            <p class="no-comments">
                <?php _e( 'Comments are closed.', 'twentynineteen' ); ?>
            </p>
            <?php
        endif;

    else :

        // Show comment form.
        twentynineteen_comment_form( true );

    endif; // if have_comments();
    ?>
</div><!-- #comments -->

修改后

<div id="comments" class="<?php echo comments_open() ? 'comments-area' : 'comments-area comments-closed'; ?>">
</div><!-- #comments -->

3.3插入Waline脚本代码

在第一个</div>区块内插入Waline脚本

原：

<div id="comments" class="<?php echo comments_open() ? 'comments-area' : 'comments-area comments-closed'; ?>">
</div><!-- #comments -->

插入后：

<div id="comments" class="<?php echo comments_open() ? 'comments-area' : 'comments-area comments-closed'; ?>">
<head>   
 <script src="//cdn.jsdelivr.net/npm/@waline/client"></script> 
</head> 
<body>   ...   
  <div id="waline"></div>   
   <script>     
    Waline({       
     el: '#waline',       
     serverURL: 'https://your-domain.vercel.app',     
    });   
   </script> 
</body>
</div><!-- #comments -->