所以我创建了一个使用标准引导旋转木马的短代码。
只要正确输入了所有3个幻灯片属性，它就可以完全正常工作，但很明显，如果只设置了2个，而第4个属性没有设置，它仍然会为幻灯片创建第3个div，但只是不输入图像src url，因此会创建空白幻灯片。问题是每次使用它都会有不同数量的幻灯片，如果只传递2个或4个图像URL，我希望它能正常工作。
功能：
// Add Shortcode for single portfolio slider
function slider_shortcode( $atts , $content = null ) {
// Attributes
extract( shortcode_atts(
array(
\'slide1\' => \'\',
\'caption1\' => \'\',
\'slide2\' => \'\',
\'caption2\' => \'\',
\'slide3\' => \'\',
\'caption3\' => \'\',
), $atts )
);
// Code
return \'
<div class="col-lg-7">
<div class="carousel slide padtop" data-ride="carousel" id=
"carousel-example-generic">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="\' . $slide1 . \'" class="img-responsive">
<div class="carousel-caption">
\' . $caption1 . \'
</div>
</div>
<div class="item">
<img src="\' . $slide2 . \'" class="img-responsive">
<div class="carousel-caption">
\' . $caption2 . \'
</div>
</div>
<div class="item">
<img src="\' . $slide3 . \'" class="img-responsive">
<div class="carousel-caption">
\' . $caption3 . \'
</div>
</div>
<div class="item">
<img src="\' . $slide4 . \'" class="img-responsive">
<div class="carousel-caption">
\' . $caption4 . \'
</div>
</div>
</div><!-- Controls -->
<a class="left carousel-control top20 transitionfast" data-slide=
"prev" href="#carousel-example-generic" role=
"button"><span aria-hidden="true" class=
"glyphicon glyphicon-chevron-left"></span> <span class=
"sr-only">Previous</span></a> <a class=
"right carousel-control top20 transitionfast" data-slide="next"
href="#carousel-example-generic" role="button"><span aria-hidden=
"true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span></a>
</div>
</div>
\';
}
add_shortcode( \'slider\', \'slider_shortcode\' );
短代码：
[slider slide1="/img/img1.png" caption1="" slide2="/img/img2.jpg" caption2="test text 2"][/slider]
SO网友:Sisir
我更喜欢两组图片，字幕。
例如：
为了更好地理解代码，我在代码上添加了注释。
function wpse216239_slider_shortcode( $atts , $content = null ) {
// Attributes
$atts = shortcode_atts(
array(
\'slides\' => \'\', // one master attribute for slides
\'captions\' => \'\' // one master attribute for captions
),
$atts,
\'myslidershortcode\'
);
$slides = explode(\';;\', $atts[\'slides\']); // slide urls separated by ;;
$captions = explode(\';;\', $atts[\'captions\']); // caption texts separated by ;;
if(empty($slides)){
return \'<!-- no slides -->\';
}
$html = \'
<div class="col-lg-7">
<div class="carousel slide padtop" data-ride="carousel" id=
"carousel-example-generic">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
\';
$active = \'active\';
$i = 0;
foreach($slides as $src){
$caption = isset($captions[$i]) ? $captions[$i] : \'\';
$html .= "<div class=\\"item " . esc_attr( $active ) . "\\">";
$html .= "<img src=\\"" . esc_url( $src ) . "\\" class=\\"img-responsive\\">";
if($caption) // only add caption if available
$html .= "<div class=\\"carousel-caption\\">" . esc_html( $caption ) . "</div>"
$html .= \'</div>\';
$active = \'\';
$i++;
}
$html .= \'</div></div></div>\';
}
add_shortcode( \'slider\', \'wpse216239_slider_shortcode\' );
如果将图像提供给快捷码，此代码将仅生成滑块html。按分隔图像url和标题
;;实施
[slider
slides="http://example.com/image1;;http://example.com/image2"
captions="My caption1;;Mycaption2"
]
给出的代码用于演示。未经测试，未经测试不得投入生产现场
