在 Wordpress 中添加 Jquery 和 Css

Question

我想把这个 html 放在我的 wordpress 中...我使用页面构建器，所以我把它放在我的页面中。我如何将它与我的 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>

我也想链接我的 jquery 以及 css ...我应该把我的文件放在哪里..

    <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

使用 enqueue 函数添加 JS 文件。您也可以添加 JS 代码。 供进一步参考 https://developer.wordpress.org/reference/functions/wp_enqueue_script/

CSS 的方式与此类似 https://developer.wordpress.org/reference/functions/wp_enqueue_style/

在你的functions.php中使用这个钩子函数。所以它将被添加到您的主题中。

无需将这些添加到标题或任何特定模板。