Flexslider Wordpress-为特色图片添加标题和外部链接

所以我一直在尝试将字幕和链接集成到Nettuts上的Envato 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();
 }


 ?>

至于向特色图片添加外部链接，我已经尝试通过slider-img-type.php文件在我的自定义帖子类型中设置自定义字段，但没有成功

谢谢你的帮助，

---

达斯汀

所以基本上你可以在这里添加任何你想要的东西：

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_缩略图（$post->ID，'large'）；
$slider.='
'.$img.
'；
结束时；endif；wp_reset_query（）；
$slider.='
';
返回$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;

if（have_posts（））：while（have_posts（））：the_post（）；
$img=get_the_post_缩略图（$post->ID，'large'）；
$caption=get\u post\u meta（$post->ID，'custom\u field'，true）//获取自定义字段
$slider.='
'；
$slider.=$img；
$slider.=''.$caption'；
$slider.='
'；
结束时；endif；wp_reset_query（）；
$slider.='
';
返回$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;

if（have_posts（））：while（have_posts（））：the_post（）；
$slider.=sprintf（“
%1$s%2$s
”，
获取帖子缩略图（$post->ID，'large'），
获取文章元（$post->ID，“自定义字段”，true）
);
结束时；endif；wp_reset_query（）；
$slider.='
';
返回$slider；

因此基本上您可以在此处添加任何您想要的内容：

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_缩略图（$post->ID，'large'）；
$slider.='
'.$img.
'；
结束时；endif；wp_reset_query（）；
$slider.='
';
返回$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;

if（have_posts（））：while（have_posts（））：the_post（）；
$img=get_the_post_缩略图（$post->ID，'large'）；
$caption=get\u post\u meta（$post->ID，'custom\u field'，true）//获取自定义字段
$slider.='
'；
$slider.=$img；
$slider.=''.$caption'；
$slider.='
'；
结束时；endif；wp_reset_query（）；
$slider.='
';
返回$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;

if（have_posts（））：while（have_posts（））：the_post（）；
$slider.=sprintf（“
%1$s%2$s
”，
获取帖子缩略图（$post->ID，'large'），
获取文章元（$post->ID，“自定义字段”，true）
);
结束时；endif；wp_reset_query（）；
$slider.='
';
返回$slider；

好的，我就是这样将链接和标题集成到FlexSlider中的。希望这能帮助任何像我一样努力奋斗的人。在envato-flexslider.php中，以下是函数efs\u get\u slider（）所需的内容。只需确保在幻灯片图像标题和图像链接中分别命名自定义字段

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;
}

函数efs\u get\u slider（）{
$1
；
$efs\u query=“post\u type=滑块图像”；
$myposts=get\u posts（$efs\u query）；
foreach（$myposts作为$post）：setup\u postdata（$post）；
$img=get_the_post_缩略图（$post->ID，'full'）；
$slide\u link=get\u post\u meta（$post->ID，'image\u link'，true）；
$slide\u caption=get\u post\u meta（$post->ID，'image\u caption'，true）；
$slider.='
.$slide\u caption.
'；
endforeach；
$slider.='
';
返回$slider；
}

好的，我就是这样将链接和标题集成到FlexSlider中的。希望这能帮助任何像我一样努力奋斗的人。在envato-flexslider.php中，以下是函数efs\u get\u slider（）所需的内容。只需确保在幻灯片图像标题和图像链接中分别命名自定义字段

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;
}

函数efs\u get\u slider（）{
$1
；
$efs\u query=“post\u type=滑块图像”；
$myposts=get\u posts（$efs\u query）；
foreach（$myposts作为$post）：setup\u postdata（$post）；
$img=get_the_post_缩略图（$post->ID，'full'）；
$slide\u link=get\u post\u meta（$post->ID，'image\u link'，true）；
$slide\u caption=get\u post\u meta（$post->ID，'image\u caption'，true）；
$slider.='
.$slide\u caption.
'；
endforeach；
$slider.='
';
返回$slider；
}