wordpress 邮件内容美化

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

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

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://www.feinews.com/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://www.feinews.com/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>

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

wordpress 邮件内容美化
样式二
<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>

© 文章系本站作者 飞牛 原创发布于「飞牛士 FeiNews」,文章授权后方可转载,请勿侵权!

(0)

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

评论列表(4条)

  • 梵铭
    梵铭 2024-03-12 16:42

    怎么修改的呢,修改哪个文件呀

    • 飞牛的头像
      飞牛 2024-04-07 20:43

      @梵铭修改邮件的内容文件。要看你发邮件是用插件还是代码。

  • 老宋
    老宋 2024-01-24 17:56

    这个我转走,刚好这两天折腾邮箱,上次看过忘了你放哪里了,我过来翻了半天……