Q&A
ブラウザの開発者ツールのコンソールに何かエラーは出ていませんか？
前提・実現したいこと
皆様こんにちは。
WordPress5.4.2で作成したオリジナルワードプレステーマにおいて
headerにスライドショーを配置したくて、slickを使おうと思っています。
まず、検証のため、普通にindex.htmlとslick用のCSSとｊｓファイルをダウンロードしてローカル環境で動作するか検証しましたら
しっかりスライドショーを実現できました。
しかしWordPressのテーマディレクトリ内で実行すると全く動作しませんので、これを解決したいと思っています。
自分で調べて実行したもの
WordPressにｊｓとcssを読み込ませるにはfunction.phpに記述するとあったので以下のコードで試しました
// wp_head()のjQueryを書き換える方法 function load_js() { //管理画面を除外 if ( !is_admin() ){ //事前に読み込まれるjQueryを解除 wp_deregister_script( 'jquery' ); //Google CDNのjQueryを出力 wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', array(), NULL, true ); //自作スクリプトや、jQueryのライブラリも同様に読み込みます。 // wp_enqueue_script( 'navbutton_script', get_template_directory_uri() .'/navbutton.js', array('jquery'), '', true ); wp_enqueue_script( 'slick.min.js', get_template_directory_uri() .'js/slick.min.js', array('jquery'), '', true ); wp_enqueue_script( 'main.js', get_template_directory_uri() .'js/main.js', array('jquery'), '', true ); } } add_action( 'init', 'load_js' ); // CSSをfuctions.phpで読み込む function add_files() { // サイト共通のCSSの読み込み wp_enqueue_style( 'mainslick-theme', get_template_directory_uri() . '/css/slick-theme.css', "", '' ); wp_enqueue_style( 'slick', get_template_directory_uri() . '/css/slick.css', "", '' ); wp_enqueue_style( 'style2', get_template_directory_uri() . '/css/style2.css', "", '' ); } add_action( 'wp_enqueue_scripts', 'add_files' );
jsについては
main.jsとslick.min.jsを読み込ませています
CSSについては
slick-theme.cssとslick.cssとstyle2.cssを読み込ませています
そして、header.phpの<header></header>内に画像を配置しています。以下に示します
header.php
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <?php wp_head(); ?> 7</head> 8<body <?php body_class(); ?>> 9 <?php wp_body_open(); ?> 10 11 <!-- ヘッダー --> 12 <header> 13 <ul class="slider"> 14 <li><img src="<?php echo get_template_directory_uri(); ?>/img/yama1.jpg" alt="slick-img"></li> 15 <li><img src="<?php echo get_template_directory_uri(); ?>/img/yama2.jpg" alt="slick-img"></li> 16 <li><img src="<?php echo get_template_directory_uri(); ?>/img/yama3.jpg" alt="slick-img"></li> 17 <li><img src="<?php echo get_template_directory_uri(); ?>/img/yama4.jpg" alt="slick-img"></li> 18 </ul> 19 <a href="<?php echo esc_url(home_url('/')); ?>"> 20 <?php bloginfo('name'); ?> 21 </a> 22 </header> 23 <!-- ナビゲーションメニュー --> 24 <?php if (has_nav_menu( 'primary')): ?> 25 <nav> 26 <?php wp_nav_menu( array( 'theme_location' => 'primary', )); ?> 27 </nav> 28 <?php endif; ?>
最初にslick単体で検証してスライドショーが実現できた時のソースコードを以下に示します
index.html
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>My Now Amazing Webpage</title> 7 <link rel="stylesheet" type="text/css" href="css/style2.css"/> 8 <link rel="stylesheet" type="text/css" href="css/slick.css"/> 9 <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/> 10</head> 11<body> 12 <ul class="slider"> 13 <li><img src="img/yama1.jpg" alt="slick-img"></li> 14 <li><img src="img/yama2.jpg" alt="slick-img"></li> 15 <li><img src="img/yama3.jpg" alt="slick-img"></li> 16 <li><img src="img/yama4.jpg" alt="slick-img"></li> 17 </ul> 18 19 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 20 <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 21 <script type="text/javascript" src="js/slick.min.js"></script> 22 <script type="text/javascript" src="js/main.js"></script> 23 <script type="text/javascript"></script> 24</body> 25</html>
slick-theme.css
css
1@charset 'UTF-8'; 2/* Slider */ 3.slick-loading .slick-list 4{ 5 background: #fff url('./ajax-loader.gif') center center no-repeat; 6} 7 8/* Icons */ 9@font-face 10{ 11 font-family: 'slick'; 12 font-weight: normal; 13 font-style: normal; 14 15 src: url('./fonts/slick.eot'); 16 src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); 17} 18/* Arrows */ 19.slick-prev, 20.slick-next 21{ 22 font-size: 0; 23 line-height: 0; 24 25 position: absolute; 26 top: 50%; 27 28 display: block; 29 30 width: 20px; 31 height: 20px; 32 padding: 0; 33 -webkit-transform: translate(0, -50%); 34 -ms-transform: translate(0, -50%); 35 transform: translate(0, -50%); 36 37 cursor: pointer; 38 39 color: transparent; 40 border: none; 41 outline: none; 42 background: transparent; 43} 44.slick-prev:hover, 45.slick-prev:focus, 46.slick-next:hover, 47.slick-next:focus 48{ 49 color: transparent; 50 outline: none; 51 background: transparent; 52} 53.slick-prev:hover:before, 54.slick-prev:focus:before, 55.slick-next:hover:before, 56.slick-next:focus:before 57{ 58 opacity: 1; 59} 60.slick-prev.slick-disabled:before, 61.slick-next.slick-disabled:before 62{ 63 opacity: .25; 64} 65 66.slick-prev:before, 67.slick-next:before 68{ 69 font-family: 'slick'; 70 font-size: 20px; 71 line-height: 1; 72 73 opacity: .75; 74 color: white; 75 76 -webkit-font-smoothing: antialiased; 77 -moz-osx-font-smoothing: grayscale; 78} 79 80.slick-prev 81{ 82 left: -25px; 83} 84[dir='rtl'] .slick-prev 85{ 86 right: -25px; 87 left: auto; 88} 89.slick-prev:before 90{ 91 content: '←'; 92} 93[dir='rtl'] .slick-prev:before 94{ 95 content: '→'; 96} 97 98.slick-next 99{ 100 right: -25px; 101} 102[dir='rtl'] .slick-next 103{ 104 right: auto; 105 left: -25px; 106} 107.slick-next:before 108{ 109 content: '→'; 110} 111[dir='rtl'] .slick-next:before 112{ 113 content: '←'; 114} 115 116/* Dots */ 117.slick-dotted.slick-slider 118{ 119 margin-bottom: 30px; 120} 121 122.slick-dots 123{ 124 position: absolute; 125 bottom: -25px; 126 127 display: block; 128 129 width: 100%; 130 padding: 0; 131 margin: 0; 132 133 list-style: none; 134 135 text-align: center; 136} 137.slick-dots li 138{ 139 position: relative; 140 141 display: inline-block; 142 143 width: 20px; 144 height: 20px; 145 margin: 0 5px; 146 padding: 0; 147 148 cursor: pointer; 149} 150.slick-dots li button 151{ 152 font-size: 0; 153 line-height: 0; 154 155 display: block; 156 157 width: 20px; 158 height: 20px; 159 padding: 5px; 160 161 cursor: pointer; 162 163 color: transparent; 164 border: 0; 165 outline: none; 166 background: transparent; 167} 168.slick-dots li button:hover, 169.slick-dots li button:focus 170{ 171 outline: none; 172} 173.slick-dots li button:hover:before, 174.slick-dots li button:focus:before 175{ 176 opacity: 1; 177} 178.slick-dots li button:before 179{ 180 font-family: 'slick'; 181 font-size: 6px; 182 line-height: 20px; 183 184 position: absolute; 185 top: 0; 186 left: 0; 187 188 width: 20px; 189 height: 20px; 190 191 content: '•'; 192 text-align: center; 193 194 opacity: .25; 195 color: black; 196 197 -webkit-font-smoothing: antialiased; 198 -moz-osx-font-smoothing: grayscale; 199} 200.slick-dots li.slick-active button:before 201{ 202 opacity: .75; 203 color: black; 204} 205
slick.css
css
1/* Slider */ 2.slick-slider 3{ 4 position: relative; 5 6 display: block; 7 box-sizing: border-box; 8 9 -webkit-user-select: none; 10 -moz-user-select: none; 11 -ms-user-select: none; 12 user-select: none; 13 14 -webkit-touch-callout: none; 15 -khtml-user-select: none; 16 -ms-touch-action: pan-y; 17 touch-action: pan-y; 18 -webkit-tap-highlight-color: transparent; 19} 20 21.slick-list 22{ 23 position: relative; 24 25 display: block; 26 overflow: hidden; 27 28 margin: 0; 29 padding: 0; 30} 31.slick-list:focus 32{ 33 outline: none; 34} 35.slick-list.dragging 36{ 37 cursor: pointer; 38 cursor: hand; 39} 40 41.slick-slider .slick-track, 42.slick-slider .slick-list 43{ 44 -webkit-transform: translate3d(0, 0, 0); 45 -moz-transform: translate3d(0, 0, 0); 46 -ms-transform: translate3d(0, 0, 0); 47 -o-transform: translate3d(0, 0, 0); 48 transform: translate3d(0, 0, 0); 49} 50 51.slick-track 52{ 53 position: relative; 54 top: 0; 55 left: 0; 56 57 display: block; 58 margin-left: auto; 59 margin-right: auto; 60} 61.slick-track:before, 62.slick-track:after 63{ 64 display: table; 65 66 content: ''; 67} 68.slick-track:after 69{ 70 clear: both; 71} 72.slick-loading .slick-track 73{ 74 visibility: hidden; 75} 76 77.slick-slide 78{ 79 display: none; 80 float: left; 81 82 height: 100%; 83 min-height: 1px; 84} 85[dir='rtl'] .slick-slide 86{ 87 float: right; 88} 89.slick-slide img 90{ 91 display: block; 92} 93.slick-slide.slick-loading img 94{ 95 display: none; 96} 97.slick-slide.dragging img 98{ 99 pointer-events: none; 100} 101.slick-initialized .slick-slide 102{ 103 display: block; 104} 105.slick-loading .slick-slide 106{ 107 visibility: hidden; 108} 109.slick-vertical .slick-slide 110{ 111 display: block; 112 113 height: auto; 114 115 border: 1px solid transparent; 116} 117.slick-arrow.slick-hidden { 118 display: none; 119} 120
style2.css
* { list-style: none; margin: 0; padding: 0; } img { width: 100%; } ul { width: 90%; margin: 0 auto; } .slick-prev::before, .slick-next::before { color: black !important; }
main.js
js
1$('.slider').slick({ 2 dots: true 3});
slick.min.js
すごく長くなるのですみませんがslickからダウンロードしたものを使ったということにします。
http://kenwheeler.github.io/slick/
画像に関しましては、imgフォルダを用意してその中に配置しています。
エラーが出たので追加
補足情報（FW/ツールのバージョンなど）
WordPressをLocalbyFlywheelを使用した環境下で使っています。
ですので、検証環境は本番環境ではなくローカルです。
PC→マックブックプロ
何卒よろしくお願いいたします
回答1件
0
ベストアンサー
get_template_directory_uri() の後に'/'が要るのでは。
注意: 末尾にスラッシュ（ / ）は含まれません。
投稿2020/06/20 15:21
総合スコア1857
あなたの回答
tips
プレビュー
