Q&A
コード部分がコメントでごちゃっとしていて読みづらいです。コードブロックは複数設置できるのでファイル毎にわけるなど見やすい工夫をしていただけませんか？
###実現したいこと
slick.jsを用いてスライドショーを作成したい。
###前提
WordPressでテーマ「Cocoon」を使い子テーマを編集しながら、
Local by Flywheel というソフトを使って、ローカル環境サイトを作成しています。
slickの公式を見ながら導入を試みましたが全く動いていません。
slickのファイルをDLし、ファイルを/cocoon-child-master**（子テーマで一番上、page.phpと同じ階層）**置きました。
テーマ（Cocoon）の仕様では、子テーマで、<head>や<body>に追加したいときは、
header-insert.php, body-top-insert.phpを使用するように推奨されています。
また、クロームの検証画面上でもhead, bodyに正しくslickのlink, scriptタグが読み込まれています。
以下のコンソールエラーが出ています。
Failed to load resource: the server responded with a status of 404 (Not Found) slick.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) slick-theme.css:1 Failed to load resource: the server responded with a status of 404 (Not Found) slick.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) jquery-migrate.min.js?ver=1.4.1:2 JQMIGRATE: Migrate is installed, version 1.4.1 slick-theme.css:1 Failed to load resource: the server responded with a status of 404 (Not Found) slick.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
該当のソースコード
php
1**header-insert.php** 2 3<?php 4//ヘッダー部分（<head></head>内）にタグを挿入したいときは、このテンプレートに挿入（ヘッダーに挿入する解析タグなど） 5//子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。 6//例：<script type="text/javascript">解析コード</script> 7?> 8 9<?php if (!is_user_administrator()) : 10//管理者以外カウントしたくない場合は 11//↓ここに挿入?> 12 13<?php endif; ?> 14<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?> 15<link rel="stylesheet" type="text/css" href="/slick-1.8.1slick/slick.css"/> 16<link rel="stylesheet" type="text/css" href="/slick-1.8.1slick/slick-theme.css"/> 17 18
php
1**body-top-insert.php** 2 3<?php 4//<body>タグ直後編集用のテンプレートです。 5//子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。 6?> 7<?php if (!is_user_administrator()) : 8//管理者以外カウントしたくない場合は 9//↓ここに挿入?> 10 11<?php endif; ?> 12<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?> 13<script type="text/javascript" src="/slick-1.8.1/slick/slick.min.js"></script> 14 15
Javascript
1****javascript.js**** 2 3//ここに追加したいJavaScript、jQueryを記入してください。 4//このJavaScriptファイルは、親テーマのJavaScriptファイルのあとに呼び出されます。 5//JavaScriptやjQueryで親テーマのjavascript.jsに加えて関数を記入したい時に使用します。 6jQuery().ready(function($){ 7 $('#slider').slick(); 8});
HTML
1 2<ul id="slider"> 3 <li><img src="<?php echo get_stylesheet_directory_uri() .'/images/slidesample.jpg' ?>"></li> 4 <li><img src="<?php echo get_stylesheet_directory_uri() .'/images/slidesample2.jpg' ?>"></li> 5 <li><img src="<?php echo get_stylesheet_directory_uri() .'/images/slidesample3.jpg' ?>"></li> 6</ul>
試したこと
パスがあっているか確かめた ⇛ 合っているが機能しない。
公式サイトを参考にした ⇛ slick 公式サイト
ブログを参考にした ⇛ - 個人のブログ
具体的な現状
javascript
1jQuery().ready(function($){ 2 $('#slider').slick(); 3});
上記のコードは作動しているようです。
コチラをコメントすると３枚画像が縦に並びますが、
作動させると一番上の<img>だけ表示されます。
パスが合っている「はず」ではこのエラーはでません。どのように確認されたのでしょうか。cdnを利用する場合はhttps://部分まで入れておいたほうが確実です。
slickはテーマフォルダに入っているのですか？
テーマフォルダに入っています。
.../themes/cocoon-child-master/slick-1.8.1
回答2件
0
自己解決
パスの指定のミスでした。
slickのオプションを試しにautoplay をセットしたら作動しました。
はじめての質問で、わかりづらく書き、ご迷惑をおかけしてすみませんでした。
こういった初歩的なミスが無いように精進します。
投稿2018/11/02 11:51
総合スコア29
0
jQuery().ready(function($){
この記述大丈夫ですか？ 1
jQueryの基本 - $(document).ready
$('slider').slick();
slider というタグはないですよね。
sliderクラスです。
投稿2018/11/02 10:15
総合スコア80850
あなたの回答
tips
プレビュー
