在WordPress中包含Fullpage.js(或在一般情况下为JS)

好吧, 为了开拓新天地, 我最近才跳进Wordpress。经过无数小时的困惑之后, 可以肯定地说我还是很困惑, 但是xD却不那么困惑了。

无论如何, 我试图将fullpage.js(或任何与此相关的javascript代码)包含到Page中, 但是我无法使其正常工作。我只是尝试使用fullpage.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>

#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