Flexslider Wordpress - 爲特色圖片添加字幕和外部鏈接

Question

因此，我一直試圖將字幕和鏈接集成到通過Nettuts發現的Envato FlexSlider插件中。

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

Adding caption area to 'Flexslider Plug-in' 不起作用。

這裏是所有魔法發生的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文件試圖設置自定義字段在我的自定義文章類型，並且沒有奏效。

感謝您的幫助， 達斯汀

Answer 1

好吧，這就是我能夠將這兩個鏈接和標題集成到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; 
} 

Answer 2

所以基本上你可以添加任何你想要在這裏：

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;