您可以将它们作为内联输出CSS custom properties 而不是左/上，然后使用它们在CSS或Javascript中设置位置。

PHP：

<a class="project" href="<?php the_permalink(); ?>" style="—-x-position: <?php the_field(\'x\'); ?>; —-y-position: <?php the_field(\'y\'); ?>;\'">
    <p><?php the_field("title"); ?></p>
</a>

CSS：

.project {
    top: var(—-x-position);
    left: var(—-y-position);

    /* or CSS grid: */
    grid-row-start: var(—-x-position);
    grid-column-start: var(—-y-position);
}

如果您需要，也可以在JS中访问它们：

var x_position = element.style.getPropertyValue("--x- position");

这对于响应性设计将更易于管理，因为您不必使用!important, 但输入这种特定的x/y值通常是个坏主意，最好不要将演示文稿与数据直接混合在一起。

您可以使用wp_localize_script() 函数将值传递给js。例如

add_action( \'wp_enqueue_scripts\', \'my_custom_scripts\' );

public function my_custom_scripts() {
    wp_enqueue_script( \'custom-script\', get_stylesheet_directory_uri() . \'/js/custom_script.js\', [\'jquery\'] );
    wp_localize_script( \'custom-script\', \'myScript\', [
        \'var_a\' => \'value_a\',
        \'var_b\' => \'another value\',
    ] );
}

在自定义脚本中。js您可以得到如下值

console.log(myScript.var_a) // will return `value_a`
console.log(myScript.var_b) // will return `another value`