Как создать цикл, в котором цикл изменяет каждую запись в пользовательском типе записи?

ProgramBox

Как создать цикл, в котором цикл изменяет каждую запись в пользовательском типе записи?

Post author:admin
Запись опубликована:25 апреля, 2023
Post category:Вопросы по программированию

#wordpress #custom-post-type

#wordpress #пользовательский тип записи

Вопрос:

Как я могу создать тип цикла в WordPress, в котором изображение перемещается влево или вправо для каждой записи? Т.е. изображение первого поста будет левым, изображение второго поста — правым, изображение третьего поста — левым и так далее…

я прикрепляю изображение. Предоставьте некоторый код или примеры

Заранее спасибо

https://imgur.com/Z58QEjb

введите описание изображения здесь

 <?php
$loop = new WP_Query( array( 'post_type' => 'case_studies') );
$Inc = 1;

if ( $loop->have_posts() ) :
    while ( $loop->have_posts() ) : $loop->the_post(); ?>   

        <?php if($Inc==1){ ?>
        <div class="col-sm-3  nopadding">
            <?php the_post_thumbnail(); ?>
        </div>
        <div class="col-sm-3 ">
            <h2><?php echo get_the_title(); ?></h2>
        </div>
        <?php }else if($Inc==2){ ?>
        <div class="col-sm-3  nopadding">
            <?php the_post_thumbnail(); ?>
        </div>
        <div class="col-sm-3 ">
            <h2><?php echo get_the_title(); ?></h2>
        </div>


        <?php }else if($Inc==3){ ?>
        <div class="item">
            <div class="col-sm-6 nopadding">
                <?php the_post_thumbnail(); ?>
            </div>
            <div class="col-sm-6">
                <h2><?php echo get_the_title(); ?></h2>
            </div>
        </div>
        <?php }else if($Inc==4){ ?>
        <div class="item">
            <div class="col-sm-6 nopadding">
                <?php the_post_thumbnail(); ?>
            </div>
            <div class="col-sm-6">
                <h2><?php echo get_the_title(); ?></h2>
            </div>
        </div>
        <?php } ?>
    <?php 
        if($Inc==4){
            $Inc =1;
        }
        $Inc  ;
        endwhile;       
endif;
wp_reset_postdata();

     <?php
$loop = new WP_Query( array( 'post_type' => 'team') );
  if ( $loop->have_posts() ) :
  $Inc = 0; //start your counter
      while ( $loop->have_posts() ) : $loop->the_post();
    $person_image = get_field('person_image');
    $person_description = get_field('person_description');
    ?>
        <?php if($Inc % 2 == 0){ //if $inc can be created by multiplying 2.?>
            <div class="col-md-12">
              <div class="col-md-1">
                <div>
                  <img src="<?php bloginfo('template_url'); ?>/images/dot1.png" class="img-responsive dotimages">
                </div>
              </div> <!--.col-md-1 -->
              <div class="col-md-10 row">
                <div class="clientimagesarea">
                  <div class="col-md-6">
                    <div>
                      <img src="<?php echo $person_image; ?>" class="img-responsive center-block peopleimages">
                      <?php //the_post_thumbnail(); ?>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="clienttext clienttextmarleft">
                      <?php echo $person_description; ?>
                    </div>
                    <div class="col-md-12">
                      <div class="row ">
                        <div class="col-md-12 col-xs-12 col-sm-12 paddmargin0">
                          <div class="col-md-2 col-sm-2 col-xs-4">
                            <div><img src="<?php bloginfo('template_url'); ?>/images/email-icon2.png" class="img-responsive clientemailicon text-left"></div>
                          </div>
                          <div class="col-md-9 col-sm-9 col-xs-8">
                            <div class="emailid">abx@sitename.com</div>
                          </div>
                        </div>
                        <div class="col-md-12 col-xs-12 col-sm-12 paddmargin0">
                          <div class="col-md-2 col-sm-2 col-xs-4">
                            <div><img src="<?php bloginfo('template_url'); ?>/images/call-icon2.png" class="img-responsive clientemailicon2 "></div>
                          </div>
                          <div class="col-md-9 col-sm-9 col-xs-8">
                            <div class="emailid2"> 41 79 777 66 45</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            <?php //the_post_thumbnail(); ?>
            </div>
        <?php }else { //it cant?>
          <div class="row col-md-6 col-md-offset-3">
            <div class="deviderline">
            </div>
          </div>
          <div class="col-md-12">
            <div class="row col-md-10 col-md-offset-1">
              <div class="row clientimagesarea">
                <div class="col-md-6">
                  <div class="clienttext">
                    <p>
                      <?php echo $person_description; ?>
                    </p>
                  </div>
                  <div class="col-md-12">
                    <div class="row iconmarginleft">
                      <div class="col-md-12 col-xs-12 col-sm-12 paddmargin0">
                        <div class="col-md-2 col-sm-2 col-xs-4">
                          <div><img src="<?php bloginfo('template_url'); ?>/images/email-icon2.png" class="img-responsive clientemailicon text-left"></div>
                        </div>
                        <div class="col-md-9 col-sm-9 col-xs-8">
                          <div class="emailid">abx@sitename.com</div>
                        </div>
                      </div>
                      <div class="col-md-12 col-xs-12 col-sm-12 paddmargin0">
                        <div class="col-md-2 col-sm-2 col-xs-4">
                          <div><img src="<?php bloginfo('template_url'); ?>/images/call-icon2.png" class="img-responsive clientemailicon2 "></div>
                        </div>
                        <div class="col-md-9 col-sm-9 col-xs-8">
                          <div class="emailid2"> 91 1234567890</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div>
                    <img src="<?php echo $person_image; ?>" class="img-responsive center-block peopleimages clienttextmarleft">
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-1">
              <div>
                <img src="<?php bloginfo('template_url'); ?>/images/dot3.png" class="img-responsive dotimage3">
              </div>
            </div>
          </div>
        <?php } ?>
    <?php
        $Inc  ;
        endwhile;
endif;
wp_reset_postdata();
?>

1. Вы можете добиться этого с помощью css flex. Подумайте о добавлении кода, который вы пробовали

2. Вы также можете сделать это с помощью php. В принципе, добавьте $counter перед while loop и внутри цикла use if ($counter % 2 == 0 ){//Flip that shit} и увеличьте с $counter ;

3. Stender это мой код

4. Это мой HTML-код. — @Varsha Dhadge

5. Это мой HTML-код. — @Stender

Ответ №1:

Вы можете следовать приведенному ниже коду

 <div class="row">


<?php
$category = get_the_category();
$slug = $category[0]->slug;
$args = array(
  'post_type'  => 'post',
  'category_name'=>$slug,
  'posts_per_page'=> 1,

);
$query = new WP_Query( $args );
while ( $query->have_posts() ) : $query->the_post();?>


   <div class="container">
       <div class="img-box">
           <?php echo get_the_post_thumbnail(get_the_ID());?>
           </img>
       </div>
       <div class="content">
           <?php 
                 $content = get_the_content();
                 echo wp_trim_words( get_the_content(), 25, '' );
             ?>
       </div>
   </div>

<?php endwhile; ?>

</div>

 .container{
display: flex;
  flex-wrap: wrap;
  align-content: space-between;
 margin-bottom:40px;
}
.img-box{
  width:40%;
}
img{
 max-width:100%;
}
.content{
  width:60%
}
.container:nth-child(even){
  flex-direction: row-reverse;

}

 <div class="row">
	<div class="container">
		<div class="img-box">
			<img src="https://dummyimage.com/600x400/000/fff">
		</div>
		<div class="content">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
		</div>
	</div>
	<div class="container">
		<div class="img-box">
			<img src="https://dummyimage.com/600x400/000/fff">
		</div>
		<div class="content">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
		</div>
	</div>

Ответ №2:

Ваша логика имеет смысл, я это не тестировал, но это должно дополнять каждый второй элемент вашим кодом.

 <?php
$loop = new WP_Query( array( 'post_type' => 'case_studies') );


if ( $loop->have_posts() ) :
$Inc = 0; //start your counter
    while ( $loop->have_posts() ) : $loop->the_post(); ?>   

        <?php if($Inc % 2 == 0){ //if $inc can be created by multiplying 2.?>
        <div class="col-sm-3  nopadding">
            <?php the_post_thumbnail(); ?>
        </div>
        <div class="col-sm-3 ">
            <h2><?php echo get_the_title(); ?></h2>
        </div>
        <?php }else { //it cant?>
            <div class="col-sm-3 ">
                <?php echo get_the_title(); ?>
            </div>
            <div class="col-sm-3 nopadding">
                <h2><?php the_post_thumbnail(); ?></h2>
            </div>

    <?php }
    $Inc  ; //increment the counter
    endwhile;       
endif;
wp_reset_postdata();

Ответ №3:

Вы должны зарегистрировать свой тип записи, подобный :

 add_action( 'init', 'codex_book_init' );
/**
 * Register a book post type.
 *
 * @link http://codex.wordpress.org/Function_Reference/register_post_type
 */
function codex_book_init() {
    $labels = array(
        'name'               => _x( 'Books', 'post type general name', 'your-plugin-textdomain' ),
        'singular_name'      => _x( 'Book', 'post type singular name', 'your-plugin-textdomain' ),
        'menu_name'          => _x( 'Books', 'admin menu', 'your-plugin-textdomain' ),
        'name_admin_bar'     => _x( 'Book', 'add new on admin bar', 'your-plugin-textdomain' ),
        'add_new'            => _x( 'Add New', 'book', 'your-plugin-textdomain' ),
        'add_new_item'       => __( 'Add New Book', 'your-plugin-textdomain' ),
        'new_item'           => __( 'New Book', 'your-plugin-textdomain' ),
        'edit_item'          => __( 'Edit Book', 'your-plugin-textdomain' ),
        'view_item'          => __( 'View Book', 'your-plugin-textdomain' ),
        'all_items'          => __( 'All Books', 'your-plugin-textdomain' ),
        'search_items'       => __( 'Search Books', 'your-plugin-textdomain' ),
        'parent_item_colon'  => __( 'Parent Books:', 'your-plugin-textdomain' ),
        'not_found'          => __( 'No books found.', 'your-plugin-textdomain' ),
        'not_found_in_trash' => __( 'No books found in Trash.', 'your-plugin-textdomain' )
    );

    $args = array(
        'labels'             => $labels,
                'description'        => __( 'Description.', 'your-plugin-textdomain' ),
        'public'             => true,
        'publicly_queryable' => true,
        'show_ui'            => true,
        'show_in_menu'       => true,
        'query_var'          => true,
        'rewrite'            => array( 'slug' => 'book' ),
        'capability_type'    => 'post',
        'has_archive'        => true,
        'hierarchical'       => false,
        'menu_position'      => null,
        'supports'           => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' )
    );

    register_post_type( 'book', $args );
}

и после цикла :

 $args = array( 'post_type' => 'book', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
  the_title();
  echo '<div class="entry-content">';
  the_content() . the_thumbnails();
  echo '</div>';
endwhile;

затем вы можете создать несколько пользовательских полей
я позволяю вам работать над этим