php Swiper短代码

Posted 2021-05-04

add_shortcode( "originis_portfolio_slider", function($atts){
  // Déclaration des valeurs par défauts des attributs du shortcode
  $atts = shortcode_atts
  (
    array(
      "class"    => "",
      "id"       => "",
    ),
    $atts // -> les attributs passés en paramètre sur le shortcode
  );
  $input_id = uniqid();

  wp_enqueue_script( 'swiper-js', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js' );
  wp_enqueue_style( 'swiper-css', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css' );

  $query = new WP_Query(array(
    'posts_per_page' => 20,
    // 'orderby'        => 'date',
    'post_type'      => ['portfolio']
  ));


  // Output
  $output = "";

  if ($query->have_posts()) :
    $slider_id = uniqid('originisSlider_');
    ob_start();
    $output .= "<!-- originis portfolio slider -->";
    $terms_filters = new WP_Term_Query(array(
      'taxonomy'    => 'portfolio-category',
      'hide_empty'  => true
    ));
    $terms_filters = $terms_filters->terms;
    ?>

    <div id="filters-<?php echo $slider_id; ?>" class="swiper-filters">
      <?php if ( is_array($terms_filters) ): ?>
        <label>
          <input type="radio" checked class="hidden" name="filter-<?php echo $slider_id ?>"/>
          <div class="btn btn-orange btn-line btn-small swiper-filter-button" data-filter-term="none">Tout</div>
        </label>
        <?php foreach( $terms_filters as $term ){ ?>
          <label>
            <input type="radio"  class="hidden" name="filter-<?php echo $slider_id ?>"/>
            <div class="btn btn-orange btn-line btn-small swiper-filter-button" data-filter-term="<?php echo $term->slug ?>"><?php echo $term->name ?></div>
          </label>
        <?php } ?>
      <?php endif; ?>
    </div>

    <div id="<?php echo $slider_id ?>" class="swiper-container originis-portfolio-slider">
      <div class="swiper-wrapper">

        <?php
        while($query->have_posts()) : $query->the_post();
        $terms_class_obj = get_the_terms( get_the_id(), 'portfolio-category', array( 'fields' => ['slug', 'name']));

        if (is_array($terms_class_obj)){
          $terms_class = [];
          $terms_name = [];
          foreach($terms_class_obj as $term) {
            array_push($terms_class, $term->slug);
            array_push($terms_name, $term->name);
          }
        } else {
          $terms_class = [];
          $terms_name = [];
        }

        $terms_name = implode(' ', $terms_name);
        $terms_class = esc_attr(implode(' item-single-', $terms_class));
        $thumbnail_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large')[0];
        ?>
        <div class="swiper-slide <?php echo  'item-single-' . $terms_class ?>">
          <div class="swiper-item-background" style='background-image: url(<?php echo $thumbnail_url; ?>)'>

            <div class="swiper-item-body-container">
              <p class="swiper-item-title text-center">
                <span class="decoration-primary">
                  <?php echo get_the_title(); ?>
                </span>
              </p>
              <p class="swiper-item-terms">
                <?php echo $terms_name; ?>
              </p>

              <p>
                <a href="<?php echo get_the_permalink(); ?>" class="button button-outlined button-white">En voir plus</a>
              </p>
            </div>
          </div>
        </div>
      <?php endwhile; ?>

    </div>

    <div class="swiper-button swiper-button-prev"></div>
    <div class="swiper-button swiper-button-next"></div>
  </div>

  <script>
  jQuery(document).ready(function(){
    var <?php echo $slider_id ?> = new Swiper(
      '#<?php echo $slider_id; ?>',
      {
        navigation: {
          nextEl: '#<?php echo $slider_id; ?> .swiper-button-next',
          prevEl: '#<?php echo $slider_id; ?> .swiper-button-prev',
        },
      }
    );

    jQuery('#filters-<?php echo $slider_id; ?> .swiper-filter-button').on('click touch', function(){
      var term = jQuery(this)["0"].attributes['data-filter-term'].value;

      if (term === "none") {
        jQuery('#<?php echo $slider_id ?> .swiper-slide').each(function(){
          jQuery(this).removeClass('hidden');
        });
      } else {
        jQuery('#<?php echo $slider_id ?> .swiper-slide').each(function(){
          jQuery(this).removeClass('hidden');
          if ( !jQuery(this).hasClass('item-single-' + term ) ) {
            jQuery(this).addClass('hidden');
          }
        });
      }


      <?php echo $slider_id; ?>.update();
    });
  });
  </script>
  <?php
  $output .= "<!-- /originis portfolio slider -->";
  $output = ob_get_clean();

  wp_reset_postdata();
  endif;
  return $output;
  // Output
});