在特定页面中添加自定义HTML/CSS/JS代码

时间:2021-04-17 作者:Hamlet

我编写了一个HTML/JS代码,它类似于一个调查,由以下代码组成:

 <div class="Question">
        <h3>1. I have the knowledge of procedures needed for starting and running a business <span class="star">
                *</span></h3>

        <br>

        <div class=None>
            <input type="radio" name="Q1" id="none1" value="None">
            <label for="none1">None</label>
        </div>

        <div class=Withguidance>
            <input type="radio" name="Q1" id="wguid1" value="With Guidance">
            <label for="wguid1">With Guidance</label>
        </div>

        <div class=Beginner>
            <input type="radio" name="Q1" id="beg1" value="Beginner">
            <label for="beg1">Beginner</label>
        </div>

        <div class="Intermediate">
            <input type="radio" name="Q1" id="inter1" value="Intermediate">
            <label for="inter1">Intermediate</label>
        </div>

        <div class="Expert">
            <input type="radio" name="Q1" id="ex1" value="Expert">
            <label for="ex1">Expert</label>
        </div>
    </div>
在问题的末尾,有一个按钮,它使用jsPDF库将用户输入的答案转换为我制作的自定义PDF。现在,在运行原始html文件时,这一点非常有效。当我试图将其插入Wordpress网站时,问题出现了
首先,我在试用阶段使用最新版本的Wordpress和Elementor(Wordpress 5.7.1和Elementor Pro 3.1.1)

在我的代码完成之前,我可以使用Elementor上的HTML小部件将其完全添加。随着代码越来越大,行越来越多,Elementor开始在每次我复制粘贴代码时落后。当我的代码完成时,当我尝试在Elementor中复制粘贴代码时,页面选项卡没有响应,除了关闭选项卡外,什么都做不到。无论我尝试了多少次,我都无法将代码粘贴到HTML小部件中
然后我尝试使用Gunberg编辑器,当代码粘贴并且选项卡响应时,当我尝试更新时,出现了一个错误;更新失败
我是否可以将代码粘贴到我的页面而不会崩溃?可能使用插件或通过源文件<我已经试过WP编码器,但没用。

P、 我使用2个base64字符串,一个用于图像,一个用于字体,这可能是编辑器无法处理代码的原因。在代码变大之前,base64字符串在开始时工作得非常好。

提前感谢!(对不起,如果我的英语不好,不是母语)

1 个回复
SO网友:Bysander

如果这是相对静态的代码,则将其视为静态代码,并将其放入文件或模板中。

有几种简单的方法可以做到这一点。

Via templates

Look at the way that WP does it - 您有一个名为template-parts - 在那里插入代码并在模板类型中调用它。将该页面指定给该模板类型。

Via a file

上面你提到这是一个单一的页面。在主题中查找page.phpsingular.php single.php 拿着它,自己为那个页面创建一个模板。你可以create a file that will define 通过调用该页page-{slug}.phppage-{id}.php.

这方面的超基本版本可能是

<?php
get_header(); ?>

<main id="main" class="site-main" role="main">

    <?php
        // Start the Loop.
        while ( have_posts() ) :
            the_post();

            // This will add your content you enter in the wp-admin side
            the_content();
            endwhile; // End the loop.
        ?>
        <div class="Question">
            <h3>1. I have the knowledge of procedures needed for starting and running a business <span class="star">
                    *</span></h3>
        ...................... 
        ETC

</main><!-- #main -->
<?php
get_footer();

相关推荐

在编辑器选项卡之间切换时的HTML格式问题

在WordPress管理面板中,在;“文本”;和;可视化编辑器“;选项卡,我的HTML格式完全丢失。删除新行,段落标记显示在;“文本”;选项卡。当我选择;“文本”;选项卡,然后刷新页面,HTML保持正确格式。但是,如果我切换到;可视化编辑器“;选项卡,然后返回到;“文本”;选项卡,格式不正确(显示p标记,不显示新行)。我也在使用经典编辑器插件。我还安装了高级编辑器工具,希望它能让我禁用该功能,但这也不起作用。使用相同的内容,我在我的其他两个WordPress站点上测试了这个场景,但没有相同的问题。这些网站