Question

我正在尝试向Wordpress添加一个滑块（Flickity的滑块：https://flickity.metafizzy.co），但由于不遵循我可以添加zip的典型外部插件格式，因此无法弄清楚如何添加它文件夹。

试图将代码添加到帖子的文本部分。尝试设置自定义CSS，但不太确定我是否正确应用了它。真的不知道从哪里开始。

Answer 1

已经有很多滑块插件，您可以使用它们来获取灵感。看例如在实现滑块块的gutenslider处，或在较旧的插件处，例如slide anything。由于插件目录中的所有wordpress插件都必须遵循GPL许可，因此您可以查看其源代码。

也就是说，您可以轻而易举地编写自己的插件。您将必须为用户提供一种选择他们想要滑动的图像的方法，然后包括轻浮的样式表和javascript，并使php为滑动器创建所需的文档模型。

Answer 2

您可以创建模板并使用Flickity滑块上的wp_enqueue_script和wp_enqueue_style调用js和css，并创建html

HTML

<div class="main-carousel">
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
  ...
</div>

将jquery代码放在您的模板中，如下所示

$(document.ready(function()
{

    $('.main-carousel').flickity({
      cellAlign: 'left',
      contain: true
    });
}

Answer 3

这是因为这不是WordPress插件。您也不需要成为一个。将已下载的文件放在主题文件夹中的某个位置，然后使用wp_enqueue_script加载JS文件，然后使用wp_enqueue_style加载CSS文件。

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Answer 4

如果您不使用儿童主题，则建议您使用。但是，这就是您要做的事情：您需要编辑文件-例如header.php，footer.php，styles.css和您希望滑块移动的文件（page.php）

将其添加到styles.css上方的标题中：

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

将此代码添加到footer.php中（我也包含了jquery，您可能不需要这样做）：

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script> 

<script>
    $('.main-carousel').flickity({
      cellAlign: 'left',
      contain: true
    });
</script

这位于styles.css的底部：

  .carousel-cell {
 width: 100%; /*  full width */
  height: 300px;
  background: #222;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel.is-fullscreen .carousel-cell {
  height: 100%;
}

最后，这就是显示滑块的内容（随您希望滑块显示的位置-带有您要使用的图像的链接）：

div class="main-carousel">
         <div class="carousel-cell"><img src="https://source.unsplash.com/random/1197x458"></div>
         <div class="carousel-cell"><img src="https://source.unsplash.com/random/1198x457"></div>
         <div class="carousel-cell"><img src="https://source.unsplash.com/random/1199x456"></div>
      </div>

您可以看到有效的here滑块

尝试将代码作为插件添加到Wordpress网站，但仅包含CSS / JS代码而不是zip文件夹

4 个答案: