Wordpress에 Fullpage.js 포함 (또는 JS 일반)

Question

최근에 새로운 경지로 향하고 있습니다. 저는 최근에 Wordpress에 접속했습니다. 수많은 시간이 혼란 스러울 때, 나는 아직도 혼란 스럽지만 덜 혼란 스럽다는 xD를 말하는 것이 안전합니다.

어쨌든, 나는 페이지에 fullpage.js (또는 자바 스크립트의 모든 조각)를 포함하려고 노력하고 있지만 작동시키지 못합니다. 방금 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에서 가져 왔습니다.

더 많은 정보는 워드 프레스 코덱스에서 찾을 수 있습니다

wp_register_style

wp_enqueue_style

wp_register_script

wp_enqueue_script