需要准备的工作
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');具体演示数据可以看到 币圈工具站 | 币圈导航
设计模式)
)
