2012-03-24 101 views

回答

0

我想如果你有WordPress的知识,那么只需简单地从你的模板文件夹修改header.php文件。

+0

我该怎么做? – 2012-03-24 06:24:11

2

如果你不介意使用jQuery插件,而不是从头开始写,可能我建议.cycle()

我打算假设你不熟悉WP循环。如果你不是,你真的应该检查WP Codex(here)。

PHP - (把这个functions.php中)

<?php add_action('wp_enqueue_scripts', 'my_scripts_method'); ?> 
<?php function my_scripts_method() { 
    wp_deregister_script('jquery'); 
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); 
    wp_enqueue_script('jquery'); 
    wp_deregister_script('jqueryui'); 
    wp_register_script('jqueryui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js'); 
    wp_enqueue_script('jqueryui'); 
    wp_register_script('slideshow', get_bloginfo('stylesheet_directory').'js/slideshow.js'); 
    wp_enqueue_script('jqueryui'); 
} ?> 

<?php add_action('hook_name', 'my_slideshow'); ?> 
<?php function my_slideshow() { ?> 
    <?php if(is_page('page_name')) : ?> 
    <div id="SlideShow"> 
    <?php $my_query = new WP_Query('category_name=my-slideshow$post_per_page=5'); ?> 
    <?php if ($my_query->have_posts()) : ?> 
     <?php while ($my_query->have_posts()) : ?> 
     <div id="slide"> 
      <div class="wrapper"> 
         <?php if (has_post_thumbnail()) : ?> 
           <?php the_post_thumbnail() ?> 
         <?php else : ?> 
           <?php echo (get_bloginfo('stylesheet_directory').'/images/default.png'); ?> 
         <?php endif; ?> 
      </div><!-- end .wrapper --> 
     </div><!-- end #slide --> 
     <?php endwhile; ?> 
    <?php else : ?> 
     <span>Sorry, there is no content at this time.</span> 
    <?php endif; ?> 
    <?php wp_reset_postdata(); ?> 
    </div><!-- end #slideshow --> 
    <?php endif; ?> 
<?php } ?> 

取代 'hook_name' 与您要在幻灯片中插入挂钩。 用想要幻灯片显示的页面的slu replace替换'page_name'。如果您希望它显示在所有页面上,请在末尾删除<?php if(is_page('page_name')) : ?><?php endif; ?>。 将$my_query中的'my-slideshow'替换为幻灯片中所需的类别名称。 您可以将'5'更改为幻灯片中要显示的任意数量的幻灯片。 the_post_thumbnail是该帖子的精选图片。它正在检查帖子是否有精选图片,如果没有,则依赖主题图片文件夹中的default.png。

的jQuery - (把这个在它自己的文件的主题目录的/ JS目录调用文件slideshow.js。)

var $j = jQuery.noConflict(); 

$j(document).ready(function() { 
    $j('#slideshow').cycle({ 
     // options here. 
    }); 
}); 

有,你可以定义发现here很多选择。

这几乎总结了自定义幻灯片。如果您想将其打包为模块化插件,则需要参考Codex here