Вставить пользовательское поле в пользовательский тип сообщения - PullRequest
1 голос
/ 02 мая 2020

У меня есть компонент, созданный плагином, который отображает список статей из пользовательского типа сообщения. С каждой статьей связан класс post-id. Я не могу переопределить файлы плагина в дочерней теме на l oop внутри шаблона, который генерирует список, поэтому мне нужно создать функцию в функциях. php. Мне нужно заменить div внутри статьи новым div, стилизованным под настраиваемое поле (палитру цветов), созданное с помощью расширенного плагина настраиваемого поля, который динамически связан с каждой статьей.

    loop {
      display: flex;
      width: 100%;
    }
    article {
      width: 200px;
      height: 200px;
      background: red;
      margin:20px;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .overlay {
      width:150px;
      height:150px;
    }
    <article class="portfolio-item post-53">
      <div class="overlay" style="background-color:#000"></div>
    </article>
    <article class="portfolio-item post-65">
      <div class="overlay" style="background-color:#000"></div>
    </article>
    <article class="portfolio-item post-70">
      <div class="overlay" style="background-color:#000"></div>
    </article>

   

function insert_custom_div() {

 $args = array(
     'meta_key' 	  => 'new_color',
     'post_type'	  => 'portfolio-item'
   );

$posts = get_posts($args);

   foreach ($posts as $post):
      $color_picker_custom_field = get_field('new_color', $post->ID);

      if ($color_picker_custom_field) {
      ?>
       <script>
           jQuery( document ).ready( function() {
              jQuery('article').append('<div class="overlay post-<?php echo $post->ID; ?>" style="background-color:<?php echo $color_picker_custom_field; ?>"></div>');

       });
       </script>
     <?php
   }
   endforeach;
}

add_action('wp_head','insert_custom_div');

1 Ответ

0 голосов
/ 02 мая 2020

Вы можете получить новый цвет из каждого сообщения в массив, а затем передать массив в javascript с помощью json_encode()

Вот измененный фрагмент вашего кода, я не уверен, что он будет работать, так как html инъекции в функции. php - плохая практика, лучше сделать это в шаблоне. Ну, это просто направление для размышлений:

<?php
$new_div = array();
foreach ($posts as $post):
    $color_picker_custom_field = get_field('new_color', $post->ID);
    $new_div[] = '<div class="overlay" style="background-color:<?php echo $color_picker_custom_field; ?>"></div>';
   endforeach;

?>
<script>
      jQuery( document ).ready( function() {
        var new_divs = <?php echo json_encode($new_div); ?>;
        jQuery( '.overlay' ).each( function(ind, el) {
           jQuery(this).replaceWith(new_divs[ind]');
        });
  });
</script>
...