链接到新页面并打开特定模式

Question

我正在尝试从我的主页链接到一个页面，在该页面上，我可以通过单击显示配方的用户打开的Foundation Reveal模式。

我想在主页上显示一些食谱，并且当用户单击主页上的某个食谱时，我希望它打开食谱页面，并在与该食谱一起的食谱页面上打开特定模式。

这是我在首页上的精选食谱代码：

<div class="content grid-x">
    <?php 
        $args = array(
            'post_type' => 'recipes',
            'orderby'   => 'rand',
            'posts_per_page' => 3
        );
        $query = new WP_Query( $args );
        $counter = 0;
        if( $query->have_posts() ) : while( $query->have_posts() ) : $query->the_post(); 
            global $post;
            $slug = $post->post_name; 
    ?>

    <a class="cell small-12 large-4 recipeCell" data-open="recipe-<?php echo $slug; ?>">
        <div class="cell text-left" >
            <img src="<?php the_field('image'); ?>"/>
            <div class="recipeTitle" data-sr><div class="doubleUnderline"><h4><?php the_title(); ?></h4></div></div>
        </div>
    </a>
    <?php $counter++; endwhile; endif; ?>
</div>

这是模态的代码（我正在使用Foundation Reveal模态）：

<div class="reveal recipeModal" id="recipe-<?php echo $slug; ?>"  style="background:url(<?php the_field('image'); ?>) center center;background-size: cover;" data-reveal>
    <div class="grid-container">
        <div class="grid-x recipeDetails">
            <img src="<?php the_field('image'); ?>" class="printableImage" />
                <div class="cell small-12 doubleUnderline"><h4><?php the_title(); ?></h4></div>
                    <h6 class="cell small-9 time">Start to Finish: <?php the_field('preparation_time'); ?></h6>
                    <h6 class="cell small-3 text-right servings">Servings: <?php the_field('servings'); ?></h6>
                    <div class="recipeInstructions">
                        <p><?php the_content(); ?></p>
                    </div>
                    <a href="#"><button class="button large printButton darkButton" style="margin:0;" onclick="window.print();return false;">Print Recipe</button></a>
                </div>   
        </div>   

        <button class="close-button" data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
</div>

如您所见，我正在使用“ recipe-” +后缀为每个配方卡创建ID，以便可以将其与需要打开的模式相关联。 有没有一种方法可以将数据发送到配方页面并在此处而不是在主页上打开该特定模式？

Answer 1

在首页上，确保您的配方链接在URL中包含配方ID作为参数。 现在，您的配方链接缺少“ href”； 您是否要使用AJAX或其他常规页面加载页面？ 我相信数据属性仅在单个页面实例上有用。

最终，您希望请求URL类似于以下内容： http://www.mywebsite.com/recipes/?recipe=34512 : http://www.mywebsite.com/recipes/?recipe=34512

然后在您的食谱页面上，在页面加载后运行Javascript，这将检查URL参数，并且请求URL中是否存在特定食谱，然后相应地打开模式，否则仅按原样显示食谱页面。 理想情况下，您有一个用于放置JS的配方页面的自定义模板。

$(document).ready(function(){
    var url_string = window.location.href
    var url = new URL(url_string);
    var recipeToLoad = url.searchParams.get("recipe");
    if(recipeToLoad) {
         jQuery('#recipeToLoad').foundation('reveal', 'open')});
    }
}