基于Nivo Slider创建一个Slider短码

时间:2012-06-22 作者:BeatLaG

我是wordpress新手,我需要基于Nivo库创建一个滑块。在这里,我想使用以下语法创建短代码:

[slider]
[image]http: //www .domain.com/images/1.jpg[/image]
[image]http: //www .domain.com/images/2.jpg[/image]
[image]http: //www .domain.com/images/n.jpg[/image]
[/slider]
输出代码如下:

<div class="slider-wrapper theme-default">
  <div id="slider" class="nivoSlider">
    <img src="image-path.jpg" data-thumb="image-path.jpg" alt="text"/>
    <img src="image-path.jpg.jpg" data-thumb="image-path.jpg" alt="text"/>
    <img src="image-path.jpg" data-thumb="image-path.jpg" alt="text"/>
  </div>
  <div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
  </div>
</div> 
我对php也没有太多经验,我尝试过这样做:

function nivo_slider_func($atts)
{
  extract(shortcode_atts(array(\'gallery_name\' => \'\'), $atts));
  $output = "<div class=\'slider-wrapper theme-default\'>";
  $output .= "<div id=\'slider\' class=\'nivoSlider\'>";
  $atts = shortcode_atts(
    array(
      \'url\' => \'\',
      \'title\' => \'\'
    ), $atts);

  foreach ($atts as $atts) {
    $src = $atts[\'url\'];
    $title = $atts[\'title\'];
    $output .= "<img src=\'" . $src . "\' data-thumb=\'" . $src . "\' alt=\'" . $title . "\' />";
  }
  $output .= "</div></div>";
  return $output;
}

add_shortcode( \'slider\', \'nivo_slider_func\' );
但它不能正常工作。你能帮我一下吗?

提前感谢!

2 个回复
SO网友:Gembel Intelek

这将是嵌套的短代码,因此需要[滑块]和[图像]短代码

add_shortcode( \'nivo_slider\', \'nivo_slider_func\' ); 
function nivo_slider_func( $atts, $content = null ) {
    $output  =  \'<div class="slider-wrapper theme-default">\';
    $output .=  \'<div id="slider" class="nivoSlider">\';
    $output .=  do_shortcode($content);
    $output .=  \'</div></div>\';
    return $output;
}

add_shortcode( \'image\', \'nivo_image_shortcode\' );
function nivo_image_shortcode( $atts, $content = null ) {
    extract( shortcode_atts( array(
    \'title\' => \'\'
    ), $atts )
    );
    return \'<img src="\'.$content.\'"  data-thumb="\'.$content.\'" title="\'.$atts[\'title\'].\'" alt="\'.$atts[\'title\'].\'" />\';
}

SO网友:HungryCoder

乍一看,你注册了nivo-slider 作为您的短代码,但您已使用[slider]. 您需要注册slider 作为您的短代码。

add_shortcode( \'slider\', \'nivo_slider_func\' );
或者,如果您想使用nivo-slider 作为您的短代码,您需要更新如何使用它。在这种情况下,您不需要上述代码。

[nivo-slider] [image]http: //www .domain.com/images/1.jpg[/image] [image]http: //www .domain.com/images/2.jpg[/image] [image]http: //www .domain.com/images/n.jpg[/image] [/nivo-slider]
但最好不要使用连字符,因为它可能偶尔会导致问题:http://codex.wordpress.org/Shortcode_API#Hyphens

结束

相关推荐

the_excerpt and shortcodes

我正在使用索引页上的\\u摘录。我还在我的每一篇文章的开头使用dropcap快捷码。在索引页面上,帖子不会显示周围带有dropcap快捷码的信件。如果我的帖子中有“Dog”一词,索引页会显示“og”。在使用\\u摘录时,如何使用短代码?短代码 function drcap ($atts, $content = null) { return \'<div class=\"dropcap\">\' . do_shortcode($content) . \'</div&g