【问题标题】:How do I add inline CSS into the Wordpress Visual Composer?如何将内联 CSS 添加到 Wordpress Visual Composer 中?
【发布时间】:2020-08-19 18:40:03
【问题描述】:

我可能问错了问题(我不是编码员),但我试图将 HTML 和内联样式表粘贴到 Wordpress Visual Composer 的文本端(HTML 端)以创建电子邮件布局,其成品是写在无样式 HTML 布局之上的整个样式表,所以我假设这个作曲家不支持内联样式表。

为了清楚起见,我使用了一些背景故事,我正在使用插件“Download After Email”,它只提供标准的 Wordpress 视觉编辑器,以便创建用户在“注册”后收到的电子邮件。这似乎限制了我要么像使用 Microsoft Word(这对于以品牌为中心的业务来说还不够)一样使一些文本变得活泼,要么使用原始的独立 HTML,这对于格式正确的模板来说真的不够.

是否有任何插件可以帮助在此处添加 CSS 样式,一旦它显示在网站外部(即在电子邮件浏览器中)就可以使用?

【问题讨论】:

    标签: html css wordpress


    【解决方案1】:

    从图片来看,你有一个普通的编辑器,但没有 Visual Composer,这很好,因为这是唯一正确的方向!您不能使用构造函数 (Visual Composer) 创建电子邮件模板,因为创建电子邮件模板需要特殊的老派知识(表格、内联样式)和干净的标记。建议你拿一个现成的模板,改成你自己的。

    示例:https://colorlib.com/etc/email-template/3/index.html

    您需要了解的内容

    1. 您需要使用html表格
    2. 你需要使用内联css
    3. 使用完整的 src 显示图像 (https://yoursite.wp/.../demo.jpg) 可以从媒体帖子中获得的链接

    不推荐:

    1. 如果您对 Gmail 应用程序支持感兴趣,要在标题中使用 css 样式: https://templates.mailchimp.com/resources/email-client-css-support/
    2. 自定义字体
    3. Visual Composer 和任何其他构造函数

    加法:

    如果您可以使用简码系统,我建议为您创建一个迷你插件:

    • plugins/my-custom-emails [新插件的根目录]

    • plugins/my-custom-emails/my-custom-emails.php [插件的主 php 文件]

    • plugins/my-custom-emails/emails/ [所有模板的目录]

    • plugins/my-custom-emails/emails/template1.html [第一个演示模板]

    my-custom-emails.php

    <?php
    /*
    Plugin Name: My emails
    Description: My custom emails
    Version: 0.1.0
    */
    
    define('MYCELS_DIR', plugin_dir_path(__FILE__));
    
    add_shortcode( 'myemails', 'MYCELS_SHORTCODE' );
    function MYCELS_SHORTCODE($attrs) {
        if(empty($attrs['id'])) {
            return 'ID required';
        }
        $ID = $attrs['id'];
        $PATH = MYCELS_DIR . 'emails/'.$ID.'.html';
        if(file_exists($PATH)) {
            return file_get_contents($PATH);
        } else {
            return 'File with '. $ID . ' ID not exists';
        }
    }
    

    template1.html

    <div>
        Template
    </div>
    

    并使用:

    [myemails id=template1]
    

    Id = 模板名称

    【讨论】:

    • 非常感谢您的回复!是的,抱歉,它是常规编辑器(名称错误)。关于模板,它是一个现成的模板,包括内联 CSS 样式和 HTML 布局。我发现的问题是,Wordpress 编辑器不知道 CSS 是什么,一旦保存就会破坏它,只留下无样式的 HTML 和 CSS 文本墙。
    • 不要使用可视化编辑器,在您的计算机上将模板制作成一个单独的文件,然后在浏览器中测试它(因为这是一个简单的 html,这将起作用)在您确保您的模板工作,插入正文内容(或整个文件,取决于你的插件的设置)到编辑器的“文本”模式,不要切换到可视模式,尝试保存,它应该工作
    • 不幸的是,这是我面临的问题。该模板来自一个单独的文件,包含内联 CSS 和 HTML 结构/内容,并且可以在浏览器中正常工作。仅使用“文本”模式,它会在保存后立即中断。编辑器识别 HTML 并保持不变,但不识别任何 CSS 并将其全部破坏。模板在没有 CSS 的情况下无法工作,因为这是供外部使用(在电子邮件中),所以 CSS 必须是内联的。
    • 你可以使用简码系统吗?然后它简化了任务
    【解决方案2】:

    如果你想要一些非常可定制的东西,这个插件可以工作, https://en-gb.wordpress.org/plugins/wp-html-mail/ 非常好,会推荐! 有了它,您可以完全控制 CSS,而且 HTML 还带有模板,并且可以更好地控制您需要的内容!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-10-10
      • 2021-05-05
      • 1970-01-01
      • 2020-11-18
      • 1970-01-01
      • 1970-01-01
      • 2018-07-13
      • 1970-01-01
      相关资源
      最近更新 更多