wordpressを使っているときもslick-prevとslick-nextの矢印の画像を表示させたい。

前提・実現したいこと

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>