gregoirenoyelle
2/22/2017 - 6:45 AM

ACF Widgets Slick Slider

ACF Widgets Slick Slider

slick-wp-enqueue.php
content_copyfile_download
<?php

//* Générateur en ligne pour les script et les css
// https://generatewp.com/register_script/

/**************************
* ENQUEUE POUR LE FRONT
**************************/

//* enqueue style front
add_action('wp_enqueue_scripts','slick_styles_front', 99);
function slick_styles_front() {
    wp_register_style('slick', plugins_url( 'css/slick.css', dirname(__FILE__) ), array(), '1.0', 'all' );
    wp_register_style('slick-theme', plugins_url( 'css/slick-theme.css', dirname(__FILE__) ), array(), '1.0', 'all' );
    // Condition pour appeler ces fichiers CSS seulement sur la home
    if ( is_home() ) {
        wp_enqueue_style('slick');
        wp_enqueue_style('slick-theme');
    }
    
}

//* enqueue script front
add_action('wp_enqueue_scripts','slick_scripts_front');
function slick_scripts_front() {
    wp_register_script('slick',plugins_url( 'js/slick.min.js', dirname(__FILE__) ), array('jquery'),'1.0',true);
    // Condition pour appeler ces fichiers JS seulement sur la home
    if ( is_home() ) {
        wp_enqueue_script('slick');
    }
    
}
slick-widget-template.php
content_copyfile_download
<?php 
// Widget pour slick slider voir fichier
// /wp-content/plugins/wp-slick-slider/gnoyelle-sup-theme.php

// Variable pour afficher le HTML à la fin
$output = '';
// Champ principal pour la galerie. Cela retourne un tableau
// Attention à bien mettre le paramètre $acfw à la fin
$images = get_field('ap_images', $acfw);

// Condition sur la galerie est active
// Sinon le scritp s'arrête
if( ! $images ) {
    return;
}

// Div avec la classe Utilisée dans Slick Slider déclarée dans l'extension wp-slick-slider
$output .= '<div class="slider-slick">';
    // Début de la boucle sur le tableau retourné par $images
    foreach( $images as $image ): 
             
        // Variables pour afficher l'image
        $image_id = $image['ID'];
        $taille = 'slick-slider';
        $img = wp_get_attachment_image( $image_id, $taille );

        // Variables pour récupérer les champs d'image ajouté avec ACF
        // Je dois dans ce cas ajouté l'ID du média
        // qui est disponible dans le tableau la clé ID       
        // Champ URL dans ACF Pro
        $lien = get_field('ap_adresse_sur_limage', $image_id);        
        // Champ Vrai Faux dans ACF Pro
        $target = get_field('ap_ouvrir_lien_dans_un_nouvel_onglet', $image_id);
        // Valeur de la variable si la condition est vraie. La case est cochée
        if ( $target ) {
            $target = ' target="_blank"';
        } else {
            $target = '';
        }

        // Affichage du contenu de la boucle    
        $output .= '<div class="visuel">';

            // Condition si j'ai un lien
            // L'image est clickable
            if ( $lien ) { 
                $output .= sprintf('<a href="%s"%s>%s</a>', $lien, $target, $img );
            } else {
                $output .= $img;   
            }
           
        $output .= '</div><!-- FIN <div class="visuel"> -->'; 
        // Fin de la boucle sur le tableau $images
        endforeach; 

$output .= '</div><!-- FIN <div class="slider-slick"> -->';

// Affichage du HTML
echo $output;
slick-structure-html.html
content_copyfile_download
<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

  </body>
</html>
slick-call-script-home.php
content_copyfile_download
<?php
//* Fonction pour WordPress

//Enlever la barre Admin en front
// show_admin_bar( false );


add_action( 'wp_footer', 'slick_script', 9000 );
function slick_script() {
    // Si ce n'est pas l'accueil, le script s'arrête
    if ( ! is_home() ) { return; }
?>  
    <!-- Script pour Slick Slider  -->
    <script type="text/javascript">
        jQuery('.slider-slick').slick({
          autoplay: true,
          autoplaySpeed: 2000,
        });
    </script>
<?php }