FlexSlider WordPress - 添加标题和外部链接到精选图像

Question

所以我一直在尝试将字幕和链接集成到Nettuts上发现的Envato FlexSlider插件。

http：//wp.tutsplus。com / tutorials / create-a-rencientive-slider-plug-with-flexslider /

将标题区域添加到'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();
 }


 ?>

.

要添加到特色图像的外部链接，我试图通过slider-img-type.php文件设置自定义字段，并没有工作。

谢谢你的帮助， 达斯汀

Answer 1

确定，所以这就是我能够将链路和标题集成到FlexSlider中的方式。希望这有助于任何一直在挣扎的人，因为我有着强烈努力。在Envato-Flexslider.php中，这里是函数efs_get_slider（）所需的。只需确保将您的自定义字段命名为幻灯片图像_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;

.

所以让我们说你想添加一些自定义字段信息，那么你只需设置一个变量，就像这个信息一样，然后添加它tot tot tot tot tot tot tot tot tot tot tot tot tot。

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;

.