【问题标题】:Custom wordpress loop自定义 wordpress 循环
【发布时间】:2017-04-10 09:47:28
【问题描述】:

我正在尝试在如下布局中以自定义帖子类型列出帖子。

下面这样的布局的html。

 <div class="col-md-4 col-sm-6">
 PROFILE - 1

 </div>
<div class="col-md-4 col-sm-6">


  </div> 
<div class="col-md-4 col-sm-6">
 PROFILE - 2

  </div>
<div class="col-md-4 col-sm-6">
 PROFILE - 3

  </div>
 <div class="col-md-4 col-sm-6">


  </div>

 <div class="col-md-4 col-sm-6">
  PROFILE - 4

   </div> 

正如您所见,在“PROFILE - 1”之后有一个 div 分隔符,然后在“PROFILE - 1 & PROFILE - 2”之后又有一个 div 分隔符。

基本上结构如下。

个人资料-1

VV

空白空间(基于 div col-md-4 col-sm-6 )

VV

个人资料 2

VV

Profile-3

VV

空白空间(基于 div col-md-4 col-sm-6 )

VV

Profile-4

我将此循环用作自定义结构,但我无法从 Profile-2 > Profile-3 > 空间点获取它。

寻求帮助来实现这个循环

到目前为止我已经尝试过了

  <?php 
 $args=array(
'post_type' => 'ourteam',
'posts_per_page' => -1 
 );

   //Set up a counter
   $counter = 0;

  //Preparing the Loop
  $query = new WP_Query( $args );


  //In while loop counter increments by one $counter++
  if( $query->have_posts() ) : while( $query->have_posts() ) : $query-
  >the_post(); $counter++;

  //We are in loop so we can check if counter is odd or even
  if( $counter % 2 == 0 ) : //It's even
  ?>


   <div class="col-md-4 col-sm-6">

   </div>

    <div class="col-md-4 col-sm-6">

    <div class="cp-attorneys-style-2">

      <div class="frame"> <a href="<?php the_permalink(); ?>"><?php 
     the_post_thumbnail(''); ?></a>

        <div class="caption">

          <div class="holder">

            <ul>

             <li><a href="<?php the_field('mem_twitter'); ?>"><i class="fa fa-twitter"></i></a></li>

              <li><a href="<?php the_field('mem_facebook'); ?>"><i class="fa fa-facebook"></i></a></li>

              <li><a href="<?php the_field('mem_linkedin'); ?>"><i class="fa fa-linkedin"></i></a></li>

            </ul>

            <p> </p>

           <a href="<?php the_permalink(); ?>" class="btn-style-1">Read Profile</a> </div>

        </div>

      </div>

      <div class="cp-text-box">

        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

        <em><?php the_field('mem_titles'); ?></em> </div>

    </div>

  </div>      


 <div class="col-md-4 col-sm-6">

 </div>


<?php
else: //It's odd
?>



  <div class="col-md-4 col-sm-6">

    <div class="cp-attorneys-style-2">

      <div class="frame"> <a href="<?php the_permalink(); ?>"><?php 
       the_post_thumbnail(''); ?></a>

        <div class="caption">

          <div class="holder">

            <ul>

             <li><a href="<?php the_field('mem_twitter'); ?>"><i class="fa fa-twitter"></i></a></li>

              <li><a href="<?php the_field('mem_facebook'); ?>"><i class="fa fa-facebook"></i></a></li>

              <li><a href="<?php the_field('mem_linkedin'); ?>"><i class="fa fa-linkedin"></i></a></li>

            </ul>

            <p> </p>

           <a href="<?php the_permalink(); ?>" class="btn-style-1">Read Profile</a> </div>

        </div>

      </div>

      <div class="cp-text-box">

        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

        <em><?php the_field('mem_titles'); ?></em> </div>

    </div>

  </div>      



   <?php  


   endif;

    endwhile; wp_reset_postdata(); endif;


     ?>

【问题讨论】:

  • 到目前为止你尝试过什么?
  • @hardik solanki 我已经更新了我的问题,请参阅
  • 默认情况下,bootstrap 使用 12 列结构。如果您使用col-md-4 col-sm-6,那么它将在桌面显示 3 个 div,在 Ipad 中显示 2 个 div。所以在你的情况下,它会像你的截图一样显示。
  • @hardik solanki 这是一个 html 网站,我正在转换为 wordpress,因此 html 布局已经在这里。但问题是我无法将此布局放入 wordpress 循环中。我想要的是实现我在问题中提到的循环
  • 那么您需要使用@VineetKumarSingh 的答案。他已经将您的 div 放入了自定义循环结构中。

标签: php wordpress custom-post-type


【解决方案1】:

列出自定义帖子并不复杂。您所要做的就是使用 WP_Query 函数查询自定义帖子,然后以 html 格式列出。这是您可以使用的代码来实现您想要的。

    <?php
    global $the_query;

    $args = array (
          'post_type'=>'team',
          'posts_per_page'=>-1,
    );
    // You can change your post type and for more
    // go to this link https://codex.wordpress.org/Class_Reference/WP_Query
    $the_query = new WP_Query($args); ?>
    <div class="container">
      <div class="row">
    <?php
     if ( $the_query->have_posts() ) {

        while ( $the_query->have_posts() ){
          $the_query->the_post(); ?>

          <div class="col-md-4 col-sm-6">
         <?php echo get_the_title(get_the_ID()); ?>

     </div>
    <?php
         }//end while


     } //End if
?>
</div><!-- End of row -->
</div><!-- End of container -->

注意:- 在循环内,您可以打印自定义帖子的所有值

【讨论】:

  • 谢谢,但我想要的是一个具有我在问题中提到的结构的自定义循环
  • 内容
    会在循环中重复。一旦循环打印了所有信息。您需要使用 css 对其美化进行管理。
猜你喜欢
  • 2017-08-31
  • 2016-04-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-03-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多