Last active
February 22, 2017 14:11
-
-
Save gregoirenoyelle/24a206ce9d6051e3cf13f40a6d512eee to your computer and use it in GitHub Desktop.
ACF Widgets Slick Slider
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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 } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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; | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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'); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment