Comment intégrer jPreloader dans un blog WordPress

J'avais un problème avec jPreloader (le préchargeur), il ne voulait pas marcher dans la partie blog (ici) de mon site. J'utilise "Twentyeleven child theme" et la dernière version de WP (3.7.1 à l'époque).

J'ai fait trois changements qui ont résolu le problème, si quelqu'un a le même problème, j'espère mon explication va vous aider.


 
 
 
 
 
 

1ère correction

Dans le fichier header.php, juste avant la balise </head>, j'ai mis les liens du fichier jQuery et du script de jPreloader. Puis, dans le footer.php, avant le </body>, j'ai appelé les scripts. J'ai lu plusieurs fois sur le net que les scripts devraient être ensemble, avec un ordre strict, donc j'ai déplacé tous dans le footer.php, juste avant la balise de fermeture </body> :

<script type="text/javascript" src="http://www.source-du-script.com/jquery.min.js"></script>
<script type="text/javascript" src="http://www.source-du-script.com/jpreloader.js"></script>
 
<script type="text/javascript">
$(document).ready(function() {
   
    $('#contenu').css("opacity",0);
 
    // Preload the page with jPreLoader
    $('#contenu').jpreLoader({
        showSplash: true
    }, function() {
            whatever you want to animate when jpreloader finishes
            }            
    });
   
    //When leaving page
    $('.exemple-lien').click(function(event) {
        event.preventDefault();
        newLocation = this.href;
        $('#contenu').delay(1200).animate({"opacity":1}, 2500);
    });
    function newpage() {
        window.location = newLocation;
    }
});
</script>

Si vous avez un problème avec le javascript qui appelle les scripts de base (ci-dessus), faites moi une signe dans un commentaire !

En restant au même exemple, n'oubliez pas cacher le #contenu ou l'élément de votre choix avec les codes CSS dans la feuille de style, c'est le javascript qui va l'appeller après la fin de l'animation de préchargeur :

#contenu {
opacity: 0;
-moz-opacity: 0.00;
-khtml-opacity: 0.00;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter:alpha(opacity=0);
}

 

2ème correction

J'utilise get_template_directory_uri dans un thème enfant (child theme). Le Codex WP dit :

"Lorsque vous avez besoin d'inclure des fichiers qui se trouvent dans la structure de répertoires de thème de votre enfant, vous allez utiliser get_stylesheet_directory(). Parce que le fichier style.css du thème parent est remplacé par le fichier style.css du thème enfant et votre style.css réside à la racine de votre thème enfant, la fonctions get_stylesheet_directory() pointe vers sous-répertoire de votre thème enfant (et pas le répertoire du thème parent)."

J'ai du changé deux lignes (ou si vous n'avez pas, ajoutez-les) dans le fichier functions.php, juste avant la balise php de fermeture ?> tout en bas :

wp_register_script('jPreloader', get_stylesheet_directory_uri() . '/js/jpreloader.js', 'jquery', null, true);
wp_enqueue_script('jPreloader');

N'oubliez pas de changer le vrai lien vers votre fichier jpreloader.js !

 

3ème correction

Après les deux premières corrections le préchargeur a commencé à précharger la page mais jamais fini l'animation. J'ai eu un message d'erreur : "**TypeError: jQuery.easing[jQuery.easing.def] is not a function**". Une autre recherche sur les forums... si cette fois-ci j'ai compris plus rapidement, c'est parce que j'avais déjà un problème similaire avant : WordPress est déjà fourni avec jQuery avec plusieurs plugins (extensions) qui peuvent causer un conflit avec des autres fichiers jQuery que j'ai mis en ligne.

A mon cas c'était simple, j'ai supprimé la totalité du dossier /wp-includes/js/jquery/ car j'utilise mes propres fichiers, je préfère, puis je savais que je ne l'utilise ailleurs. S'il est responsable de quelques fonctionnes du site, il n'y a pas de soucis, mon blog est assez nouveau, je vais reconnaitre de suite.

Mais je vous conseille plutôt une autre méthode qui est moins drastique... vous pouvez changer l'occurence "$" ou "jQuery" à "jq" dans vos codes, ça va différencier des codes de WP. Pour moi, ça m'a aidé...

2 réflexions au sujet de « Comment intégrer jPreloader dans un blog WordPress »

  1. Hello Igor,

    I saw your post here: AvexDesign regarding jPreLoader and I have exactly the same problem. I see that you have solve the problem on your web site using WP, and I wonder how you do it?

    Can you please explain me how you done it, I will appreciate it a lot. I have check Adham web site as well as starting point, but didn't succeed to make it to work under WP.

    I'm using WP 3.8 and I have load jpreloader.js in my child theme using function.php:

    wp_register_script(
            'jPreloader',
            get_stylesheet_directory_uri() . '/jpreloader.js',
            array('jquery'),
            '2.1',
            false
        );

    wp_enqueue_script('jPreloader');

    I have create my splash logo and add all neccessary css, but simply wont work...
    My test site is here - http://de.bogosavljev.com/ so feel free to check my code and let me know what I'm doing wrong.

    Thanks in advance!
    Djuka

  2. Hello Djuka,

    so, i had to re-read what i did. Finally i had to do more things for the installation on WP. I do not know what helped me really, you should check all those things and do the same :

    1) linking the scripts
    ======================

    I linked the basic jquery.js and the jpreloader.js in the header.php and i called the script in the footer.php. Then i changed and i call everything now in the footer.php. DO EVERYTHING IN THE SAME ORDER (you call first the basic jquery script, then the preloader script, then the script to call those scripts) !!! :

    <script type="text/javascript" src="http://webdesign.igorlaszlo.com/jquery.min.js"></script>
    <script type="text/javascript" src="http://webdesign.igorlaszlo.com/jpreloader.js"></script>
     
    <script type="text/javascript">
     
        // Preload the page with jPreLoader
        $('body').jpreLoader({
     
            showSplash: true
     
        }, function() {
     
                whatever you want to animate when jpreloader finishes
     
                }
               
        });
       
        //When leaving page
        if($(window).width() >= 1023){
            $('those links must be here which will be clicked for doing an animation).click(function(event) {
                event.preventDefault();
                newLocation = this.href;
                look at my webpage source
            });
        }
        else {
        }
       
        function newpage() {
            window.location = newLocation;
        }
     
    });
     
    </script>

    If you do not understand the last script which called the basic scripts, i will explain you... just ask me.

    -----------------------------------------------------------------

    2) I added the following lines at the bottom of the function.php :

    /* Integrate preloader script */
    wp_register_script('jPreloader', get_stylesheet_directory_uri() . '/js/jpreloader.js', 'jquery', null, true);
    wp_enqueue_script('jPreloader');

    ----------------------------------------------------------------

    3) then, it started to work but never finished preloading for me and i had a "**TypeError: jQuery.easing[jQuery.easing.def] is not a function**" error.

    As far as i understood from some forums (and already had some similar problem before), WordPress comes already with jquery files and causes conflict with jquery of other plugins, i simply deleted the /wp-includes/js/jquery/ folder and i use my own jquery files...
    If you use also your own jquery but you do not want to delete the wp jquery folder (because there is allways a risk, i do not know your structure), you can still try to change the l'occurence "$" or "jQuery" to "jq" in the codes of your own jquery files (avoid using the same what WP default jquery uses).

    Please let me know if you could install it with success !

    Regards,
    Igor