wordpress 邮件内容美化

飞牛修改的，话不多说，看图选择。直接放到邮件模板就行。

一、样式一，颜色白色，固定邮件宽度。

<div style="background-color:#fff;text-align:center;padding:10px;">
    <div class="mmsgLetter" style="width:580px;margin:50px auto;padding:10px;color:#333;background-color:#fff;border:0px solid #aaa;border-radius:5px;-webkit-box-shadow:3px 3px 10px #999;-moz-box-shadow:3px 3px 10px #999;box-shadow:3px 3px 10px #999;font-family:Verdana, sans-serif;">
        <div class="mmsgLetterHeader" style="height:23px;background:url(https://pic.feinews.com.parkour.cn/wp-content/uploads/2023/09/mmsgletter_2_bg_topline.png) repeat-x 0 0;">
        </div>
        <div class="mmsgLetterContent" style="text-align:left;padding:30px;font-size:16px;line-height:1.5;background:url(https://pic.feinews.com.parkour.cn/wp-content/uploads/2023/09/mailyoushang.png) no-repeat top right;">
            <div>
                <p class="salutation" style="font-weight:bold;">Hi，<span id="mailUserName"><?php echo $parent->comment_author; ?> </span>：</p>
                <p>您在 《<a style="text-decoration:none; color:#407700" href="<?php echo get_permalink($parent->comment_post_ID) ?>"><?php echo get_the_title($parent->comment_post_ID) ?></a> 》上发表的评论：</p>
                <p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0"><?php echo esc_html($parent->comment_content); ?></p>
                <p><?php echo $comment->comment_author; ?>  给您的回复如下：</p>
                <p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0"><?php echo esc_html($comment->comment_content); ?></p>
                <p>您可以点击 <a style="text-decoration:none; color:#407700" href="<?php echo get_comment_link($parent->comment_ID) ?>">点击这里回复 </a>，欢迎关注 <a style="text-decoration:none; color:#407700" href="https://www.feinews.com">Feinews.com </a>。</p>
				 <p></p>
                <p>(邮件为系统自动发出，请勿直接回复！)</p>
            </div>

            <div class="mmsgLetterInscribe" style="padding:40px 0 0;">
                <img class="mmsgAvatar" src="https://www.feinews.com/wp-content/uploads/2022/10/2022102210344781.ico" style="float:left; width: 50px; height: 50px; border-radius: 4px;" />
                <div class="mmsgSender" style="margin:0 0 0 54px;">
                    <p class="mmsgName" style="margin:0 10px 10px;" >飞牛士 - FeiNews</p>
                    <p class="mmsgInfo" style="font-size:12px;margin:0 10px 10px;line-height:1.2;">
                        漫骑了闲梦 飞牛解忘忧
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

二、样式二，宽度是自适应的，颜色随着电脑手机端自适应颜色。

<div style="background-color:#ccc; font-family:-apple-system, BlinkMacSystemFont, Roboto, Ubuntu, Helvetica, Arial,PingFangSC-Regular, Hiragino Sans GB, Lantinghei SC, Microsoft Yahei, Source Han Sans CN, WenQuanYi Micro Hei, SimSun, sans-serif; color:#111; margin:0 auto; padding:0px 0px;">
    	
   		<div style="background:url(https://feinews/wp-content/uploads/2023/09/mmsgletter_2_bg_topline.png) repeat-x 0 0; padding:30px 20px; border-bottom: 1px solid #ccc; box-shadow: #ccc 1px 1px 4px;border-radius: 2px;background-color:#fff;"> 
          <div class="mmsgLetterContent" style="text-align:left;padding:20px 0px 0px 0px;font-size:14px;line-height:1.2;background:url(https://www.feinews.com/wp-content/uploads/2022/10/2022102210344781.ico ) no-repeat top right ;"> 
         
        <p>Hi! <strong><?php echo $parent->comment_author; ?></strong>,</p>
        <p> <br/>您在 <strong>《<a style="text-decoration:none; color:#407700" href="<?php echo get_permalink($parent->comment_post_ID) ?>"><?php echo get_the_title($parent->comment_post_ID) ?></a>》</strong> 的评论有新回复。</p>
        <p style="margin-top: 30px; margin-right: 50px;"><strong>您</strong> 在评论中说：<br  />
        <p style="background-color: #f5f5f5;padding: 20px; margin: 0 50px 30px 0; border-radius: 4px;"><?php echo esc_html($parent->comment_content); ?></p>
        <p style="margin-left:50px;text-align:right;"><strong><?php echo $comment->comment_author; ?></strong> 给您的回复：<br  />
        <p style="background-color: #29ad002b;padding: 20px;margin: 0 0 20px 50px; text-align:left; border-radius: 4px;"><?php echo esc_html($comment->comment_content); ?></p>
        <p><br  />可点击这里 <a style="text-decoration:none; color:#407700" href="<?php echo get_comment_link($parent->comment_ID) ?>">查看完整内容</a>。</p>
        <p><strong>感谢您在 [<a style="text-decoration:none; color:#407700" href="https://www.feinews.com">飞牛士</a>] 上评论或留言，期待您再次造访。</strong></p>
        <p><br  />祝一切安好，</p>
        <p>飞牛</p>
         <p><br/>（此邮件为系统自动发出，请勿回复）</p>
           <p><br/></p>
		<p style="text-align: center; margin:10px 0 10px; line-height:150%; font-family:-apple-system, BlinkMacSystemFont, Roboto, Ubuntu, Helvetica, Arial,PingFangSC-Regular, Hiragino Sans GB, Lantinghei SC, Microsoft Yahei, Source Han Sans CN, WenQuanYi Micro Hei, SimSun, sans-serif; "><a style="text-decoration:none;" color:#666;href="https://www.feinews.com"><strong>飞牛士 - FeiNews</strong></a><span style="color:#666; display: block; font-size: 12px;">漫骑了闲梦 飞牛解忘忧</span></p>

		</div></div></div>

评论 (4)

飞牛

COMMENT