faire un mur d’adhérents

functions.php

<?php

function get_adherents() {
	if ( function_exists( 'wcs_get_subscriptions' ) ) {
		if ( ! $adherents_wpfr = get_transient( 'adherents_wpfr' ) ) {
			$subscriptions_pro = wcs_get_subscriptions( array(
				'subscriptions_per_page' => 10,
				'variation_id'           => 11,
				'subscription_status'    => 'active',
			));
			$subscriptions_pro = array_keys( $subscriptions_pro );
			$subscriptions_pro = array_map( function( $subscription ) {
				$company   = mb_strtoupper( get_post_meta( $subscription, '_shipping_company', true ) );
				$useremail = ( $n = get_post_meta( $subscription, '_billing_email', true ) ) ? mb_strtoupper( $n ) : '';
				return sprintf( '<span><span>%s</span></span>', $company );
			}, $subscriptions_pro );

			$subscriptions_regular = wcs_get_subscriptions( array(
				'subscriptions_per_page' => 60,
				'variation_id'           => 12,
				'subscription_status'    => 'active',
			));
			$subscriptions_regular = array_keys( $subscriptions_regular );
			$subscriptions_regular = array_map( function( $subscription ) {
				$userfname = ( $n = get_post_meta( $subscription, '_shipping_first_name', true ) ) ? willy_mb_ucfirst( $n ) : '';
				$userlname = ( $n = get_post_meta( $subscription, '_shipping_last_name', true ) ) ? willy_mb_ucfirst( $n ) : '';
				$useremail = get_post_meta( $subscription, '_billing_email', true );
				return sprintf( '<span%s><span>%s<br/>%s<br>%s</span></span>', random_blue(), $userfname, $userlname, get_avatar( $useremail, 50, get_option( 'avatar_default', 'mystery' ), $userfname, array( 'class' => 'mini-avatar' ) ) );
			}, $subscriptions_regular );

			$adherents_wpfr = array( $subscriptions_pro, $subscriptions_regular );
			set_transient( 'adherents_wpfr', $adherents_wpfr, HOUR_IN_SECONDS );
		}

		return $adherents_wpfr;
	}
}

function willy_mb_ucfirst( $text ) {
	return mb_strtoupper( mb_substr( $text, 0, 1 ) ) . mb_strtolower( mb_substr( $text, 1 ) );
}

function get_adherent_boxes( $adherents, $keys, $class = '' ) {
	if ( ! is_array( $keys ) ) {
		$keys = array( $keys );
	}
	$wrap = '<div class="hratio adherent-box %s"><span>%s</span></div>';
	foreach ( $keys as $key ) {
		echo sprintf( $wrap, $class, $adherents[ $key ] );
	}
}

function get_adherents_box() {

	$adherents = get_adherents();

	$a = $b = array();

	$count = floor( count( $adherents[1] ) / 2 );
	for ( $i = 0; $i <= $count; $i++ ) {
		$a[] = $adherents[1][ $i ] . $adherents[1][ $i + $count ];
	}

	$count = floor( count( $adherents[0] ) / 2 );
	for ( $i = 0; $i <= $count; $i++ ) {
		$b[] = $adherents[0][ $i ] . $adherents[0][ $i + $count ];
	}

	$p = array_rand( $b, 1 );
	$r = array_rand( $a, 12 );
	?>
	<div class="row adherents-wrapper" id="adherents-wrapper">
		<div class="col-lg-2 center">
			<?php get_adherent_boxes( $a, array_slice( $r, 0, 3 ) ); ?>
		</div>
		<div class="col-lg-2 center">
			<?php get_adherent_boxes( $a, array_slice( $r, 3, 3 ) ); ?>
		</div>
		<div class="col-lg-4 center">
			<div class="row">
				<div class="col-lg-6 center">
					<?php get_adherent_boxes( $a, array_slice( $r, 6, 1 ) ); ?>
				</div>
				<div class="col-lg-6 center">
					<?php get_adherent_boxes( $a, array_slice( $r, 7, 1 ) ); ?>
				</div>
			</div>
			<div class="hratio mi-ratio">
			<?php if ( wcs_user_has_subscription( '', 10, 'active' ) ) : ?>
				<span class="adherer-button"><span><span>Bienvenue dans la #WPFamily&nbsp;!</span></span></span>
			<?php else: ?>
				<span class="adherer-button"><a href="https://wpfr.net/boutique/adhesion-wpfr/"><span>Pour rejoindre WPFR<br>C'est par ici&nbsp;!</span></a></span>
			<?php endif; ?>
			</div>
			<div class="row">
				<div class="col-lg-6 center">
					<?php get_adherent_boxes( $a, array_slice( $r, 8, 1 ) ); ?>
				</div>
				<div class="col-lg-6 center">
					<?php get_adherent_boxes( $a, array_slice( $r, 9, 1 ) ); ?>
				</div>
			</div>
		</div>
		<div class="col-lg-4 center">
			<?php get_adherent_boxes( $b, $p, 'big' ); ?>
			<div class="row">
				<div class="col-lg-6 center">
					<?php get_adherent_boxes( $a, array_slice( $r, 10, 1 ) ); ?>
				</div>
				<div class="col-lg-6 center">
					<?php get_adherent_boxes( $a, array_slice( $r, 11, 1 ) ); ?>
				</div>
			</div>
		</div>
	</div>
	<?php
	// exit();
	wp_localize_script('scripts', 'listAdherents', $adherents );
}

function random_blue() {
	$hsl = [ 200, 100, 64 ];
	$hsl[0] += rand( 0, 16 );
	$hsl[2] += rand( 0, 6 );

	$hsl[1] = $hsl[1] . '%';
	$hsl[2] = $hsl[2] . '%';
	return ' style="background-color:hsl(' . implode( ',', $hsl ) . ');"';
}

script.js

jQuery(document).ready(function(){
  if ( $('#adherents-wrapper').length ) {

		var $adherWrapp = $('#adherents-wrapper');
		function pondereAdherents() {
			var randomAdherents = listAdherents[1].sort(function() { return 0.5 - Math.random() }).slice(0,12);
			var z = 0;
			$adherWrapp.find('.adherent-box > span').each(function(){
				var $return = $(this).find('.return');
				if ( $(this).parent().hasClass('big') ) {
					var currentEntre = $(this).find('> span:last-child').text();
					var listEntre = listAdherents[0].filter(function(i) {
						return $(i).text() != currentEntre;
					});
					var randomEntre  = listEntre.sort(function() { return 0.5 - Math.random() }).slice(0,1);
					$(this).append( randomEntre[0] );
				} else {
					$(this).append( randomAdherents[ z++ ] );
				}
				$return.remove();
			});
		}

		var intvab = setInterval(function(){
			$adherWrapp.find('.adherent-box').each(function(i,el){
				$self = $(this);
				(function($self,i){
					setTimeout(function(){
						$self.find('> span > span:eq(0)').addClass('return');
					}, i * 150);
				})($self,i);
			});
			setTimeout(pondereAdherents,1000);
		}, 5000 );
	}
});

style.css

.adherents-wrapper{
	padding-left:10px;
	padding-right:10px;
	margin-bottom:5em;
}
.hratio{
	position:relative;
	transform-origin: center;
	-webkit-perspective: 600;
	-moz-perspective: 600;
	perspective: 600;
}
.hratio > span{
	display:block;
	width:100%;
	padding-top:100%;
}
.hratio.mi-ratio > span{
	padding-top:50%;
}
.hratio > span > span,
.hratio > span > a{
	display:flex;
	position:absolute;
	top:5px;
	left:5px;
	right:5px;
	bottom:5px;
	text-align:center;
	background:#459ae6;
	font-weight:700;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	will-change:rotateY;
	transform:rotateY(-180deg);
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

.hratio > span > .return + span,
.hratio > span > span:first-child,
.hratio > span > a:first-child{
	transform: rotateY(0);
}

.hratio > span > span.return {
	transform: rotateY(180deg);
}

.hratio > span > span > span,
.hratio > span > a > span{
	margin:auto;
	color:#FFF;
	font-size:1.2em;
	z-index:1;
	position:relative;
	display:block;
	-webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}

.hratio a{
	color:#fff !important;
}

.hratio a:hover > span,
.hratio a:focus > span{
	font-size:1.25em;
}

.big{
	font-size:1.5em;
}

.adherents-wrapper .row{
	margin-left: 0; 
	margin-right: 0; 
}

.adherents-wrapper .col-lg-2,
.adherents-wrapper .col-lg-4,
.adherents-wrapper .col-lg-6{
	padding:0;
}
.hratio > .adherer-button > span,
.hratio > .adherer-button > a{
	background-color:#ec5A70;
	font-size:1.5em;
}
.hratio > span > span:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: block;
	background: linear-gradient(135deg, rgba(255,255,255,.25),rgba(0,0,0,0));
}

.mini-avatar{
	border-radius:50%;
	display:inline-block;
	background:#fff;
}