Q&A
前提・実現したいこと
WordRressでホームページ制作をしています。そこで固定ページにslickを挿入したときにslick-prevとslick-nextの矢印の画像が表示されませんでした。wordpressではなく、VBで書いたコードをそのままEdgeなどに表示させると矢印は表示されたのですが、wordpressを使ったときでもこの矢印を表示させたいです。どなたか教えてくださるとうれしいです。- リスト
発生している問題・エラーメッセージ
該当のソースコード
ここで私の書いたソースコードはこのようになりました。まずfunction.phpのコードは以下のようになりました。ここではslickの設定に関して記述をしていないのですが、一応載せておきます
<?php function post_has_archive($args,$post_type){ if('post'==$post_type){ $args['rewrite']=true; $args['has_archive']="blog"; $args['label']="ブログ"; } return $args; } add_filter('register_post_type_args','post_has_archive',10,2); function change_posts_per_page($query) { if ( is_admin() || ! $query->is_main_query() ) return; if ( $query->is_archive() ) { $query->set( 'posts_per_page', '10' ); } } add_action( 'pre_get_posts', 'change_posts_per_page' ); function wpSns() { if (function_exists("wp_social_bookmarking_light_output_e")) { wp_social_bookmarking_light_output_e(); } } add_shortcode('socialBtns', 'wpSns'); function my_excerpt_length($length) { return 50; } add_filter('excerpt_mblength', 'my_excerpt_length');
つぎにheader.phpは以下のようになりました。ここではslickの読み込みのみを行っているので、head内のslickの記述のみを見て頂ければ大丈夫なはずです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="<?php bloginfo("template_url"); ?>/style.css"> <link rel="stylesheet" href="<?php bloginfo("template_url"); ?>/ress.css"> <link rel="stylesheet" href="<?php bloginfo("template_url"); ?>/slick/slick.css"><!--slickよみこみ--> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <script src="<?php bloginfo("template_url"); ?>/jquery-3.6.0.min.js"></script> <script src="<?php bloginfo("template_url"); ?>/style.js"></script> <?php wp_head(); ?> </head> <body> <div class="screen"></div> <header> <div class="left"> <div class="title"><img src="<?php bloginfo("template_url"); ?>/logo (2).png"></div> <nav> <ul> <li><a href="<?php bloginfo("url"); ?>">ホーム</a></li> <li><a href="<?php bloginfo("url"); ?>/infomation">お知らせ</a></li> <li><a href="<?php bloginfo("url"); ?>/blog">ブログ</a></li> <li><a href="<?php bloginfo("url"); ?>/price">コース・料金</a></li> </ul> </nav> <div class="slide-nav"> <ul> <li class="first"><a href="<?php bloginfo("url"); ?>">ホーム</a></li> <li><a href="<?php bloginfo("url"); ?>/infomation">お知らせ</a></li> <li><a href="<?php bloginfo("url"); ?>/blog">ブログ</a></li> <li><a href="<?php bloginfo("url"); ?>/price">コース・料金</a></li> <li class="li"><a href="<?php bloginfo("url"); ?>/contact">資料請求</a></li> <li class="li"><a href="#">お問い合わせ</a></li> </ul> </div> </div> <div class="right"> <div class="number"> <p class="time">平日08:00～20:00</p> <p class="phone"><i class="fa fa-phone"></i>0123-456-7890</p> </div> <div class="infomation"><a href="<?php bloginfo("url"); ?>/contact">資料請求</a></div> <div class="contact"><a href="<?php bloginfo("url"); ?>/contact">お問い合わせ</a></div> </div> <div class="bar"><i class="fa fa-bars"></i></div> <div class="screen"></div> </header>
次にstyle.jsは以下のようになりました。
$(".price-page .wrapper #price-table .table").slick({ dots:false, centerPadding:true, arrows:true, slidesToShow:4, prevArrow:'<div class="prev"><img src="<?php bloginfo("template_url"); ?>/arrow-left2.png"></div>', nextArrow:'<div class="next"><img src="<?php bloginfo("template_url"); ?>/arrow-right2.png"></div>', responsive: [ { breakpoint: 960, settings: { slidesToShow:3, } }, { breakpoint: 780, settings: { slidesToShow:2, } }, { breakpoint: 530, settings:{ slidesToShow:1, } } ] });
次にpage-price.php(固定ページ)は以下のようになりました。
<div id="price-table"> <h2 class="title">料金表</h2> <ul class="table"> <!--slickの使い方分からない--> <li class="content"> <h2 class="plan">基礎プラン</h2> <div class="content-under"> <h2 class="title">59,000円～</h2> <p class="month">*月額（税抜価格）</p> <ul> <li><span class="s1-1">✔</span>カリキュラム作成</li> <li><span class="s1-2">✔</span>TOEFL学習サポート</li> <li><span class="s1-3">✔</span>週一回のビデオMTG</li> </ul> </div> </li> <li class="content"> <h2 class="plan">演習プラン</h2> <div class="content-under"> <h2 class="title">75,000円～</h2> <p class="month">*月額（税抜価格）</p> <ul> <li><span class="s2-1">✔</span>カリキュラム作成</li> <li><span class="s2-2">✔</span>TOEFL学習サポート</li> <li><span class="s2-3">✔</span>週一回のビデオMTG</li> <li class="line2"><span class="s2-4">✔</span>月二回の模試（解説付き）</li> </ul> </div> </li> <li class="content"> <h2 class="plan reco">おすすめ<br>志望校対策プラン</h2><!--おすすめと志望硫黄対策プランの文字の間隔を開ける方法が分からない--> <div class="content-under"> <h2 class="title recos">95,000円～</h2> <p class="month">*月額（税抜価格）</p> <ul> <li><span class="s3-1">✔</span>カリキュラム作成</li> <li><span class="s3-2">✔</span>TOEFL学習サポート</li> <li><span class="s3-3">✔</span>週一回のビデオMTG</li> <li class="line2"><span class="s3-4">✔</span>月二回の模試（解説付き）</li> <li><span class="s3-5">✔</span>週一の英語面接対策</li> </ul> </div> </li> <li class="content"> <h2 class="plan">フレックスプラン</h2> <div class="content-under"> <h2 class="title">60,000円～</h2> <p class="month">*月額（税抜価格）</p> <p class="ul">*別途ご相談ください</p> </div> </li> </ul> </div>
試したこと
これらのコードで表示を確認したところ矢印の画像の部分に、画像が読み込めていないときにでるバツ印が表示されました。ただ、このバツ印の位置はcssでコーディングした位置と同じだったのでstyle.cssには問題ないかと思われます。
補足情報（FW/ツールのバージョンなど）
まだ、投稿し慣れていないので、読みにくい部分もあるかもしてませんが、どうかよろしくお願いします。
回答1件
0
ベストアンサー
「slick 矢印 出ない」でググるといろいろ出てきますよ。
大体の場合は、背景色と同化しているか、画面外に出てしまっているか、スライダーの下に潜っているかのどれかだと思います。
投稿2021/07/17 08:31
編集2021/07/17 08:32
総合スコア36158
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/07/17 09:14
2021/07/17 09:37 編集