包括整页.js在WordPress(或一般的JS)中

Question

好吧，冒险进入新的领域，我最近刚刚跳入Wordpress。经过无数小时的困惑，可以肯定地说我仍然感到困惑，但xD不那么困惑。

无论如何，我正在尝试将整页.js（或任何一段 JavaScript）包含在页面中，但我无法让它工作。我只是尝试使用整页.js文件夹中的示例之一，但我什至无法使其工作。这是我在页面上的内容：

<link href="http://wevolunteer.co/wp-content/themes/radiate/css/jquery.fullPage.css" rel="stylesheet" type="text/css" />
    <link href="http://wevolunteer.co/wp-content/themes/radiate/css/example.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="http://wevolunteer.co/wp-content/themes/radiate/js/jquery.fullPage.js"></script>
<script type="text/javascript" src="http://wevolunteer.co/wp-content/themes/radiate/js/example.js"></script><script type="text/javascript">// <![CDATA[
        $(document).ready(function() {
            var pepe = $.fn.fullpage({
                slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
                anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
                menu: '#menu',
                scrollingSpeed: 1700
            });
        });
// ]]></script>
<select id="demosMenu"><option id="background" selected="selected">Choose Demo</option><option id="background">Background images</option><option id="backgroundVideo">Background video</option><option id="gradientBackgrounds">Gradient backgrounds</option><option id="looping">Looping</option><option id="noAnchor">No anchor links</option><option id="scrollingSpeed">Scrolling speed</option><option id="easing">Easing</option><option id="callbacks">Callbacks</option><option id="css3">CSS3</option><option id="continuous">Continuous scrolling</option><option id="normalScroll">Normal scrolling</option><option id="scrolling">Scroll inside sections and slides</option><option id="navigationV">Vertical navigation dots</option><option id="navigationH">Horizontal navigation dots</option><option id="fixedHeaders">Fixed headers</option><option id="apple">Apple iPhone demo (animations)</option></select>
<ul id="menu">
    <li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
    <li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
</ul>
<div class="section " id="section0">
<h1>fullPage.js</h1>
Configure the scrolling speed!
<img alt="fullPage" src="imgs/fullPage.png" />
</div>
<div class="section" id="section1">
<div class="slide">
<div class="intro"><img alt="Cool" src="imgs/1.png" />
<h1>Slow scrolling speed</h1>
In case we want to make a site for old people, for example :)
</div>
</div>
<div class="slide">
<div class="intro"><img alt="Compatible" src="imgs/2.png" />
<h1>Landscape too</h1>
Also applied to landscape slides. Great uh?
</div>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Slooooooww</h1>
Now you can try other demos!
</div>
</div>

Answer 1

您不应该只是将该代码复制到您的页面中。WordPress中有特殊的功能可以插入JS和CSS。最好的办法是把它放在你的functions.php.

function register_fullpage() {
    wp_register_style( 'fullPage-css', get_stylesheet_directory_uri() . '/css/jquery.fullPage.css"' );
    wp_register_script( 'fullPage-js', get_stylesheet_directory_uri() . '/js/jquery.fullPage.js' , array( 'jquery' ) );
    if ( is_page('your-page') ){
         wp_enqueue_style( 'fullPage-css' );
         wp_enqueue_script( 'fullPage-js' );
    }
}
add_action( 'wp_enqueue_scripts', 'register_fullpage' );
function print_my_inline_script() {
       if ( wp_script_is( 'fullPage-js', 'done' ) ) { ?>
            <script type="text/javascript">
                 $(document).ready(function() {
                     var pepe = $.fn.fullpage({
                         slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
                         anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
                         menu: '#menu',
                         scrollingSpeed: 1700
                     });
                });
            </script>
     <?php }
}
add_action( 'wp_footer', 'print_my_inline_script' );

如何添加内联样式取自此答案。

更多信息可以在WordPress Codex中找到：

wp_register_style

wp_enqueue_style

wp_register_script

wp_enqueue_script