duanjing7651
2016-06-25 08:58
浏览 221

如何将JS从HTML实现到WordPress?

Recently, I'm really interested in building WordPress template. I started doing it, but I am really stuck now. The thing is, i have HTML file of my frontpage (index.html), and the CSS and JS all in their folders. Now, I can't seem to find a way to make the JS work on WordPress platofrm, like its working on HTML.

I only want to make that menu work, don't mind the other bugs.

http://brainstorm.comoj.com/ -- HTML

http://bsarafimov21.byethost16.com/ -- WordPress

Here is the code i want to transfer from HTML to WordPress:

<script type="text/javascript">
    $(document).ready(function () {
        var trigger = $('.hamburger')
            , overlay = $('.overlay')
            , isClosed = false;

        trigger.click(function () {
            hamburger_cross();
        });

        function hamburger_cross() {

            if (isClosed == true) {
                overlay.hide();
                trigger.removeClass('is-open');
                trigger.addClass('is-closed');
                isClosed = false;
            } else {
                overlay.show();
                trigger.removeClass('is-closed');
                trigger.addClass('is-open');
                isClosed = true;
            }
        }

        $('[data-toggle="offcanvas"]').click(function () {
            $('#wrapper').toggleClass('toggled');
        });
    });
</script>

图片转代码服务由CSDN问答提供 功能建议

最近,我真的对构建WordPress模板感兴趣。 我开始这样做,但我现在真的被困住了。 问题是,我有我的首页的HTML文件(index.html),以及他们的文件夹中的CSS和JS。 现在,我似乎无法找到一种方法让JS在WordPress平台上工作,就像它在处理HTML一样。

我只想让菜单工作,不要介意 其他错误。

http://brainstorm.comoj.com/ - HTML

http://bsarafimov21.byethost16.com/ - WordPress

以下是我想从HTML传输到WordPress的代码:

 &lt; script type =“text /  javascript“&gt; 
 $(document).ready(function(){
 var trigger = $('。hamburger')
,overlay = $('。overlay')
,isClosed = false; 
  
 trigger.click(function(){
 hamburger_cross(); 
}); 
 
函数hamburger_cross(){
 
 if if(isClosed == true){
 overlay.hide();  
 trigger.removeClass('is-open'); 
 trigger.addClass('is-closed'); 
 isClosed = fa  lse; 
} else {
 overlay.show(); 
 trigger.removeClass('is-closed'); 
 trigger.addClass('is-open'); 
 isClosed = true; 
}  
 
 
 $('[data-toggle =“offcanvas”]')。click(function(){
 $('#wrapper')。toggleClass('toggled'); 
});  
}); 
&lt; / script&gt; 
   
 
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • donglv6747 2016-06-25 09:48
    已采纳

    Your javascript code working correctly but your html structre different than source.

    Add this code between HEAD tag.

    <link id="custom-css" rel="stylesheet" type="text/css" href="http://brainstorm.comoj.com/css/custom.css" media="all">
    

    Add these lines into #wrapper div.

    <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
            <ul class="nav sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                       v <small>0.0.1</small>
                    </a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-fw fa-home"></i> Home</a>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-fw fa-plus"></i> Male <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li class="dropdown-header">Male clothes</li>
                    <li><a href="male/shirts.html">Shirts</a></li>
                    <li><a href="#">T-Shirts</a></li>
                    <li><a href="#">Trousers</a></li>
                    <li><a href="#">Hats</a></li>
                    <li><a href="#">Belts</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> Female <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li class="dropdown-header">Female clothes</li>
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-fw fa-cog"></i> Third page</a>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li class="dropdown-header">Dropdown heading</li>
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-fw fa-bank"></i> Page four</a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-fw fa-dropbox"></i> Page 5</a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-fw fa-twitter"></i> Last page</a>
                </li>
            </ul>
        </nav>
    

    By the way. You dont need to add text/script attribute. Browser defaults text/script for script tag and text/css for link tag.

    已采纳该答案
    打赏 评论
  • duanpai9945 2016-06-25 09:04

    You have error in <script> tag.

    Change this line:

     <script type="text/javascript>
    

    Into this:

    <script type="text/javascript">
    
    打赏 评论
  • dongmeng9048 2016-06-25 09:15

    If you put it in a separate JS file, you can simply call it in the <head> of your wordpress:

    <head>
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    </head>
    

    The header tag can be found in header.php, in your main folder of your theme. The default location for that file is: wp-content\themes\your-theme\header.php

    Hope this helps :)

    EDIT: So essentially, you can call it the same as you do with an HTML file. Wordpress PHP has split up your main page template in a header file, a body file, and a footer file. Find the header file, and you can add your script links just like you would in HTML.

    打赏 评论
  • duangu4943 2016-06-25 09:29

    In you HTML in the WordPress site you have changed the id of your <div> from wraper to page-content-wrapper so to get you JavaScript to work all you need to do is change this:

    <div id="page-content-wrapper">
    

    to this:

    <div id="wrapper">
    
    打赏 评论
  • dsideal2015 2016-06-25 10:07

    It is best practice to implement JavaScript via the wordpress function.php. Customize the following script to your own needs.

    /**
    * Enqueue a script with jQuery as a dependency.
    */
    
    function wpdocs_scripts_method() {
        wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', array( 'jquery' ) );
    }
    add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
    

    Source: https://developer.wordpress.org/reference/functions/wp_enqueue_script/ https://developer.wordpress.org/themes/basics/including-css-javascript/

    打赏 评论

相关推荐 更多相似问题