Question

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

无论如何，我正在尝试将fullpage.js（或任何一段javascript）包含在一个页面中，但我无法让它工作。我只是尝试使用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>

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' );

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

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

在Wordpress中包含Fullpage.js（或者一般的JS）

1 个答案: