Вставить файл ACF в псевдоэлемент CSS - PullRequest
Новая
       54

Вставить файл ACF в псевдоэлемент CSS

0 голосов
/ 26 марта 2020

У меня есть этот раздел на моем веб-сайте:

enter image description here

Это страница находится на моей домашней странице, где перетаскиваются элементы пользовательского типа записи, называемые продуктами.

Каждый продукт имеет свой собственный цвет продукта, я позволил пользователю выбрать его из Расширенного палитры цветов настраиваемого поля.

Я создал стрелки, используя CSS: до и : after (один для линии и один для наконечника стрелки), чтобы я мог их покрасить, используя цвет ACF продукта.

Это означало бы, что мне придется применить цвет внутри строки внутри шаблона. Но так как я использовал псевдо-классы, я не думаю, что смогу стилизовать их встроенными.

Чтобы обойти это, я добавил блок стилей внутри моего l oop ... Это работает, но это только принимая желтый цвет, как я полагаю, это первый цвет, который он находит ...

Есть ли способ обойти это? Я не уверен, что я делаю это слишком сложным ...

Вот отдельный CSS из CSS документа: 

.products-item-inner .arrow-right:after {
  content: "";
  border: solid;
/*  border-color: <?php the_field('product_colour'); ?>; */
  border-width: 0 2px 2px 0;
  display: inline-block;
  vertical-align: middle;
  padding: 5px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-left:-12px;
}

.products-item-inner .arrow-right:before {
  width: 30px;
  height: 2px;
/*  background-color: <?php the_field('product_colour'); ?>;*/
  content: "";
  display: inline-block;
  vertical-align: middle;
}

Вот шаблон l oop с добавленным CSS <style> встроенным: 

<div class="container">
<div class="row">

  <?php
      $args = array( 
        'post_type' => 'products',
        'posts_per_page' => 9999,
        'orderby' => 'none'
      );
      $the_query = new WP_Query( $args );
  ?>

  <?php if ( $the_query->have_posts()  ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>   

    <!-- <a href="<?php the_permalink(); ?>"> -->


    <div class="col-lg-4 products-item-outer">
    <div class="col-12 products-item-inner">

      <style type="text/css">
        .products-item-inner .arrow-right:after { border-color: <?php the_field('product_colour'); ?>; }
        .products-item-inner .arrow-right:before { background-color: <?php the_field('product_colour'); ?>; }
      </style>

      <div class="logo">
        <?php 
        $image = get_field('logo');
        if( !empty( $image ) ): ?>
          <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
        <?php endif; ?>          
      </div>    

      <div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
      <div class="read-more-link"><a href="<?php the_permalink(); ?>">Read More</a><span class="arrow-right"></span></div>

    </div>
    </div>
    <!-- </a> -->

  <?php endwhile; wp_reset_postdata(); endif; ?>

</div>
</div>

Спасибо за внимание:)

1 Ответ

1 голос
/ 26 марта 2020

Более старый метод поддержки браузера

Для максимальной поддержки браузера вы можете использовать атрибут style, чтобы назначить цвет для вашего элемента .arrow-right, и можете использовать currentColor в его псевдоэлементах: 

  <div class="container">
    <div class="row">

      <?php
          $args = array( 
            'post_type' => 'products',
            'posts_per_page' => 9999,
            'orderby' => 'none'
          );
          $the_query = new WP_Query( $args );
      ?>

      <?php if ( $the_query->have_posts()  ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>   

        <!-- <a href="<?php the_permalink(); ?>"> -->


        <div class="col-lg-4 products-item-outer">
          <div class="col-12 products-item-inner">
            <div class="logo">
              <?php 
              $image = get_field('logo');
              if( !empty( $image ) ): ?>
                <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
              <?php endif; ?>          
            </div>    

            <div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
            <div class="read-more-link"><a href="<?php the_permalink(); ?>">Read More</a><span class="arrow-right" style="color: <?php the_field('product_colour'); ?>;"></span></div>

          </div>
          </div>
          <!-- </a> -->

        <?php endwhile; wp_reset_postdata(); endif; ?>

      </div>
    </div>


    .products-item-inner .arrow-right:after {
      content: "";
      border: solid;
      border-color: currentColor;
      border-width: 0 2px 2px 0;
      display: inline-block;
      vertical-align: middle;
      padding: 5px;
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      margin-left:-12px;
    }

    .products-item-inner .arrow-right:before {
      width: 30px;
      height: 2px;
      background-color: currentColor;
      content: "";
      display: inline-block;
      vertical-align: middle;
    }

CSS Метод пользовательского свойства

Вы также можете использовать пользовательское свойство CSS, если вам нужен цвет более чем в одном месте, где вышеописанный метод выиграл не работает (если вы не повторите определение цвета в нескольких местах).

Я добавил его к вашему элементу .products-item-outer как атрибут style. Это будет каскадно внедряться в ваши .arrow-right псевдоэлементы. Я также добавил запасной цвет rebeccapurple в этом примере, если значение отсутствует. 


  <div class="container">
    <div class="row">

      <?php
          $args = array( 
            'post_type' => 'products',
            'posts_per_page' => 9999,
            'orderby' => 'none'
          );
          $the_query = new WP_Query( $args );
      ?>

      <?php if ( $the_query->have_posts()  ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>   

        <!-- <a href="<?php the_permalink(); ?>"> -->


        <div class="col-lg-4 products-item-outer" style="--product-color: <?php the_field('product_colour'); ?>;">
          <div class="col-12 products-item-inner">
            <div class="logo">
              <?php 
              $image = get_field('logo');
              if( !empty( $image ) ): ?>
                <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
              <?php endif; ?>          
            </div>    

            <div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
            <div class="read-more-link"><a href="<?php the_permalink(); ?>">Read More</a><span class="arrow-right"></span></div>

          </div>
          </div>
          <!-- </a> -->

        <?php endwhile; wp_reset_postdata(); endif; ?>

      </div>
    </div>


    .products-item-inner .arrow-right:after {
      content: "";
      border: solid;
      border-color: var(--product-color, rebeccapurple);
      border-width: 0 2px 2px 0;
      display: inline-block;
      vertical-align: middle;
      padding: 5px;
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      margin-left:-12px;
    }

    .products-item-inner .arrow-right:before {
      width: 30px;
      height: 2px;
      background-color: var(--product-color, rebeccapurple);
      content: "";
      display: inline-block;
      vertical-align: middle;
    }
...