带有高级自定义字段的 Wordpress 在模态中显示帖子内容

Question

我在使用高级自定义字段和模式编码 WordPress 网站时遇到了一点问题。

如何将模式与高级自定义字段合并？目前，模态仅显示通用名称和公司。

当我将模式移动到循环中时，它会显示每个帖子的内容。

Pastebin link here

谢谢 稻谷

Answer 1

看起来我已经通过使用数据属性对其进行了整理。

    <div class="content row">
   <ul class="slides">
    <?php query_posts( 'showposts=-1&orderby=asc&category_name=speakers' ); ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <?php if( have_rows('speakers') ): ?>
                <?php while( have_rows('speakers') ): the_row(); ?>

                    <?php $image = get_sub_field('photo'); ?>
                    <?php $company = get_sub_field('company'); ?>
                    <?php $bio = get_sub_field('bio'); ?>

                    <li class="slide col25 js-open-modal">
                        <a href="#modal1" class="easy-modal-open js-modal-open" data-post-id="<?= get_the_ID(); ?>" data-image-url="<?php echo $image['url']; ?>" data-image-alt="<?php echo $image['alt'] ?>" data-title="<?php echo the_title(); ?>" data-company="<?php echo $company; ?>" data-bio="This is the bio text">
                        <img class="logo" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
                        <h4 class="overlay"><?php echo the_title(); ?><br /><?php echo $company; ?></h4></a>
                    </li>

                <?php endwhile; ?>
            <?php endif; ?>
        <?php endwhile; ?>
    <?php wp_reset_query(); ?>
</ul>
</div>        


<div class="easy-modal js-modal" id="modal1">
<div class="easy-modal-inner">
    <img class="logo js-logo" src="" alt="" />
    <h4><span class="js-title"></span><span class="js-company"></span></h4>
    <p class="js-bio"></p>
    <button class="easy-modal-close" title="Close">&times;</button>
</div>
</div>

//然后在我的js中使用这个

var modal = $('.js-modal'),
    modalTrigger = $('.js-modal-open');

modalTrigger.on('click', function(e){
e.preventDefault();
var t = $(this),
        url = t.data('image-url'),
        alt = t.data('image-alt'),
        title = t.data('title'),
        company = t.data('company'),
        bio = t.data('bio');

updateModal(modal, url, alt, title, company, bio);
// open modal here unless the plugin you are using opens its self?
});

function updateModal(elm, url, alt, title, company, bio) {
elm.find('img').attr('src', url);
elm.find('img').attr('alt', alt);
elm.find('.js-title').text(title);
elm.find('.js-company').text(company);
elm.find('.js-bio').text(bio);
}

Answer 2

将帖子 ID 添加到您打开模式的链接中（这将用于将帖子 ID 传递给 ajax 函数）：

<li class="slide col25">
    <a href="#modal1" class="easy-modal-open" data-post-id="<?= get_the_ID(); ?>">
    //img and h4
    </a>
</li>

使用 wp_localize_script 将 ajaxurl 传递给您的 jquery：

wp_localize_script( 'my_modal', 'my_modal_localize', array(
    ajaxurl => admin_url('admin-ajax.php')
) );

在你的functions.php中添加一个函数来查询正确的公司（就像你上面所说的那样）：

add_action( 'wp_ajax_custom_function', 'get_company_modal' );
add_action( 'wp_ajax_nopriv_custom_function', 'get_company_modal' );

function get_company_modal() {
    $args = array(
        p => $_POST['post_id'], //this is the post id passed via jquery.post()
    );

    $query = new WP_Query( $args );

    $result = array();

    if( $query->have_posts() ) {
        while( $query->have_posts() ) {
            $query->the_post();

            // get all your custom fields here and add them to the $result array
            $result[ $custom_field_key ] = $custom_field_value;

        }
    }

    echo json_encode( $result );
    die();
}

然后使用.post()在你的jquery中添加对click事件的调用

$('.easy-modal-open').click(function(e) {
    var data = {
        action: 'custom_function', //see the add_action part above
        post_id: $(this).data('post-id'), //this is the post id from the a data attribute
    }

    $.post( my_modal_localize.ajaxurl, data, function(response) {
        var customFields = $.parseJSON(response);

        // add the custom fields to your output via e.g. append()
    }
    // and THEN open the modal 
    var target = $(this).attr('href');
    $(target).trigger('openModal');
    e.preventDefault();
});

也许您需要添加$.when().then()，但这取决于具体情况。

因此，这只是一个示例，也是实现您想要的一种方式。您当然会根据自己的情况对其进行编辑。