2

こんにちは、ここで多くのチュートリアルと質問をしましたが、主題は本当に不明確です。

これは、 ajax を使用するための 5 つのヒントを見つけることができる最高のチュートリアルです。

カスタム投稿のサムネイルがインデックス ページのグリッドに表示されています。投稿に移動するのではなく、リンクされた投稿を ajax を介して同じページの div にロードするためのクリック イベントを作成しようとしています。この方法が多くのWebサイトで使用されているのを見てきましたが、それを行うための正しいチュートリアル/方法が見つかりません.

ここにいくつかの例があります: Reveal、aware、garnish、ying+yang

誰かがこれを2週間後に明確にしてくれることを願っています。私はこの件について明確ではありません:(

私がこれまでに使用しているスクリプト：

<ul id="og-grid" class="og-grid">
            <?php query_posts( array( 'post_type' => array('portfolio') ));?><?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <li><a class="ajax-click" href="#" ><?php the_post_thumbnail('thumbnail', array('class' => 'thumb', 'alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?></a></li><?php endwhile; ?><?php endif; ?>
        </ul>
    </div>

index.php

.

wp_register_script( 'loadajax', get_stylesheet_directory_uri() . '/library/js/loadajax.js', array( 'grid-js' ), false , true );
wp_localize_script( 'loadgrid', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

スクリプトと admin-ajax を登録する

add_action ( 'wp_ajax_nopriv_cmdv_load', 'cmdv_load_ajax' );
add_action('wp_ajax_cmdv_load_ajax', 'cmdv_load_ajax' );

function cmdv_load_ajax () {

$the_slug = $_POST['slug'];
$args=array(
  'name' => $the_slug,
  'post_type' => 'projects',
  'post_status' => 'publish',
  'showposts' => 1,
);
$my_posts = get_posts($args);
if( $my_posts ) :

    global $post;
    $post = $my_posts[0];       

    // generate the response
    $response = json_encode( "Success" );

    // response output
    header( "Content-Type: application/json" );     
    ?>

    <div id="ajax-project-<?php the_ID(); ?>" <?php post_class('project main ajax clearfix'); ?> >

        <div class="projectHeader">
            <h1><?php the_title(); ?></h1>

            <div class="projectNav clearfix">                   
                <?php

                $prev_post = get_previous_post();
                if($prev_post) $prev_slug = $prev_post->post_name;
                $next_post = get_next_post();
                if($next_post) $next_slug = $next_post->post_name;
                ?>                  
                <div class="next <?php if(!$next_slug) echo 'inactive';?>"> 
                    <?php if(isset($next_slug)) : ?>
                        <a href="#<?php echo $next_slug;?>" onClick="nextPrevProject('<?php echo $next_slug;?>');">Next</a>
                    <?php endif; ?>
                </div>
                <div class="previous <?php if(!$prev_slug) echo 'inactive';?>"> 
                    <?php if(isset($prev_slug)) : ?>
                        <a href="#<?php echo $prev_slug;?>" onClick="nextPrevProject('<?php echo $prev_slug;?>');">Previous</a>
                    <?php endif; ?>
                </div>  
                <div class="closeBtn">  
                    <a href="#index">Close Project</a>
                </div>              
            </div> 
        </div>
    <div class="entry">
        <?php the_content(); ?>
    </div>
</div>
<?php endif; ?>
<?php die();?>
<?php } ?>

関数.php

jquery は私が本当に苦労しているところなので、ここに方向性が必要です! プレビューを拡大してサムネイルグリッドを使用してサムネイルを整列させていますが、クリック機能と応答を追加していますが、うまくいきません:(

ありがとう

4

1 に答える 1

3

最善の方法は、組み込みの AJAX を使用することです。つまり、AJAX リクエストを に送信しますwp-admin/admin-ajax.php。PHP 関数は に含まれている必要がありfunctions.phpます。

初心者にとっては簡単な問題ではないことを認めますが、これについてはウェブ上に多くのチュートリアルがあります。

これは、Wordpress AJAX on SO について既に書いたチュートリアルです。

AJAXを介してWordpressで動的に変更するナビゲーションリンク（次と前）

注：私が使用していた古いアプローチが含まれているため、質問を読まないでください。正しいアプローチが含まれている回答を読んでください。

于 2013-04-12T16:53:12.530 に答える