Slide in Panel Wordpress Post

时间:2019-11-19 作者:Karelli

我正在尝试添加我在该类别中的帖子,以通过幻灯片面板打开,而不进入单个帖子。我如何才能做到这一点?

可以在下面查看演示滑入面板:

DEMO SLIDE IN PANEL

我在我的网站上进行了测试,但只有第一篇帖子出现在每个点击的帖子中。

我的代码:

<?php
$args = array(
    \'meta_key\'=> \'ecpt_toparticle\',
    \'showposts\' => 5,
    \'category__in\' => $cat
);
$sticky_query = new WP_Query( $args );
while ( $sticky_query->have_posts() ) : $sticky_query->the_post();
?>
            <div class="border"> 
            <a href="<?php the_permalink();?>" class="myimages js-cd-panel-trigger" data-panel="main">
            <?php the_post_thumbnail(\'300x300\');?>
            </a>

            <div class="col-10">
            <div class="title"><?php the_title() ?></div>
        </div>
    </div>

    <?php  endwhile; wp_reset_postdata(); ?>

    <div class="cd-panel cd-panel--from-right js-cd-panel-main">
        <header class="cd-panel__header">
        <h1><?php the_title() ?></h1>
        <a href="" class="cd-panel__close js-cd-close">Close</a>
        </header>
        <div class="cd-panel__container">
        <div class="cd-panel__content">
        <div class="myimages">
        <?php the_post_thumbnail(\'600x350\');?>
        </div>
        <p><?php the_content(); ?></p>

        </div> <!-- cd-panel__content -->
    </div> <!-- cd-panel__container -->
</div> <!-- cd-panel -->
您可以通过屏幕截图轻松理解:

enter image description hereenter image description here

1 个回复
SO网友:user3135691

查询失败的原因如下。您正在完成cd面板前的循环

<?php  endwhile; wp_reset_postdata(); ?>
这是正确的。然而,在那之后,你只是简单地使用

<?php the_title(); ?>, <?php the_content(); ?>
它只是一个模板标记,在您的情况下,输出您查询的最后一个类别的第一篇文章的标题。

解决方案:

您必须通过wp ajax调用加载帖子内容(单击accordeon选项卡),或者

打开cd面板前的另一个循环,获取所有帖子并用css隐藏/显示它们

第二个负载更重,但没有那么复杂。