如何通过点击侧边栏上的每个标题在定制的css弹出窗口上显示帖子内容?

时间:2020-04-24 作者:Ashur

我想根据侧栏上另一个名为“update”的post\\u类型的默认post\\u类型concat中的post\\u标记和post\\u类别显示帖子标题。最后,当用户单击每个标题时,会打开一个弹出窗口,其中显示当前标题和单击的帖子内容。到目前为止,在侧边栏上单击每个标题可以打开弹出窗口,但我无法以显示相关标题和内容的方式管理循环和for循环,而是只显示第一个标题的内容。我知道我的代码有很多额外的数组和循环。我知道它可能只需要在弹出窗口或循环或forloop的位置上做一个小的更改,但我对wordpress是新手,它对我来说非常复杂。

下面是整个代码。请看一看。我被卡住了。

提前非常感谢您。

非常感谢您的帮助。

代码:

    <section class="section-page">

      <!-- loop starts here... -->
      <?php 
            while(have_posts()) { 
                the_post();

                pageBanner();

            ?>



        <div class="second-row">
            <div class="Col-2-of-3">
                <div class="main-content">
                    <div class="time"><?php  the_time(\'F d, Y\'); ?> </div>
                    <?php the_content(); ?></div>
            </div>
            <div class="Col-1-of-3">
                <div class="card">
                    <div class="card--front">
                        <div class="card--picture">

                        </div>
                        <div class="card--heading">
                            <?php
                              $post_id = get_the_ID();
                            if($post_id == 35) { ?>
                            <h4 class="heading-tertiary u-margin-bottom-small u-center-text"><a>Search by first letter</a></h4>
                             <table class="card-table">
                                 <tr>
                                     <td><a href="#a">A</a></td>
                                     <td><a href="#b">B</a></td>
                                     <td><a href="#c">C</a></td>
                                     <td><a href="#d">D</a></td>
                                     <td><a href="#e">E</a></td>
                                     <td><a href="#f">F</a></td>
                                     <td><a href="#g">G</a></td>
                                 </tr>
                                 <tr>
                                     <td><a href="#h">H</a></td>
                                     <td><a href="#i">I</a></td>
                                     <td><a href="#j">J</a></td>
                                     <td><a href="#k">K</a></td>
                                     <td><a href="#l">L</a></td>
                                     <td><a href="#m">M</a></td>
                                     <td><a href="#n">N</a></td>
                                 </tr>
                                <tr>
                                     <td><a href="#o">O</a></td>
                                     <td><a href="#p">P</a></td>
                                     <td><a href="#q">Q</a></td>
                                     <td><a href="#r">R</a></td>
                                     <td><a href="#s">S</a></td>
                                     <td><a href="#t">T</a></td>
                                     <td><a href="#u">U</a></td>
                                 </tr>
                                 <tr>
                                     <td><a href="#v">V</a></td>
                                     <td><a href="#w">W</a></td>
                                     <td><a href="#x">X</a></td>
                                     <td><a href="#y">Y</a></td>
                                     <td><a href="#z">Z</a></td>
                                 </tr>
                            </table> 
                             <?php } else {



                                   $post_cats = new WP_Query(array(
                                       \'post_type\' => \'post\',
                                       \'p\' => get_the_ID()
                                   ));


                                 $myArray = array();
                                 $myArray2 = array();
                                 $hero = array();
                                $hero2 = array();
                                    $i = 0;
                                while($post_cats->have_posts()){
                                    $post_cats->the_post(); 

                                        for(;$i<=count(get_the_category()); $i++ ) {

                                            $all_cats = get_the_category();
                                            $all_Tags = get_the_tags();

                                            ?>
                                          <h4 class="heading-tertiary u-margin-bottom-small u-center-text">  <?php
                                            $hero2 = $all_Tags[0]->name;
                                            if($hero = $all_cats[$i]->cat_name == \'Topic\' OR $hero = $all_cats[$i]->cat_name == \'Project\' OR $hero = $all_cats[$i]->cat_name == \'Uncategorized\') {
                                                echo \'\';
                                            } else {
                                            echo $hero = $all_cats[$i]->cat_name;

                                            }

                                              ?>
                                             </h4> 
                                        <?php    array_push($myArray, $hero);
                                                $hero2 = $all_Tags[0]->name;
                                            $post_tags = new WP_Query(array(
                                                \'post_type\' => \'update\',
                                                \'tag\' => $hero2.\'-\'.$myArray[$i]
                                            ));


                                        while($post_tags->have_posts()){
                                            $post_tags->the_post();

                                            ?>
                                         <ul>
                                             <li class="sidebar-lists"><a class="sidebar-links" href="#popup"><?php the_title();

                                                 ?></a></li>

                                         </ul>



                                         <div class="popup" id="popup">
        <div class="popup__content">
            <div class="popup__left">
                <img src="<?php echo get_theme_file_uri(\'/img/nat-3-large.jpg\'); ?>" alt="First photo" class="popup__img">
                <img src="<?php echo get_theme_file_uri(\'/img/nat-2-large.jpg\'); ?>" alt="First photo" class="popup__img">
            </div>
            <div class="popup__right">
               <a href="#section-page" class="popup__close">&times;</a>
                <h3 class="heading-tertiary u-margin-bottom-small u-center-text"><?php the_title(); ?></h3>
                    <p class="popup__text">
                    <?php the_content();

                        ?>
                </p>
            </div>
        </div>
    </div>





                                         <?php } wp_reset_postdata();   

                                }

                            }  wp_reset_postdata();

                        }

                              ?>

                            </div>
                          <div class="card--bottom"></div>  
                    </div> 
                </div>
            </div>
        </div>

        <!-- main loop ends here... -->
        <?php } ?>

    </section>



   <?php get_footer(); ?>

1 个回复
SO网友:Ashur

哦感谢上帝。我终于可以自己修好了。

下面是工作代码:我被困时压力很大。我分享它是为了帮助任何一个喜欢有一个没有任何插件的全功能自定义弹出窗口的人。下面是代码。如果你有兴趣,请向我咨询css。

享受

代码:

    <section class="section-page">

      <!-- loop starts here... -->
      <?php 
            while(have_posts()) { 
                the_post();

                pageBanner();

            ?>



        <div class="second-row">
            <div class="Col-2-of-3">
                <div class="main-content">
                    <div class="time"><?php  the_time(\'F d, Y\'); ?> </div>
                    <?php the_content(); ?></div>
            </div>
            <div class="Col-1-of-3">
                <div class="card">
                    <div class="card--front">
                        <div class="card--picture">

                        </div>
                        <div class="card--heading">
                            <?php
                              $post_id = get_the_ID();
                            if($post_id == 35) { ?>
                            <h4 class="heading-tertiary u-margin-bottom-small u-center-text"><a>Search by first letter</a></h4>
                             <table class="card-table">
                                 <tr>
                                     <td><a href="#a">A</a></td>
                                     <td><a href="#b">B</a></td>
                                     <td><a href="#c">C</a></td>
                                     <td><a href="#d">D</a></td>
                                     <td><a href="#e">E</a></td>
                                     <td><a href="#f">F</a></td>
                                     <td><a href="#g">G</a></td>
                                 </tr>
                                 <tr>
                                     <td><a href="#h">H</a></td>
                                     <td><a href="#i">I</a></td>
                                     <td><a href="#j">J</a></td>
                                     <td><a href="#k">K</a></td>
                                     <td><a href="#l">L</a></td>
                                     <td><a href="#m">M</a></td>
                                     <td><a href="#n">N</a></td>
                                 </tr>
                                <tr>
                                     <td><a href="#o">O</a></td>
                                     <td><a href="#p">P</a></td>
                                     <td><a href="#q">Q</a></td>
                                     <td><a href="#r">R</a></td>
                                     <td><a href="#s">S</a></td>
                                     <td><a href="#t">T</a></td>
                                     <td><a href="#u">U</a></td>
                                 </tr>
                                 <tr>
                                     <td><a href="#v">V</a></td>
                                     <td><a href="#w">W</a></td>
                                     <td><a href="#x">X</a></td>
                                     <td><a href="#y">Y</a></td>
                                     <td><a href="#z">Z</a></td>
                                 </tr>
                            </table> 
                             <?php } else {



                                   $post_cats = new WP_Query(array(
                                       \'post_type\' => \'post\',
                                       \'p\' => get_the_ID()
                                   ));


                                 $myArray = array();
                                 $myArray2 = array();
                                 $myArray3 = array();
                                 $hero = array();
                                $hero2 = array();
                                    $i = 0;
                                while($post_cats->have_posts()){
                                    $post_cats->the_post(); 

                                        for(;$i<=count(get_the_category()); $i++ ) {

                                            $all_cats = get_the_category();
                                            $all_Tags = get_the_tags();

                                            ?>
                                          <h4 class="heading-tertiary u-margin-bottom-small u-center-text">  <?php
                                            $hero2 = $all_Tags[0]->name;
                                            if($hero = $all_cats[$i]->cat_name == \'Topic\' OR $hero = $all_cats[$i]->cat_name == \'Project\' OR $hero = $all_cats[$i]->cat_name == \'Uncategorized\') {
                                                echo \'\';
                                            } else {
                                            echo $hero = $all_cats[$i]->cat_name;

                                            }
                                              ?>
                                             </h4> 



                                        <?php    
                                            $hero3 = $all_cats[$i]->slug;
                                            array_push($myArray, $hero3);

                                            $post_tags = new WP_Query(array(
                                                \'post_type\' => \'update\',
                                                \'tag\' => $hero2.\'-\'.$myArray[$i]
                                            ));
                                        while($post_tags->have_posts()){
                                            $post_tags->the_post();

                                            ?>
                                         <ul>
                                             <li class="sidebar-lists"><a class="sidebar-links" href="#<?php the_title(); ?>" ><?php 
                                                 the_title();
                                                 ?></a></li>
                                         </ul>
                           <?php              
                               for($d=0; $d<=2; $d++) { ?>    
    <div class="popup" id="<?php the_title(); ?>">
        <div class="popup__content">


            <!--<div class="popup__left">
                <img src="<?php// echo get_theme_file_uri(\'/img/nat-3-large.jpg\'); ?>" alt="First photo" class="popup__img">
                <img src="<?php// echo get_theme_file_uri(\'/img/nat-2-large.jpg\'); ?>" alt="First photo" class="popup__img">
            </div>-->



            <div class="popup__right">
               <a href="#section-page"  class="popup__close">&times;</a>
                <h3 class="heading-tertiary-3 u-margin-bottom-small u-center-text">

                   <?php 
                        the_title();
                    ?>

                    </h3>
                    <div class="popup__text" style="font-size: 1.7rem">
                    <?php
                    the_content();
                     ?>
                </div>
            </div>
        </div>
    </div>


                                       <?php } } wp_reset_postdata();   





                                }  // for loop ends here

                            }  wp_reset_postdata();

                        }

                              ?>

                            </div>
                          <div class="card--bottom"></div>  
                    </div> 
                </div>
            </div>
        </div>

        <!-- main loop ends here... -->
        <?php } ?>

    </section>



   <?php get_footer(); ?>