如何使用WordPress Customizer API将图像插入主页上的预定义位置


How to use WordPress Customizer API to insert image into pre-defined spots on homepage?

虽然我以前开发过自定义WP主题,但这是我第一次开发一个使客户能够通过WP定制器自定义某些元素的主题。

我已经知道如何启用上传徽标的功能,但我需要另一种我不确定如何实现的功能。

该网站的设计需要一个图像网格 - 2 行,每行 3 张图像,高度和宽度都相同。客户非常不精通技术,而不是在编辑器中对其进行硬编码并希望他们可以在不弄乱代码的情况下更新它,我认为在定制器面板中有 6 个上传槽会更容易,每个图像一个。这样,客户端可以轻松更新,并且不会有破坏代码的风险。

不幸的是,我不知道该怎么做。有人可以指出我执行此操作的教程或代码示例吗?即使这个例子是针对单个图像的,我认为我也可以根据我的需求推断它。

提前感谢!

最好

辛西娅

我建议使用高级自定义字段。在将自定义字段添加到编辑器时,它非常宝贵,并且部署起来非常快速和容易。

实现

实施后,以下说明应该会有所帮助:

  1. 从管理员导航中选择"高级自定义字段"
  2. 选择"新增"
  3. 为规则组命名
  4. 选择"添加字段"
  5. 为新字段指定"字段标签",例如"图像一"
  6. 在"字段类型"中选择"图像"
  7. 在"返回值"中选择"图像网址"
  8. 规则中,选择"页面"等于"{{必填页面}}
  9. 在"样式"中选择"标准(WP元框)"
  10. 重复步骤 4-9 以添加更多图像框
  11. 选择"发布"
  12. 编辑步骤 8 中指定的页面
  13. 将图像上传到新的上传字段
  14. 实现以下 PHP 代码段以在页面中显示图像

PHP 代码段

如果您将上面创建的图像字段命名为"图像-1"、"图像-2"、"图像-3"等。您可以使用以下循环在前端引入新字段。

<?php if (have_posts()): while (have_posts()) : the_post();
for ($x = 0; $x <= 6; $x++) {
    echo '<img src="'.get_field('image-'.$x).'" alt="">';
} 
endwhile; else: endif; ?>

我没有测试上面的代码,所以希望它是正确的=P

引用

高级自定义字段 - 用于添加自定义CMS属性的WordPress插件。

我建议不要为此使用定制器,因为它没有计划用于此类用途,并且定制器中的所有 css 和信息都加载在所有页面的标题中。

我为客户这样做的方法是设置特定的自定义帖子类型,在元框中使用潜在的自定义字段(通常是链接的文本,链接应发送的URL,可能是在主页上显示的订单),并使用图像的普通缩略图,文本的正常标题和正常的"内容"。

无需高级插件:)