需要準備的工作

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

具體演示數據可以看到?幣圈工具站 | 幣圈導航

?