我是初学者,正在创建WordPress主题,我的代码是:
<div class="gallery">
<?php
$args = array(
'post_type' => 'portfolio',
'post_status' => 'publish',
'posts_per_page' => 6,
'order' => 'ASC',
);
$query = new WP_Query($args);
for ($i=1; $query->have_posts() ; $i++): $query->the_post();
?>
<div data-aos='zoom-in' class="bg-img gallery__item gallery__item--<?php echo $i;?> clearfix" style="background-image: url(<?php echo get_the_post_thumbnail_url(); ?>)">
<div class="p-2 text-block h-100">
<div class="w-75">
<h3 class="center text-black font-abel"><?php the_title()?></h3>
<p class="font-abel text-black">
<?php echo '<p class="font-abel text-white" style="overflow: auto">'.get_the_excerpt().'</p>';?>
</p>
<button class="button text-black">view more</button>
</div>
</div>
</div>
<?php
endfor;
?>
</div>
我将for()循环改为while()用于gallery__item gallery__item--这样它将变成gallery__item gallery__item--1,gallery__item gallery__item--2等。
我的样式表是:
.gallery {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(9, 5vw); }
.gallery__item {
height: 100%; }
.gallery__item--1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 10;
/** Alternative Syntax **/
/* grid-column: 1 / span 2; */
/* grid-row: 1 / span 2; */ }
.gallery__item--2 {
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 6;
/** Alternative Syntax **/
/* grid-column: 1 / span 2; */
/* grid-row: 1 / span 2; */ }
.gallery__item--3 {
grid-column-start: 6;
grid-column-end: 10;
grid-row-start: 1;
grid-row-end: 6;
/** Alternative Syntax **/
/* grid-column: 1 / span 2; */
/* grid-row: 1 / span 2; */ }
.gallery__item--4 {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 6;
grid-row-end: 10;
/** Alternative Syntax **/
/* grid-column: 1 / span 2; */
/* grid-row: 1 / span 2; */ }
.gallery__item--5 {
grid-column-start: 5;
grid-column-end: 7;
grid-row-start: 6;
grid-row-end: 10;
/** Alternative Syntax **/
/* grid-column: 1 / span 2; */
/* grid-row: 1 / span 2; */ }
.gallery__item--6 {
grid-column-start: 7;
grid-column-end: 10;
grid-row-start: 6;
grid-row-end: 10;
/** Alternative Syntax **/
/* grid-column: 1 / span 2; */
/* grid-row: 1 / span 2; */ }
.bg-img {
background-position: center;
background-repeat: no-repeat;
background-size: cover; }
.font-abel {
font-family: "Abel" !important; }
.text-black {
color: #17191e !important; }
.gallery__item:hover .text-block {
opacity: 1 !important; }
.text-block {
opacity: 0;
background-color: rgba(255, 218, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
text-transform: capitalize; }
.text-block h3 {
font-size: 22.5px; }
.text-block p {
font-size: 15px; }
.text-block .button {
border: 2px solid white;
padding: 6px 25px;
outline: none;
text-transform: capitalize;
border-radius: 0px; }
.text-block .button:hover {
background-color: #ffffff;
color: #181a1f; }
有什么想法吗? 预先感谢您回答我的问题!