web-dev-qa-db-fra.com

Comment activer jQuery/script à la demande?

J'essaie d'utiliser jQuery pour afficher la section commentaire de mes pages Wordpress, mais sans exiger que jQuery soit présent sur toutes les pages permettant les commentaires. En gros, j'ai besoin des éléments suivants:

  1. Une implémentation javascript générique du plug-in jQuery 'in view' (http://remysharp.com/2009/01/26/element-in-view-event-plugin/)
  2. Une méthode d'activation de jQuery (core) lorsque la div contenant les commentaires entre en vue.

Cela chargerait alors jQuery, ce qui chargerait à son tour la section commentaires de la page, mais uniquement lorsque cette section deviendrait visible dans la fenêtre du navigateur.

Le problème semble être que je ne peux vraiment pas utiliser 'wp_enqueue_script' (méthode générique d'ajout de scripts de Wordpress), car il s'agit d'une fonction PHP. Existe-t-il une méthode qui me permettrait d'implémenter une fonctionnalité telle que décrite ci-dessus (sans casser la fonctionnalité Wordpress/jQuery)?

EDIT: Je ne dois activer jQuery que lorsque le lecteur décide de lire les commentaires (au lieu d'ouvrir seulement une page, de voir le titre et de partir) - beaucoup dans le style de Disqus. Disqus ne semble être activé que lorsqu'il est visible dans la fenêtre, et je suppose que, dans le même temps, le contrôle de Javascript est activé.

Comment pourrais-je faire quelque chose comme ça dans Javascript (activer jQuery), puis le porter sur Wordpress?

jquerywp-enqueue-script
2
OleVik

Après BEAUCOUP de recherches sur Google, en essayant de trouver une solution tout en restant au courant de la situation sismique au Japon, j'ai trouvé un moyen:

Deux scripts pour Wordpress

À l'aide de wp_enqueue_script , j'ai ajouté un DeferJS ( https://github.com/BorisMoore/DeferJS ) , qui permet de charger les scripts surEvent. En outre, j'ai ajouté un script personnalisé qui ressemble à ceci:

function gingah_comments_onLoad() {
    var element = document.getElementById("comments");
    var current = document.body.clientHeight+document.body.scrollTop;
    var target = element.offsetTop;
    if (current >= target) {
        $.defer("jquery-1.5.1.min.js", {
            bare: true 
        }).done(console.log('jquery-1.5.1.min.js loaded'));
        window.onscroll = null;
    }
}
window.onscroll = gingah_comments_onLoad;

Ce qui fait essentiellement une vérification rapide chaque fois que le spectateur fait défiler la page, pour voir si l'élément cible ("commentaires") est atteint. Quand il est en fait visible dans la fenêtre, DeferJS charge jquery-1.5.1.min.js (et crée également une ligne rapide dans le fichier console.log à des fins de vérification). De plus, lorsqu'il est devenu visible, l'effet du défilement a été supprimé.

À ce stade, jQuery sera chargé et prêt à être utilisé. Cette méthode ne permet cependant pas l’utilisation de la fonction wp_enqueue_script pour charger jQuery (mais il devrait être possible de l’étendre pour ne pas essayer de le charger s'il est déjà présent). . Ceci est dû à la séparation évidente entre PHP et JS.

Je remercie beaucoup Kaiser pour ses commentaires et ses suggestions sur la méthode. Merci beaucoup de votre aide.

1
OleVik

1. Enregistrez jQuery et le plugin dans votre tête

wp_register_script( 'jquery' );
wp_register_script( 'your_jquery_plugin', STYLESHEETPATH, 'jquery', '0.0', false );

2. Enregistrer une meta box

Ce devrait être une simple case à cocher. Veuillez le faire comme décrit sur la page du codex pour add_meta_box () (ne répétez pas simplement celui-ci ici). Si vous suivez le reste, alors le $ id pour la boîte méta devrait être 'jquery_comments'.

Exemple (raccourci):
dans functions.php

    function add_jquery_comments_meta_box() {
       $id = 'jquery_comments';
       $title = __( 'jQuery Comments, please?', 'your_textdomain_string' );
       $context = 'side'; // advanced/normal also possible
       $priority = 'low'; // high also possible
       $callback_args = ''; // in case you want to extend it
       add_meta_box( $id, $title, 'add_jquery_comments_cb_fn', 'post', $context, $priority, $callback_args );
    }
    add_action( 'admin_init', 'add_jquery_comments_meta_box', 1 );

    // Prints the box content
    // Please adjust this to your needs - only slightly modified from codex example
    function add_jquery_comments_cb_fn() {
       // Use nonce for verification
      wp_nonce_field( basename(__FILE__), 'your_noncename' );

      // The actual fields for data entry
?>
      <label for="jquery_comments"><?php _e("Do you want jquery comments on this post?", 'your_textdomain_string' ); ?></label>
      <input type="checkbox" id="jquery_comments" name="jquery_comments" />
<?php
    }

3. mettre en file d'attente le script en fonction de votre méta-boîte comme condition

puis écrivez une fonction comme celle-ci dans votre fichier functions.php

function add_jquery_comments_plugin() {
   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'your_jquery_plugin' );
}
// and call it depending on a conditional in the comment form hook
if ( get_post_meta($post->ID, 'jquery_comments', true) ) {
   add_action( 'comment_form', 'add_jquery_comments_plugin' );
}
2
kaiser

Après avoir compris de quoi parlait votre Q, j’ai eu un autre A pour vous:

-> google pour les scripts javascript "pages sans fin".

Quelques exemples:
http://plugins.jquery.com/plugin-tags/neverending
http://plugins.jquery.com/project/in-viewport-event
http://plugins.jquery.com/project/infiniScroll

2
kaiser