2

Google 検索結果のすべてのリンクが紫色になり、2 時間ほどイライラしていたので、皆さんに問題の解決を手伝ってもらうことにしました。

WordPress のホームページで、ループがブログのすべての投稿タイトルのリストを生成します。Web サイトの読み込み時間を改善するために、AJAX を使用することにしました。すべてのコンテンツを一度にロードする代わりに、特定の投稿のタイトルをクリックして、そのコンテンツを下に表示します。簡単に言うと、クリックすると、投稿の ID (属性タグから取得) が ajax.php ファイル (コンテンツを表示するためのループを含む WordPress テンプレート) に POST されます。コンテンツが読み上げられると、フロントエンドに表示されます。

問題はプラグインです。コンテンツのロード (DOM の変更) 後に再起動されないため。明らかに、インストールしたすべてのプラグインを AJAX コールバックに追加するという解決策は望んでいません。自動化してほしい。WordPress は、(開発者の観点からも) シンプルで管理しやすいことを目的としています。

私はすでに live()、livequery() - プラグイン、listen() - プラグインを試し、ajax スクリプトをより WordPress の方法 (admin-ajax.php を使用) に変更しようとしましたが、毎回結果は同じです- うまくいきません。

プラグインとは、たとえば、Syntax Highlighter、Social Share Buttons、または FancyBox / Lightbox for images...プラグインの機能を ajax ループに追加して手動で表示しても失敗します...

live() 関数を少し間違って使用している可能性があると思います... とにかく、これは私のコードです:

フロントエンド ループ (index.php)

<?php while (have_posts()) : the_post(); ?>   
    <article>
        <div class="fake">
            <div class="header" rel="<?php the_ID(); ?>">
                <h1 class="title"><?php the_title(); ?></h1>
                <span class="tags">
                    <?php
                      $posttags = get_the_tags();
                      if ($posttags) {
                        foreach($posttags as $tag) {
                          echo $tag->name . ', '; 
                        }
                      }
                    ?>
                </span>
                <span class="post_no">#<?=$published?></span>
                <div class="arrow"></div>
            </div>
        </div>
        <div class="content"></div>
    </article>
   <?php endwhile; ?>

私が使用するAJAXのフラグメント:

$('.header').live('click',function() {
        var content = $(this).parent().parent().find('.content');
        var post_id = $(this).attr("rel"); 
        content.load("http://localhost/simpleecode/ajax/",{id:post_id}).delay(800).slideDown('slow');});

AJAX のループを含むテンプレート:

<?php $post = get_post($_POST['id']); ?>
<?php if ($post) : ?>
<?php setup_postdata($post); ?>
<?php the_content(); ?>
<?php endif;?>

開発用 Web サイトへのリンクを使用して、DOM とファイルを自分用にチェックアウトすることもできます (開発用サイトであり、とにかく公開したくないため、ショートリンクを使用しました)。

http://bit.ly/Oa6hWH

これを行う方法についてのアイデアがあることを願っています:S

4

1 に答える 1

3

AJAX リクエストの成功/完了コールバックを使用して、DOM にとって新しい html のプラグインを呼び出します。

content.load("http://localhost/simpleecode/ajax/",{id:post_id}, function(){
     /* new html now exists*/
    $(this).find('.classThatNeedsPlugin').somePlugin();

}).delay(800).slideDown('slow');

jQuery API - load() メソッドのドキュメント

プラグインにサイズに依存するコードが含まれている場合、これを変更してアニメーションのコールバックでプラグインを呼び出す必要がある場合があります。

編集: delay() を使用してアニメーションをセットアップするのではなく、同じ成功コールバック内でアニメーションを呼び出すと、html の準備が整います

content.load("http://localhost/simpleecode/ajax/",{id:post_id}, function(){
     /* new html now exists*/
    $(this).find('.classThatNeedsPlugin').somePlugin().slideDown('slow');      

});

Edit2 代替メソッド: jQuery 遅延オブジェクト メソッド。

deferred を使用して ajax コールバックを設定することもできます。

var jqXhr= content.load("http://localhost/simpleecode/ajax/",{id:post_id});
$.when( jqXhr).then( /* plugin function */);

またはカスタム イベント

/* on page load*/
$('#myTable').on('myCustomEventName', function(){
     $(this).doPlugins();
}).trigger('myCustomEventName');

/* ajax callback*/
content.load("http://localhost/simpleecode/ajax/",{id:post_id}, function(){
     $('#myTable').trigger('myCustomEventName')

})
于 2012-06-23T16:57:37.237 に答える