web-dev-qa-db-ja.com

パネルにスライドWordpress投稿

カテゴリにある投稿を1つの投稿に移動せずにスライドパネルから開くように追加しようとしています。どうすればよいですか？

デモスライドインパネルは以下で見ることができます：

パネルのデモスライド

ウェブサイトでテストしましたが、クリックしたすべての投稿に最初の投稿しか表示されません。

私のコード：

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

phpfunctionsjavascripthtml
1
Karelli

クエリが失敗する理由は次のとおりです。あなたはあなたのCDパネルの前にループを終えています

<?php  endwhile; wp_reset_postdata(); ?>

どちらが正しい。ただし、その後は単に

<?php the_title(); ?>, <?php the_content(); ?>

これは単一のテンプレートタグであり、あなたの場合、照会した最後のカテゴリの最初の投稿のタイトルを出力します。

ソリューション：

  • Wp ajax呼び出し（そのアコーディオンタブをクリック）を介して投稿コンテンツをロードする必要がある、または

  • cDパネルの前に別のループを開き、すべての投稿を取得し、CSSでそれらを非表示/表示する

2番目は負荷が高くなりますが、それほど複雑ではありません。

2
user3135691