【加密社】如何创建自己的币圈工具站
需要准备的工作
1.域名
2.服务器
周末的时候主要弄了快讯这方面的代码
我这里用的是星球日报的api，也可以订阅他们的rss，这部分在github上是开源的
https://github.com/ODAILY
我这里用的是WordPress+onenav主题，然后用小工具在主页展示，
具体代码如下，小工具里自定义代码输入短代码[qklnews]
// 定义短代码以展示快讯消息
function qklnews_shortcode() {
// 调用fetch_qklnews_data函数获取快讯消息
$data = fetch_qklnews_data();
if (!$data || !isset($data['newslist']) || empty($data['newslist'])) {
return '<div style="font-family: Arial, sans-serif; color: red;">无法加载快讯，请稍后重试。</div>';
}
// 准备HTML结构
ob_start(); // 开启输出缓冲
?>
<div id="qklnews-container" class="qklnews-container">
<!-- 内联CSS -->
<style>
.qklnews-container {
font-family: Arial, sans-serif;
margin-bottom: 20px;
padding-left: 10px; /* 整体内容向右偏移 */
position: relative;
text-align: center; /* 居中对齐容器内容 */
}
.timeline {
position: absolute;
left: 9px; /* 时间轴向左移动 10px */
top: 20px; /* 时间线起点与第一条数据的圆点对齐 */
width: 2px;
background-color: #ddd;
height: calc(100% - 40px); /* 时间线高度为新闻项总高度减去上下间距 */
}
.timeline-dot {
position: absolute;
left: -5px; /* 圆点向左移动 10px */
top: 10px; /* 每个圆点的位置基于新闻项 */
width: 10px;
height: 10px;
background-color: #999;
border-radius: 50%;
}
.news-list {
list-style-type: none;
padding: 0;
margin-top: 20px; /* 第一条数据与时间轴顶部的距离 */
text-align: left; /* 新闻项内容左对齐 */
}
.news-item {
margin-bottom: 20px;
position: relative;
padding-left: 20px;
margin-right: 20px; /* 每条数据右侧留出距离 */
}
.title {
font-size: 14px; /* 主内容字号 */
color: #333;
text-decoration: none;
display: block;
margin-bottom: 5px;
}
.details {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px; /* 快讯和日期字号 */
color: #999;
}
.subtitle {
background-color: #f5f5f5;
padding: 2px 5px;
border-radius: 3px;
margin-right: 10px;
}
.date {
margin-left: auto;
}
.view-more-btn {
display: inline-block;
margin-top: 20px;
padding: 8px 16px; /* 按钮更小 */
font-size: 14px; /* 字体更小 */
color: #fff;
background-color: #a98622;
text-decoration: none;
border-radius: 5px;
text-align: center;
transition: background-color 0.3s ease;
}
.view-more-btn:hover {
background-color: #005177;
}
</style>
<!-- 时间轴 -->
<div class="timeline"></div>
<ul class="news-list">
<?php
// 限制只显示前 6 条新闻
$limited_news = array_slice($data['newslist'], 0, 6);
foreach ($limited_news as $item): ?>
<li class="news-item">
<!-- 时间轴圆点 -->
<div class="timeline-dot"></div>
<a href="<?php echo esc_url($item['news_url']); ?>"
target="_blank"
class="title"><?php echo esc_html($item['title']); ?></a>
<div class="details">
<span class="subtitle">快讯</span>
<span class="date"><?php
// 显示日期和时间（年-月-日 时:分）
echo esc_html(date('Y年m月d日 H:i', strtotime($item['published_at'])));
?></span>
</div>
</li>
<?php endforeach; ?>
</ul>
<!-- 查看更多按钮 -->
<a href="https://bqbot.cn/7x24%e5%bf%ab%e8%ae%af"
target="_blank"
class="view-more-btn">查看更多</a>
</div>
<?php
return ob_get_clean(); // 返回生成的HTML
}
add_shortcode('qklnews', 'qklnews_shortcode'); // 注册短代码 [qklnews]
// 让文本小工具支持短代码
add_filter('widget_text', 'do_shortcode');这里需要注意的是，快讯中带图片的部分，是cdn服务器上的静态资源，他会限制别的网站直接去访问，比如你如果是直接把接口返回的imgurl嵌入到你的img标签中，他会报403
这里需要使用图片代理
function custom_image_proxy() {
if (isset($_GET['custom_proxy']) && isset($_GET['url'])) {
$image_url = urldecode($_GET['url']); // 解码URL
// 确保只转发到允许的域名
$allowed_domains = ['https://piccdn.0daily.com'];
$parsed_url = parse_url($image_url);
$scheme_and_host = $parsed_url['scheme'] . '://' . $parsed_url['host'];
if (!in_array($scheme_and_host, $allowed_domains)) {
status_header(403);
echo "Forbidden";
exit;
}
// 模拟浏览器请求头
$response = wp_remote_get($image_url, [
'headers' => [
'User-Agent' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36',
'Referer' => 'https://www.odaily.news/', // 设置正确的 Referer
'Accept' => 'image/webp,image/apng,image/*,*/*;q=0.8',
'Accept-Encoding' => 'gzip, deflate, br',
'Accept-Language' => 'en-US,en;q=0.9',
],
'decompress' => true, // 自动解压缩 Gzip 数据
]);
// 检查请求是否成功
if (is_wp_error($response)) {
error_log('WP HTTP Error: ' . $response->get_error_message());
status_header(500);
echo "Internal Server Error";
exit;
}
$status_code = wp_remote_retrieve_response_code($response);
if ($status_code != 200) {
error_log("Response Status Code: $status_code");
status_header($status_code);
echo "Error fetching image";
exit;
}
// 获取并输出图片内容
ob_clean(); // 清除之前的输出缓冲区
flush(); // 刷新系统输出缓冲
// 设置正确的 Content-Type
$content_type = wp_remote_retrieve_header($response, 'content-type');
header("Content-Type: $content_type");
// 输出图片数据
echo wp_remote_retrieve_body($response);
exit;
}
}
add_action('template_redirect', 'custom_image_proxy');具体演示数据可以看到 币圈工具站 | 币圈导航
