最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - add slick slider to wordpress - Stack Overflow

programmeradmin2浏览0评论

I made HTML/CSS design of a web site, and now I need to convert it to Wordpress. The part that I am working on right now is Adding slick slider to show only on my WP front page. It works perfectly in HTML (because there I incorporated javascript which could be found on actual slick slider website and initiated through 3 div elements with images inside.).

In WP functions.php I added:

//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,

  )
);
}

?>

It is supposed to be a custom post type, so with this piece of code, I managed to show Sliders/Add new slider option in WP Dashboard. But now I have no idea what should I do next to make the actual slider show up on my front page. Because when I add a new slide it makes a whole new single image post instead of showing on top of my front page(not header). I am sure there is something else that i am missing, but I have no idea what to do, since this is the first time I had to do something like this. Can anyone help me, please? I am starting to go crazy over this. Thank you so much in advance, everyone.

I made HTML/CSS design of a web site, and now I need to convert it to Wordpress. The part that I am working on right now is Adding slick slider to show only on my WP front page. It works perfectly in HTML (because there I incorporated javascript which could be found on actual slick slider website and initiated through 3 div elements with images inside.).

In WP functions.php I added:

//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,

  )
);
}

?>

It is supposed to be a custom post type, so with this piece of code, I managed to show Sliders/Add new slider option in WP Dashboard. But now I have no idea what should I do next to make the actual slider show up on my front page. Because when I add a new slide it makes a whole new single image post instead of showing on top of my front page(not header). I am sure there is something else that i am missing, but I have no idea what to do, since this is the first time I had to do something like this. Can anyone help me, please? I am starting to go crazy over this. Thank you so much in advance, everyone.

Share Improve this question edited Aug 18, 2016 at 11:32 Nancy asked Aug 18, 2016 at 11:19 NancyNancy 5042 gold badges6 silver badges21 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

You may want to try the WordPress plugin Slick Slider. It uses native WordPress galleries (in contrast to WP Slick Slider and Image Carousel mentioned in the other answer which uses a custom post type).

Disclaimer: I'm the author of this plugin.

You have two options:

1 (easiest) Use the plugin instead: https://nb.wordpress/plugins/wp-slick-slider-and-image-carousel/

2 (advanced) Create a custom loop that fetches all the images from the custom post type and echoes them as a slideshow. Example:

// 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();

You also need to enqueue the scripts and stylesheets in the themes functions.php file.

I passed a lot of time trying to replicate a plex slide along with slick-lightbox, with not much success.

My best bet was upgrade jquery to version 3 on WordPress and run slick/slick-lightbox out of wordpress.

Console shows no issues, but definitely not for beginners.

发布评论

评论列表(0)

  1. 暂无评论