在 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>

我也想 link 我的 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

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

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

在您的 functions.php 中使用此挂钩函数。所以它会被添加到你的主题中。

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

在 Wordpress 中添加 Jquery 和 Css

Add Jquery and Css in Wordpress

html

css

wordpress

jquery

content-management-system