添加光滑的滑块到wordpress

时间:2016-08-18 11:19:33

标签: javascript php wordpress

我制作了一个网站的HTML / CSS设计,现在我需要将其转换为Wordpress。我现在正在处理的部分是添加光滑滑块,仅在我的WP首页上显示。它在HTML中完美运行(因为我在实际光滑的滑块网站上找到了javascript,并通过里面的图像通过3个div元素启动。)。

在WP functions.php中我添加了:

//Add slider

 add_action( 'init', 'create_post_type' );

function create_post_type() {
 register_post_type( 'slider',
   array(
   'labels' => array(
    'name' => __( 'Sliders' ),
    'singular_name' => __( 'Slider' ),
    'add_new' => 'Add new slide',
  ),
     'public' => true,

  )
);
}

?>

它应该是一个自定义的帖子类型,所以使用这段代码,我设法在WP Dashboard中显示Sliders / Add new slider选项。但是现在我不知道接下来我应该做什么才能让真正的滑块显示在我的首页上。因为当我添加一个新的幻灯片时,它会创建一个全新的单个图像帖子,而不是显示在我的首页(不是标题)之上。我确信还有一些我不知道的东西,但我不知道该怎么做,因为这是我第一次做这样的事情。有人可以帮帮我吗?我开始对此疯狂。非常感谢大家。

3 个答案:

答案 0 :(得分:1)

您可能想尝试使用WordPress插件Slick Slider。它使用原生的WordPress画廊(与另一个使用自定义帖子类型的答案中提到的WP Slick Slider和Image Carousel相比)。

免责声明:我是这个插件的作者。

答案 1 :(得分:0)

您有两种选择:

1(最简单) 请改用插件:https://nb.wordpress.org/plugins/wp-slick-slider-and-image-carousel/

2(高级) 创建一个自定义循环,从自定义帖子类型中提取所有图像并将其作为幻灯片显示回显。例如:

// WP_Query arguments
$args = array (
    'post_type'              => array( 'slider' ),
);

// The Query
$query_slider = new WP_Query( $args );

// The Loop
if ( $query_slider->have_posts() ) {
    echo '<div class="your-class">';
    while ( $query_slider->have_posts() ) {
        $query_slider->the_post();
        echo '<div> ';
        the_post_thumbnail();
        echo '</div>';
    }
    echo '</div>';
} else {
    // no posts found
}

// Restore original Post Data
wp_reset_postdata();

您还需要在主题functions.php文件中排队脚本和样式表。

答案 2 :(得分:0)

我花了很多时间尝试复制一张复杂的幻灯片和光滑的灯箱,但没有取得多大成功。

我最好的选择是在WordPress上将jquery升级到版本3并从wordpress中运行光滑/光滑的灯箱。

控制台显示没有问题,但绝对不适合初学者。