it-swarm-ja.com

オンデマンドでjQuery/scriptをアクティビティにする方法

私は私のWordpressのページのコメントセクションを表示するためにjQueryを使用しようとしていますが、コメントを許可するすべてのページにjQueryが存在する必要はありません。基本的に、私は以下が必要です:

  1. 'in view' jQueryプラグインの一般的なJavaScript実装(http://remysharp.com/2009/01/26/element-in-view-event-plugin/)
  2. コメントを含むdivが表示されたときにjQuery(core)をアクティブにする方法。

これによりjQueryがロードされ、次にjQueryがページのcomments-sectionをロードしますが、これはそのセクションがブラウザのビューポートを通して表示されるようになったときに限られます。

問題はPHP関数なので、これには 'wp_enqueue_script'(Wordpressの一般的なスクリプト追加方法)を実際には使用できないことです。 (Wordpress/jQueryの機能を壊さずに)上記のような機能を実装することを可能にする方法はありますか?

EDIT:私はjQueryを有効にする必要があります(ページを開いてタイトルを見て離れるだけではなく)彼がコメントを読みたいと思ったときだけにします。 - 多くはDisqusのスタイルです。 Disqusは、ビューポートに表示されているときにのみアクティブになるように見えます。同時に、制御中のJavascriptがアクティブになっていると思います。

このようなことを通常のJavascriptで(jQueryをアクティブにして)行ってからWordpressに移植するにはどうすればよいでしょうか。

2
OleVik

グーグルの多くの後、日本の地震の状況についていくのと同時に解決策を見つけようとすると、私は方法を見つけました:

Wordpress用の2つのスクリプト

wp_enqueue_scriptを使用して、DeferJS( https://github.com/BorisMoore/DeferJS )を追加しましたスクリプトをonEventに読み込むことができます。また、このようなカスタムスクリプトを追加しました。

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;

これは基本的に、ビューアがページをスクロールするたびに、ターゲット要素( "comments")に到達したかどうかを確認するためのクイックチェックを行います。実際にビューポートに表示されると、DeferJSはjquery-1.5.1.min.jsを読み込みます(そして確認のためにconsole.logにクイックラインを追加します)。また、表示されるようになったときに、スクロールによる影響が取り除かれました。

この時点で、jQueryがロードされ使用できるようになります。ただし、このメソッドでは、wp_enqueue_script - jQueryをロードする関数を使用することはできません(ただし、既に存在する場合はロードしないように拡張することは可能です)。 。これはPHPとJSが明らかに分離されているためです。

この方法についてのkaiserのコメントと提案に対して、私はkaiserに多大なる感謝の意を表します。それでは、どうもありがとうございました。

1
OleVik

1.頭の中にjQueryとプラグインを登録する

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

2.メタボックスを登録する

それは単純なチェックボックスであるべきです。 add_meta_box()のコーデックスページ に記述されているようにしてください(ここでこれを繰り返さないでください)。それ以外の場合は、メタボックスの$ idは'jquery_comments'になります。

例(短縮):
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.条件としてメタボックスに基づいてスクリプトをエンキューする

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

あなたのQが何であるかを理解した後、私はあなたのためにもう一つのAを得ました:

- >「スクリプトを終了しない」JavaScriptスクリプトの場合はGoogle。

いくつかの例:
http://plugins.jquery.com/plugin-tags/neverending
http://plugins.jquery.com/project/in-viewport-event
http://plugins.jquery.com/project/infiniScroll

2
kaiser