高级自定义字段 wordpress 自定义 class

Question

我在 ACF 中有一个自定义字段，它是一个按钮，我需要根据它们所在的页面将其更改为不同的颜色，例如

第 1 页 - 按钮需要为蓝色
第 2 页 - 按钮需要为红色

但他们都使用相同的 ACF 按钮。

有没有办法做到这一点，或者我是否需要为每个页面创建单独的页面？

Answer 1

Wordpress 将独特的 classes 添加到每个 page/post 的 body 元素中 - 这可以帮助您实现所需。

首先检查页面的正文元素 - 第 1 页可能有 class page-1，第 2 页可能有 class page-2.

然后您可以使用 CSS 规则来定位您的按钮：

/* Target Page 1 Button */
.page-1 .btn {
  background-color: red;
}
/* Target Page 2 Button */
.page-2 .btn {
  background-color: blue;
}

或者，您可以使用 WordPress is_page() 函数向页面确定的按钮添加唯一 class：

<?php
// e.g. in functions.php
function extraButtonClass() {
  // Target by page slug or ID
  if(is_page('page-1')) {
    return ' red';
  } elseif(is_page('page-2')) {
    return ' blue';
  } else {
    return null;
  }
}

// In template:
<button class="btn<?php echo extraButtonClass(); ?>">My Button</button>

高级自定义字段 wordpress 自定义 class

advanced custom fields wordpress custom class

php

wordpress

advanced-custom-fields