需要在wordpress页面中插入HTML、CSS、JS代码

Question

我有这段代码来执行垂直+水平滚动。当我将此代码作为 HTML 文件单独运行时，它可以完美运行。但是如果我在 wordpress 页面中添加这段代码，输出看起来很奇怪。以下是我尝试将代码插入 wordpress 页面的方式。

1. 在 Gutenberg 编辑器的自定义 HTML 块中添加了代码。
2. 在 WP Bakery Editor 中使用了 Raw HTML 和 Raw JS 块。
3. 尝试在一个简单的文本块中。
4. 使用了一个名为 WP Coder 的插件。 不幸的是，没有什么对我有用。

这是我的代码

var windowWidth = window.innerWidth;
var horLength = document.querySelector(".elementt-wrapper").scrollWidth;
var distFromTop = document.querySelector(".horizontall-section").offsetTop;
var scrollDistance = distFromTop + horLength - windowWidth;
document.querySelector(".horizontall-section").style.height = horLength + "px";

window.onscroll = function() {
  var scrollTop = window.pageYOffset;
  if (scrollTop >= distFromTop && scrollTop <= scrollDistance) {
    document.querySelector(".elementt-wrapper").style.transform = "translateX(-" + (scrollTop - distFromTop) + "px)";
  }
}

.horizontall-section {
  padding: 100px 0;
  background-color: pink;
}

.stickyy-wrapper {
  position: sticky;
  top: 100px;
  width: 100%;
  overflow: hidden;
}

.elementt-wrapper {
  position: relative;
  display: flex;
}

.elementt {
  width: 500px;
  height: 400px;
  background-color: purple;
  margin: 0 20px 0 0;
  flex-shrink: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="horizontall-section">
  <div class="stickyy-wrapper">
    <div class="elementt-wrapper">
      <div class="elementt"></div>
      <div class="elementt"></div>
      <div class="elementt"></div>
      <div class="elementt"></div>
      <div class="elementt"></div>
    </div>
  </div>
</div>


<div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>


<div class="horizontall-section2">
  <div class="stickyy-wrapper2">
    <div class="elementt-wrapper2">

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

<div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

我是 wordpress 的新手，请指导我实现这一目标。

Answer 1

实际上 WordPress 是一个可视化编辑网站，而 html 块用于插入小元素。因此，如果您想手动编写整个代码，我建议您购买域和托管并使用 ftp 添加代码文件。或者如果你不想花钱，你可以随时在GitHub Pages 这样做，只要它是一个普通的 html、css 和 javascript 文件而不是 nodejs webapp 或其他东西

Answer 2

根据评论部分，问题似乎是 WordPress 正在将 <p> 标签添加到您的 HTML，这是默认行为，为了解决此问题，您只需在您的 HTML 中添加一行代码主题的function.php

remove_filter( 'the_excerpt', 'wpautop' );

这应该可以解决它。在此处阅读更多信息https://wordpress.stackexchange.com/questions/109481/remove-p-tags-from-the-content