내 WordPress 게시물을 가져 와서 FLEXSLIDER 안에 표시되도록하려면 어떻게해야합니까?

안녕하세요 저는 HTML/CSS/JS 초보자이며 웹 양식 (모바일 전용)을 만들려고합니다.이 앱은 워드 프레스 포스트를 잡고 FLEXSLIDER와 같은 슬라이더에 삽입합니다. 내 사용자가 워드 프레스 포스트를 통해 한 번만 스 와이프하고 한 번 읽고 나면 다음 포스트로 스 와이프 할 수 있기를 바랍니다.내 WordPress 게시물을 가져 와서 FLEXSLIDER 안에 표시되도록하려면 어떻게해야합니까?

아무도 도와 줄 수 있습니까?

개별 WORDPRESS 게시물을 FLEXSLIDER로 가져와 슬라이더를 WORDPRESS 루프와 통합하려면 어떻게합니까?

자세한 설명이 필요하면 문의하십시오.

출처

2012-12-14 Andrew John

첫째, StackOverflow는 코드를 작성하는 것이지 코드 작성을 돕는 데 사용하기위한 것입니다. 당신이 의심의 이익을 줄 때까지 여기에 게시 한 적이 없다는 것을 감안할 때. 앞으로는 시도한 것에 대한 코드 예제를 제공하고 문제의 원인을 명시 적으로 설명하십시오.

게시물을 Flexslider와 통합하는 것만 큼 쉽게 할 수 있습니다. 필자는 이전에 플러그인을 사용하지 않았지만 Flexslider 사이트의 문서를 토대로 한 번 해보겠습니다. 여기에서 플러그인을 사용하는 방법에 대한 좋은 지침이 있습니다. http://www.woothemes.com/flexslider/

먼저, 필요한 파일이 header.php 파일의 <head></head> 태그 안에 링크되어 있는지 확인해야합니다.

문서 머리글에이 줄을 배치하면 파일을 대상으로 지정하기 위해 경로를 조정해야 할 수 있습니다.

<link rel="stylesheet" href="flexslider.css" type="text/css"> 
<script src="jquery.flexslider.js"></script>

다음 당신은 그럼 당신은 루프를 통합해야합니다의 flexslider에 연결해야 잘 난 그냥

<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
    $('.flexslider').flexslider({ 
     touch: true, // to allow for touch controls 
    }); 
    }); 
</script>

위에 게시 된 두 줄 후 머리에 아래의 코드를 삽입합니다 슬라이더 마크 업과 함께 슬라이더를 표시하려는 페이지의 템플리트 파일에 아래 코드를 삽입해야합니다.

<div class="flexslider"> 
<ul class="slides"> 

    <?php 
     $post_query = new WP_Query('post_type' => 'post'); 
     if($post_query->have_posts()) : while($post_query->have_posts()) : $post_query->the_post(); ?> 

    <li> 
     <?php the_title(); ?> 
     <?php the_content(); ?> 
    </li> 

</ul> 
</div> 

<?php endwhile; ?> 
<?php endif; ?>

실제로 플러그인을 설치하지 않고 문서가 제대로 작동하지 않으면이 기능이 작동한다고 생각합니다. 궁금한 점이 있으면 알려주세요. 이 일이 끝나면 제 대답을 받아주세요.

출처

2012-12-14 00:41:06 AndyWarren

좋은 대답 앤디, 당신은 그것을 일 : – McNab

감사의 화려한 비트, 그것은을 시도해야합니다. 나는 jQuery Cylce와 같은 것들에 편향되는 경향이 있지만, 나중에 참조 할 수 있도록 플러그인을 북마크에 추가했다. – AndyWarren

놀라운 대답. 귀하의 코드를 도식화하여 작동하는 것처럼 보입니다. 최대한 빨리 알려 드리겠습니다. –

템플릿 파일에서 Flexslider (내 경우는 .flexslider)가 사용하는 클래스에 마크 업을 설정하고 Wordpress 루프를 삽입하십시오. 다음은 그 예입니다. 당신이 header.php 또는 footer.php에 (과 같이 Flexslider을 시작하거나 functions.php에서 그것을 대기열 할 수 있도록

<div class="slider"> 
    <div id="slider" class="flexslider"> 
    <ul class="slides"> 
     <!-- THE POST LOOP --> 
     <?php if (have_posts()) : while (have_posts()) : the_post(); ?>  

      <li> 

       // Pull whatever you need from your posts here. Featured images, content, excerpts. 
       // An image and then some absolutely positioned divs etc. The world;s you oyster 

      </li> 

     <?php endwhile; endif: ?>     
    </ul> 
</div>

나는, 당신은 Flexslider 스크립트와 CSS를 포함했다 있으리라 믿고있어 어떤 onload 스크립트를 처리하는 가장 좋은 방법은);

<script type="text/javascript">    
    jQuery(window).load(function() { 
     jQuery('.flexslider').flexslider({ 
      animation: "slide", 
      direction: "vertical", 
      easing: "easeOutExpo", 
      animationSpeed: '400', 
      controlNav: false 
    }); 
});

출처

2012-12-14 00:42:17 McNab

내 WordPress 게시물을 가져 와서 FLEXSLIDER 안에 표시되도록하려면 어떻게해야합니까?

답변

관련 문제