wordpress - 如何动态获取图片或图像，单击 WordPress 帖子类型中的按钮时

Question

我定义了帖子类型我想在单击按钮时显示图片。我写了我想出的代码，我上传了一张照片以获得更好的想法书面打字邮政编码主题和照片是从帖子中输入的，没有问题问题只是单击每个按钮以显示相应图像的实现类型。这是我在 index.php 中编写的代码:

<div class="row">
                    <div class="col-lg-3">
                        <div class="side-left-btn" onclick="showHide()">
                            <?php

                            // WP_Query arguments
                            $args = array(
                                'post_type' => array( 'Exhibition' ),
                            );

                            // The Query
                            $exhibition = new WP_Query( $args );

                            // The Loop
                            if ( $exhibition->have_posts() ) {
                                while ( $exhibition->have_posts() ) {
                                    $exhibition->the_post();
                                    ?>
                                    <button class="btn btn-inner" id="uik"><?php the_title(); ?></button>

                                    <?php

                                }
                                wp_reset_postdata();
                            }
                            ?>

                        </div>
                    </div>
                    <div class="col-lg-9">
                        <?php

                        // WP_Query arguments
                        $args = array(
                            'post_type' => array( 'Exhibition' ),
                        );

                        // The Query
                        $exhibition = new WP_Query( $args );

                        // The Loop
                        if ( $exhibition->have_posts() ) {
                            while ( $exhibition->have_posts() ) {
                                $exhibition->the_post();

                                ?>
                                <div id='hidden_div' style='display:none;'>

                                 <?php the_post_thumbnail( 'medium', array(
                                    'class' => 'img-inner',
                                    'id'    => 'imgss',

                                ) );
                                ?>
                                <script type="text/javascript">
                            function showHide() {
                                document.getElementById("hidden_div").style.display = "block";
                            }
                        </script>


                                </div>

                                <?php
                            }
                            wp_reset_postdata();
                        }
                        ?>

                    </div>
                </div>

http://s8.picofile.com/file/8327097034/8080.PNG

Answer 1

首先把你的代码改成这样

<div class="row">
                    <div class="col-lg-3">
                        <div class="side-left-btn">
                            <?php

                            // WP_Query arguments
                            $args = array(
                                'post_type' => array( 'Exhibition' ),
                            );

                            // The Query
                            $exhibition = new WP_Query( $args );

                            // The Loop
                            if ( $exhibition->have_posts() ) {
                                while ( $exhibition->have_posts() ) {
                                    $exhibition->the_post();
                                    ?>
                                    <button onclick="showHide(this)" post_id="<?php echo get_the_ID();?>" class="btn btn-inner" id="uik"><?php the_title(); ?></button>

                                    <?php

                                }
                                wp_reset_postdata();
                            }
                            ?>

                        </div>
                    </div>
                    <div class="col-lg-9">

                                <div id='hidden_div'>
                                </div>

                    </div>
                </div>

其次在function.php中添加这段代码

<?php add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
function showHide(pid){
    var p_id = jQuery(pid).attr('post_id');
     jQuery.ajax({
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        type: 'post',
        data: { action: 'get_post-image', post_id: p_id },
        success: function(data) {
            if(data != '' || data != null){
            jQuery('#hidden_div').html( data );
            }else{

            }
        }
    });
}
</script>
<?php 
}?>

也在function.php中添加这个

<?php 
add_action('wp_ajax_get_post-image' , 'get_post-image');
add_action('wp_ajax_nopriv_get_post-image','get_post-image');
function get_post-image(){
$post_id = $_POST['post_id'];
$featured_img_url = get_the_post_thumbnail_url($post_id, 'full'); 

echo '<img src="'.$featured_img_url.'" />'; 
exit;
}
?>

说明

上面的代码通过ajax获取图片，点击按钮