2012-03-07 4 views
0

그래서 Nettuts에서 발견 된 Envato FlexSlider 플러그인에 캡션과 링크를 통합하려고 시도해 왔습니다. Flexslider Wordpress - 추천 이미지에 캡션 및 외부 링크 추가

Adding caption area to 'Flexslider Plug-in'

http://wp.tutsplus.com/tutorials/create-a-responsive-slider-plugin-with-flexslider/

이 작동하지 않습니다.

여기에 모든 마술이 일어나는 envato-flexslider.php 파일이 있습니다. 특색있는 이미지에 외부 링크를 추가로

<?php 

/* 
Plugin Name: Envato FlexSlider 
Plugin URI: 
Description: A simple plugin that integrates FlexSlider 
(http://flex.madebymufffin.com/) with WordPress using custom post types! 
Author: Joe Casabona 
Version: 0.5 
Author URI: http://www.casabona.org 
*/ 

/*Some Set-up*/ 
define('EFS_PATH', WP_PLUGIN_URL . '/' . plugin_basename(dirname(__FILE__)) . '/'); 
define('EFS_NAME', "Envato FlexSlider"); 
define ("EFS_VERSION", "0.5"); 

/*Files to Include*/ 
require_once('slider-img-type.php'); 


/*Add the Javascript/CSS Files!*/ 
wp_enqueue_script('flexslider', EFS_PATH.'jquery.flexslider-min.js', array('jquery')); 
wp_enqueue_style('flexslider_css', EFS_PATH.'flexslider.css'); 


/*Add the Hooks to place the javascript in the header*/ 

function efs_script(){ 
print '<script type="text/javascript" charset="utf-8"> 
jQuery(window).load(function() { 
jQuery(\'.flexslider\').flexslider({ 
    animation: "slide", 
    slideshowSpeed: 6000,   
    animationDuration: 300,  
    directionNav: false, 
    controlNav: false 
    }); 
    }); 
    </script>'; 
    } 

add_action('wp_head', 'efs_script'); 

function efs_get_slider(){ 

$slider= '<div class="flexslider"> 
    <ul class="slides">'; 

$efs_query= "post_type=slider-image"; 
query_posts($efs_query); 


if (have_posts()) : while (have_posts()) : the_post(); 
    $img= get_the_post_thumbnail($post->ID, 'large'); 
    $slider.='<li>'.$img.'</li>'; 

endwhile; endif; wp_reset_query(); 


$slider.= '</ul> 
</div>'; 

return $slider; 
} 


/**add the shortcode for the slider- for use in editor**/ 

function efs_insert_slider($atts, $content=null){ 

$slider= efs_get_slider(); 

return $slider; 

} 


add_shortcode('ef_slider', 'efs_insert_slider'); 



/**add template tag- for use in themes**/ 

function efs_slider(){ 

print efs_get_slider(); 
} 


?> 

, 난 슬라이더 - IMG-type.php 파일을 통해 내 사용자 지정 게시 유형의 설정을 사용자 정의 필드에 노력하고 그 일을하지 않았다. 당신의 도움에 대한

감사합니다, 더스틴

답변

2

좋아요, 그렇다면이 방법으로 링크와 캡션을 FlexSlider에 통합 할 수있었습니다. 희망이 내가 힘들 정도로 고투하고 누구나 도움이됩니다. envato-flexslider.php에서 efs_get_slider() 함수에 필요한 것이 있습니다. 슬라이드의 image_caption 및 image_link 각각에 사용자 정의 필드의 이름을 지정하십시오.

function efs_get_slider(){ 

$slider= '<div class="flexslider"> 
<ul class="slides">'; 

$efs_query= "post_type=slider-image"; 
$myposts = get_posts($efs_query); 

foreach($myposts as $post) : setup_postdata($post); 
    $img= get_the_post_thumbnail($post->ID, 'full'); 
    $slide_link= get_post_meta($post->ID, 'image_link', true); 
    $slide_caption= get_post_meta($post->ID, 'image_caption', true); 
    $slider.='<li><a href='.$slide_link.'>'.$img.'</a><p class="flex-caption">'.$slide_caption.'</p></li>'; 

endforeach; 

$slider.= '</ul> 

</div>'; 

return $slider; 
} 
1

그래서 기본적으로 당신은 아무것도에 추가 할 수 있습니다 당신은 바로 여기에 원하는 :

if (have_posts()) : while (have_posts()) : the_post(); 
    $img= get_the_post_thumbnail($post->ID, 'large'); 
    $slider.='<li>'.$img.'</li>'; 

endwhile; endif; wp_reset_query(); 


$slider.= '</ul> 
</div>'; 

return $slider; 

이 그럼 당신은 어떤 사용자 정의 필드 정보를 추가하고 싶었 가정 해 봅시다, 당신은 단지이 해당 정보로 변수를 설정 한 다음 슬라이더 변수에 추가하십시오.

if (have_posts()) : while (have_posts()) : the_post(); 
    $img= get_the_post_thumbnail($post->ID, 'large'); 
    $caption= get_post_meta($post->ID, 'custom_field', true); //get custom field 
    $slider.='<li>'; 
    $slider.= $img; 
    $slider.= '<span>'.$caption.'</span>'; 
    $slider.='</li>'; 

endwhile; endif; wp_reset_query(); 


$slider.= '</ul> 
</div>'; 

return $slider; 

하지만 여전히 모든 것이 복잡해지고 있습니다. 이것을 단순화하고 적절한 sprintf를 수행하고 몇 줄로 마무리하십시오.

if (have_posts()) : while (have_posts()) : the_post(); 

    $slider .= sprintf('<li>%1$s<span>%2$s</span></li>', 
     get_the_post_thumbnail($post->ID, 'large'), 
     get_post_meta($post->ID, 'custom_field', true) 
     ); 

endwhile; endif; wp_reset_query(); 


$slider.= '</ul> 
</div>'; 

return $slider;