WordpressでJqueryとCssを追加

Question

私はこのhtmlを私のワードプレスに入れたいと思います...私はページビルダーを使用していますので、私はそれをページに入れます..私のjqueryとCssをどうやって接続できますか？ 私はライトボックスをWordpressに入れようとしています。 Wordpressで初心者です。 私を助けてもらえますか？ ありがとうございます。 （申し訳ありませんが私の英語が悪い:)の場合）

HTMLコード：

<div class="frontleft"> 
<a class="fancybox" rel="group" href="./images/frontpages/large/wratwnspor.jpg" title="Ωρα των σπορ"><img class="f1" src="./images/frontpages/small/wratwnspor.jpg" alt="Ωρα των σπορ"></a> 
<a class="fancybox" rel="group" href="./images/frontpages/large/goal.jpg" title="Goal"><img class="f2" src="./images/frontpages/small/goal.jpg" alt="goal"></a> 
<a class="fancybox" rel="group" href="./images/frontpages/large/sportday.jpg" title="Sportday"><img class="f3" src="./images/frontpages/small/sportday.jpg" alt="sportday"></a> 
<a class="fancybox" rel="group" href="./images/frontpages/larg/live.jpg" title="Live"><img class="f4" src="./images/frontpages/small/live.jpg" alt="live"></a> 
<a class="fancybox" rel="group" href="./images/frontpages/large/fwstwnspor.jpg" title="Φως των σπορ"><img class="f4" src="./images/frontpages/small/fwstwnspor.jpg" alt="Φως των σπορ"></a> 
<a class="fancybox" rel="group" href="./images/frontpages/large/protathlitis.jpg" title="Προταθλητης"><img class="f4" src="./images/frontpages/small/protathlitis.jpg" alt="Προταθλητης"></a> 
<a class="fancybox" rel="group" href="./images/frontpages/large/gauros.jpg" title="Γαυρος"><img class="f4" src="./images/frontpages/small/gauros.jpg" alt="Γαυρος"></a> 
<a class="fancybox" rel="group" href="./images/frontpages/large/prasinh.jpg" title="Πρασινη"><img class="f4" src="./images/frontpages/small/prasinh.jpg" alt="Πρασινη"></a> 
<a class="fancybox" rel="group" href="./images/frontpages/large/gata.jpg" title="Γατα"><img class="f4" src="./images/frontpages/small/gata.jpg" alt="Γατα"></a> 
<a class="fancybox" rel="group" href="./images/frontpages/large/arena.jpg" title="Αρενα"><img class="f4" src="./images/frontpages/small/arena.jpg" alt="Αρενα"></a> 
<a class="fancybox" rel="group" href="./images/frontpages/large/provlepseis.jpg" title="Προβλεψεις"><img class="f4" src="./images/frontpages/small/provlepseis.jpg" alt="Προβλεψεις"></a> 
<a class="fancybox" rel="group" href="./images/frontpages/large/pamestoixima.jpg" title="Παμε Στοιχημα"><img class="f4" src="./images/frontpages/small/pamestoixima.jpg" alt="Παμε Στοιχημα"></a> 
<a class="fancybox" rel="group" href="./images/frontpages/large/kingbet.jpg" title="Kingbet"><img class="f4" src="./images/frontpages/small/kingbet.jpg" alt="Kingbet"></a> 
<a class="fancybox" rel="group" href="./images/frontpages/large/matchmoney.jpg" title="matchmoney"><img class="f4" src="./images/frontpages/small/matchmoney.jpg" alt="matchmoney"></a> 
</div> 

私のjQueryコード：

 <script type="text/javascript"> 
     $(document).ready(function() { 
     $(".fancybox").fancybox(); 
     }); 
    </script> 

と私は同様に、CSSの私のjQueryをリンクしたい...私がすべき同様に私のファイルを置く。..

<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> 


<!-- FancyBox --> 
    <script src="js/fancybox/jquery.fancybox.js"></script> 
    <script src="js/fancybox/jquery.fancybox-buttons.js"></script> 
    <script src="js/fancybox/jquery.fancybox-thumbs.js"></script> 
    <script src="js/fancybox/jquery.easing-1.3.pack.js"></script> 
    <script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script> 

    CSS: 
     <link rel="stylesheet" href="css/fancybox/jquery.fancybox.css"> 
    <link rel="stylesheet" href="./css/newspaperstyle.css" type="text/css"> 
    <link rel="stylesheet" href="css/fancybox/jquery.fancybox-buttons.css"> 
    <link rel="stylesheet" href="css/fancybox/jquery.fancybox-thumbs.css"> 

Answer 1

エンキュー機能を使用してJSファイルを追加します。 JSコードも追加できます。 CSS https://developer.wordpress.org/reference/functions/wp_enqueue_style/

はあなたのfunctions.phpにこのフック関数を使用する同様の方法で、さらに参考のために https://developer.wordpress.org/reference/functions/wp_enqueue_script/

。それはあなたのテーマに追加されます。

ヘッダーまたは特定のテンプレートにこれらを追加する必要はありません。