在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