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

好吧, 为了开拓新天地, 我最近才跳进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="http://www.srcmini.com/#firstPage"> First slide< /a> < /li> < li data-menuanchor="secondPage"> < a href="http://www.srcmini.com/#secondPage"> Second slide< /a> < /li> < li data-menuanchor="3rdPage"> < a href="http://www.srcmini.com/#3rdPage"> Third slide< /a> < /li> < /ul> < div class="section " id="section0"> < h1> fullPage.js< /h1> Configure the scrolling speed!< img alt="fullPage" src="http://www.srcmini.com/imgs/fullPage.png" /> < /div> < div class="section" id="section1"> < div class="slide"> < div class="intro"> < img alt="Cool" src="http://www.srcmini.com/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="http://www.srcmini.com/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
【在WordPress中包含Fullpage.js(或在一般情况下为JS)】wp_enqueue_script