0

我在 wordpress 中有一个循环，会吐出两个类。一张是课堂照片，一张是视频。添加新照片或视频后，它只会添加到最后一个 div 下方。

Example:   
Photos  
Photos  
Video  
Photos  
Video

所以我需要做的是，我需要左边的所有照片和右边的所有视频。我已经尝试过使用Float:leftand Float:rightand clear:left;andclear:right;它并没有按我的计划工作，因为 div 设置为 50%。如果没有清除，它们会依次排列照片、照片，然后是新行、视频、照片。

我在想有一些我可以使用的 PHP，说如果照片在这一列，如果视频在另一列。

我尝试了以下方法：

 .photos {
float: left;
width: 50%;
display: block;
clear: left;
 }
 .video {
float:right;
width:50%;
display: block;
clear:none;

 }

并且：

.photos {
float: left;
width: 50%;
display: block;
clear: none;
 }
 .video {
float:right;
width:50%;
display: block;
clear:none;

 }

我只希望视频从上到下从右到左，照片从左到右。我无法将两者分开在两个不同的 DIV 中，因为它们处于循环中。

这是数组：

<?php while (have_posts()) : the_post(); ?>

 <?php do_action( 'bp_before_blog_post' ); ?>

  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="thumbl">
  <?php 
 if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
  the_post_thumbnail('thumbnail');
  } ?>
  </div>
  <div class="date"><?php printf( __( '%1$s', 'buddypress' ), get_the_date(), get_the_category_list( ', ' ) ); ?></div>
      <div class="post-content">
     <h2 class="posttitle"><a href="../../plugins/buddypress/bp-themes/bp-default/<?php the_permalink(); ?>" rel="bookmark" title="<?php _e( 'Permanent Link to', 'buddypress' ); ?> <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

  <div class="entry">
    <?php the_excerpt( __( 'Read the rest of this entry &rarr;', 'buddypress' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link"><p>' . __( 'Pages: ', 'buddypress' ), 'after' => '</p></div>', 'next_or_number' => 'number' ) ); ?>
 </div>
    </div>
  </div>
  <?php do_action( 'bp_after_blog_post' ); ?>
<?php endwhile; ?>

我得到的代码仅作为示例：

<div id="post-175" class="post-175 photos type-photos status-publish hentry category-media"></div>
<div id="post-176" class="post-175 photos type-photos status-publish hentry category-media"></div>
<div id="post-177" class="post-175 video type-photos status-publish hentry category-media"></div>
<div id="post-178" class="post-175 photos type-photos status-publish hentry category-media"></div>
<div id="post-179" class="post-175 video type-photos status-publish hentry category-media"></div>
<div id="post-180" class="post-175 photos type-photos status-publish hentry category-media"></div>

注意每个照片和视频的第二类

为了回答我自己的问题，我找到了解决方案！！！

将此代码放在循环上方

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

把它放在 div 的下面，就在循环之外

<div class="photodiv"><div></div></div>
 <script>$("div.photos").wrapAll($(".photodiv"));</script>

这用 .photos 类围绕任何东西包裹了一个新的 div，我可以浮动到左边！

4

2 回答 2

0

我要做的事情是以下 1. 检查帖子类别 2. 如果发布类别相同的视频将它们放入视频数组中，否则将它们放入照片数组中 3. 现在我必须排列照片和视频，我可以显示在任何我想看的地方

        <?php
        $photos = array();
        $videos = array();
        $post_class = array();

        ?>


        <?php while (have_posts()) : the_post(); ?>

         <?php do_action( 'bp_before_blog_post' ); ?>


            <?php 
            $post_class = get_post_class(); 
            if ( has_post_thumbnail() ) {
                $post_img = get_the_post_thumbnail($post->ID, 'thumbnail'); 
            }

            ?>


          <?php 
          if (strpos($post_class[0], 'photos')) {
                $photos[] = "<div id='{$post->ID}' class='{$post_class}>'
            <div class='thumbl'>
            {$post_img} 
            </div>
            <div class='date'>
            ". get_the_date() . "
            </div>
            <div class='post-content'>
             <h2 class='posttitle'>
                    <a href='../../plugins/buddypress/bp-themes/bp-default/". get_permalink() . "' rel='bookmark' title='" . the_title_attribute( 'echo=0' ) ."'>
                    " . get_the_title() . "
                    </a>
             </h2> 
             <div class='entry'>
            " . get_the_excerpt() . " 
            " . get_page_link($post->ID) . "
             </div>
            </div>
            </div>
          ";
          }
          if (strpos($post_class[0], 'video')){
                    $videos[] = "<div id='{$post->ID}' class='{$post_class}>'
            <div class='thumbl'>
            {$post_img} 
            </div>
            <div class='date'>
            ". get_the_date() . "
            </div>
            <div class='post-content'>
             <h2 class='posttitle'>
                    <a href='../../plugins/buddypress/bp-themes/bp-default/". get_permalink() . "' rel='bookmark' title='" . the_title_attribute( 'echo=0' ) ."'>
                    " . get_the_title() . "
                    </a>
             </h2> 
             <div class='entry'>
            " . get_the_excerpt() . " 
            " . get_page_link($post->ID) . "
             </div>
            </div>
            </div>
          ";
          }

          ?>


          <?php do_action( 'bp_after_blog_post' ); ?>
        <?php endwhile; ?>
        <?php /** now you hava separated the  videos and images so you can put them in different divs  outside the loop**/ ?>

        <div id="videos" style="width:50%; float:left;">
            <?php foreach ($photos as $photo) {
                echo $photo;
            } ?>
        </div>
        <div id="photos" style="width:50%; float:right;">
            <?php foreach ($videos as $video) {
                echo $video;
            } ?>
        </div>

http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail

http://codex.wordpress.org/Function_Reference/get_post_class

http://codex.wordpress.org/Function_Reference/get_the_excerpt

于 2013-05-18T18:42:23.807 回答
0

如果我理解正确，左边的照片和右边的视频，这可能是一个解决方案：

<style>
.main {width:800px;}
.main > div >span {clear:both;float:left;}
.video {width:400px;float:right;"}
.photo {width:400px;float:left;"}
</style>

<div class="main">
    <div class="video">
        <span>Video1</span>
        <span>Video2</span>
    </div>
    <div class="photo">
        <span>Photos1</span>
        <span>Photos2</span>
        <span>Photos3</span>
    </div>
</div>
于 2013-05-18T17:36:48.473 回答