Question

是否有可能在WordPress中调整高级自定义字段关系功能，以便不是仅显示缩略图而是显示悬停时的实时页面预览？我相信这需要一些自定义的AJAX。

以下是高级自定义字段字段... http://www.advancedcustomfields.com/wp-content/uploads/2014/04/acf5-whats-new-relationship.png

如果不是，可以在某处添加预览页面链接，以便在将页面链接到页面之前在新标签或窗口中预览页面？

如果无法使用高级自定义字段完成此操作可以完成吗？

此功能的原因是用户需要能够创建由自定义帖子类型组成的页面。他们可以选择的帖子数量很大，因此需要预览，因为选择将基于视觉方面而不是文本。

目前高级自定义字段使用特色图像作为缩略图图像，因此我想知道是否可以生成实时预览图像并将其用作特色图像？

Answer 1

创建meta box that contains an iframe。然后向页面添加自定义脚本，如this plugin，并在ACF的Relationship对象上侦听修改。该对象包含帖子ID，用于更改iframe的网址源http://example.com/?post=OBJECT-ID。

我在控制台中测试过并且工作正常：

$('div.relationship_left ul.bl.relationship_list li a').mouseenter(function(){ 
    var the_id = $(this).data('post_id');
    console.log( the_id );
});

响应时间可能并不理想，加载页面所需的时间比移动鼠标要长......

使用Ajax并从数据库中拉出post对象可能会获得更好的结果，并使用<div>包含post_title + post_content的自定义元框填充。

^_[follow-up]我继续用Ajax复制粘贴概念证明，iframe太重了。

<?php
/**
 * Plugin Name: (SO) Preview ACF relationships
 * Plugin URI:  http://stackoverflow.com/q/26061769/1287812
 * Version:     1.0
 * Author:      brasofilo 
 */

Class SO_26061769 {
    public function __construct() {
        add_action( 'plugins_loaded', array( $this, 'setup' ) );
    }

    function setup() {
        add_action( 'add_meta_boxes', array( $this, 'meta_box' ) );
        add_action( 'wp_ajax_live_preview', array( $this, 'live_preview' ) ); 
    }

    public function meta_box() {
        add_meta_box( 'preview_metabox', 'Preview ACF relationship', array( $this, 'mb_preview' ), 'post' );
    }

    function mb_preview() { 
    ?>
        <h2>preview</h2>
        <div id="post-ajax-preview">...</div>
        <style>
        #post-ajax-preview img { max-width:50px; max-height:50px; width: auto; height: auto; } 
        #post-ajax-preview { height: 200px; overflow:hidden;}
        </style>
        <script type="text/javascript">
        var myAjax = {
            'url': '<?php echo admin_url( "admin-ajax.php" ); ?>',
            'nonce': '<?php echo wp_create_nonce( "live_preview_nonce" ); ?>'
        }
        jQuery(document).ready(function($) { 
            $(document). on( 'mouseenter', 'div.relationship_left ul.bl.relationship_list li a', function(){ 
                var data = {
                    action: 'live_preview',
                    nonce: myAjax.nonce,
                    post_id: $(this).data('post_id')
                };
                $.post( myAjax.url, data, function( response ) {
                    var $html = '<h3>' + response.data.post_title + '</h3><p>' + response.data.post_content + '</p>';
                    $('#post-ajax-preview').html( $html );
                });
            }); 
        });             
        </script>
    <?php
    }

    public function live_preview() {
        check_ajax_referer( 'live_preview_nonce', 'nonce' );
        if( isset ( $_POST['post_id'] ) )
            $post = get_post( (int) $_POST['post_id'] );

        if( !empty( $post ) ) {
            $post->post_content = apply_filters('the_content', $post->post_content); // do shortcodes
            wp_send_json_success( $post );
        }
        else
            wp_send_json_error( array( 'error' => 'No data.' ) );
    }
}
$SO26061769 = new SO_26061769;

这是结果。但请注意，我手动移动元框内容，将其与ACF集成，使用浏览器检查器操作DOM，但这很容易用jQuery完成。

使用ACF关系字段在WP管理员中悬停时显示页面的实时预览

1 个答案: