要在WordPress子比主题中从数据库获取已购买的用户和用户购买的资源信息,并在前端滚动展示,可以通过以下步骤实现:
1. 从数据库获取数据
WordPress 提供了
$wpdb
类,用于直接操作数据库。你可以通过自定义代码从数据库中查询用户购买的资源信息。示例代码:
在主题的
functions.php
文件中添加以下代码,用于查询已购买的用户和资源信息:function get_purchased_users_and_resources() {
global $wpdb;
// 假设购买记录存储在自定义表 `wp_purchases` 中
$query = "
SELECT u.user_nicename, u.user_email, p.resource_name, p.purchase_date
FROM {$wpdb->users} u
INNER JOIN wp_purchases p ON u.ID = p.user_id
ORDER BY p.purchase_date DESC
";
$results = $wpdb->get_results($query, ARRAY_A); // 返回关联数组
return $results;
}
2. 在前端滚动展示数据
在前端展示数据时,可以使用自定义HTML和CSS实现滚动效果。
添加HTML代码:
在主题的
header.php
或 footer.php
文件中添加以下HTML代码:<div class="scrolling-banner">
<?php
$purchases = get_purchased_users_and_resources();
foreach ($purchases as $purchase) {
echo '<div class="purchase-item">';
echo '<p>用户:' . $purchase['user_nicename'] . '(' . $purchase['user_email'] . ')</p>';
echo '<p>购买资源:' . $purchase['resource_name'] . '</p>';
echo '<p>购买时间:' . $purchase['purchase_date'] . '</p>';
echo '</div>';
}
?>
</div>
添加CSS样式:
在主题的
style.css
文件中添加以下CSS代码,实现滚动效果:.scrolling-banner {
display: flex;
overflow-x: hidden;
scroll-behavior: smooth;
white-space: nowrap;
padding: 10px;
background: #f8f8f8;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.purchase-item {
display: inline-block;
margin-right: 20px;
padding: 10px;
background: #ffffff;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.purchase-item {
font-size: 12px;
}
}
添加滚动动画:
使用CSS动画实现自动滚动效果:
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.scrolling-banner {
animation: scroll 30s linear infinite;
}
3. 测试和优化
-
测试数据:确保数据库中存在购买记录,并测试滚动效果是否正常。
-
性能优化:如果数据量较大,可以考虑分页显示或限制查询结果的数量。
-
样式调整:根据网站的整体风格调整滚动条的样式。
通过以上步骤,你可以从WordPress数据库中获取用户购买的资源信息,并在前端以滚动的方式展示出来。