Question

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

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

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

由于稻谷

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()，但这取决于具体情况。

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

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

2 个答案: