Попытка добавить код на сайт Wordpress в качестве плагина, но иметь только код css / js, а не папку zip - PullRequest
Новая
       26

Попытка добавить код на сайт Wordpress в качестве плагина, но иметь только код css / js, а не папку zip

1 голос
/ 21 июня 2019

Я пытаюсь добавить ползунок в Wordpress (ползунок Flickity: https://flickity.metafizzy.co), но не могу понять, как его добавить, поскольку он не соответствует типичному внешнему формату плагинов, где я могу добавить zip папка.

Попытка добавления кода в текстовый раздел поста. Попытался настроить пользовательский CSS, но не слишком уверен, что я применил его правильно. Не знаю, с чего начать.

Ответы [ 4 ]

1 голос
/ 21 июня 2019

Уже есть много плагинов для слайдеров, вы можете использовать их для вдохновения. Смотри например в gutenslider , который реализует блок слайдера, или в более старых плагинах, например Слайд что-нибудь . Поскольку все плагины WordPress в директории плагинов должны соответствовать лицензии GPL, вы можете посмотреть их исходный код.

Тем не менее, вы можете написать свой собственный плагин с легкостью. Вам нужно будет дать пользователям возможность выбрать, какие изображения они хотят слайдировать, а затем включить непростые таблицы стилей и javascript и заставить php создать необходимую модель документа для слайдера.

1 голос
/ 21 июня 2019

Вы можете создать шаблон и вызывать js и css, используя wp_enqueue_script и wp_enqueue_style, который использует слайдер Flickity. И создавайте 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
    });
}
0 голосов
/ 21 июня 2019

Если вы не используете дочернюю тему, то рекомендуется это сделать.Но вот что вам нужно сделать: вам нужно отредактировать файлы - такие как 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>

Вы можете увидеть эффект слайдера здесь

0 голосов
/ 21 июня 2019

Это потому, что это не плагин 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/

...