Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ACF Widgets Slick Slider
<?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 }
<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>
<?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;
<?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
You can’t perform that action at this time.