WordPress首页调用typecho方法!

[复制链接]
梦淡如非(UID:8) 发表于 2024-10-28 15:06:06 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
本帖最后由 梦淡如非 于 2024-10-28 15:07 编辑


前段时间花了那么多的时间折腾了《WordPress首页调用memos方法!》后,怎么又来折腾Wordpress首页调用typecho呢!原因有这样的两点,首先memos的作者对memos的更新真的是太随意了,每次版本的升级,你会想不到他会把什么功能给删掉、或是更想不到把数据库的结构给改了、还有就是随意改变API的接口。也正因为他的随意,一部分人还保持在低版本来使用,另外一部分人就是直接弃用了,所以我想着说不定哪一天也会弃用memos。另外的一个原因就是除了老张博客之外,我还有一个老张随笔,一直保持每日一更新,字数都是在二百字,就像朋友圈一样,最初是用typecho程序,后来改用memos,目前那个typecho上面还放着一千两百多篇随笔。我想与其这样牵强的用着memos,不如退回来用typecho算了。
有了上面的想法后,就想着把我的wordpress和typecho来个“整合”,在wordpress调用typecho的首篇文章。有了上一次的折腾,这次算是轻车熟路了,前前后后的折腾有两个小时。通过这次的折腾,让我对AI又有了新的认识,上次我认为是“豆包最聪明”,结果经过这次的“折腾”发现把相同的问题多次的提问同一个AI,每次他给出的答案也是不一样的。单单就响应速度来说,官方的GPT最为快,所以这次代码就是借助官方GPT来完成的。话不多说,直接上代码吧!
忘了一个重要的事: typecho本身没有提供API接口服务,这里我找到一款插件,Restful,安装后直接启用就行,因为我是直接调用文章的,其他的API接口就被我给关了!
1.把下面的代码插入到主题文件的index.php合适位置。
  1. <?php
  2. $data = fetch_typecho_data();
  3. if ($data):
  4. ?>
  5. <div class="latest-update" style="background-color: #f8f8f8;">
  6. <div class="latest-update-header">
  7. <h2>最新动态</h2>
  8. <span class="latest-update-time"><?php echo esc_html($data['time_content']); ?></span>
  9. </div>
  10. <div class="latest-update-divider"></div>
  11. <div class="latest-update-content"><?php echo esc_html($data['content']); ?></div>
  12. <div class="latest-update-images">
  13. <?php foreach ($data['image_content'] as $img_url): ?>
  14. <a href="<?php echo esc_url($img_url); ?>" data-lightbox="latest-update-gallery">
  15. <img src="<?php echo esc_url($img_url); ?>" alt="Image">
  16. </a>
  17. <?php endforeach; ?>
  18. </div>
  19. <div class="latest-update-footer">
  20. <span class="latest-update-tag"><?php echo esc_html($data['tag_content']); ?></span>
  21. <a class="latest-update-link" href="<?php echo esc_url($data['link_content']); ?>" target="_blank">查看全文</a>
  22. </div>
  23. </div>
  24. <?php endif; ?>
  25. <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox-plus-jquery.min.js"></script>
  26. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css">
复制代码

2.把CSS样式代码放置到主题CSS定义设置里,当然也可以直接放到style.css中。



  1. /* 首页调用typecho样式 */
  2. .latest-update {
  3.     width: calc(100% - 40px); /* 设置宽度为100%减去40px,确保有左右边距 */
  4.     background-color: #f8f8f8 ; /* 强制设置背景颜色为浅灰色 */
  5.     border: 1px solid #ddd; /* 添加1像素的灰色边框 */
  6.     border-radius: 10px; /* 圆角边框,半径为10px */
  7.     padding: 20px 20px 10px 20px; /* 内边距,上下10px,左右20px */
  8.     margin: 20px 0; /* 外边距,上下20px,左右0 */
  9.     text-align: left; /* 文本左对齐 */
  10.     margin-top: -10px; /* 减少与顶部的距离为0 */
  11.     margin-bottom: 30px; /* 增加与文章列表的距离为40px */
  12.     margin-right: 20px; /* 设置右边距为20px */
  13. }

  14. .latest-update-header {
  15.     display: flex; /* 使用弹性盒模型布局 */
  16.     justify-content: space-between; /* 头部元素左右分散排列 */
  17.     align-items: center; /* 垂直居中对齐 */
  18.     margin-bottom: 10px; /* 头部与下方内容的外边距为10px */
  19. }

  20. .latest-update h2 {
  21.     font-size: 15px; /* 标题字体大小为15px */
  22.     margin: 0; /* 去除默认外边距 */
  23.     padding-left: 0px; /* 左边填充为0 */
  24. }

  25. .latest-update-time {
  26.     font-size: 14px; /* 时间字体大小为14px */
  27.     color: #666; /* 时间文本颜色为中灰色 */
  28.     margin-right: 0px; /* 右边距为0 */
  29. }

  30. .latest-update-divider {
  31.     border-bottom: 1px solid #333; /* 添加底部边框,颜色为深灰色 */
  32.     margin: 10px 0; /* 上下外边距为10px */
  33. }

  34. .latest-update-content {
  35.     text-align: left; /* 内容文本左对齐 */
  36.     line-height: 1.5; /* 行高设置为1.5倍 */
  37.     margin: 10px 0; /* 上下外边距为10px */
  38. }

  39. .latest-update-images {
  40.     text-align: left; /* 图片区域文本左对齐 */
  41.     margin: 10px 0; /* 上下外边距为10px */
  42. }

  43. .latest-update-images img {
  44.     width: 100px; /* 图片宽度为80px */
  45.     height: 75px; /* 图片高度为80px */
  46.     object-fit: cover; /* 图片覆盖方式,保持比例并裁剪 */
  47.     border-radius: 8px; /* 图片圆角,半径为8px */
  48.     box-shadow: 0 4px 10px rgba(0, 0, 0, 1); /* 添加阴影效果 */
  49.     margin: 3px; /* 图片外边距为5px */
  50.     transition: transform 0.3s, opacity 0.3s; /* 添加平滑过渡效果 */
  51. }

  52. .latest-update-images img:hover {
  53.     transform: scale(1.1); /* 鼠标悬停时放大10% */
  54.     opacity: 0.9; /* 鼠标悬停时透明度降低到0.9 */
  55. }

  56. .latest-update-footer {
  57.     display: flex; /* 使用弹性盒模型布局 */
  58.     justify-content: space-between; /* 底部元素左右分散排列 */
  59.     align-items: center; /* 垂直居中对齐 */
  60.     margin-top: 10px; /* 底部与上方内容的外边距为10px */
  61.     padding-top: 10px; /* 上内边距为10px */
  62.     border-top: 1px solid #ddd; /* 添加顶部边框,颜色为浅灰色 */
  63. }

  64. .latest-update-tag {
  65.     background-color: #e0e0e0; /* 标签背景颜色为淡灰色 */
  66.     border-radius: 5px; /* 标签圆角,半径为5px */
  67.     padding: 5px 10px; /* 内边距,上下5px,左右10px */
  68.     font-size: 14px; /* 标签字体大小为14px */
  69. }

  70. .latest-update-link {
  71.     text-decoration: none; /* 去除链接的下划线 */
  72.     color: #0073aa; /* 设置链接颜色为蓝色 */
  73.     font-size: 14px; /* 链接字体大小为14px */
  74. }
  75. /* 首面调用typecho结束 */
复制代码


3.把下面代码插入到主题functions.php文件中。


  1. //-------首页调用typehco代码-----开始
  2. function fetch_typecho_data() {
  3.     $api_url = "https://suibi.zhangbo.net/api/posts?pageSize=1";
  4.     $response = wp_remote_get($api_url);
  5.     if (is_wp_error($response)) {
  6.         return;
  7.     }
  8.     $body = wp_remote_retrieve_body($response);
  9.     $data = json_decode($body, true);

  10.     if ($data['status'] !== 'success' || empty($data['data']['dataSet'])) {
  11.         return;
  12.     }

  13.     $post = $data['data']['dataSet'][0];
  14.    
  15.     // 1. 链接内容
  16.     $link_content = "https://suibi.zhangbo.net/archives/" . $post['cid'] . ".html";
  17.    
  18.     // 2. 标签内容
  19.     $tag_content = "#" . $post['categories'][0]['name'];
  20.    
  21.     // 3. 时间内容
  22.     $created_time = (int)$post['created'];
  23.     $current_time = time();
  24.     $time_diff = $current_time - $created_time;
  25.    
  26.     if ($time_diff < 3600) {
  27.         $time_content = floor($time_diff / 60) . "分钟前";
  28.     } elseif ($time_diff < 86400) {
  29.         $time_content = floor($time_diff / 3600) . "小时前";
  30.     } elseif ($time_diff < 2592000) {
  31.         $time_content = floor($time_diff / 86400) . "天前";
  32.     } else {
  33.         $time_content = date("Y年m月d日", $created_time);
  34.     }
  35.    
  36.     // 4. 摘要内容
  37.     $digest = strip_tags($post['digest'], "");
  38.     $content = mb_strlen($digest, 'UTF-8') <= 200 ? $digest : mb_substr($digest, 0, 200, 'UTF-8') . "......";
  39.    
  40.     // 5. 图片内容
  41.     preg_match_all('/<img.*?src=["\'](.*?)["\'].*?>/i', $post['digest'], $matches);
  42.     $image_content = $matches[1];

  43.     return [
  44.         'link_content' => $link_content,
  45.         'tag_content' => $tag_content,
  46.         'time_content' => $time_content,
  47.         'content' => $content,
  48.         'image_content' => $image_content
  49.     ];
  50. }
复制代码

全部回复0 显示全部楼层
暂无回复,精彩从你开始!

快速回帖

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于楼主

超级版主
  • 主题

    618
  • 回答

    200
  • 积分

    1852
虚位以待,此位置招租

商务推广

    网盘拉新-短剧推广 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租