在wordpress中集成javascript

Integrate javascript in wordpress

本文关键字：javascript 集成 wordpress 更新时间：2023-09-26

这是代码

<head>
    <style>
        #divtoshow {position:absolute;display:none;}
        #onme {width:100%;height:100%;cursor:pointer}
    </style>
    <script type="text/javascript">
        var divName = 'divtoshow'; /*div that is to follow the mouse (must be position:absolute)*/
        var offX = 30;             /*X offset from mouse position*/
        var offY = 50;             /*Y offset from mouse position*/
        function mouseX(evt) {
            if (!evt) 
                evt = window.event; 
            if (evt.pageX)
                return evt.pageX; 
            else if (evt.clientX)
                return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); 
            else return 0;
        }
        function mouseY(evt) {
            if (!evt) 
                evt = window.event; 
            if (evt.pageY) 
                return evt.pageY; 
            else if (evt.clientY)
                return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); 
            else 
                return 0;
        }
        function follow(evt) {
            var obj = document.getElementById(divName).style;
            obj.left = (parseInt(mouseX(evt))-offX) + 'px';
            obj.top = (parseInt(mouseY(evt))-offY) + 'px'; 
        }
       document.onmousemove = follow;
    </script>
</head>
<body>
    <div id="divtoshow">
        <img src="http://www.rw-designer.com/cursor-preview/35050.png">
    </div>
    <br><br>
    <div id='onme' onMouseover='document.getElementById(divName).style.display="block"'>
        Mouse over this
    </div>
</body>

这段代码用于一个对象（在我的例子中是图像）跟随鼠标指针。我已经把javascript放在标签中，但我希望html应用于整个网站，而不是一个页面或帖子。我该怎么做？

试试这个：-

//For adding javascript and css
    add_action('wp_enqueue_scripts','wdm_test_script');
    function wdm_test_script(){ ?>
        <style>
            #divtoshow {position:absolute;display:none;}
            #onme {width:100%;height:100%;cursor:pointer}
            </style>
            <script type="text/javascript">
            var divName = 'divtoshow'; /*div that is to follow the mouse (must be position:absolute)*/
            var offX = 30;          /*X offset from mouse position*/
            var offY = 50;          /* Y offset from mouse position*/
            function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX)          return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
            function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}
            function follow(evt) {
                var obj = document.getElementById(divName).style;
                obj.left = (parseInt(mouseX(evt))-offX) + 'px';
                obj.top = (parseInt(mouseY(evt))-offY) + 'px'; 
        }
           document.onmousemove = follow;
           </script>
    <?php }
//For adding content to all pages
    add_filter('the_content','wdm_demo_content',1,1);
    function wdm_demo_content($content){ 
        ob_start();
    ?>
        <div id="divtoshow"><img src="http://www.rw-designer.com/cursor-preview/35050.png"></div>
            <br><br>
            <div id='onme' onMouseover='document.getElementById(divName).style.display="block"'>Mouse over this</div>
    <?php
    $contents = ob_get_contents();
    ob_end_clean();
    return $contents.$content;
    }