将自定义字段插入自定义帖子类型

Question

我有一个由插件制作的组件，它显示来自自定义帖子类型的文章列表。每篇文章都有与之关联的类 post-id。我无法覆盖子主题中的插件文件以在生成列表的模板内循环，因此我需要在 functions.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');

Answer 1

您可以从每个帖子中获取新颜色到数组，然后使用 json_encode() 将数组传递给 javascript

这是您的代码的修改片段，我不确定它是否会起作用，因为 html 注入到 functions.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>