Flexslider Wordpress - Добавление подписей и внешних ссылок на избранные изображения - PullRequest
Новая
       13

Flexslider Wordpress - Добавление подписей и внешних ссылок на избранные изображения

0 голосов
/ 08 марта 2012

Итак, я пытался интегрировать подписи и ссылки в плагин Envato FlexSlider, найденный на Nettuts.

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

Добавление области подписи к «Плагину 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, но это не сработало.

Спасибо за вашу помощь, Dustin

Ответы [ 2 ]

2 голосов
/ 10 марта 2012

Хорошо, вот как я смог интегрировать ссылки и подписи в 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 голос
/ 08 марта 2012

Таким образом, вы можете добавить сюда все, что захотите: 

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