在之前的文章 《笔记 | iCloud 自定义域名为 WordPress 站点设置评论后邮件通知》 中为了让访客能收到自己评论的回复，我安装并设置了 「Comment Reply Email Notification」 插件。由于官方默认回复过于简陋，因此打算对其进行优化，这篇文章记录一下我的美化方法。

美化前后对比

美化方法

之前有热心网友提醒我可以进行自定义，我思索着虽然我不会写代码，但是我可以找一找模板呀。本文章的代码借鉴了 《WordPress网站评论回复通知邮件美化模板》 一文，并根据自己的需求进行了适当调整。

根据官方描述，插件会优先寻找wp-content/themes/[THEME]/templates/cren/下是否有模板，如果没有会调用wp-content/plugins/comment-reply-email-notification/templates/cren/下的默认模板。因此我们既可以选择在路径wp-content/themes/[THEME]/templates/cren/下添加一个模板文件，也可以选择修改默认模板，我个人采用了前者。经测试，主题更新后会删除主题目录下自建的文件夹，所以为了便捷，修改web/wp-content/plugins/comment-reply-email-notification/templates/cren/路径下的文件更合适。

具体步骤

1. 通过面板管理网站，进入该网站的根目录的web/wp-content/plugins/comment-reply-email-notification/templates/cren/
2. 在该目录下，编辑一个名为 notification.php 的文件，并将以下代码复制并覆盖原始内容即可。

<table style="width:auto;height:auto">
    <tbody>
    <tr>
        <!-- <td style="background:#fafafa url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAy0lEQVQY0x2PsQtAYBDFP1keKZfBKIqNycCERUkMKLuSgZnRarIpJX8s3zfcDe9+794du+8bRVHQOI4wDAOmaULTNDDGYFkWMVVVQUTQdZ3iOMZxHCjLElVV0TRNYHVdC7ptW6RpSn3f4wdJkiTs+w6WJAl4DcOAbdugKAq974umaRAEARgXn+cRW3zfFxuiKCJZloXGHMeBbdv4Beq6Duu6Issy7iYB8Jbnucg8zxPLsggnj/zvIxaGIXmeB9d1wSE+nOeZf4HruvABUtou5ypjMF4AAAAASUVORK5CYII=)"> -->
            <div style="border-radius:10px;font-size:13px;color:#555;width:500px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB','微软雅黑','Microsoft Yahei',Tahoma,Helvetica,Arial,SimSun,sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.15)">
                <div style="width:100%;background:#7db9de;color:#fff;border-radius:10px 10px 0 0;background-image:-moz-linear-gradient(0deg,#7db9de,#98c1d9);background-image:-webkit-linear-gradient(0deg,#7db9de,#98c1d9);height:66px"><b><p style="font-size:14px;word-break:break-all;padding:23px 32px;margin:0;background-color:hsla(0,0%,100%,.4);border-radius:10px 10px 0 0">您在 [<a href="<?php echo bloginfo('siteurl'); ?>" style="color:#293241" target="_blank"><?php echo bloginfo('name'); ?></a>] 的评论有了新的回复！</p></b></div>
                <div style="margin:40px auto;width:90%">
                    <p><?php printf(__(' %s', 'cren-plugin'), $parent->comment_author) ?>，您曾在文章《<a href="<?php echo get_permalink($parent->comment_post_ID) ?>" style="text-decoration:none;color:#98c1d9"><?php echo get_the_title($parent->comment_post_ID) ?></a>》上发表评论</p>
                    <p><?php printf(__('%s ', 'cren-plugin'), $comment->comment_author) ?> 给您的回复如下：</p>
                    <p style="background:#fafafa;box-shadow:0 2px 5px rgba(0,0,0,.15);margin:20px 0;padding:15px;border-radius:5px;font-size:14px;color:#555"><?php echo esc_html($comment->comment_content) ?></p>
                    <p>点击 <a href="<?php echo get_comment_link($parent->comment_ID) ?>" style="text-decoration:none;color:#98c1d9" target="_blank">这里</a> 进行回复，欢迎再次光临 <a href="<?php echo bloginfo('siteurl'); ?>" style="color:#98c1d9" target="_blank"><?php echo bloginfo('name'); ?></a>。</p>
                    <p>请注意：此邮件由系统自动发送，请勿直接回复。</p>
                    <p>若不想再收到消息，<a href="<?php echo cren_get_unsubscribe_link($parent) ?>" style="color:#98c1d9" target="_blank"><?php echo __('Click here to stop receiving these messages', 'comment-reply-email-notification') ?></a></p>
                </div>
            </div>
        <!-- </td> -->
    </tr>
    </tbody>
</table>

代码可根据自己偏好进行适当调整，基本上修改一下 #7db9de、#98c1d9颜色就可以食用了。

参考文章

https://zengbin.tech/wordpress-site-comment-reply-notification-email-template