带有滑块和动态内容的WordPress页面

Question

我需要在WordPress中制作设备的“目录”，它应该看起来像图片中的那个。我已经创建了一个带有图像和所有项目描述的滑块，该滑块可以正常工作。

现在，当我单击下一个/上一个箭头时，我选择了一些项目，并且我需要使用所选项目的数据在页面上设置文本内容。

我该如何处理？我的物品的描述数据应该存储在哪里？如何使文本内容取决于所选项目？ 我不知道，因为我是WP和php的新手。

任何人都可以解释这些步骤吗？

Answer 1

感谢Eugene Anisiutkin和cabrerahector给了我一些关于这个问题的想法。

对于有兴趣的人，下面是我解决问题的方式。

我用过：

1. Advanced Custom Fields v。5.7.7插件
2. Custom Post Type UI v.6.0版插件
3. slickjs滑块库
4. this video通过WordPress中的模板文件，自定义帖子类型和自定义字段为我提供了很多帮助

1）使用高级自定义字段和自定义帖子类型UI插件，我创建了一个名为device的帖子类型，并添加了一些自定义字段，例如deviceUid，deviceName等。我为每个设备创建了一个帖子，并用数据填充了自定义字段。 下一步：在滑块上显示所有设备。

2）在子主题中，我基于page.php创建了一个文件，并将其命名为page-catalog.php。我将使用该文件作为目录模板。这个模板有一个循环，在这个循环中，我得到所有带有type == 'device'的帖子，然后得到一些自定义字段数据，并在'div'元素中显示此数据。这为我拥有的每个设备的图像和文本提供了一个很好的“ div”。每个“ div”都有一个与deviceUid字段数据相似的ID。 下一步：将div安排到滑块并为我的目录创建WP页面。

3）在WP管理面板->页面中，我创建了一个名为catalog的页面并将其模板设置为page-catalog.php。现在，如果打开“ http //：my-site.com/catalog”，我将看到一些带有每个设备的图像和描述数据的div。 为了使这个div看起来像滑块，我使用了很棒的slickjs lib。要使用它，我首先在functions.php中为slickjs设置了样式ans脚本，然后按照slickjs文档中的说明初始化了滑块。 下一步：将幻灯片更改事件与AJAX请求连接，以显示所选设备的详细信息。

4）更改幻灯片时，我会得到当前幻灯片的ID。使用AJAX，我将此ID发送到服务器，并通过自定义字段数据查找帖子。然后，我从定制后字段中获取所有数据，并将这些数据作为JSON返回。 下一步：在描述块中显示json-data。

5）在我的AJAX请求的success部分中，我只是将数据附加到了描述容器并设置了样式。

仅此而已。现在，每次更换幻灯片时，都会获得所选设备的新数据。

花了我将近两个星期的时间，我不确定这是否是解决问题的正确方法，但这对我有用。