web-dev-qa-db-ja.com

によってコンテンツを動的に生成する AJAX および高度なカスタムフィールド

アドバンストカスタムフィールドのリピーターフィールドを使用して、複数のフォトギャラリーを作成しています。 4ページあり、各ページには複数の画像ギャラリーがあります。このため、コンテンツを生成するために単一の外部PHPファイルを使用し、一度に1つのギャラリーのみをロードするためにAJAXを使用して負荷を軽減したいです。

ACFフィールドは外部ファイルで定義されているため、どのページからフィールドを取得するのかわからないため、これを実現する方法はよくわかりません。

これが私のJavaScriptです。

var passObject = {};

    $.ajax({
        url:"<?php bloginfo('template_directory'); ?>/inc/galleries.php",
        type: 'POST',
        data: passObject,
        success: function(resp) {

            $('#photos').append(resp);

        }
    });

そして、これがgalleries.phpの内容です。

<div class="photos">
    <h1>Photo Gallery</h1>
    <?php if( have_rows('gallery') ): ?>

        <?php while( have_rows('gallery') ): the_row(); 

        // vars
        $photo = get_sub_field('photos');

        ?>
            <div class="image"><img src="<?php echo $photo['sizes']['gallery-thumb']; ?>" alt="<?php echo $photo['alt']; ?>" /></div>
        <?php endwhile; ?>

    <?php endif; ?>
</div>
ajaxjavascriptadvanced-custom-fields
1
APAD1

これが@ gdanielの提案に基づいてやったことです。

AJAXコール：

$('.btn').click(function() {
    $.ajax({
        url:"<?php bloginfo('template_directory'); ?>/inc/galleries.php",
        type: 'POST',
        data: {postID: '<?=$post->ID;?>', galleryCategory: $(this).attr("data-content")},
        success: function(resp) {
            $('#photos').append(resp);

        }
    });
});

そして、これが私のPHPファイルです。

<?php 
require('../../../../wp-load.php');
$postid = $_POST['postID'];
$galcat = $_POST['galleryCategory'];
?>
<div class="photos" id="$galcat">
    <h1><?php echo $galcat; ?> Photos</h1>
    <?php if( have_rows($galcat,$postid) ): ?>
        <?php while( have_rows($galcat,$postid) ): the_row(); 

        // vars
        $photo = get_sub_field('photos');

        ?>
            <div class="image"><img src="<?php echo $photo['sizes']['gallery-thumb']; ?>" alt="<?php echo $photo['alt']; ?>" /></div>
        <?php endwhile; ?>

    <?php endif; ?>
</div>
3
APAD1