通过wordpress插件实现多个滑块实例

时间:2013-08-06 21:13:38

标签: php jquery wordpress smooth-scrolling

我已经自定义了平滑的div滚动jquery插件(http://smoothdivscroll.com/),并在wordpress中将其作为wordpress插件实现,并且可以在此处查看滑块的选项页面http://dev.linuxfreakz.com/?page_id=2,我创建了一个选项wordpress admin中的页面,有4个选项可供选择滑块标题,背景和箭头颜色以及帖子类别。幻灯片是wordpress帖子,里面的图像是他们的特色图片。滑块当前可以与短代码一起使用,这一切都很好并且正常工作。

问题是,现在我应该添加多个可以选择不同选项的滑块,并且可以通过选项页面在单个页面上使用,我很困惑如何完成此操作。一些wordpress大师请指出我正确的方向我真的没有时间在这里,我不需要整个代码只是一个想法,我怎么能真正做到这一点,我很擅长PHP和wordpress我自己通常

任何帮助将不胜感激,谢谢。

这是拉取帖子并生成我当前正在使用的滑块的代码

function sds_display_slider() {
  global $post;

      $sds_category2 = (get_option('sds_category') != false) ? get_option('sds_category') : 1;

      $sds_title2 = (get_option('sds_title') != '') ? get_option('sds_title') : 'Smooth Slider';

      $sds_bgcolor2 = (get_option('sds_bgcolor') != '') ? get_option('sds_bgcolor') : '#dedede';

      $sds_navcolor2  = (get_option('sds_navcolor') != '') ? get_option('sds_navcolor') : '#9e1b32' ;   

      $plugins_url = plugins_url();

      echo '<div id="carousel" style="background-color:'.$sds_bgcolor2.'!important;">
    <style>
        div.scrollingHotSpotLeft {background-color:'.$sds_navcolor2.';}
        div.scrollingHotSpotRight{background-color:'.$sds_navcolor2.';}
    </style>
    <h2>'.$sds_title2.'</h2>
    <div id="makeMeScrollable">';

              query_posts('post_type=post&posts_per_page=-1&cat='.$sds_category2.'&order=ASC');
        if ( have_posts() ) :while ( have_posts() ) : the_post();

         $img_attached_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'medium');
        $img_attached = $img_attached_url[0];
        $post_heading = get_the_title($post->ID);
        $post_text = substr(get_the_excerpt(),0,180)."...";
        $link = get_permalink($post->ID);

        echo '<div class="contentBox">
            <a href="'.$link.'">
            <img src="'.$img_attached.'"></a><br>
            <a href="'.$link.'"><h2>'.$post_heading.'</h2></a>
            <p>'.$post_text.'</p>
        </div>'; 

        endwhile;

       endif;wp_reset_query();

    echo '</div>
  </div>'; 
}

1 个答案:

答案 0 :(得分:1)

尝试http://wordpress.org/plugins/meta-box/并将您的选项页面放在里面。