我正在尝试使用FancyBox打开一个lightbox样式的弹出窗口searchform.php, 当用户单击搜索图标时。

The setup:

英寸header.php 我有一个链接元素，它将只显示searchicon

英寸script.js 我将点击搜索图标绑定到fancybox，并打开模式/灯箱iframe 内容为searchform.php;

The problem: 这个iframe 未加载WordPress环境，因此无法正常工作。如何使用fancybox并仍然可以访问WP功能？

下一步将以相同的方式显示搜索结果iframe 使用AJAX。

The code:

// header.php
<a id="search-label" data-fancybox-type="iframe" href="<?php echo get_template_directory_uri(); ?>/searchform.php"></a>

// searchform.php
<div class="search-container">
    <p>This is a test</p>
    <form action="<?php echo home_url( \'/\' ); ?>" method="get">
        <fieldset>
            <input type="text" class="notv" id="search" name="s" value="<?php the_search_query(); ?>" />
        </fieldset>
    </form>
</div>  

// script.js
jQuery(document).ready(function($) { 
        $("#search-label").click(function () {
            $(\'.search-container\').toggle();
            $(\'#search-label\').fancybox({
                maxWidth    : 800,
                maxHeight   : 600,
                fitToView   : false,
                width       : \'70%\',
                height      : \'70%\',
                autoSize    : false,
                closeClick  : false,
                openEffect  : \'none\',
                closeEffect : \'none\'
            })
        })
    }); 

<?php
$url = add_query_arg( array(\'action\'=>\'show_search_form\'), admin_url(\'admin-ajax.php\') );
?>
<a id="search-label" href="<?php echo $url; ?>"></a>

add_action( \'wp_ajax_show_search_form\', \'mytheme_show_search_form\' );
add_action( \'wp_ajax_nopriv_show_search_form\', \'mytheme_show_search_form\' );

function mytheme_show_search_form() {
   get_search_form();
   exit();
}