slickで作ったスライダーをwordpress化したい

■やりたいこと
slickで作ったスライダーをwordpress化したい
■問題点
wordpres化するとスライダーのレイアウトが崩れcssとjsが効かなくなる

php
1wordpress化する前
2<ul class="slider">
3          <li>
4            <a href="#"><img src="http://localhost:8888/anken/wp-content/uploads" alt=""></a>
5          </li>
6          <li>
7            <a href="#"><img src="http://localhost:8888/anken/wp-content/uploads" alt=""></a>
8          </li>
9          <li>
10            <a href="#"><img src="http://localhost:8888/anken/wp-content/uploads" alt=""></a>
11          </li>
12          <li>
13            <a href="#"><img src="http://localhost:8888/anken/wp-content/uploads" alt=""></a>
14          </li>
15        </ul>

php
1//index.php
2<?php dynamic_sidebar( 'slider' ); ?>
3//functions.php
4function my_widgets_init() {
5register_sidebar( array(
6		'name' => 'スライダー',
7		'id' => 'slider',
8		'before_widget' => '<ul class="slider">',
9		'after_widget' => '</ul>',
10    ) );
11}
12add_action( 'widgets_init', 'my_widgets_init' );
13?>
14
15//ウィジェットのスライダー
16<li>
17<a href="#"><img src="http://localhost:8888/anken/wp-content/uploads" alt=""></a>
18</li>
19<li>
20	<a href="#"><img src="http://localhost:8888/anken/wp-content/uploads/" alt=""></a>
21</li>
22<li>
23<a href="#"><img src="http://localhost:8888/anken/wp-content/uploads/" alt=""></a>
24</li>
25<li>
26<a href="#"><img src="http://localhost:8888/anken/wp-content/uploads" alt=""></a>
27</li>

css
1//slick
2.slider{
3    width: 100%;
4    
5    
6}
7
8
9.slider li a img{
10    display: block;
11    background-size: cover;
12    width: 100vw;
13    height: 40vw;
14    
15    
16}
17

js
1//slick
2jQuery(function(){
3    jQuery('.slider').slick({
4        autoplay:true,
5        autoplaySpeed:5000,
6        dots:true,
7        slidesToShow:1,
8        slidesToScroll:1,
9        responsive:[
10            {
11                breakpoint:768,
12                settings:{
13                    slidesToShow:1,
14                }
15
16            },
17        ]
18    });
19});
20

kei344

2020/06/18 11:04

もしかして「スライダー」と「サイドバー」を勘違いされていませんか？slickを導入している箇所が無いのでどこに問題があるかも判断ができません。また、デベロッパーツールでエラーも確認してみてください。https://eng-entrance.com/javascript-display-error

cafe1111

2020/06/20 12:37

もしかして「スライダー」と「サイドバー」を勘違いされていませんか？ →勘違いはしていません。 https://www.youtube.com/watch?v=fyHZH526wpo&list=PLv2-sHurmDBtMD5ZGA3abvX2YUTuMXSyP&index=9 こちらの動画でウィジェットから動かせるようにしていたので自分もユーザービリティのためにやろうかなと思いました。 slickに関してはウィジェット化させなければ’正常に作動するので問題があるとしたらウィジェットの方のコードかと思うので載せませんでした。エラーは下記の記述がありましたが関係ないと思います。 Failed to load resource: the server responded with a status of 404 (Not Found)

kei344

2020/06/20 12:46

ウィジェットはどこで定義しているのでしょう。register_sidebarはウィジェットを置く場所のみを提供しています。

cafe1111

2020/06/21 02:48

動画を参考にしてやったのでわかりませんがこちらではないでしょうか？ function my_widgets_init() add_action( 'widgets_init', 'my_widgets_init' );