利用 WordPress + GoToSocial RSS 实现“说说”功能教程（附带样式+加载更多）

段先森

在本文中，我们将通过 GoToSocial 的 RSS 输出，在 WordPress 博客中创建一个类似朋友圈的“说说”页面，支持：

• 图文显示
• 图片点击放大（Lightbox）
• 分页“加载更多”功能
  

不需要代码能力，只需复制粘贴修改几个地方即可完成。

一、准备工作

• 一个已安装的 WordPress 博客
• 你自己的 GoToSocial 上的账号，例如 https://duanbo.cc/@duanxiansen
• 该账号的 RSS 订阅地址：
  

一般格式是：https://你的gts实例/@你的用户名/feed.rss

二、创建页面模板文件 page-gotosocial.php

1. <?php
   
2. /* Template Name: GotoSocial Timeline */
   
3. get_header();
   
4. 
   
5. echo '
   
6. <link href="https://cdn.jsdelivr.net/npm/lightbox2@2/dist/css/lightbox.min.css" rel="stylesheet">
   
7. <script src="https://cdn.jsdelivr.net/npm/lightbox2@2/dist/js/lightbox.min.js"></script>
   
8. <style>
   
9. #gts-container {
   
10. max-width: 640px;
    
11. margin: 30px auto;
    
12. padding: 0 16px;
    
13. }
    
14. /* 样式略，可根据需要自定义 */
    
15. .gts-post {
    
16. display: flex;
    
17. align-items: flex-start;
    
18. padding: 16px 0;
    
19. border-bottom: 1px solid rgba(0,0,0,0.05);
    
20. }
    
21. .gts-avatar {
    
22. width: 48px; height: 48px;
    
23. border-radius: 50%;
    
24. overflow: hidden;
    
25. margin-right: 12px;
    
26. }
    
27. .gts-avatar img {
    
28. width: 100%; height: 100%; object-fit: cover;
    
29. }
    
30. .gts-body { flex: 1; font-size: 15px; line-height: 1.6; }
    
31. .gts-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
    
32. .gts-content { margin-bottom: 8px; }
    
33. .gts-images {
    
34. display: grid;
    
35. grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    
36. gap: 6px;
    
37. margin-bottom: 8px;
    
38. }
    
39. .gts-images a img {
    
40. width: 100%; height: 90px;
    
41. object-fit: cover;
    
42. border-radius: 6px;
    
43. transition: transform 0.2s ease;
    
44. }
    
45. .gts-images a:hover img {
    
46. transform: scale(1.03);
    
47. }
    
48. .gts-date { font-size: 12px; color: #999; }
    
49. #load-more {
    
50. display: block;
    
51. margin: 24px auto 40px;
    
52. padding: 8px 16px;
    
53. border: 1px solid #ccc;
    
54. border-radius: 8px;
    
55. background-color: transparent;
    
56. cursor: pointer;
    
57. }
    
58. </style>
    
59. ';
    
60. 
    
61. class GoToSocialRss {
    
62. private $feed_url = 'https://duanbo.cc/@duanxiansen/feed.rss'; // ← 修改为你自己的RSS地址
    
63. 
    
64. public function get_timeline($page = 1, $per_page = 5) {
    
65. $rss = fetch_feed($this->feed_url);
    
66. if (is_wp_error($rss)) {
    
67. return ['success' => false, 'error' => '无法加载 RSS。'];
    
68. }
    
69. $items = $rss->get_items();
    
70. $offset = ($page - 1) * $per_page;
    
71. $paged_items = array_slice($items, $offset, $per_page);
    
72. $has_more = ($offset + $per_page) < count($items);
    
73. return ['success' => true, 'data' => ['items' => $paged_items, 'has_more' => $has_more]];
    
74. }
    
75. 
    
76. public function render_item($item) {
    
77. $content = $item->get_content();
    
78. $date = $item->get_date('Y-m-d H:i');
    
79. $images = '';
    
80. foreach ($item->get_enclosures() as $enclosure) {
    
81. $url = esc_url($enclosure->get_link());
    
82. $type = $enclosure->get_type();
    
83. if (strpos($type, 'image/') === 0) {
    
84. $images .= "<a href='{$url}' data-lightbox='gts'><img src='{$url}' alt='image' /></a>";
    
85. }
    
86. }
    
87. $avatar_url = 'https://duanxiansen.com/avatar.jpg'; // ← 修改为你自己的头像地址
    
88. $nickname = '段先森'; // ← 修改为你的昵称
    
89. return "<div class='gts-post'>
    
90. <div class='gts-avatar'><img src='{$avatar_url}' alt='avatar'></div>
    
91. <div class='gts-body'>
    
92. <div class='gts-name'>{$nickname}</div>
    
93. <div class='gts-content'>{$content}</div>
    
94. <div class='gts-images'>{$images}</div>
    
95. <div class='gts-date'>{$date}</div>
    
96. </div>
    
97. </div>";
    
98. }
    
99. }
    
100. 
     
101. $page = 1;
     
102. $gts = new GoToSocialRss();
     
103. $result = $gts->get_timeline($page);
     
104. ?>
     
105. 
     
106. <div id="gts-container">
     
107. <?php
     
108. if ($result['success']) {
     
109. foreach ($result['data']['items'] as $item) {
     
110. echo $gts->render_item($item);
     
111. }
     
112. if ($result['data']['has_more']) {
     
113. echo '<button id="load-more" data-page="1">加载更多</button>';
     
114. }
     
115. } else {
     
116. echo '<div class="error">加载失败：' . esc_html($result['error']) . '</div>';
     
117. }
     
118. ?>
     
119. </div>
     
120. 
     
121. <script>
     
122. document.addEventListener('DOMContentLoaded', function () {
     
123. const btn = document.getElementById('load-more');
     
124. if (btn) {
     
125. btn.addEventListener('click', function () {
     
126. const page = parseInt(this.dataset.page) + 1;
     
127. const formData = new FormData();
     
128. formData.append('action', 'load_more_gts');
     
129. formData.append('page', page);
     
130. 
     
131. fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
     
132. method: 'POST',
     
133. credentials: 'same-origin',
     
134. body: formData
     
135. }).then(res => res.text()).then(html => {
     
136. const wrapper = document.createElement('div');
     
137. wrapper.innerHTML = html;
     
138. this.insertAdjacentElement('beforebegin', wrapper);
     
139. this.dataset.page = page;
     
140. if (html.includes('data-end="1"')) {
     
141. this.remove();
     
142. }
     
143. }).catch(err => {
     
144. console.error('AJAX 加载失败：', err);
     
145. });
     
146. });
     
147. }
     
148. });
     
149. </script>
     
150. 
     
151. <?php get_footer(); ?>
     

复制代码

三、在后台新建页面并应用模板

• 进入 WordPress 后台 → 页面 → 新建页面
• 命名为：说说 或 Timeline
• 页面右侧模板选择：GotoSocial Timeline
• 发布
  

四、添加 AJAX 处理函数
将以下内容添加到你主题的 functions.php 文件末尾：

1. add_action('wp_ajax_load_more_gts', 'load_more_gts_ajax');
   
2. add_action('wp_ajax_nopriv_load_more_gts', 'load_more_gts_ajax');
   
3. 
   
4. function load_more_gts_ajax() {
   
5. require_once ABSPATH . WPINC . '/feed.php';
   
6. 
   
7. class GoToSocialRss {
   
8. private $feed_url = 'https://duanbo.cc/@duanxiansen/feed.rss'; // 修改为你的
   
9. 
   
10. public function get_timeline($page = 1, $per_page = 5) {
    
11. $rss = fetch_feed($this->feed_url);
    
12. if (is_wp_error($rss)) {
    
13. return ['success' => false, 'error' => '无法加载 RSS。'];
    
14. }
    
15. $items = $rss->get_items();
    
16. $offset = ($page - 1) * $per_page;
    
17. $paged_items = array_slice($items, $offset, $per_page);
    
18. $has_more = ($offset + $per_page) < count($items);
    
19. return ['success' => true, 'data' => ['items' => $paged_items, 'has_more' => $has_more]];
    
20. }
    
21. 
    
22. public function render_item($item) {
    
23. $content = $item->get_content();
    
24. $date = $item->get_date('Y-m-d H:i');
    
25. $images = '';
    
26. foreach ($item->get_enclosures() as $enclosure) {
    
27. $url = esc_url($enclosure->get_link());
    
28. $type = $enclosure->get_type();
    
29. if (strpos($type, 'image/') === 0) {
    
30. $images .= "<a href='{$url}' data-lightbox='gts'><img src='{$url}' alt='image' /></a>";
    
31. }
    
32. }
    
33. $avatar_url = 'https://duanxiansen.com/avatar.jpg'; // ← 修改为你头像
    
34. $nickname = '段先森'; // ← 修改为你昵称
    
35. return "<div class='gts-post'>
    
36. <div class='gts-avatar'><img src='{$avatar_url}' alt='avatar'></div>
    
37. <div class='gts-body'>
    
38. <div class='gts-name'>{$nickname}</div>
    
39. <div class='gts-content'>{$content}</div>
    
40. <div class='gts-images'>{$images}</div>
    
41. <div class='gts-date'>{$date}</div>
    
42. </div>
    
43. </div>";
    
44. }
    
45. }
    
46. 
    
47. $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
    
48. $gts = new GoToSocialRss();
    
49. $result = $gts->get_timeline($page);
    
50. 
    
51. if ($result['success']) {
    
52. foreach ($result['data']['items'] as $item) {
    
53. echo $gts->render_item($item);
    
54. }
    
55. if (!$result['data']['has_more']) {
    
56. echo '<div data-end="1" style="display:none;"></div>';
    
57. }
    
58. } else {
    
59. echo '<div class="error">加载失败：' . esc_html($result['error']) . '</div>';
    
60. }
    
61. 
    
62. wp_die(); // 重要！
    
63. }
    

复制代码

六、其他说明

• 如果你使用了缓存插件，请清除页面缓存以看到最新效果。
• 建议在 GoToSocial 中开启 feed.rss 支持或确认地址是否正确。
• 本方式不依赖 API Token，更适合静态展示。
  

七、欢迎交流
你可以在评论区留言，也欢迎 fork 改造这个模板样式。如果你希望集成评论、Emoji、Markdown 等高级功能，可以考虑使用 GoToSocial 的 API + Token，但实现更复杂。