FlexSlider WordPress - 추천 이미지에 캡션 및 외부 링크 추가
-
09-12-2019 - |
문제
그래서 캡션과 링크를 NETUTS에서 발견 한 ENVATO FLEXSLIDER 플러그인에 링크를 통합하려고 시도했습니다.
http : //wp.tutsplus.COM / 자습서 / CREATE-A-A-PANSPLAY-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 파일을 통해 사용자 정의 게시물 유형에서 사용자 정의 필드를 설정하려고 시도했으며 작동하지 않은 것입니다.
당신의 도움을 주셔서 감사합니다, 더스틴
해결책
OK, 링크와 캡션을 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;
}
. 다른 팁
그래서 기본적으로 여기에 원하는 모든 것을 추가 할 수 있습니다 :
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;
.