是否有可能调整的高级自定义字段的在Word preSS关系功能，以便而不只是显示缩略图它显示悬停活页preVIEW？我相信，这将需要一些自定义的AJAX。

Is it possible to adapt the Advanced Custom Fields relationship functionality in WordPress so that instead of just displaying a thumbnail it shows the live page preview on hover? I believe this would require some custom AJAX.

下面是有问题的高级自定义字段的领域... https://m.xsw88.com/allimgs/daicuo/20230910/1324.png

Here is the Advanced Custom Fields field in question... https://m.xsw88.com/allimgs/daicuo/20230910/1324.png

如果没有上面是有可能增加一个preVIEW页链接的地方，让您可以preVIEW在新标签或窗口的页面将其链接到页面？

If no to the above is it possible to add a preview page link somewhere so that you can preview the page in a new tab or window before linking it to the page?

如果这不能用做的高级自定义字段的能不能在所有做的怎么样？

If this can't be done with Advanced Custom Fields can it be done at all and how?

这样做的原因是功能，一个用户将需要创建由自定义文章类型的页的能力。帖子说，他们可以选择表格的数量会很大所以preVIEW将需要为选择将基于视觉方面，而非文字。

The reason for this functionality is that a the user will require the ability to create a page made up of custom post types. the number of posts that they can choose form will be large so a preview will be required as the choice will be based on visual aspect rather than text.

目前高级自定义字段使用功能的图像作为缩略图，所以我不知道是否可以生成现场preVIEW的形象和作为特色的形象？

Currently Advance Custom Fields uses the featured image as a thumbnail image so i'm wondering if a live preview image can be generated and used as the featured image?

推荐答案

创建一个meta中包含一个iframe 。然后添加自定义脚本的页面，如这个插件，并听取对ACF的关系对象的修改。该对象包含帖子ID和将被用于改变iframe的URL源， http://example.com/?post=OBJECT-ID 。

Create a meta box that contains an iframe. Then add a custom script to the page, like this plugin, and listen to modifications on ACF's Relationship object. The object contains the post ID and that will be used to change the URL source of the iframe, http://example.com/?post=OBJECT-ID.

我在控制台测试和工程确定：

I tested in the console and works ok:

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

响应时间可能不理想，加载一个网页需要更长的时间比移动鼠标...

The response time may not be ideal, loading a page takes longer than moving a mouse...

也许更好的结果可以使用Ajax，并从数据库中提取仅仅是post对象，并与填写您的自定义元框来实现一个＆LT; D​​IV＆GT; 含 POST_TITLE + post_content 。

Maybe a better result can be achieved using Ajax and pulling just the post object from the database, and with that fill your custom meta box with a <div> containing post_title + post_content.

[后续] 我继续和复制粘贴的概念与阿贾克斯的证明，一个iframe太重了。

[follow-up] I went ahead and copy pasted a proof of concept with Ajax, an iframe is too heavy.

<?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;

这是结果。但请注意，我搬到了meta框内容的手动的，它与ACF集成，操作与浏览器检查的DOM，但是这很容易与jQuery做的。

This is the result. But note that I moved the meta box content by hand, integrating it with ACF, manipulating the DOM with the browser inspector, but that's easily done with jQuery.