0

Well, venturing into new grounds, I've just hopped into Wordpress lately. After countless hours confused, it's safe to say I'm still confused, but less confused xD.

Anyway, I'm trying to include fullpage.js (Or any piece of javascript for that matter) into a Page, but I cannot get it to work. I just tried to use one of the examples from the fullpage.js folder, and I can't even get that to work. Here is what I have on the page:

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

1 回答 1

2

您不应该只是将该代码复制到您的页面中。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' );

如何添加内联样式取自this answer。

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

wp_register_style

wp_enqueue_style

wp_register_script

wp_enqueue_script

于 2014-04-03T19:49:16.947 回答