get_the_content()和get_the_excerpt()没有遵循附加的样式

时间:2019-12-06 15:57:46

标签: css wordpress wordpress-theming css-grid

我是初学者,正在创建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; }

html中的输出为: enter image description here 在wordpress中: enter image description here

有什么想法吗? 预先感谢您回答我的问题!

0 个答案:

没有答案