【加密社】如何创建自己的币圈工具站

需要准备的工作

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');

具体演示数据可以看到 币圈工具站 | 币圈导航