从选择框中选择一个帖子并显示其特色图像

时间:2016-11-10 06:39:34

标签: wordpress wordpress-theming

我有一个帖子选择框,想要从选择框中选择帖子时显示帖子的精选图像。这样的东西 从选择框中选择帖子并在下方显示该帖子的精选图片。

http://prntscr.com/d5e3ad 自定义js文件代码是

var $ = jQuery;
$(document).ready(function(){
$("post-thumb").css("display", "none");
$("#vzxms-post-slct").on('change', function(e){
    e.preventDefault();
    $slct_val = $("#vzxms-post-slct").val();
    console.log($slct_val);
    $.ajax({
        url: ajaxurl,
        data: $slct_val,
        success: function(data){
            $("#post-thumb").css("display", "block");
        }
    });

});
});

和插件索引文件,表格在div wrap

<form method="post" action="">
            <div class="form-group-field">
                <div class="left_label"><label>
                    Select Post
                </label></div>
                <div class="rigth_input">
                    <select id="vzxms-post-slct" name="vzxms-post-slct" class="vzxms-post-slct">
                        <option selected="selected"> Select Post </option>
                        <?php
                        $args = array( 'post_type'=>'post');
                        $myposts = get_posts( $args );
                        foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
                            <option value="<?php the_ID();?>"><?php the_title(); ?></option>
                        <?php endforeach; 
                        wp_reset_postdata();?>
                    </select>
  <!-- and here i want to show image -->
                    <?php 
                    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post_id), 'post'); 
                    ?>
                    <img src="<?php echo $thumb[0]; ?>" id="post-thumb"/>
                </div>
            </div>
        </form>

1 个答案:

答案 0 :(得分:0)

在选择框选项中,您可以循环浏览所有帖子标题,如下所示:

$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post_id), 'post'); 
//thumbnail link
echo $thumb[0];

在更改选择选项时进行ajax调用以从帖子ID

获取帖子缩略图
{
    "Questions": {
        "id": "2",
        "BOOK": "3",
        "students": {
            "class": "3",
            "theme": "na",
            "43": "na"
        },
        "locations": {
            "h": "0",
            "L": "3"
        }
    }
}