今天，我将教您如何通过几个简单的复制/粘贴步骤将jQuery NivoSlider正确地包含到WordPress主题中。就本教程而言，我将向您展示如何创建自定义帖子类型“幻灯片”，我们将使用该类型来获取滑块的所有“帖子”，但是，您可以轻松地更改循环以从某个特定的主题获取帖子类别，标签…等

步骤1：从Dev7Studios获取代码

在执行任何操作之前，您显然必须下载NivoSlider的最新Javascript和CSS。您可以通过单击下面的图像在作者（dev7studios）处解决：

步骤2：将CSS添加到Style.css文件中

接下来，您将想要复制刚刚为Nivoslider下载的所有CSS，并将其粘贴到主题文件夹中的主style.css文件中，该文件夹中将添加图像滑块。只需将其复制并粘贴到样式表的底部即可，之后您将需要返回以按照您希望的外观样式对其进行重新样式设置。

步骤3：为滑块添加Javascript

接下来，您应该添加滑块需要的Javascript。您将必须调用您先前从functions.php下载的nivoslider js，然后在header.php文件中启动脚本。

一种。将JS添加到Functions.php

将以下内容添加到您的functions.php中，该文件将首先从Google API中获取主要JS文件，然后调用在步骤1中下载的nivoslider JS文件，并应将其添加到主题文件夹中名为“ js”的子文件夹中

// include jQuery wp_enqueue_script('jquery'); // include nivoslider JS wp_enqueue_script('nivoSlider', get_stylesheet_directory_uri() . '/js/jquery.nivo.slider.pack.js'); }

b。启动脚本

接下来，您将要通过在文件中的滑块之前添加以下javascript来启动脚本（查看dev7studios上Slider的所有出色选项并进行相应的编辑）。

另外（也是最好的方法）是将其添加到nivo js文件的顶部或新的js文件中，并使其正确入队。

<script type="text/javascript"> jQuery(function($){ $(window).load(function() { $('#slider').nivoSlider(); }); }); </script>

步骤4：添加幻灯片自定义帖子类型和缩略图支持

要添加名为“幻灯片”的新的自定义帖子类型，只需将以下代码插入您的functions.php文件中：

//Register post type for slider
add_action( 'init', 'create_post_types' ); function create_post_types() { register_post_type( 'slides', array( thumbnail'，'editor'），））; }

如果您的主题还没有主题，则需要添加对WP缩略图的支持，方法是在functions.php文件中插入以下内容。

// activate post-image function
add_theme_support( 'post-thumbnails' );

步骤5：为滑块创建并添加循环

现在，您已经拥有所有的js / css并为幻灯片创建了自定义帖子类型，您需要在想要显示滑块的任何地方调用帖子。我已经为您创建了所有代码，因此只需将以下get_posts循环复制并粘贴到您希望滑块出现的任何位置即可。

<?php 
// get custom post type ==> slides
global $post; $args = array( 'post_type' =>'slides', 'numberposts' => -1, 'orderby' => 'ASC' ); $slider_posts = get_posts($args); ?> <?php // show slider only if slides exist if($slider_posts) { ?> <div id="slider-wrap"> <div id="slider"> <?php // start the loop foreach($slider_posts as $post) : setup_postdata($post); // get image $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'home-slide'); ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo $thumbnail[0]; ?>" width="" height="" title="<?php the_title(); ?>" /></a> <?php endforeach; ?> <?php wp_reset_postdata(); ?> </div><!--/slider nivoSlider--> </div><!--/slider-wrap --><?php } ?>

步骤6：将Single-slides.php文件添加到主题中

正如您在循环中看到的那样，我在幻灯片上添加了一个链接，这样您就可以将它们转到包含该幻灯片的编辑器中添加的内容的页面。默认情况下，WordPress将使用您的single.php文件展示幻灯片的内容。如果您希望幻灯片页面看起来与众不同，可以通过创建一个名为single-slides.php的新文件并按照您希望幻灯片页面看起来的方式进行设计。您也可以完全删除链接，而只有图像滑块slider

---

---

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！