markdown Wordpress图库滑块

Posted 2021-05-06

1.   Add the following shortcode to shortcodes.php (if your theme has it):

```php
function radicati_gallery($atts) {
  global $post;
  $pid = $post->ID;
  $gallery = "";

  if (empty($pid)) {$pid = $post['ID'];}

  if (!empty( $atts['ids'] ) ) {
    $atts['orderby'] = 'post__in';
    $atts['include'] = $atts['ids'];
  }

  extract(shortcode_atts(array('orderby' => 'menu_order ASC, ID ASC', 'include' => '', 'id' => $pid, 'itemtag' => 'dl', 'icontag' => 'dt', 'captiontag' => 'dd', 'columns' => 3, 'size' => 'large', 'link' => 'file'), $atts));

  $args = array('post_type' => 'attachment', 'post_status' => 'inherit', 'post_mime_type' => 'image', 'orderby' => $orderby);

  if (!empty($include)) {$args['include'] = $include;}
  else {
    $args['post_parent'] = $id;
    $args['numberposts'] = -1;
  }

  if ($args['include'] == "") { $args['orderby'] = 'date'; $args['order'] = 'asc';}

  $images = get_posts($args);
  $count = 1;
  $total = count($images);

  if(!isset($images)) {
    return "";
  }

  $gallery = '<div class="gallery">';

  foreach ( $images as $image ) {
    //print_r($image); /*see available fields*/
    $thumbnail = wp_get_attachment_image_src($image->ID, 'gallery-image');
    $thumbnail = $thumbnail[0];
    $gallery .= "
			<figure>
				<img src='".$thumbnail."'>
				<figcaption class='title'>{$count} of {$total}</figcaption>
			</figure>";
    $count++;
  }

  $gallery .= "</div>";

  return $gallery;
}

remove_shortcode('gallery');
add_shortcode('gallery', 'radicati_gallery');
```

2.   Add the following to your assets.php or functions.php file:

```php
// Slick Slider
  wp_enqueue_script('slick-slider-script', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', ['jquery']);
  wp_enqueue_style('slick-slider-css', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');
```

3.   Add the following to 
```php
$('.gallery').slick({
    dots: false,
    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    nextArrow: '<i class="fal fa-angle-right"></i>',
    prevArrow: '<i class="fal fa-angle-left"></i>',
    responsive: [
        {
            breakpoint: 600,
            settings: 'unslick'
        }
    ]
});
```