WordPress首页调用memos方法！

老张

1 月 ago

文章目录「隐藏」

最新动态

老张一直想把wordpress和memos能整合在一起，前几天在段先生的博客上看到了教程，便死皮赖脸的问他方法，原来是AI搞定的。刚开始的时候是直接拿段先生的用，但是里面有一些达不到自己想要的效果。比如段先生是从memos的RSS文件里取数但，如果memo里有多篇图片的话，RSS只能输出一张链接地址，其他找不到。通过找木木大佬，用了他提供的《Memos API 非官方不完全说明》便可以解决。另外在CSS布局上也不是自己想要的效果，便想着自己也来让AI搞吧！

让AI帮你写代码，你必须要学会怎么样能更好的和AI对话，必须要有一点点的代码基础，才能把把问题问在点子上。我在把memos的API输出的数据模式先告诉AI，然后再提出自己的要求，要求如下：

我想在wordpress获取memos的api发布第一条动态内容，API的链接地址是https://zhangbo.net/api/v1/memo?creatorId=1&rowStatus=NORMAL&limit=1 ,内容格式如下：
按以下要求进行操作：
1.读取第一个"id"后面的数据，并形成“https://zhangbo.net/m/+“id后面的数据”” 做为链接，赋值给变量$link_content
2.读取"content"后面的数据，读取以#号开始、空格结束的内容，并在前面加#号后赋值给变量$tag_content。
3.读取"createdTs"后面的数值，转化为时间后与当前时间计算时间间隔。时间间隔为1小时内的，以时间间隔+“分钟前”赋值给$time_content;时间间隔为24小时内的，以时间间隔+“小时前”赋值给$time_content;时间间隔为30天内的，以时间间隔+“天之前”赋值给$time_content;时间间隔超过30天的，直接以“年月日”形式赋值给$time_content。
4.读取"content"后面的数据，排除“![]()”图片形式、排除#、#及空格前的内容后，赋值给$content。
5.读取"content"后面的数据，如果有“![]()”图片形式，将（）内的图片链接赋值给$image_content;如果"externalLink": 后面有数据，赋值给$image_content；如果"filename"后面有数据，将以“https://zhangbo.net/o/r/+filename上第四行ID后的数值+"filename"的数据”赋值给$image_content。如果以上情况都存在，那将以数值组形式赋值。
以上生成的代码，将保存在wordpress的主题文件functions.php中以便调用。
按以下要求生成CSS代码
1.对于在首页展示的要求，在首页文章列表上方，与首页文章空两行
2.显示框宽度100%、背景灰色、四角椭圆。
3.第一个DIV展示框以"h2”格式展示“最新动态”四个字、靠左对齐、左边距空20px；务必同一行展示$time_content值，右居中对齐，右边距空20PX
4.第二DIV插入细实线、深灰色
5.第三DIV展示$content值
5.第四DIV展示$image_content值的缩略图，缩略图四角椭圆并有阴影，如果多图从左往右排列。并按确保引入 Lightbox.js，也写入到本代码中，达到点击放大效果
6.第五DIV靠左对齐展示$tag_content值，背景灰色并四角椭圆，靠右展示“点击评价”点击链接到$link_content。
再生成输出代码以便插入在首页文件index.php，以便在首页显示。/

我分别测试了官方GPT、三方GPT和豆包，结果是官方GPT直接来句“问题太复杂，请分类进行提问”，三方GPT给出的代码效果完全不对，而豆包给出的代码基本上达到要求。当然，还是由于自己的表述，导致代码在图片显示这块有些问题。今天中午利用几分钟时间，进行了修改，对获取图片链接地址重新让AI写，我是这样提问的：

我现在的要求是其他代码不需修改，只对获取图片链接重新按以下要求来修改
1.读取"content"后面的数据，如果有“![]()”图片形式，将（）内的图片链接赋值给$image_content;
2.获取  "resourceList": []的中括号里数据，这是图片组，每组以{}进行区分，查询每个{}内的"externalLink"，如果"externalLink": 后面有数据，赋值给$image_content；如果"externalLink"无数据，则以“https://zhangbo.net/o/r/+该图片id+"filename"的数据”赋值给$image_content。
如果以上情况都存在，那将以数值组形式赋值。

经过这样的修改，图片才得要正确显示。后来又陆陆续续的修改了CSS样式，最终达到目前的效果。

现在把相关代码贴给大家吧，需要的自取，不合自己要求的，也可以让AI帮你来修改。

1.把下面的代码插入到主题文件的index.php合适位置。

 <?php
$memoOutput = processMemoData();
if ($memoOutput) {
echo $memoOutput;
}
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox-plus-jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css">/* Your code... */

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


/* 首页调用memos效果---开始 */
/* 缩小与顶部距离，增加与首页文章列表距离 */
.memo-display {
    margin-top: 0px; /* 减少与顶部的距离 */
    margin-bottom: 40px; /* 增加与文章列表的距离 */
    margin-right: 40px; /* 设置右边距为20px */
    width: calc(100% - 40px); /* 计算宽度以适应右边距 */
    background-color: #f2f2f2;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #ccc; /* 添加细线边框，颜色为浅灰色 */
}


/* 第一个 DIV：展示“最新动态”和时间 */
.memo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.memo-header h2 {
    margin-left: 0px;
}

.memo-header span {
    margin-right: 0px;
}

/* 第二 DIV：插入细实线、深灰色 */
.memo-divider {
    border-top: 1px solid #999;
    margin: 10px 0;
}

/* 第三 DIV：展示内容 */
.memo-content {
    margin-bottom: 10px;
    line-height: 1.5; /* 或者可以使用具体的像素值，如 1.5em 或 24px */
}
/* 第四 DIV：展示缩略图 */
.memo-images {
    display: flex;
    flex-wrap: wrap;
}

.memo-images img {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin-right: 10px;
    cursor: pointer;
    transition: transform 0.3s ease; /* 添加过渡效果 */
}

.memo-images img:hover {
    transform: scale(1.1); /* 鼠标悬浮时放大 */
}

/* 第五 DIV：展示标签和链接 */
.memo-footer {
    display: flex;
    align-items: center;
    margin-top: 10px; /* 设置与上面容器的距离为 30px */
}

.memo-footer div:first-child {
    background-color: #9999;
    border-radius: 6px;
    padding: 5px 10px;
    margin-right: 10px;
}

.memo-footer a {
    text-decoration: none;
    margin-left: auto; /* 靠右对齐 */
    margin-right: 0px; /* 右边距 20px */
}
/* 首页调用memos效果---结束 */

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

/* Your code... */
//-------首页调用memoe代码-----开始
function getTimeContent($createdTs) {
    $current_time = time();
    $time_diff = $current_time - $createdTs;
    static $cachedTimeContent = null;
    static $lastCreatedTs = null;
    if ($lastCreatedTs === $createdTs) {
        return $cachedTimeContent;
    }
    if ($time_diff < 60 * 60) {
        $time_content = floor($time_diff / 60). '分钟前';
    } elseif ($time_diff < 24 * 60 * 60) {
        $time_content = floor($time_diff / (60 * 60)). '小时前';
    } elseif ($time_diff < 30 * 24 * 60 * 60) {
        $time_content = floor($time_diff / (24 * 60 * 60)). '天之前';
    } else {
        $date = date('Y-m-d', $createdTs);
        $time_content = $date;
    }
    $cachedTimeContent = $time_content;
    $lastCreatedTs = $createdTs;
    return $time_content;
}

function processMemoData() {
    $api_url = 'https://zhangbo.net/api/v1/memo?creatorId=1&rowStatus=NORMAL&limit=1';
    $cached_data = get_transient('memo_data');
    if ($cached_data === false) {
        $response = wp_remote_get($api_url);
        if (!is_wp_error($response)) {
            $body = wp_remote_retrieve_body($response);
            $data = json_decode($body, true);
            set_transient('memo_data', $data, 60 * 5); // 缓存 5 分钟
        } else {
            return;
        }
    } else {
        $data = $cached_data;
    }
    if (empty($data)) {
        return;
    }
    $memo = $data[0];
    $id = $memo['id'];
    $link_content = 'https://zhangbo.net/m/'. $id;
    $content = $memo['content'];
    preg_match('/#([^ ]*)/', $content, $matches);
    $tag_content = isset($matches[1])? '#'. $matches[1] : '';
    $createdTs = $memo['createdTs'];

    // 处理时间差
    $time_content = getTimeContent($createdTs);

    // 检查内容中的图片链接
    preg_match_all('/!\[.*?\]\((.*?)\)/', $content, $image_matches);
    $image_content = [];
    $has_external_link = false; 

    // 检查内容中的图片链接并添加到 $image_content
    if (!empty($image_matches[1])) {
        $image_content = array_merge($image_content, $image_matches[1]);
    }

    // 检查 resourceList 中的 externalLink
    if (!empty($memo['resourceList'])) {
        foreach ($memo['resourceList'] as $resource) {
            if (!empty($resource['externalLink']) && filter_var($resource['externalLink'], FILTER_VALIDATE_URL) && preg_match('/\.(jpg|jpeg|png|gif|bmp|webp)$/i', $resource['externalLink'])) {
                $image_content[] = $resource['externalLink'];
                $has_external_link = true; 
            } elseif (!empty($resource['filename'])) {
                $resource_id = $resource['id'];
                $image_content[] = 'https://zhangbo.net/o/r/'. $resource_id. '/'. $resource['filename'];
            }
        }
    }

    // 判断内容长度并进行处理
    if (mb_strlen($content, 'UTF-8') > 100) {
        $substr_content = mb_substr($content, 0, 100, 'UTF-8');
        $last_char = mb_substr($substr_content, -1, 1, 'UTF-8');
        $last_char_ascii = ord($last_char);
        while ($last_char_ascii < 32 || $last_char_ascii > 126) {
            $substr_content = mb_substr($substr_content, 0, -1, 'UTF-8');
            $last_char = mb_substr($substr_content, -1, 1, 'UTF-8');
            $last_char_ascii = ord($last_char);
        }
        $content = $substr_content. '......';
        $link_text = '查看原文';
    } else {
        $link_text = '点击评价';
    }

    $content_without_tags_and_images = preg_replace('/#.*? /', '', $content);
    $content_without_tags_and_images = preg_replace('/!\[.*?\]\(.*?\)/', '', $content_without_tags_and_images);
    $content = $content_without_tags_and_images;

    // 构建输出内容
    $output = '';
    $header = '最新动态
'. $time_content. '';
    $divider = '';
    $contentDiv = ''. $content. '';
    $imagesDiv = '';
    if (!empty($image_content)) {
        $imagesDiv = '';
        foreach ($image_content as $image_link) {
            $imagesDiv.= '';
        }
        $imagesDiv.= '';
    }
    $footer = ''. $tag_content. '
'. $link_text. '';
    $output.= $header. $divider. $contentDiv. $imagesDiv. $footer;
    $output.= '';

    return $output;
}

OK，结束！折腾十几个小时，就是出了这篇教程！！

本文首发于：WordPress首页调用memos方法！-老张博客