Ajouter un loader personnalisé dans WordPress

WordPress permet de créer un joli site, rapidement et sans aucune connaissance de développement. Mais si le choix du thème est relativement facile, la personnalisation de celui ci peut poser problème.

Ici nous allons voir comment ajouter un loader personnalisé dans le thème Arlo sur wordpress. Je n’ai pas testé sur d’autres thèmes, mais je suppose que la manipulation est identique, à peu de chose près.

Pour celà j’ai dû modifier plusieurs fichiers.

  • arlo/framework/admin/options/general/map.php

arlo_qodef_add_admin_field(array(
  'type' = 'selectsimple',
  'name' = 'smooth_pt_spinner_type',
  'default_value' = '',
  'label' = 'Spinner Type',
  'parent' = $row_pt_spinner_animation,
  'options' = array(
    "pulse" = "Pulse",
    "double_pulse" = "Double Pulse",
    ...
    "pulse_circles" = "Pulse Circles",
    "circle_gradient" = "Circle Gradient",
    "mon_loader" = "Mon loader"
  )
));

En ajoutant la dernière ligne, on ajoute une option supplémentaire dans la liste « Spinner Type ».

Ensuite, il faut aller dans l’éditeur de fichier intégré à WordPress (Apparence -> Editeur), et modifier le fichier :

  • qode-loading-spinners.php

Il faut rajouter un case au switch pour qu’il détecte l’option « Mon loader ».


switch ( $spinner_type ) {
  case "pulse": $spinner_html = arlo_qodef_loading_spinner_pulse();
   break;
  case "double_pulse": $spinner_html = arlo_qodef_loading_spinner_double_pulse();
   break;
  ...
  case "pulse_circles": $spinner_html = arlo_qodef_loading_spinner_pulse_circles();
   break;
  case "circle_gradient": $spinner_html = arlo_qodef_loading_spinner_circle_gradient();
   break;
  case "mon_loader": $spinner_html = arlo_qodef_loading_spinner_mon_loader();
   break;
 }

Lorsque le case « mon_loader » est à true, alors la variable reçoit le retour de la fonction « arlo_qodef_loading_spinner_mon_loader() », qui n’existe pas pour l’instant. Il faut donc la rajouter dans la suite du fichier.

if ( ! function_exists( 'arlo_qodef_loading_spinner_mon_loader' ) ) {
  function arlo_qodef_loading_spinner_mon_loader() {
    $html = '';
    $html .= '<div class="mon_loader"></div>';
    return $html;
  }
}

Maintenant, lorsque le spinner type Mon loader sera sélectionné, la div qui contient le loader aura pour classe « mon_loader ». Cette classe doit être rajoutée dans le fichier :

  • arlo/assets/css/modules.min.css.
.mon_loader{
  //mettez ici le code css de votre choix
  //voici un exemple
  background-image: url('https://i.stack.imgur.com/naLBK.gif');
  width: 128px;
  height: 128px;
  position: absolute;
  margin-left: -64px;
  margin-top: -64px;
  background-repeat: no-repeat;
}

Voila, vous venez de rajouter votre loader personnalisé dans le thème Arlo de WordPress.

Enjoy !

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.